Category: Project-06-Abstract-Clock

Project-06

This is my abstract clock:

In the sunflower I draw, I use its stem to represent the hour, that as time goes, the sunflower will gradually be taller; I use the petal of the flower to represent the minute; I use the color change of the leaf and the text to represent the second.

sketch

function setup() {
    createCanvas(300, 400);
    background(255);
}



function draw() {

    noStroke();
    background(242, 226, 204);

    //background leaf -- represent second
    if (second()%2 == 0) {
        fill(123, 142, 31);
    } else {
        fill(230, 143, 89)
    }

    push();
    translate(140, 200);
    rotate(radians(30))
    ellipse(-10, 0, 50, 15);
    rotate(radians(-60));
    ellipse(10, 30, 40, 10);
    pop();
    
    //base-flowerpot
    var pX = 150;
    var pY = 250
    var pHeight = 8;
    
    fill(187, 160, 133);
    beginShape();
    vertex(pX-50, pY);
    vertex(pX-60, pY+pHeight);
    vertex(pX-50, pY+2*pHeight);
    vertex(pX+50, pY+2*pHeight);
    vertex(pX+60, pY+pHeight);
    vertex(pX+50, pY)
    endShape();

    fill(170,119, 98)
    beginShape();
    vertex(pX-50, pY+2*pHeight);
    vertex(pX-30, pY+10*pHeight);
    vertex(pX+30, pY+10*pHeight);
    vertex(pX+50, pY+2*pHeight);
    endShape();


    //flower stem -- represents hour
    var sWidth = 10
    var sHeight= 50
    sHeight += hour();
    fill(123, 142, 31)
    beginShape();
    curveVertex(pX-sWidth, pY);
    curveVertex(pX-sWidth, pY);
    curveVertex(pX-sWidth/2, pY-sHeight);
    curveVertex(pX-sWidth*2, pY-2*sHeight);
    curveVertex(pX-sWidth, pY-2*sHeight);
    curveVertex(pX+sWidth/2, pY-sHeight);
    curveVertex(pX, pY);
    curveVertex(pX, pY);
    endShape();

    //sunflower petal -- represent minute
    push();
    translate(pX-sWidth, pY-2*sHeight);
    noStroke();
    for (var i=0; i<minute(); i++) {
        rotate(radians(6));
        fill(252, 171, 1);
        ellipse(0, 20, 5, 65);
        fill(228, 121, 1);
        ellipse(0, 20, 3, 35);
    }

    //seeds
    fill(41, 5, 2);
    circle(0, 0, 60);
    fill(37, 22, 1);
    circle(0, 0, 30);
    fill(34, 28, 0);
    circle(0, 0, 20);
    pop();
    
    //Text -- represent second
    if (second() %2 == 0) {
        textSize(25);
        fill(254, 203, 1, 220);
        text('Have A Good Day!', 40, 40);
    } 
   
}

Project 06

sleeping earth, suns, moons, and stars!

sketch
// Sowang Kundeling skundeli Section C Project 05

var angle = 0;
var x = 480/2;
var y = 480;
var z = 60; // size

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

function draw() {
    background('black');
    push();
    frameRate(1);
    translate(240, 480);
    rotate(radians(7) * second());
    galaxy();
    pop();
  
    noStroke();
    fill('black')
    var eyeLX = x + 60
    var eyeRX = x - 60
    ellipse(eyeLX, y-60, z+10, z); // left eye
    ellipse(eyeRX, y-60, z+10, z); // right eye
    fill(9, 130, 13);
    ellipse(eyeLX, y-75, z+15, z); // cut out left eye
    ellipse(eyeRX, y-75, z+15, z) // cut out right eye
  
    push();
    frameRate(1);
    translate(x-120, y-350);
    rotate(radians(5) * second());
    star(0+minute(), 0+minute(), 10, 30, 5); // left star
    pop();
  
    push();
    frameRate(1);
    translate(x+120, y-380);
    rotate(-radians(5) * second());
    star(0+minute(), 0+minute(), 5, 20, 5); // right star
    pop();
}

function galaxy() {
    // earth
    translate(-240, -480);
    fill(9, 130, 13); // green
    noStroke();
    circle(x, y, z*5);
  
    // yellow
    noStroke();
    fill(245, 206, 51); // yellow
    circle(x, y-200, z);
    fill(242, 221, 136); // inner yellow
    circle(x, y-200, z/2)
  
    // orange
    fill(245, 145, 51); // orange
    circle(x+200, y, z);
    fill(242, 188, 138); // inner orange
    circle(x+200, y, z/2);
  
    // dark blue
    fill(74, 51, 245); // dark blue
    circle(x, y+200, z);
    fill(167, 156, 247); // inner dark blue
    circle(x, y+200, z/2);

    // light blue
    fill(150, 198, 250); // light blue
    circle(x-200, y, z);
    fill(211, 227, 245); // inner light blue
    circle(x-200, y, z/2)

}

