Category: Section D

Clock

var petals = 0;
var petals2 = 0;
var ellipseSize=200;
var minuteCircleSize=7;

function setup() {
    createCanvas(480, 480);
}
function draw() {
    background(229, 255, 255);
    var H = hour();
    var M = minute();
    var S = second();

    angleMode(RADIANS);
    petals += 4;
    petals2 += 3;
    strokeWeight(0);
    for(var i=0; i<5; i++){
        //increment based on i and to make the zig zag petal pattern;
        var x = width/13 + 100 * i;
        fill(255, 204, 204, 204);
        arc(x, 30 + petals, 15, 10,PI+QUARTER_PI, QUARTER_PI);
        arc(x, 150 + petals, 15, 10,PI+QUARTER_PI, QUARTER_PI);
        arc(x, 270 + petals, 15, 10,PI+QUARTER_PI, QUARTER_PI);
        var x1 = width/5 + 100 * i;
        arc(x1, 90 + petals2, 15, 10,PI+QUARTER_PI, QUARTER_PI);
        arc(x1, 210 + petals2, 15, 10,PI+QUARTER_PI, QUARTER_PI);
        arc(x1, 330 + petals2, 15, 10,PI+QUARTER_PI, QUARTER_PI);
    }

    if(petals>height){
      petals=-50;
      petals2=-50; //to make the petals loop;
    }

    angleMode(DEGREES);
    noStroke();
    //the flower petals that grow by the hour
    if (H==0){
        H = 12;
      }else if(H < 24 & H > 12){
        H -= 11;
      }else{
        H = hour();
      }
    for(h=1; h<H; h++){ //the petals that increase by the hour;
        push();
        translate(width/2, height/2);
        rotate(h*30);
        fill(255, 204, 204, 204);
        ellipse(width/5, 0, ellipseSize,ellipseSize/2);
        pop();
    }
    for(m = 0; m<M; m++){ //the brown circles representing minutes;
        push();
        translate(width/2,height/2);
        rotate(6 * m);
        fill(230, 77, 0, 50); //4th number is for transparency;
        ellipse(width/8,0, minuteCircleSize, minuteCircleSize);
        pop();
      }

    for(s = 0; s<S; s++){ //the yellow stamens representing seconds;
        push();
        translate(width/2,height/2);
        rotate(6 * s);
        strokeWeight(2);
        stroke(255, 255, 204);
        line(0,0,0,-60);
        pop();
    }
}

The hardest part about this assignment was making my code more efficient. After making the petals and the rest of the flower, something seemed to be a little boring so I tried to create a background that would loop in the back, but I just couldn’t think of how to make it loop more efficiently even though it looks like an easy fix. I found it interesting to see the process of my clock actually changing throughout time. Since I like cherry blossoms and the color of the original pink background, I decided to use those as my inspirations for this project. It was hard for me to work with the arc function as it was my first time using it and there were a lot of components to it as well. The top photo below was something I used as sort of an inspiration of how I wanted my clock to look like. I changed up some of the components to match the number of hours, minutes and seconds.

aboyle clock

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


