Project Title: to be loved is to be changed

Partner: Ariel

Link to her sketch.

 

Her Memory

Ariel and I didn’t really talk about very specific dreams/memories (both of us don’t remember our dreams that well), but she still told me something that I thought I could use. We both love cats, and she told me that she raised her cat from when it was a tiny and skinny kitten, and it’s now fluffy and chubby. I loved this story, and wanted to portray it through her sketch since she happened to add a cat to it already.

 

Description and Concept

In Ariel’s self portrait, you see a girl, with half her face visible, holding a spoon with a cat sitting in it. Details to note are her red painted fingernails and lines and curves making up her ear and details in the top left hand corner of the canvas. Ariel said she added the cat and the details in the corner (the crescent moon, the dashed lines) to make for a more visually interesting sketch. The nails I think are important to note, as Ariel is passionate about doing nail art, and has been doing her own nails for several years.

I wanted to portray Ariel’s love and care for her cat through my manipulation of her sketch. Between learning more about her and her memory, I totally forgot about the detail about her nails, which I would’ve included by making her nails change color, shape, or size in the sketch if I were to do this again. I liked the colors she used–it gives the entire sketch a sort of bubblegum palette, and wanted to use similar colors. that would complement it.

Demo

 

Link to my sketch.

Coding Process

The first step I completed was making the red dot on the orange lines move. I had no particular vision in mind yet, I just wanted to practice with the mouseIsPressed, keyIsPressed, or mouseX and mouseY functions first. 

I later had the idea to “feed” the cat, by moving the red dot down on the y-axis and having it stop  moving when it reached the cat, to demonstrate how Ariel’s care gave her cat a healthy and good life. I did this by constraining the dot to not move beyond y=450. Here is the code for the dot:

Next, since I wanted to demonstrate that Ariel’s cat changed under her care, I wanted the focal point to be the cat growing bigger when the dot reached it. Unfortunately I had no idea how to do this–we’d learned how to code growing and shrinking circles, but the cat is made up of multiple ellipses and triangles and I didn’t know how to manipulate this group of shapes. Instead, I added a heart to appear only if the dot reached the cat.

 

I had a lot of trouble with this as well. I first coded the heart by itself using two circles and a triangle, reference taken from this page of the p5.js reference. To make the heart only appear when the dot reached the cat, I used a conditional statement. Since I added constrain under the code for the red dot to not make it move past y=450, I coded for the heart to appear if mouseY>440. This way the heart would appear around the time the dot reached the cat. I also added another command for the text “please grow!” to show up simultaneously.  My main issue here was that the heart would not show up at all when the cursor moved between 440 and 450. To fix this, I had to get help from Professor Moon. We found that I had mistakes in the order of execution I was telling p5.js to perform, as well as with my variables. I had multiple x and y variables that were for different actions. We fixed this by rearranging the code and declaring global variables. 

Once I understood how to use the global variables, I had no issue adding the command to write “please grow!” on the first try.

 

Now that I had an element that changed and followed the mouse cursor, I added one that would change if the mouse is pressed. I used an if-else conditional statement. For this. If the mouse is pressed,  a different moon phase (full moon, ellipse) would appear. Otherwise Ariel’s original crescent moon would be there.

 

I added a key is pressed  element using the same if-else statement.  If you pressed any key, her mouth would close and turn into a smile. Otherwise it would be an ellipse.

Then I added elements that would change over time, independently and without user input. The first one was multicolored circles that would flash across the canvas. The reference I used was Moon’s code in class.

The next element was the earring color. For this, I referenced this code by user hosken as a guide. Before function setup, I declared the counter=0 and assigned earringColor for the color of the earring. 

 

 

Finally, the last elements I added was the star from Moon’s sketch and a sparkle that took the place as the cursor from the p5.js reference.

 

 

Reflection

I am not very satisfied with this sketch because I did use lots of code either from the p5js reference, public examples, or practice we did in class, and overall feel like I didn’t tweak very much. I didn’t feel like I’d practiced enough beforehand to feel confident in being able to write and execute my own code, and ran into a lot of errors and confusion.  After finishing this project, I feel a little more competent in using variables and conditionals, being more aware of syntax, but feel I could use more practice and care in my order of execution. Also, I overall feel more confident in using conditionals than variables.

One resource I came across that helped me understand everything better and that I will refer back to in the future is happy coding. 

I think that my sketch only covered a minuscule part of possible real world-to-digital interactions, and that there is so much more to explore. I think an interactive device that could bring this memory to life is anything that involves the action of giving/adding to or caring for something, such as some kind of VR game that monitors motion (like pouring food for a cat) and displays progress on a screen.