function star(x, y, radius1, radius2, npoints) { // reference star https://editor.p5js.org/p5/sketches/Form:_Star
    fill(241, 242, 153)
    let angle = TWO_PI / npoints;
    let halfAngle = angle / 2.0;
    beginShape();
    for (let a = 0; a < TWO_PI; a += angle) {
      let sx = x + cos(a) * radius2;
      let sy = y + sin(a) * radius2;
      vertex(sx, sy);
      sx = x + cos(a + halfAngle) * radius1;
      sy = y + sin(a + halfAngle) * radius1;
      vertex(sx, sy);
    }
    endShape(CLOSE);
}

Project 06

sketchDownload
// Ilia Urgen
// Section B
// iurgen@andrew.cmu.edu
// Project-06

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

function draw() { 
    // 0:00 to 8:00
    if (hour() >= 0 & hour() <= 8) {
        sleep(); 
    }

    // 8:00 to 20:00
    else if (hour() >= 8 & hour() <= 20) {
        daytime();
    }

    // 20:00 to 24:00
    else if (hour() >= 20 & hour() <= 24) {
        sleep();
    }

}

// 0:00 to 8:00 and 20:00 to 24:00
function sleep() {
    
    var s = map (minute(), 0, 60, 0, 3600) + second();
    var c = map (hour(), 0, 20, 0, 70);
    var h = map (s, 0, 3600, 0, 90);

    
    color_1 = color (120,29,173);
    color_2 = color (0);

    // ombre 
    for (var y = 0; y < height; y++ ) {
        n = map (y,0, height, 0, 1);
        var color_3 = lerpColor (color_1, color_2, n);
        stroke (color_3);
        line (0, y, width, y);
    }

    stroke (0);
    strokeWeight (8);

    // canvas border lines
    line (1,1,1,449);
    line (1,1,449,1);
    line (1,449,449,449);
    line (449,1,449,449); 

    // window
    fill (11,11,10 + c);
    rect (width/2, height/2 - 180, 200, 200);

    // moon
    noStroke();
    fill (230,230,180);
    ellipse (320,120,100,100);
    fill (11,11,10 + c);
    ellipse (375 - h,120,95,110);

    // bed
    fill (152,118,84);
    strokeWeight (0.5);
    rect (width/2 - 200, height/4 + 210, 300, 100);
    rect (width/2 - 200, height/4 + 310, 40, 40);
    rect (width/2 + 60, height/4 + 310, 40, 40);

    // hair on head
    fill (255);
    ellipse (280,315,100,40);

    // pillow
    fill (0);
    ellipse (280,300,70,45);

    //blanket
    strokeWeight (2);
    fill (123,24,26);
    square (width/2 - 200, height/4 + 170, 50);
    square (width/2 - 150, height/4 + 220, 50);
    square (width/2 - 100, height/4 + 170, 50);
    square (width/2 - 50, height/4 + 220, 50);
    square (width/2, height/4 + 170, 50);
    square (width/2 - 200, height/4 + 270, 50);
    square (width/2 - 100, height/4 + 270, 50);
    square (width/2, height/4 + 270, 50);

    fill (0,65,169);
    square (width/2 - 200, height/4 + 220, 50);
    square (width/2 - 150, height/4 + 170, 50);
    square (width/2 - 100, height/4 + 220, 50);
    square (width/2 - 50, height/4 + 170, 50);
    square (width/2, height/4 + 220, 50);
    square (width/2 - 150, height/4 + 270, 50);
    square (width/2 - 50, height/4 + 270, 50);
    
    // Flickering Zzz's
    zzz();
}

function zzz() {
    
    if (second () % 2 == 0) {
        stroke (255);
        strokeWeight (4);
        line (280,270,320,270);
        line (280,230,320,230);
        line (280,270,320,230);

        push();
        translate (40, -20);
        line (280,270,320,270);
        line (280,230,320,230);
        line (280,270,320,230);
        pop();

        push();
        translate (80, -40);
        line (280,270,320,270);
        line (280,230,320,230);
        line (280,270,320,230);
        pop();
    }   
}