function draw() {
  background(122,109,95);
  rectMode(CORNER)

  var h=hour();
  var m=minute();
  var s=second();
  var month;
  var mappedS = map(s,0,59,135,370);

  stroke(0)
  strokeWeight(1)
  fill(255);
  rect(130,20,245,190);
  rect(130,210,245,35)

//makes calendar squares
  for (r=1; r <= 7; r++)
    for(c=1;c <= 5;c++)
    rect(95+35*r,210+35*c,35,35)

//changes month according to hour
  if (h==1 || h==13){
    month="January"
  } if (h==2 || h==14){
    month="February"
  } if (h==3 || h==15){
    month="March"
  } if (h==4 || h==16){
    month="April"
  } if (h==5 || h==17){
    month="May"
  } if (h==6 || h==18){
    month="June"
  } if (h==7 || h==19){
    month="July"
  } if (h==8 || h==20){
    month="August"
  } if (h==9 || h==21){
    month="September"
  } if (h==10 || h==22){
    month="October"
  } if (h==11 || h==23){
    month="November"
  } if (h==12 || h==24){
    month="December"
  }


//month according to hour
  fill(0);
  textSize(25);
  text(month,width/2.3,237)

//moves x depending on minute
//since there are only 31 days in a month
//it changes color halfway through

  var across=m
  var down=245
  stroke(255,0,0)
  strokeWeight(5);
  if (m >7){
    across=m-7
    down=280
  } if (m >14){
    across=m-14
    down=315
  } if (m >21){
    across=m-21
    down=350
  } if (m >28){
    across=m-28
    down=385
  } if (m >31){
    across=m-31
    down=245
    stroke(0)
  } if (m >38){
    across=m-38
    down=280
    stroke(0)
  } if (m >45){
    across=m-45
    down=315
    stroke(0)
  } if (m >52){
    across=m-52
    down=350
    stroke(0)
  } if (m >58){
    across=m-58
    down=385
    stroke(0)
  } if (m < 1){
    strokeWeight(0);
  }

//draws X
  line(95+across*35,down,130+across*35,down+35);
  line(130+across*35,down,95+across*35,down+35);

//Picture Variables
  var secondLine=mappedS+40
  var thirdLine=mappedS+105
  var endPointOne=105
  var endPointTwo=198
  var endPointThree=mappedS
  var endPointFour=65
  var smallLine=mappedS-50
  var bluePoint=mappedS


//Calendar picture
  strokeWeight(5)
  stroke(0);
//first vertical line
  line(mappedS,22,mappedS,207)
//second smaller vertical line
  if (mappedS >330){
    secondLine=mappedS-198
  }
  line(secondLine,100,secondLine,207)
//third vertical line
  if (mappedS >270){
    thirdLine=mappedS-130
  }
  line(thirdLine,22,thirdLine,150)
//fourth vertical line
  if (mappedS < 180){
    smallLine=mappedS+190
  }
  line(smallLine,150,smallLine,207)
//first horizontal line
  strokeWeight(5);
  if (mappedS >272){
    endPointOne=102+(270-mappedS)
    line(132,100,mappedS-132,100)
  }
  line(mappedS,100,mappedS+endPointOne,100)
//second horizontal lines
  if (mappedS >100){
    endPointTwo=198+(135-mappedS)
  }
  line(secondLine,150,secondLine+endPointTwo,150)
  line(132,150,mappedS,150)

//blue square
  rectMode(CORNERS)
  fill(0,0,255)
  if (mappedS < 180){
    bluePoint=372
    rect(132,150,mappedS,208)
  }
  rect(smallLine,150,bluePoint,208)
//red square
  fill(255,0,0)
  if(100 < mappedS & mappedS < 270){
    rect(132,22,mappedS,150)
    endPointThree=372
  }
  rect(thirdLine,22,endPointThree,150)
//yellow square
  fill(255,255,0)
  if (270 < mappedS && mappedS < 330){
    endPointFour=333-mappedS
    rect(132,100,thirdLine,150)
  }
  rect(secondLine,100,secondLine+endPointFour,150)


//tack to attach calendar to wall
    ellipse(255,32,5);

}

When brainstorming for my abstract clock, I thought about how a lot of our timekeeping was based on the number 12. I decided that I wanted to make an abstract clock based on a calendar, where the actual time corresponds to the represented date—3:12 will be represented as March 12^th, for example. I had to use a lot of if-then statements in this project. For the minutes, I had to make an if-then statement for each set of seven minutes so I could move the x over across the row and then back to the beginning of the row when it drops a column.

I decided to make the picture on the calendar a Mondrian-esque art piece in reference to our first coding project. I wanted the art to seem as if it was wrapping around, which necessitated a lot more if-then statements. I’m assuming that there was more concise way to do it, but I don’t know it yet. Overall, while I wish it could have been visually prettier, I’m pretty happy with the concept and execution!

odhP6

//Owen D Haft
//Section D
//odh@andrew.cmu.edu
//Project 6

function setup() {
    createCanvas(265, 530);
}
 
function draw() {
    background(220-(2*day())); //The background darkens with the currentday
    stroke(255);

    //Creates the Red Ball thats grows/move/changes color with the current second
    strokeWeight(1);
    fill(second()*4, second(), second());
    ellipse(width-4*second(), height/2+4*second(), second(), second());

    //Creates the Blue Ball thats grows/move/changes color with the current minute
    strokeWeight(2);
    fill(minute(), minute(), minute()*4);
    ellipse(4*minute(), height/2-4*minute(), minute(), minute());
   
    rotate(6); //This adds disorder to the lines and helps place the Hour ball with them

    //Creates the Yellow Ball thats grows/move/changes color with the current hour
    strokeWeight(4);
    fill(hour()*12, hour()*12, 0);
    ellipse((width/2)+1, height/2, hour(), hour());
       
    strokeWeight(1);

    //Creates the lines
    line(0, height, width, 0);
    line(0, width, height, 0);
    line(width/2, 0, width/2, height);
    line(0, height/2, width, height/2);
}

In my abstract clock I really ran with the word “abstract.” I reduced seconds, minutes, and hours each into a primary colored ball that moves and changes color and size as each aspect of time changes. I also hinted at the day with the shade of the background.

sketch

//Daniel Noh
//Section D
//dnoh@andrew.cmu.edu
//Project-06

