Computational Media - Week 2 (24-09-12)

What isn't relative? - Self portrait 2.0

In this week's assignment, we added interactions to our self portraits through creating custom variables. I focused on using mouseX/mouseY and clicking by leveraging "if/else statements", "mapping", and "mouseIsPressed". 

But first, I wanted to consolidate relative values by creating variables, this way, I can easily set them to update overtime. Plus, now the entire portrait is relative to the canvas size! See below left for original code and updated code on the right.

My interactions:
Shirt: The shirt has a positive relationship with mouseX. The higher the mouseX value, the wider the shirt ellipse.
Bangs: The ends of the bangs have a positive relationship to mouseY. The higher the mouseY value, the higher the y4 value in the bezier parameters (the longer the bangs)
Eyes: When the mouse is clicked, the ellipses that make up the eyes have a 0 value for height, creating a blinking effect. I think this means that they have a negative effect, because clicking is "yes" in a "yes/no" statement, while the height value decreases from 20 to 0?
Nose: This one was a little complicated.

• I grouped two shapes (line and arc) together to create a single unit in relation to an "origin" point, which is the top of the line, aka the x1 and y1 values of the line. Easy.
• I was able to get the nose to move with the mouse by setting the x1 and y1 values for the line as mouseX and mouseY
• I even got the nose location to be random generated throughout the canvas by randomizing the x1 and y1 values
• But I couldn't quite figure out how to update the unit in relation to itself (ie, having the nose following the mouse), while still maintaining the fixed relation between the objects. You can see in the video below, the lower the mouseY value, the longer the line and further away the arc is from the cursor, and vice versa.

Other curiosities from this week:

• Apparently, we don't HAVE to declare variables globally for p5.js?
• I was able to limit an interaction to only occur when the mouse is within the canvas by using "if (mouseY < 400)", but how to I create a condition where no updates are made (no animation or movement) until the cursor is within the canvas? I tried "if (mouseX < 0 && mouse >= width)" as a condition, but that didn't seem to work. Also, do I need to create separate conditions for mouseX and mouseY?

Over the summer, I'd done a little bit of coding train preview and created a sesame street themed interaction. Initially, I built an Elmo figure where the nose is regenerated with every mouse click and the size is randomized but in a "taller" proportion. Then I mapped the eye movement in relation to the mouse. During this process, I wondered what would happen if I reversed the "start2" and "stop2" values for one of the eyes, which to my surprise, I had unexpectedly created a Cookie Monster interaction!