// 8:00 to 20:00
function daytime () {
    
    var s = map (minute (), 0, 60, 0, 3600) + second();
    var m = floor (map (minute (), 2, 60, 2, 10));
    var x = map (s, 0, 3600, 0, 340);
    var c = map (hour (), 3, 20, 0, 100);
    
    
    color_1 = color (25,206,255 - m);
    color_2 = color (0,129,150 - m);

    // ombre
    for (var y = 0; y < height; y++ ) {
        n = map (y,0, height, 0, 1);
        var color_3 = lerpColor (color_1, color_2, n);
        stroke (color_3);
        line (0, y, width, y);
    } 
    
    // moving clouds
    noStroke();
    fill (255);
    circle (300 + c,120,50);
    circle (300 + c,90,50);
    circle (340 + c,120,50);
    circle (340 + c,90,50);
    circle (282 + c,105,50);
    circle (358 + c,105,50);
    
    push();
    translate (72,80);
    circle (300 + c,120,50);
    circle (300 + c,90,50);
    circle (340 + c,120,50);
    circle (340 + c,90,50);
    circle (282 + c,105,50);
    circle (358 + c,105,50);
    pop();

    stroke (0);
    strokeWeight (8);
    
    // walls
    noFill();
    rect (width/2, height/2 - 180, 200, 200);
    
    fill (255,127,80);
    noStroke();
    rect (0, height/6 - 80, 221, 260);
    rect (height/2 - 12, 0, 240, 41);
    rect (0, height/2 + 24, width, 202);
    rect (height/2 + 204, 0, 22, 300);

    
    // countertop
    fill (255);
    rect (0,width/2 + 24, width, 30);

    // cabinets
    fill (86,60,40);
    rect (0,width/2 + 48, width, 200);

    stroke (0);
    noFill();
    strokeWeight (2);
    rect (28,width/2 + 72, 80, 140);
    rect (132,width/2 + 72, 80, 140);
    rect (236,width/2 + 72, 80, 140);
    rect (340,width/2 + 72, 80, 140);

    // doorknobs
    noStroke();
    fill (212,175,55);
    circle (90,330,20);
    circle (150,330,20);
    circle (300,330,20);
    circle (360,330,20);

    strokeWeight (8);

    // canvas border lines
    line (1,1,1,449);
    line (1,1,449,1);
    line (1,449,449,449);
    line (449,1,449,449);

    // "GOOD"
    if (second () % 2 == 0) {
        
        push();
        translate (20,40);
        stroke (0);
        strokeWeight (4);
        line (20,20,40,20);
        line (20,20,20,60); 
        line (20,60,40,60);
        line (40,60,40,40); 
        line (40,40,30,40); 

        line (60,20,80,20);
        line (60,20,60,60); 
        line (60,60,80,60);
        line (80,60,80,20);

        push();
        translate (40,0);
        line (60,20,80,20);
        line (60,20,60,60); 
        line (60,60,80,60);
        line (80,60,80,20); 
        pop();

        line (140,20,140,60);
        line (140,20,160,40);
        line (140,60,160,40);
        pop();

    }

    // "DAY!!!"
    if (second () % 2 == 1) {
        
        push();
        translate (20,40);
        stroke (0);
        strokeWeight (4);
        line (20,80,20,120);
        line (20,80,40,100);
        line (20,120,40,100);
        
        line (60,80,80,80);
        line (60,80,60,120); 
        line (60,100,80,100);
        line (80,120,80,80); 

        line (100,80,110,100); 
        line (110,100,120,80); 
        line (110,100,110,120); 

        line (140,80,140,110);
        line (150,80,150,110);
        line (160,80,160,110);

        point (140,120);
        point (150,120);
        point (160,120);
        pop();
    }  
}

Project 06 Abstract Clock

For my abstract clock, I was having a creative block and had trouble approaching what to make. I thought since most of my other projects have been pretty literal, I would make this one more abstract with a focus on shapes and how they can change based on hours, minutes, and seconds. I was thinking about how time is focused around growing, until it restarts and how that concept could be reflected into my clock. I decided to have “bubbles” that represent hours, minutes, and seconds organized in columns. I wanted these bubbles to slowly grow based on each of the timings. I also made it so the bubble slowly goes from transparent to opaque as seconds, minutes, and hours increase. Originally, I was thinking I wanted a shape inside the bubbles that would turn based on the time, but decided on a line to draw a better connection to a clock. I gave each bubble a line in the center that rotates based on the timing.

project6
//Rachel Legg / rlegg / section C

var col;

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

