Project 06: Abstract Clock

sketch
var y = 430 //start y position of house
var c = []; //random colors for balloons
var bx = []; //balloon random x coordinate
var by = [];//balloon random y coordinate
var dy = []; // cloud random x coordinate
var dx = []; //cloud random y coordinate
var tx = []; // star random x coordinate
var ty = []; //star random y coordinate

function setup() {
  createCanvas(480, 480);
 //for every minute, randomly colored and located balloon will pop up
 for (i=0; i<= 60; i++){
  c[i] = color(random(255), random(255), random(255))
  bx[i] = random(160, 320)
  by[i] = random((y-30), (y-175))
 }
 //during the daytime, for every hour randomly located cloud will pop up
   for (d = 0; d<=23; d++){
     dx[d] = random(25, width-25)
     dy[d] = random(25, height-25)
   }
 //during nighttime, for every hour randomly located star will pop up
  for (s=0; s<=23; s++){
    tx[s] = random(75, 3*width-25)
    ty[s] = random(75, 3*height-25)
  }  
}
function draw() {
//during nighttime, use dark sky and stars
  if (hour() < 12){      
  background(7, 46, 110);
    star();
  }
 // during daytime, use day sky and clouds
  else {
    background(111, 165, 252)
    cloud();
  }
 //for every second, house will move up four units
translate(0, -4*second()) 
house();   
} 

function house(){ 
  //base house
  noStroke();
  fill(61, 58, 50)
    rect(width/2-28, y-20, 60, 20)
  fill(209, 203, 88)
  noStroke();
    rect(width/2 - 25, y, 25, 50)
  fill(240, 240, 144)
    square(width/2, y, 50)
    triangle(width/2, y, width/2+50, y, width/2 + 25, y-20)
  strokeWeight(10)
  stroke(84, 84, 66)
    line(width/2, y, width/2 +25, y-20)
    line(width/2 +50, y, width/2+25, y-20)
  rect(width/2 + 22, y+25, 5, 15) 
  //for each minute, balloon tied to house will pop up
  for (i=0; i< minute(); i++){
    push();
    //balloon string
    stroke(255)
    strokeWeight(1)
    	line(width/2, y-20, bx[i], by[i])
    //balloons
   	fill(c[i]);
    noStroke()
  		ellipse(bx[i], by[i], 20)
    print(i)
    pop();
  }
}
function cloud(){
//for each hour, cloud will pop up
  for (var d = 0; d<hour(); d++){
  fill(255);
  strokeWeight(3)
    stroke(200)
  ellipse(dx[d], dy[d], 100, 20);
    ellipse(dx[d] + 20, dy[d] - 10, 40, 15)
  }
}

function star(){
//for each hour, star will pop up
  for (var s = 0; s<hour(); s++){
    push();
    stroke(255, 223, 107)
    strokeWeight(3)
    fill(255, 255, 217)
    beginShape();
    scale(0.3)
      vertex(tx[s]+35, ty[s]+3)
      vertex(tx[s] +46, ty[s]+22)
      vertex(tx[s]+68, ty[s]+28)
      vertex(tx[s] + 54, ty[s] +45)
      vertex(tx[s] + 56,ty[s] + 67)
      vertex(tx[s]+35, ty[s]+58)
      vertex(tx[s] + 14, ty[s]+67)
      vertex(tx[s] + 16, ty[s]+45)
      vertex(tx[s]+2, ty[s]+28)
      vertex(tx[s]+24, ty[s]+22)
    endShape(CLOSE);
pop()
  }
}

Over quarantine, I rewatched a bunch of Pixar movies, and was inspired by the movie “Up” for my clock. The house moves upwards for every second, the balloons show the minutes, and the clouds or stars in the background show the hour. In general, I had difficulty making the arrays refresh with the time.

Leave a Reply