NMDD FINAL: Using P5 to Make a Game

We’ve been learning P5 in class so I tried to make a simple game using a few of the P5 functions we’ve learned in class plus the ones available to learn online. Here’s the link: https://editor.p5js.org/elin7/sketches/E6UySb5jI

Basically, it’s a game where you click on the moving circle to earn a point added to your score. For every 10 points you add to your score, you gain a level (you start out on Level 1). I made this game so that it has about 11 levels. As you surpass each level, you will notice the circles start to get smaller and smaller and therefore harder to press and earn points. While writing the P5 code for this, I started to understand more about how the different variables I created work and how the function setup code and function draw codes I wrote would interact with each other after a series of trial and error with getting this game to function.

P5.js Sketches

For the static sketch, I changed the background color and tried to make a static triangle shape and a static circle shape and one triangle that moves as the mouse moves.

https://editor.p5js.org/elin7/sketches/J93QwKwUh

For the moving sketch, I used the ambient material, rotate, and sphere codes. This shows a moving cube with a static sphere inside of it. I also changed the background color.

https://editor.p5js.org/elin7/sketches/-RY1XRA1H

Midterm: Wireframes and Websites

For the midterm, I was tasked with creating a website for an artist that I like so I decided to go with Stray Kids.

Here are the wireframes of this site with annotations and without annotations. As inspiration or a precedent, I looked at the design of BTS’s website, Ed Sheeran’s website, and Maroon 5’s website to inform my design. I chose BTS as they are one of the biggest Korean pop star acts right now so looking at what their website looks like and how the pages “flow” helped me in designing Stray Kids’ website. Additionally, I looked at Stray Kids current website too to see what I could keep in the design and what to improve upon. I want to keep the website very simple because a majority of the artists’ content is delivered through social media rather than websites so I just decided to focus on creating pages that I felt were missing and needed to be added. For example, I added a “Tour” page because Stray Kids currently have a world tour going on but on their current website, that’s not explicitly being called out so I addd a navigation page for that. I also added a section called “News” where news mentioning Stray Kids can be posted as the current website does not have that very clear as well. I modeled the look and structure of the website off of Ed Sheeran, BTS, and Maroon 5’s. For example, I saw that their “Tour” pages looked relatively similar so I made the Stray Kids Tour page look as close as I could get it to look like theirs in terms of structure. Overall, there are a few parts where I was a bit confused with how to use the different html and css functions but I think being able to apply it on a big project like this has helped me understand how these sites are built.