function draw() {
    //background color changes every hour
    background(0);
    frameRate(15);

    //variables for time
    var sec = second();
    var min = minute();
    var hr = hour();

    strokeWeight(2);

    //Have Bubbles expand with each increment
    //line on each bubble to mimic a clock based on hr, min, sec
    //Hr Row
    for(col = 0; col <= 3/4 * height; col += 120){
        //have hr be yellow
        fill(255, 255, 0, 30 + hr);                  //have opacity grow with time
        stroke(255, 255, 0);
        ellipse(width/6, height/8 + col, 2 * hr);
        //have line in center that moves with change in hr
        push();
        translate(width/6, height/8 + col);
        rotate(radians(-90 + (hr * 15)));                     // 360/24 = 15
        line(0, 0, 10, 10);
        pop();
    }


    //Min Row
    for(col = 0; col <= 3/4 * height; col += 120){
        //have min be pink
        fill(255, 0, 255, 30 + min);                 //have opacity grow with time
        stroke(255, 0, 255);
        ellipse(width/2, height/8 + col, 2 * min);
        //have line in center that moves with change in min
        push();
        translate(width/2, height/8 + col);
        rotate(radians(-90 + (min * 6)));                    // 360/60 = 6
        line(0, 0, 10, 10);
        pop();
    }

    //Sec Row
    for(col = 0; col <= 3/4 * height; col += 120){
        //have sec be blue
        fill(0, 255, 255, 30 + sec);                 //have opacity grow with time
        stroke(0, 255, 255);
        ellipse(5/6 * width, height/8 + col, 2 * sec);
        //have line in center that moves with change in sec
        push();
        translate(5/6 * width, height/8 + col);
        rotate(radians(-90 + (sec * 6)));                   // 360/60 = 6
        line(0, 0, 10, 10);
        pop();
    }

}

Abstract clock

This is my abstract clock, I try to record my schedule in a day. Like during the day, I typed notes, or during the night, I drank coffee. The hour plays a role in changing the background color, the minute plays a role in changing the scene content, and the second plays a role in the flicking of elements.

Abstract Clock 

//Jason Jiang
//Section E


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


function draw() { 
//Setting scenes for different time 
    if(hour()>=0 & hour()<=6){
        sleep() 
    }
    if(hour()>=6 && hour()<=18){
        note()
    }
    if(hour()>=18 && hour()<=24){
        coffee() 
    }
}

//0:00-6:00
function sleep(){
    var secondcount = map(minute(), 0, 60, 0, 3600)+second()
    var c = map(hour(), 0, 6, 0, 100)
    var h = map(secondcount, 0, 3600, 0, 90)

    //Changing background color per hour
    background(80, 100-c, 100)

    //Drawing battery
    noFill();
    strokeWeight(10)
    rect(width/2-25, height/2-50, 50, 100)
    rect(width/2-7.5, height/2-60, 15, 5)
    
    //Changing color and height of battery per second, the battery becomes full per hour
    strokeWeight(0)
    push()
    translate(width/2, height/2)
    rotate(radians(180))
    fill(255-c, c, 0)
    rect(-20, -45, 40, h)
    pop()
    //Drawing lightning
    lightning()
}

//Flickering lightning per second
function lightning(){
    if (second()%2==0){
        push()
        translate(width/2, height/2)
        strokeWeight(8)
        rotate(radians(-10))
        line(10, -25, -10, 0)
        line(-10, 0, 10, 0)
        line(10, 0, -10, 25)
        pop()
    }   
}

//6:00-18:00
function note(x, y, m){
    var secondcount = map(minute(), 0, 60, 0, 3600)+second()
    var m = floor(map(minute(), 0, 60, 0, 10))
    var x = map(secondcount, 0, 3600, 0, 340)
    var y = 10+m*40
    var c = map(hour(), 6, 18, 0, 100)
    //Changing background color per hour
    background(30, c, 100)
    
    //Changing line length per second, a row takes 6 minutes
    fill(50)
    strokeWeight(0)
    rect(25, y, x, 15) 
    strokeWeight(5)

    //Flickering line per second
    if(second()%2==0){
        line(x+30, y-5, x+30, y+20)  
        } 
    //Adding lines for previous minutes
    for(var i=0; i<m; i++){
        strokeWeight(0);
        rect(25, 10+i*40, 340, 15)    
        }
}

//18:00-24:00
function coffee() {
    var secondcount = map(minute(), 0, 60, 0, 3600)+second()
    var c = map(hour(), 18, 24, 0, 100)
    var h = map(secondcount, 0, 3600, 0, 140)
    
    //Changing background color per hour
    background(200, c, 50)

    //Drawing coffee cup
    fill(20, 50, 40);
    strokeWeight(10)
    rect(width/2-50, height/2-50, 100, 150)
    noFill();
    strokeWeight(15)
    rect(width/2-92.5, height/2-10, 40, 60)
    strokeWeight(0)
    fill(255)

    //Changing height of coffee per min
    rect(width/2-45, height/2-45, 90, h)

    //Adding heat
    heat()
}

//Flickering heat per second
function heat(){
    strokeWeight(6)
    noFill()
    var w = width/2 
    var h = height/2
    if (second()%2==0){
        for(i=0; i<3; i++){
            bezier(w-30, h-70, w-20, h-80, w-40, h-100, w-30, h-110)
            w+=30
        }
    }
}