Computational Media - Week 6 (24-10-10)

I Got Your Nose! (In Code)

An attempt to breakdown and explain my code for how I got my nose (to follow the mouse).

This sketch is from our improved self portraits where we were tasked to incorporate some mouse interaction. The nose portion had been a bit of a struggle to start, but eventually was able to make it work.

​Here is what I did...

This was before we learned about objects and classes, so the code for this sketch is quite messy and cumbersome to comb through. So lets break this down.

The nose consists of a line and an arc, so to make them move together as a single unit, I created custom variables declared in line 2, "noseX1", "noseY1", "noseY2", and "noseY3".

They are then initialized and assigned values in lines 10 - 13.  "noseX1" and "noseY1" are the coordinates for the top point of the line, this point also serves as the anchor for the rest of the nose. The other end, or the bottom point, of the line uses variables "noseX1" and "noseY2", while the arc uses "noseX1" and "noseY3" for the center point.

These variables are utilized in lines 184 and 185 where the nose is drawn

The assigned value to "noseX1" is "canvasX - 5" which means that the elements are justified along the center of the canvas (see line 8 for "canvasX") but offset to the left by 5 pixels, while "noseY1" is assigned the value of "height - 230" which means it is justified to the bottom of the canvas, or full height, and then offset upward by 230 pixels. This is because the rest of the portrait elements are aligned to the bottom and center of the canvas, so should the canvas size change, the portrait elements will move together in alignment.

Then we have "noseY2", which has an assigned value of "noseY1 + 20", and "noseY3", which has an assigned value of "noseY1 + 30". These two variables both reference "noseY1" in their values, because I want for the rest of the nose to be drawn based on the fixed information of "noseY1", this also will become much easier for when I want to include the mouse interaction. So, "noseY2" is 20 pixels below "noseY1", which draws the line at 20 pixels long, and "noseY3" is 30 pixels below "noseY1", which will place the arc center point 10 pixels below the line.

These assigned values will serve as their starting positions prior to any mouse interaction on the sketch. So let's get into the interaction part of the code!

Lines 156-158 are defining the appearance of the nose - no fill for the arc, stroke color is black, and the line weight is 5 pixels.

the mouse interactions are broken into to parts.
(line 159) While mouseX is within the bounds of the canvas...
(line 160) If the mouse is pressed, the nose is placed in a fixed position, which is defined in lines 161-164.
(line 165) otherwise, which is whenever the mouse is not pressed, have the nose follow the mouse, which is defined in lines 167 - 170.

Lets breakdown what that means. 

I want "noseX1" and "noseY1" to chase the cursor until they match the values of mouseX and mouseY respectively.

A simple way to do this is to make "noseX1" equal to mouseX and "noseY1" equal to mouseY. So here, if I move very quickly and squint, and maybe turn my head sideways, I can see the nose lagging and trailing behind the cursor. But thats not quite what I want. What I want is for the nose to move from it's current position towards the cursor, and continuously update the current position until "noseX1" and "noseY2" values eventually equal to mouseX and mouseY.

Lets say the current nose position is
"noseX1" = 100, "noseY1" = 300
and I want the nose to go to the mouse at
mouseX = 300, mouseY = 100

I'd get "noseX1" and "noseY1" to add or minus the distance to get to mouseX and mouseY. The formula would be
(new) noseX1 = (current) noseX1 + (mouseX - (current) noseX1)
or noseX1 += mouseX - noseX1

But this update us SUPER fast! Specifically 1/60th of a second since P5.js draws 60 frames per second. So in 1/60th of a second, noseX1 went from 100 to 300, which cannot be observed by the human eye. Unless you are superman or Flash, which then you are not human. I need to slow the movement down for the human eye! 

I can do this be decreasing the "difference" value, or in our case, the distance the current position moves each frame. In my code, I multiplied the distance by 0.05 to reduce the updating increment, therefore requiring more frames for the nose to move to the cursor.​

Another observation to note here is that not only is it the value of "noseX1" incrementing at a smaller number, it is also slowing down as it approaches the final destination. So there is a declaration aspect to this mouse interaction as well!