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 .