This week we worked with variables in order to animate 2D images. 

While watching the videos, I was able to to create the follow sketches:

Demonstrating mousePressed(), mouseX, and mouseY().  https://editor.p5js.org/danielryanjohnston/sketches/r33XVpViX

• I really had a lot of fun playing with this piece myself.  I tried moving the mouse in a variety of patterns to see how layered the sketch could get. 

This following sketch demonstrates using an object to animate.  https://editor.p5js.org/danielryanjohnston/sketches/nW4r1-m_l

• I would want to make this piece restart from the absolute beginning on a loop so that the viewer can see the background change colors and the triangle slide through space. 
• UPDATE: Edited the code using mousePressed() in order to restart the animation. 

The final sketch, Are you okay?, was created to meet the requirements:
https://editor.p5js.org/danielryanjohnston/sketches/Oo6ii74G0

 

• 1 element controlled by the mouse.
  • The whites of the eyes change color from white to black as the mouse travels along the y-axis. 
  • The mouth changes color from black to white as the mouse travels along the x-axis. 
  • mousePresses() is used to reset the background whenever the user presses the mouse.
• 1 element that changes over time, independent of the mouse.
  • Triangles which have random x and y points for all parameters as well as a random selection of colors.
  • The pupils of the eyes have randomized colors selected.
• 1 element that is different every time you run the sketch.
  • mousePresses() is used to reset the background whenever the user presses the mouse.
  • The text “Are you okay?” appears at a random location, in a text size ranging from 5-50 pts. when the sketch is restarted
    • I was not able to get the text to reappear when the mouse was pressed (see below for specific questions).

I was very much inspired by the work I did on sketch #1 for this week’s worksheet. 
https://editor.p5js.org/danielryanjohnston/sketches/03pgxBBDt

• UPDATE: Edited the code using mousePressed() in order to restart the animation. 

The worksheet was fairly manageable except for the last two challenges.   I was not able to wrap my mind around how exactly to accomplish have the image move towards the mouse or moving the rectangle from Q3 towards the mouse. 

Questions:

• How do I place have text within the code so that it also reappears on the background after the mouse is pressed?  I have tried placing the text within the functions setup(), draw() and mousedPressed() with no success.  Both setup and draw allow the text to appear when the program first starts or is restarted. 
• How do I embed the sketches into WordPress without having the scroll bars?  I’ve tried editing the iframe unsuccessfully as the text reverts back to the original after saving.