Shirley Chen-Project-06-Abstract Clock

sketch

// Shirley Chen
// Section B
// junfanc@andrew.cmu.edu
// Project 06




var xS = []; //Create List for Second Count
var yS = [];
var xM = []; //Create List for Minute Count
var yM = [];
var xH = []; //Create List for Hour Count
var yH = [];
var dxS = []; // Velocity in x Direction for Second Bubbles
var dyS = []; // Velocity in y Direction for Second Bubbles
var dxM = []; 
var dyM = []; 
var dxH = []; 
var dyH = []; 

function setup() {
    createCanvas(400, 400);  
// Randomly Assign Position and Velocity for Second Bubbles
  for (var i = 1; i < 61; i++) { 
        xS[i] = random(100, 300);
        yS[i] = random(10, 300);
        dxS[i] = random(-5, 5);
        dyS[i] = random(-5, 5);
    }
//Randomly Assign Position and Velocity for Minute Bubbles  
    for (var i = 1; i < 61; i++) { 
        xM[i] = random(100, 300);
        yM[i] = random(20, 300);
        dxM[i] = random(-5, 5);
        dyM[i] = random(-5, 5);
    }
//Randomly Assign Position and Velocity for Hour Bubbles
    for (var i = 1; i < 25; i++) { 
        xH[i] = random(30, 400);
        yH[i] = random(30, 300);
        dxH[i] = random(-5, 8);
        dyH[i] = random(-5, 8);
    }
}

function draw() {
  var H = hour();
  var M = minute();
  var S = second();
  var cirC = [];
  var colR = 100;
  var colG = 150;
  var colB = 255;
  var launcherLength1 = 80;
  var launcherLength2 = 90;
  background(241, 223, 224);
  frameRate(8);
  noStroke();
  fill(148, 134, 186);
//Draw the Launcher
  ellipse(40, 350, 70, 70); 
  quad(60, 330, launcherLength1, 320, launcherLength2, 350, 60, 380);
//Constrain the Hours to 0 - 12
  if (H >= 12){
    H = H % 12
  }

  for (var i = 1; i < S+1; i++) { 
//Draw one Small Bubble for Every Second
//Color Become Darker for Each Bubble
    colR += 10;
    fill(colR, 183, 205);
    ellipse(xS[i], yS[i], 10);
    xS[i] += dxS[i];
    yS[i] += dyS[i];
    if (xS[i] + 10 > width || xS[i] - 10 < 90){
      dxS[i] = - dxS[i];
    }
    if (yS[i] + 10 > height || yS[i] - 10 < 1){
      dyS[i] = - dyS[i];
    }
    if (S % 2 == 0){
      fill(148, 134, 186);
      quad(60, 330, launcherLength1+10, 310, launcherLength2+10, 340, 60, 380);
//Make the Launcher Move Its "Mouth" for Every Second  
    }
  }
  for (var i = 1; i < M+1; i++) { 
//Draw one Midium Bubble for Every Minute
//Color Become Darker for Each Bubble
    colG -= 10;
    fill(255, colG, colG);
    ellipse(xM[i], yM[i], 20);
    xM[i] += dxM[i];
    yM[i] += dyM[i];
    if (xM[i] + 20 > width || xM[i] - 20 < 90){
      dxM[i] = - dxM[i];
    }
    if (yM[i] + 20 > height || yM[i] - 20 < 1){
      dyM[i] = - dyM[i];
    }
  }
  for (var i = 1; i < H+1; i++) {
//Draw one Large Bubble for Every Hour
//Color Become Darker for Each Bubble
    colB -= 60;
    fill(255, 200, colB);
    ellipse(xH[i], yH[i], 30);
    xH[i] += dxH[i];
    yH[i] += dyH[i];
    if (xH[i] + 30 > width || xH[i] - 30 < 0){
      dxH[i] = - dxH[i];
    }
    if (yH[i] + 30 > height || yH[i] - 30 < 0){
      dyH[i] = - dyH[i];
    }
  }
//Draw the Stand for the Bubble Launcher
fill(252, 205, 86);
rect(30, 355, 30, 40, 10, 10);
fill(249, 133, 133);
text('BOOM!', 30, 300);
}

For this project, I represent second, minute, and hour with bubbles with different sizes and colors. Using the for loop command, for each second there is a new small bubble coming up. I also change the RGB parameter gradually for each second, so the second bubble will change from blue to purple as time passing. Similarly, I also use for loop command to represent minute and hour with bubbles with different diameters. Moreover, I draw a “launcher” and control its outlet to contract or extend for each change in second. For odd number of seconds, its “mouth” will contract; for even number of seconds, it will extend. I also constrain the movement of the bubbles so that they bounce back when they hit the boundary.