This week we focused on creating our own functions within our  sketches. 

The first challenge was to modify the function within Exclamator so that it returns the text plus n exclamation marks.  I was able to do that by creating a new function called repeatStringNumTimes( string, n).  Check out the code here.   On line 10, you will want to edit the second argument within the function exclamate() in order to add as many exclamation points to the string as you desire. 

For our sketch this week, we were asked to refactor the code within a previous sketch by creating functions and objects, if possible.   I decided to refactor a sketch from Week 2.   The original code is here.   Within the new code, you are able to call the function moveTriangle() and fadeBackground() within the draw() function.  The parameters for moveTriangle(a, b, c) corresponds to the corners of the triangle.  by changing the arguments, you are able to speed up or slow down how quickly each particular corner moves through the space.  Within the function fadeBackground(), you are able to adjust the speed which the background fades out. 

 

See below for UPDATED sketch info.

This week we worked with creating repetitive designs using loops.  With Dan Shiffman’s 10PRINT Sketches as inspiration, I created the following: 

Code

I wanted to add the function mousePressed() into the sketch in order for the colors and overall design to reset into a new configuration.  In order to get the functionality I desire, one will need to either (1) refresh the browser or (2) enter in the Code and press play to get a new configuration of the design.  Here is a version of the same sketch without noLoop() but with mousePressed().   I’ve set the frame rate to 1 frame per second so that the animation is not spastic.  Click within the design and you will receive a new color configuration. 

 

Code

I would like to find a way to freeze the sketch then be able to reset the colors and shape placement by pressing the mouse. 

UPDATE:
In class, we were shown how to achieve what I was attempting.  By adding the for loop which created the sketch into mousePressed(), I was able to have the sketch update when the mouse is pressed. 

 

Code

Partner Assignment:

This week we were assigned a partners project where we were to work together to create using what we have learned so far which includes rule-based animation, motion, and interaction.  I got the opportunity to work with Mai Claro for this assignment. 

Process:
Mai and I met to discuss what we were thinking about and decided to create a painting app. Since I was feeling a bit behind in regards to fully comprehending everything so far, I decided to focus my contributions on designing some brushes that respond to mouse clicks.

I started by creating the following:

• A color filled star brush that appeared when the left mouse button was clicked.
• An unfilled star (outline) that appears when the right mouse button is clicked.
• A transparent circle that appears behind the first star when the left mouse button is double clicked.
• An eraser which is activated by pressing the mouse’s scroll wheel. All four of these items can be used to draw or erase connected areas by holding down its button.
  • I did notice after posting that this feature does make it difficult to use within the browser as, with my mouse, pressing the scroll wheel also controls movement around the browser window.
• Lastly, I created 3 areas to hover ones mouse over in order to randomly change the color of the three items.

Below is my sketch prior to handing it over to Mai for more exciting features!

Code: https://editor.p5js.org/danielryanjohnston/sketches/izpODJcCU

Next, I handed what I had created off to Mai for additions (fireworks, sparkles, action, etc!). 

Update: Mai add sliders!  One slider allows the user to change the scale of the brush and the other switches between a square, a circle and a star.  I’m very motivated by how this turned out.   Due to how I had setup the background in setup(_), Mai was unable to add animation as well thought.  The bubbles worked but were functioning as the brush does by leaving duplicates of itself after each frame.  I wonder if there is a  way to parse out the sketch so that you can have both a component that needs the background refreshed each frame and one that does not?

Code: https://editor.p5js.org/MaiClear/sketches/yQ2bugnp8

Overall, this was a smooth collaboration with Mai and I look forward to working together again!  In regards to p5.js, I am feeling as though I better understand what we are being asked to create.   I am grateful that I was able to spend more time with the material this week and that I was also able to utilize Laurne McCarthy, Casey Reas and Ben Fry’s book Make: Getting Stated with p5.js . 

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.