hdw – Project 6 – Abstract Clock – [OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice

sketch
//Helen Wu
//hdw@andrew.cmu.edu
//Project 6
//Section A

function setup() {
    createCanvas(480, 480);
    angleMode(DEGREES);
}

function draw() {

  var rSpring = 180
  var gSpring = 299
  var bSpring = 123

  var rSummer = 255
  var gSummer = 224
  var bSummer = 114

  var rFall = 255
  var gFall = 191
  var bFall = 135

  var rWinter = 255
  var gWinter = 107
  var bWinter = 107

  var season = month()

  //set colors of tree outline to month

  if (season == 3 || 4 || 5){
    var r = rSpring;
    var g = gSpring;
    var b = bSpring;
  }

  if (season == 6 || 7 || 8){
    var r = rSummer;
    var g = gSummer;
    var b = bSummer;
  }

  if (season == 9 || 10 || 11){
    var r = rFall;
    var g = gFall;
    var b = bFall;
  }

  if (season == 12 || 1 || 2){
    var r = rWinter;
    var g = gWinter;
    var b = bWinter;
  }

  //background changes with respect to hour.
  //from = color(206, 242, 255), to = color(255, 198, 220)
  var proportion = hour()/60;
  background(206+49*proportion,242-44*proportion,255-35*proportion);

  //draw trees
  tree1(-35,115,200,r,g,b)
  tree3(115,115,200,r,g,b)
  tree2(-185,115,200,r,g,b)
  tree2(265,115,200,r,g,b)

  tree1(width-190,height-200,100,r,g,b);
  tree2(width-340,height-200,100,r,g,b);
  tree3(width-490,height-200,100,r,g,b);

}

//set strokeWeight 's'
var s = 3

//falling leaf pattern 1
function tree1(x,y,a,r,g,b) {
  push();
  translate(x,y);

  //tree outline is mapped with respect to minutes.
  strokeWeight(s);
  var minutes = minute();
  if ((minutes+3)%3==1){
    noFill();
    stroke(r, g, b);
    //stroke(180,229,123)
  }  else {
  noFill();
  stroke(255,255,255);
  }
  ellipse(a,a-a*50/240, a*300/240, a*350/240);

  //tree branches.
  stroke(255, 255, 255);
  strokeWeight(s)

  line(a, a/3, a, a*400/240);
  line(a, a*187/240, a+a/3, a*100/240);
  line(a, a*294/240, a-a/3, a*200/240);


  //falling leaves are drawn; color and position changes with seconds.
  noStroke();
  var seconds = second();
  var r = a/5-a/24

  //right side leaves
  if ((seconds+4)%4==0){
    fill(180, 229, 123);
    arc(a+a/3, a*10/24, r, r, 240, 20);
  }

  if ((seconds+4)%4==1){
    fill(255, 224, 114);
    arc(a+a/3+a/24, a*200/240, r, r, 340, 120);
  }

  if ((seconds+4)%4==2){
    fill(255, 191, 135);
    arc(a+a/3-a/8, 5*a/4, r, r, 60, 200);
  }

  if ((seconds+4)%4==3){
    fill(255, 107, 107);
    arc(a+a/3, a*400/240, r, r, 340, 120);
  }


  //left side leaves
  if ((seconds+3)%3==0){
    fill(180, 229, 123);
    arc(a-a/3, a*200/240, r, r, 160, 300);
  }

  if ((seconds+3)%3==1){
    fill(255, 191, 135);
    arc(a-a/3+a/8, a*300/240, r, r, 340, 120);
  }

  if ((seconds+3)%3==2){
    fill(255, 107, 107);
    arc(a-a/3-a/48, a*400/240, r, r, 340, 120);
  }
  pop();
}

//falling leaf pattern 2
function tree2(x,y,a,r,g,b) {
  push();
  translate(x,y);

  //tree outline is colored with respect to minutes.
  strokeWeight(s);
  var minutes = minute();
  if ((minutes+3)%3==2){
    noFill();
    stroke(r, g, b);
    //stroke(180,229,123)
  }  else {
  noFill();
  stroke(255,255,255);
  }
  ellipse(a,a-a*50/240, a*300/240, a*350/240);

  //tree branches.
  stroke(255, 255, 255);
  strokeWeight(s)

  line(a, a/3, a, a*400/240);
  line(a, a*187/240, a+a/3, a*100/240);
  line(a, a*294/240, a-a/3, a*200/240);

  //falling leaves are drawn; color and position changes with seconds.
  noStroke();
  var seconds = second();
  var r = a/5-a/24

  //right side leaves
  if ((seconds+4)%4==1){
    fill(180, 229, 123);
    arc(a+a/3, a*10/24, r, r, 240, 20);
  }

  if ((seconds+4)%4==2){
    fill(255, 224, 114);
    arc(a+a/3+a/24, a*200/240, r, r, 340, 120);
  }

  if ((seconds+4)%4==3){
    fill(255, 191, 135);
    arc(a+a/3-a/8, 5*a/4, r, r, 60, 200);
  }

  if ((seconds+4)%4==0){
    fill(255, 107, 107);
    arc(a+a/3, a*400/240, r, r, 340, 120);
  }


  //left side leaves
  if ((seconds+3)%3==1){
    fill(180, 229, 123);
    arc(a-a/3, a*200/240, r, r, 160, 300);
  }

  if ((seconds+3)%3==2){
    fill(255, 191, 135);
    arc(a-a/3+a/8, a*300/240, r, r, 340, 120);
  }

  if ((seconds+3)%3==0){
    fill(255, 107, 107);
    arc(a-a/3-a/48, a*400/240, r, r, 340, 120);
  }
  pop();

}

//falling leaf pattern 3
function tree3(x,y,a,r,g,b) {
  push();
  translate(x,y);

  //tree outline is mapped with respect to minutes.
  strokeWeight(s);
  var minutes = minute();
  if ((minutes+3)%3==0){
    noFill();
    stroke(r, g, b);
    //stroke(180,229,123)
  }  else {
  noFill();
  stroke(255,255,255);
  }
  ellipse(a,a-a*50/240, a*300/240, a*350/240);

  //tree branches.
  stroke(255, 255, 255);
  strokeWeight(s)

  line(a, a/3, a, a*400/240);
  line(a, a*187/240, a+a/3, a*100/240);
  line(a, a*294/240, a-a/3, a*200/240);


  //falling leaves are drawn; color and position changes with seconds.
  noStroke();
  var seconds = second();
  var r = a/5-a/24

  //right side leaves
  if ((seconds+4)%4==2){
    fill(180, 229, 123);
    arc(a+a/3, a*10/24, r, r, 240, 20);
  }

  if ((seconds+4)%4==3){
    fill(255, 224, 114);
    arc(a+a/3+a/24, a*200/240, r, r, 340, 120);
  }

  if ((seconds+4)%4==0){
    fill(255, 191, 135);
    arc(a+a/3-a/8, 5*a/4, r, r, 60, 200);
  }

  if ((seconds+4)%4==1){
    fill(255, 107, 107);
    arc(a+a/3, a*400/240, r, r, 340, 120);
  }


  //left side leaves
  if ((seconds+3)%3==2){
    fill(180, 229, 123);
    arc(a-a/3, a*200/240, r, r, 160, 300);
  }

  if ((seconds+3)%3==0){
    fill(255, 191, 135);
    arc(a-a/3+a/8, a*300/240, r, r, 340, 120);
  }

  if ((seconds+3)%3==1){
    fill(255, 107, 107);
    arc(a-a/3-a/48, a*400/240, r, r, 340, 120);
  }
  pop();

}
I chose to represent time with a forest. The leaves fall to seconds, the background color is mapped to hours of the day, and the tree outline rotates by minutes. The color of the trees correlate with seasons. At first I struggled with how to make this piece dynamic because my movement was very simple, so I created a recursion and repeated different tree patterns.
Leave a Reply Cancel reply