Please note that at the time I uploaded the wireframes, I didn’t add background colors to the wireframes yet as I had been deciding between a few color ideas to do (that would still allow the Stray Kids logo to be seen). However, I decided to go for a pale yellow (#FAFE90) but I can’t edit the wireframes as I do not have Illustrator at home.

Additionally, I tried to use the CodePen function (Projects) that lets me blend all of the HTML and CSS together so that it can function as a cohesive site but when I tried to input any kind of data in, it kept saying that my CodePen could not be saved and that I would need to contact their help service. To be safe, I have just added the different pages as separate CodePen links below.

http://bts.ibighit.com/

https://www.maroon5.com/

https://www.edsheeran.com/dividetour2019?ref=https://www.google.com/

http://straykids.jype.com/

CodePen Link for Stray Kids Homepage: https://codepen.io/elin7/pen/oVBmgE

CodePen Link for Stray Kids About Page: https://codepen.io/elin7/pen/GerLPB

CodePen Link for Stray Kids Albums Page: https://codepen.io/elin7/pen/gEzeRP

CodePen Link for Stray Kids Tour Page: https://codepen.io/elin7/pen/EMLqdV

CodePen Link for Stray Kids News Page: https://codepen.io/elin7/pen/VRdvaR

CodePen Link for Style Guide: https://codepen.io/elin7/pen/MxXedX

Designing 3 Layouts with HTML and CSS

For this week’s class we were tasked with designing 3 separate HTML/CSS layouts using CodePen. Here are the sketches of my layouts along with the actual CodePen link.

LAYOUT 1: Stray Kids Tour Announcement

For Layout 1, one of my favorite bands is a K-pop group known as “Stray Kids.” They recently announced that they would be doing a tour in the US. Therefore, I wanted to design a page that looks like a newspaper article written about them. CodePen Link: https://codepen.io/elin7/pen/WPPqBj

LAYOUT 2: Recipe for Dim Sum

For Layout 2, I love Dim Sum so I thought it’d be fun to model this layout similar to that of a recipe that you can find online. CodePen Link: https://codepen.io/elin7/pen/KJYGwe

LAYOUT 3: Fruits-Basket Themed Special Webpage for Kinokuniya Bookstores

For Layout 3, I wanted to design a mini-landing page of sorts for Kinokuniya, a Japanese bookstore that I go to very often in the city. An anime I grew up with (Fruits Basket) is getting a reboot so I designed this using art from the new animation. I added links to the original website as well. CodePen Link: https://codepen.io/elin7/pen/ZwZqPE

Note: Some of my links, you need to hit the “click to open link in new tab” option even though I thought I had copied and pasted the code word for word from the slide.

Exploring NMDD Through “The Yellow Wallpaper”

What was your source of inspiration?

The project called for making a photo collage poster inspired by a book, movie, story, person, etc. I decided to design a poster based off of the short story called “The Yellow Wallpaper” by Charlotte Perkins Stetson. To summarize, a woman and her husband have rented out an estate. The narrator (a woman) suffers from what her husband saw as a “temporary nervous depression” so he ordered her to rest in the estate. The woman is uncomfortable with the estate, in a room that her husband picked out that has ugly yellow wallpaper. As the story goes on, the woman is convinced that there is a woman trapped within the wallpaper.  I read this story in high school but it left an impression on me, partly because I was fascinated by the way in which the woman in the story describes and was so enraptured by the yellow wallpapered walls of her room.

These 2 passages from “The Yellow Wallpaper” are the main inspiration for the poster design. These passages are placed nearly one after each other with a break between them in the story:

“I really have discovered something at last.
Through watching so much at night, when it changes so, I have finally found out.
The front pattern does move – and no wonder! The woman behind shakes it!
Sometimes I think there are a great many women behind, and sometimes only one, and she crawls around fast, and her crawling shakes it all over.
Then in the very bright spots she keeps still, and in the very shady spots she just takes hold of the bars and shakes them hard.
And she is all the time trying to climb through. But nobody could climb through that pattern – it strangles so; I think that is why it has so many heads” (Perkins
————-
“I think that woman gets out in the daytime!
And I’ll tell you why – privately  I’ve seen her!
I can see her out of every one of my windows!
It is the same woman, I know, for she is always creeping, and most women do not creep by daylight.” (Perkins 654)

Why did you choose this composition/narrative?

In terms of composition, I approached this project from the perspective of someone tasked with designing a book cover for “The Yellow Wallpaper.” As a result, I wanted to make it look simple but modern. I wanted the poster to reflect the aforementioned passage about how the narrator sees a woman coming out of the wallpaper. For the yellow wallpaper, which serves as more of a foreground for my poster, I didn’t want to fill it entirely with this vintage patterned yellow wallpaper I found. I felt that the pattern might be excessive since I was going for a more simple look. Therefore, instead, I made a solid yellow background to represent the wallpaper and cropped parts of the patterned wallpaper I found onto it. I liked this choice as I feel like overall, overlaying small swatches of the patterned wallpaper adds a bit of texture to the poster that would otherwise be flat.

I also tried to make the woman that the narrator sees crawling out of the wallpaper in the story look like they “stepped out” of the wallpaper and into the real world in my poster. That’s why you see the repeated iterations of a crouched woman looking like she’s moving on a diagonal, growing in size until her form is half in the wallpaper and half out of the wallpaper. She has “gotten out.”

The black lines you see at the top right and top left I added to emphasize the “trapped” feeling that the narrator of the story feels as well as to emphasize how contained the woman in the wallpaper was.

Where did you get your content?

I used found images from Google. For the woman you see on the poster, I used the magnetic lasso tool to outline the shape of the woman from the original photo. I also found a vintage wallpaper design that I cropped and used parts of in making this poster.

The foreground of my wallpaper design.
Vintage wallpaper that I cropped and used.
I used this photo and the woman’s form to represent the woman crawling out of the wallpaper in my poster.

What design principles did you use effectively and why?

For color, I primarily tried to focus on only having yellow shades for the actual wallpaper itself – it it is called “The Yellow Wallpaper” so I wanted to make that obvious. However, I used a solid yellow background as the actual rectangle to represent the wallpaper and added cropped images of actual vintage yellow wallpaper to add on top of that so that there was a bit more “texture” to the wallpaper than it being just a single color.

I wanted the “creeping woman” to be a main focus of the poster. Therefore, for the design of the woman the narrator finds in the wallpaper, I tried to focus on using white space, scale, repetition, contrast, and movement. I made the woman you see in the poster be part of the negative or white space of the poster. Whereas the foreground is all yellow or patterned wallpaper, the woman contrasts to it with by being white. Additionally, I use repetition and movement here as the creeping woman in the poster is repeated four times in the poster, seeming to move along a diagonal line in the poster from left to right until half of the form is no longer part of the “yellow wallpaper.” I wanted to create some illusion of movement (hopefully I succeeded) by doing this. To emphasize this movement, I also utilized scale here as the size of the 4 creeping women figures steadily increase in size as it moves on that imaginary diagonal line. I did this to make it seem as if the woman is slowly getting closer and closer to getting herself out of the confines of the wallpaper.

What did you have issues with in Photoshop?

When editing photos from the web on another tab in photoshop, I found it difficult to understand how to use layers and adjust the hues of the picture at first. For example, I would select a layer and I would hit “Adjustments” to try and make the hue of yellow a bit darker, but it would make my entire project (all layers) look dimmer, even though I selected a specific layer/picture to make adjustments to. However, this was resolved and was really the only problem I came across. I took an Intro to Graphic Design class last semester so for the most part I didn’t run into any major issues while using Photoshop! While I like the way the title of my poster is right now, I was originally going to  use Illustrator for the title but the Illustrator software on the computers in the Rose Hill lab kept on crashing so I ultimately decided to just use Photoshop’s tools for text.

Codepen.io link: https://codepen.io/elin7/pen/OdwJgo

Response: “The Medium is the Message”

What thoughts or issues did you have with anything he may have said? Do you agree or disagree? How do his theories relate to current new media? (150 words.)

I agree with McLuhan’s main point on how people oftentimes focus too much on the content and not enough on the actual medium portraying that content. While I was confused reading some parts of this text, I thought that his usage of Cubanism to relay his point was especially useful in helping me to understand. With cubanism, rather than asking what the painting is about, because it is so abstract, the viewer is forced to look at the entire painting as a whole with the different patterns and things going on, focusing more on the medium (the painting) and how it conveys a message. It was a new way to view art and understand art. As for new media, similar to cubanism, I think that digital technology combined with media has continued to reinforce McLuhan’s main point as a lot of new media, in its new forms, brings forth a new change in that it forces an individual to let their senses guide them into interpreting the artwork/media. Some of these new sensory driven art exhibits lets us interpret things a new way.

Choose an artist, designer, or project. Think critically about their chosen media. Explain why they do (or do not) use the appropriate media/medium for their work. (500 words at least…….)

While I haven’t seen her work in person, I remember seeing pictures of Yayoi Kusama’s work and being absolutely captivated. Some of her Infinity Mirrored Room exhibits I think fit well with some of what McLuhan is talking about when he says “the medium is the message.” Recently, there has been a shift in interest towards more experiential and virtual experiences. With that has brought some changes in the way in which art is to be experienced. I find Kusama’s multimedia installations to reflect this. She has an “Infinity Mirror Room” series, which she started decades ago, having created about 20 rooms. Each of these Infinity Mirror Rooms contain installations of her artwork in an immersive environment. Each installation involves a dark chamber-like space that is lined with mirrors. For her 2016 The Souls of Millions of Light Years Away the room had small LED lights hanging from the ceiling that flickered and reflected off the mirrors in the room creating the illusion of endless space. Only one person is allowed to experience the installation at a time, making that person and their body becoming a part of the environment itself, fully immersed. On her work, Kusama has said that her work “[battles] at the boundary between life and death, questioning what we are and what it means to live and die.” Keeping this in mind, I think that Yayoi chose the appropriate medium/media for her work. Even if someone completely new to her artwork was to go into this Infinity Mirror Room, the impact of the mediums (the lights, the mirrors, the room space, etc) used in the installation is significant and conveys a message. If you look at a photo from the installation, all of the small lights give off a cosmic look – they look like a galaxy or a sky full of bright stars. Being alone in this room creates a sense of someone being caught in a universe. The light reflecting off of the mirror extends this idea, creating a sense of interconnectedness and for me, looking at the photo, I imagine that if I was actually experiencing the installation, I too would think about my small existence in the face of a galaxy like space. For me, this kind of media/art that heightens or utilizes one’s own senses really reflect how the medium itself is impactful rather than the content it carries and the medium carries the message itself.