Make bubble arrays, and art with Processing

bubbles.pde

/*
 * Creative Coding
 * Week 1, 02 - Draw your name! (part 2)
 * by Indae Hwang and Jon McCormack
 * Updated 2016
 * Copyright (c) 2014-2016 Monash University
 
    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <http://www.gnu.org/licenses/>.
    
 * This program allows you to draw using the mouse.
 * Press 's' to save your drawing as an image.
 * Press 'r' to erase your drawing and start with a blank screen
 * 
 */

// variables for the angle (in radians) and increment 
float angle;
float inc;
float circleSize;
float counterClockwiseBranchX, counterClockwiseBranchY;
float clockwiseBranchX, clockwiseBranchY;

void setup() {
  size(800, 800);
  background(33);
  rectMode(CENTER);  // rectangles drawn from the centre

  // initialise angle and inc to 0
  angle = 0;
  inc = 0;
  
}


void draw() {

  /* draw a rectangle at your mouse point while you are pressing 
   the left mouse button */

  // map the mouse x position to the range (0.01, 0.08)
  inc = map(mouseX, 0, width, 0.01, 0.08);

  // incremment the current angle
  angle = angle + inc;

  if (mousePressed) {

    stroke(170, 40); 
    fill(120, 60);

    rect(mouseX, mouseY, 2, 2);

    line(mouseX, mouseY, pmouseX, pmouseY); // pmouse is the mouse position at the previous frame

    // oscillate the radius over time
    float radius = 30 * abs( sin(frameCount) );
    
    //Counter-clockwise branch
    //Look at https://commons.wikimedia.org/wiki/File:Circle_cos_sin.gif to remind yourself on the use of sin and cos
    counterClockwiseBranchX = mouseX + radius * cos( angle);
    counterClockwiseBranchY = mouseY + radius * sin( angle);
    
    //clockwise branch
    clockwiseBranchX = mouseX + radius * cos( -angle);
    clockwiseBranchY = mouseY + radius * sin( -angle);
    
    //set the brush to translucent white
    stroke(242, 245, 91, 30);
    
    // draw branches
    line(mouseX, mouseY, clockwiseBranchX, clockwiseBranchY);
    line(mouseX, mouseY, counterClockwiseBranchX, counterClockwiseBranchY);
    
    //draw randomly sized circles at the end of each branch
    circleSize = random(2);
    stroke(237, 32, 10, 50);
    
    if (keyPressed == true && key == 'w') {
      circleSize = 10;
    }
    
    if (keyPressed == true && key == 'e') {
      circleSize = 15;
      stroke(12, 237, 10, 30);
    }
    
    if (keyPressed == true && key == 'd') {
      circleSize = 300;
      fill(231, 232, 61, 10);
      stroke(231, 232, 61, 100);
    }
    
    if (keyPressed == true && key == 'f') {
      circleSize = 100;
      fill(120, 20);
      stroke(10, 227, 237, 100);
    }
    
    ellipse(clockwiseBranchX, clockwiseBranchY, circleSize, circleSize);
    ellipse(counterClockwiseBranchX, counterClockwiseBranchY, circleSize, circleSize);
  }


  // save your drawing when you press keyboard 's'
  if (keyPressed == true && key == 's') {
    saveFrame("yourName.jpg");
  }

  // erase your drawing when you press keyboard 'r'
  if (keyPressed == true && key == 'r') {
    background(0);
  }
}