Scale Processing Remix

For our processing experimentation we were assigned to take an example code and remix it into something new. My experiment began with the “scale” example. Scale originally displayed two squares: both pulsating in size, and the white one bouncing between right and left. 

Here’s a screenshot to give a visual:

I wanted to challenge myself to completely change the existing function of this code and create something interactive. 

In summary:

1. Adjusted the canvas size and colors (I used hex codes for colors instead of RGB values)
2. Changed the rectangles to ellipse, and added an extra one. I also varied the sizes and colors of each
3. Took away the elements that made this code into an animation (such as frameRate rectMode, etc)
4. Added a mouseDragged option within draw so that you could draw with a “brush” consisting of the three ellipse
5. Moved the “background” to both the setup as well as within the draw so that you could clear the canvas by pressing “c”

Here’s a visual of a “drawing” with the new program:

Here’s my new code if you want to check it out:

Processing Experiment 

void setup() {

 size(1200, 800);

 noStroke();

 colorMode (RGB);  

 background(#83ffe6);

}

void draw() {

}

void keyPressed(){

  if (key == 'c')

     background(#83ffe6);

}

     

 void mouseDragged() {

 fill(#ff5f5f);

 ellipse(mouseX, mouseY, 50, 50); 

 translate (40,50);

 fill(#fcfcfc);

 ellipse(mouseX, mouseY, 40, 40);      

   translate (-40,50);

 fill(#2c2c2c);

 ellipse(mouseX, mouseY, 30, 30);  

   }