var r = 40;
var g = 40;
var b = 80;

function setup() {
  createCanvas(400,400);
}

function draw() {
  var h = hour();
  var m = minute();
  var s = second();
  //Variable maps hours to triangle width and colors
  var Hx = map(h,0,24,0,400);
  var HcolorRG = map(h,0,24,0,40);
  var HcolorB = map(h,0,24,0,80);
  //Variable maps seconds to strokeWeight and ellipseSize
  var Sstroke = map(s,0,60,0,10);
  var Ssize = map(s,0,60,0,400);
  //Variable maps minutes to degrees
  var Mend = map(m,0,60,0,360);
  angleMode(DEGREES);

  background(20,20,50);

  //hour triangle - gets fatter as hour passes and fades into background
  fill(60-HcolorRG,60-HcolorRG,130-HcolorB);
  noStroke();
  triangle(200,0,Hx,400,400-Hx,400);
  //minute arc - timer within second circle that ticks to show minutes.
  fill(255);
  arc(200,200,Ssize,Ssize,Mend-90,270);
  //second circle - the circle gets bigger every second as well as the stroke
  noFill();
  strokeWeight(Sstroke);
  stroke(255);
  ellipse(200,200,Ssize,Ssize);
}

I wanted to create an abstract clock using simple shapes. I thought the hour should change very subtly, as hours pass by slowly, so I made the triangle in the background slowly fade into the background as well as get wider. It was also a part of my design that the minute and second “hands” were integrated within each other because of how quick each is relative to hours. The minutes are shown simply as a timer. However, the circle slowly fills up the page every second, practically screaming when it approaches the end of a minute.

sketch

//Name: Colleen Duong
//Class: Section D
//Email: cduong@andrew.cmu.edu
//Project-06-Abstract Clock


//all of the numbers for the x-coordinates of the falling snow
var snowfallx = [400, 300, 200, 100,
                  450, 350, 250, 150, 50,
                  400, 300, 200, 100,
                  450, 350, 250, 150, 50,
                  400, 300, 200, 100,
                  450, 350, 250, 150, 50,
                  400, 300, 200, 100,
                  450, 350, 250, 150, 50,
                  400, 300, 200, 100,
                  450, 350, 250, 150, 50,
                  400, 300, 200, 100,
                  450, 350, 250, 150, 50,
                  400, 300, 200, 100,
                  450, 350];

//All of the numbers for the y-coordinates of the falling snow
var snowfally = [15, 30, 20, 40, 35,
                15, 25, 30, 25,
                30, 20, 30, 20, 30,
                70, 50, 60, 90,
                130, 100, 120, 150, 160,
                150, 160, 130, 170,
                190, 170, 190, 180, 180,
                200, 210, 230, 240,
                210, 240, 260, 210, 220,
                290, 300, 310, 270,
                330, 340, 350, 320, 320,
                350, 360, 340, 340,
                360, 400, 430, 420, 400]

var snowd = 5; //snow diameter

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

function draw() {
  background(240, 235, 231);

  var H = hour();
  var M = minute();
  var S = second();

//Design Code --> The Mountains
  noStroke();
    //Mountain 5 (Lightest Blue)
      fill(160, 201, 218);
      triangle(50, 500, 400, 500, 230, 180);
      triangle(-50, 500, 300, 500, 110, 100);
      triangle(-50, 500, 150, 500, 50, 130);
      triangle(0, 500, 300, 500, 150, 100);

    //Mountain 4
      fill(71, 153, 190);
      triangle(180, 500, 300, 500, 250, 280);
      triangle(200, 500, 450, 500, 340, 300);
      triangle(350, 500, 450, 500, 400, 320);
      triangle(350, 500, 460, 500, 420, 320);
      triangle(400, 500, 520, 500, 470, 350);

    //Mountain 4
      fill(51, 129, 175);
      triangle(180, 500, 400, 500, 300, 250);
      triangle(300, 500, 450, 500, 380, 280);

    //Mountain 4
      fill(38, 94, 151);
      triangle(300, 500, 450, 500, 360, 370);
      triangle(350, 500, 500, 500, 450, 300);

    //Mountain 3
      fill(31, 66, 120);
      triangle(-30, 500, 100, 500, 50, 200);
      triangle(-30, 500, 100, 500, 10, 250);
      triangle(20, 500, 200, 500, 110, 200);
      triangle(60, 500, 300, 500, 200, 200);

    //Mountain 2
      fill(18, 49, 87);
      triangle(-30, 500, 100, 500, 50, 300);
      triangle(-30, 500, 100, 500, 10, 350);
      triangle(20, 500, 200, 500, 110, 370);
      triangle(60, 500, 300, 500, 200, 440);
      triangle(70, 500, 300, 500, 200, 350);
      triangle(90, 500, 330, 500, 300, 440);
      triangle(160, 500, 400, 500, 300, 300);
      triangle(300, 500, 450, 500, 400, 350);
      triangle(400, 500, 500, 500, 450, 400);

    //Mountain 1 (Darkest Blue)
      fill(0, 7, 18);
      triangle(-30, 500, 100, 500, 50, 400);
      triangle(20, 500, 200, 500, 130, 420);
      triangle(60, 500, 300, 500, 200, 440);

//Design Code --> The mountains

//When it becomes 59 minutes a flag is drawn on the top of the mountain to indicate that the onion has reached the peak (victory!!!)
if(M == 59){
  fill(255);
  rect(130, 100, 15, 10);
  fill(240, 235, 231);
  triangle(130, 110, 130, 100, 135, 105)
  push()
  stroke(0);
  line(145, 100, 145, 120);
  pop()
}

//Sprout climbs up mountain (Minutes)
  var sprout = M * 2
  fill(255);
  ellipse(140, 240-sprout, 10, 10);
  rect(138, 240-sprout, 4, 10, 10);
  fill(129, 188, 179-M);
  ellipse(136, 235-sprout, 8, 5);
  ellipse(144, 235-sprout, 8, 5);



//Changing Moon Shape (Hours)
  for(var moon = 1; moon < H + 1; moon++){
    fill(196, 219, 230);      //blue moon
    ellipse(400, 100, 100, 100);
    fill(240, 235, 231);      //cut moon
    ellipse(450, 100, (moon*3)+70, (moon*3)+70); //changes only the part of the  moon that cuts the moon
    fill(214, 233, 242); //Clouds
    ellipse(300, 120, 25, 10);
    ellipse(330, 140, 70, 20);
    ellipse(360, 130, 70, 20);
    ellipse(400, 150, 60, 15);
  }

//Making snow fall (Seconds) -- Amount of Snow = Number of Seconds
for(var snowfall = 0; snowfall < S; snowfall++){
  fill(255);
  ellipse(snowfallx[snowfall], snowfally[snowfall], snowd, snowd);
}

}

I wanted to create some sort of landscape image and I really wanted to create an image that incorporated receding mountains so I tried to sketch something up on illustrator. I noticed that I also had a big chunk of space on the top right so I wanted to add the moon there to use as the hour indicator since it seemed to fit with the overall mountain theme.

The next part of my thought process was that since my mountains were blue colored they seemed as though they were cold, so I wanted to create a snowy looking scenario, which is why I created something that looked like falling snow with a for loop and an array.

My last thing is that I wanted to incorporate something that I’ve been using in all of my projects so far, which is a white onion (the white circle) with a green sprout coming out of its head.

The sprout slowly moves up the mountain as minutes pass and when it finally reaches the peak (59 minutes) it puts a flag on top of it (victory!!).

sketch

//Cora Hickoff
//Section D
//chickoff@andrew.cmu.edu
//Project-06

function setup() {
    createCanvas(400, 400);
}

function draw() {

    background(240, 8, 8, 1);
    noStroke();

    for (var y = 0; y < height+5; y += 15) {
        for (var x = 0; x < width+5; x += 15) {
            fill(25, 220, 20, 1,);
            ellipse(x, y, 20, 20);
        }
    }

     for (var y = 0; y < height+5; y += 15) {
        for (var x = 0; x < width+5; x += 15) {
            fill(25, 50, 200, 1);
            triangle(x, y, 5, 5, 2, 10);
        }
    }
    
    var H = hour();
    var M = minute();
    var S = second();

    var mappedH = map(H, 0,23, 0,width);
    var mappedM = map(M, 0,59, 0,width);
    var mappedS = map(S, 0,59, 0,width);
    var triangleHeight = height / 3;
    var triangleWidth = width / 2;

    //hour
    fill(205, 18, 90, 3);
    triangle(200, .5*triangleHeight, .5*triangleWidth, mappedH, 0, triangleHeight);

    //minute
    fill(20, 20, 180, 3);
    triangle(0, 4*triangleWidth, .5*triangleWidth, mappedM, 2, triangleHeight*2);

    //second
    fill(15, 100, 180, 3);
    triangle(0, .5*triangleWidth, 1.5*triangleWidth, mappedS, 0, triangleHeight);

}

I started this project by thinking about how I could make this clock visually interesting. I found that lowering the opacity caused it to feel more blended and smooth, versus hard and rigid like the clocks we see in classrooms. In addition, I created a for() loop to cause thin triangles to cascade at the start of the program, and felt it was representative of the passage of time.