Category: Project-06-Abstract-Clock

Project 06 – Abstract Clock

For my abstract clock, I chose to create an illustration of chickens in honor of a bunch of chickens I saw sitting in a pine tree the other day. I had a lot of trouble with this project because I’m still not very good at using arrays and loops yet, but I think the end result is pretty cute.

  • Random pieces of corn sprinkle per second.
  • The eating chicken moves every second and crosses the screen every minute.
  • The standing chicken moves every minute and crosses the screen every hour.
  • The background gets darker/more purple every hour into the night and lighter/more green every hour into the day.
Maggie – Abstract Clock
//Maggie Ma
//Section D

var x=0; //x position of walking chicken
var y=140; //y position of walking chicken
var eaty=40; //y position of eating chicken
var h; //hours
var m; //minutes
var s; //seconds

function setup() {
    createCanvas(480, 480);
    noStroke();
    frameRate(1);
}

function draw() {
	
	h=hour();
	m=minute();
	s=second();

	//background changes color every hour and gets darker at night
	if(h<12) {
		background(80,20*h,50);
	} else {
		background(80,255-20*(h-12),50);
	}
	//corn that don't move
	fill(255,221,21);
	ellipse(115,376,8);
	ellipse(280,421,8);
	ellipse(422,359,8);
	ellipse(138,362,8);
	ellipse(73,301,8);
	ellipse(108,433,8);

	//chicken standing walks across screen every hour
	push();
	translate(map(m,0,60,-80,width+50), y);
	WalkingChicken();
	pop();

	//pieces of corn pop up every second
	fill(255,221,21);
	ellipse(random(3,477),random(250,477),8);
	ellipse(random(3,477),random(250,477),8);
	ellipse(random(3,477),random(250,477),8);
	ellipse(random(3,477),random(250,477),8);
	ellipse(random(3,477),random(250,477),8);

	//chicken eating walks across screen every minute
	push();
	translate(map(-s, 0,20,200,width-70), eaty);
	EatingChicken();
	pop();
}

function EatingChicken(x,y) {
	push();
	translate(x,y);
	//beak
	fill(254,183,20);
	arc(248,354,35.434,36.324,radians(150),radians(310),CHORD);
	arc(245,350,20.866,27.618,radians(-90),radians(100),CHORD);
	//feet
	stroke(254,183,20);
	strokeWeight(4);
	line(362,334,352,361);
	line(379,327,366,361);
	line(331,361,381,361);
	//crown
	noStroke();
	fill(198,56,68);
	arc(228,296,59,59.358,radians(-4),radians(150),CHORD);
	arc(241,295,30.434,33,radians(220),radians(400), CHORD);
	arc(252,290,30.434,33,radians(-90),radians(90),CHORD);
	//back tail wing
	fill(50);
	arc(359,167,101.194,111.382,radians(90),radians(270),CHORD);
	arc(368,311,43.28,42.284,radians(-40),radians(160),CHORD);
	//body
	fill(245); 
	arc(297,247,213,199,radians(320),radians(130),CHORD);
	circle(250,335,40);
	//front wing
	fill(50);
	arc(320,253,110.751,111.427,radians(320),radians(130),CHORD);
	//front tail wing
	fill(245);
	arc(391,176,98.952,95.477, radians(135),radians(-45),CHORD);
	arc(353,320,43.299,45.877,radians(-20),radians(160),CHORD);
	triangle(264,349,264,334,288,341);
	//gobbler thing
	fill(198,56,68);
	ellipse(273,353,15.903,15.903);
	triangle(252,354,271,361,271,345);
	//eye
	fill(0);
	circle(244,347,4.771);
	pop();
}

function WalkingChicken(x,y) {
	push();
	translate(x,y);
	//crown
	fill(198,56,68);
	arc(34,-105,46,43,radians(-4),radians(150),CHORD);
	arc(29,-93,40,36,radians(100),radians(-80), CHORD);
	arc(19,-95,40,37,radians(45),radians(225),CHORD);
	//beak
	fill(254,183,20);
	arc(44,-61,30.1,26.455,radians(180),radians(360),CHORD);
	arc(39,-64,30.1,16,radians(0),radians(180),CHORD);
	//feet
	stroke(254,183,20);
	strokeWeight(4);
	line(0,90,0,134);
	line(-12,134,16,134);
	line(15,78,44,78);
	line(44,78,45,100);
	line(45,100,32,109);
	line(32,109,25,103);
	//back tail
	noStroke();
	fill(231,231,233);
	arc(-65,-19,105,102.244,radians(225),radians(405),CHORD);
	//body
	fill(209,210,212);
	arc(0,0,156,163,radians(0),radians(180),CHORD); //234,229
	arc(2,6,151,150, radians(-90),radians(90),CHORD);
	rect(2,-88,45,30,10);
	arc(0,76,44,40,radians(-20),radians(190),CHORD);
	//tail
	arc(-79,6,95.1,91.244,radians(180),radians(360),CHORD);
	//front wing
	fill(231,231,233);
	arc(-3,12,102,102.244,radians(0), radians(180),CHORD);
	//gobbler
	fill(198,56,68);
	ellipse(44,-44,16,16);
	triangle(36,-43,43,-64,52,-43);
	//eye
	fill(0);
	ellipse(39,-69,4.771,4.771);
	pop();
}

To start, I created some sketches on paper, then created my chickens in Illustrator.

Left: My initial sketches
Right: My vector illustrations in Illustrator
11:30 PM : The background is a dark purple.
10:10 AM: The background is a bright green.
9:42 PM: The background is a muted dark green.

Project 06 – Abstract Clock

sketch
/*
 * Eric Zhao
 * ezhao2@andrew.cmu.edu
 *
 * Abstract clock that represents time indirectly
 * through proximity to base units (for ex. if a minute
 * is close to elapsing). The background color indicates
 * the approximate hour and time of day.
 *
 */


var x;
var y ;
var thetaSec;
var thetaMin;
var secondRad = 75;
var minuteRad = 175;
var speedMult; //rate of acceleration
var baseSpeed = 2; //speed of circles at [time unit] = 0;

function setup() {
    thetaSec = -PI;
    thetaMin = -PI;
    thetaHour = -PI;
    createCanvas(600, 600);
    background(220);
    frameRate(60);
}

function draw() {
    //draws the revolving circles and background
    push();
    translate(300, 300);
    BG();
    secondHand();
    minuteHand();
    pop();
}

function secondHand(){
    /*the "hand" is the inner circle that exponentially
    revolves faster as the seconds count grows
    closer to a minute exactly, then resets to the
    base speed when the seconds count goes back to zero. */
    speedMult = pow(second(), 1.75) / 150;
    x = secondRad * cos(radians(thetaSec));
    y = secondRad * sin(radians(thetaSec));
    circle(x, y, 50);
    thetaSec += baseSpeed + speedMult;
    print(speedMult + baseSpeed);
}

function minuteHand(){
    //see comment in secondHand(), works the same but by min/hour.
    speedMult = pow(minute(), 1.75) / 200;
    x = minuteRad * cos(radians(thetaMin));
    y = minuteRad * sin(radians(thetaMin));
    circle(x, y, 50);
    thetaMin += baseSpeed + speedMult;
    print(speedMult + baseSpeed);
}

function BG(){
    //draws a background with a fill color proportional to time.
    let fillR = map(hour(), 0, 11, 30, 255);
    let fillG = map(hour(), 0, 11, 45, 235);
    let fillB = map(hour(), 0, 11, 70, 150);

    if(hour() >= 12){
        fillR = map(24-hour(), 1, 12, 30, 255);
        fillG = map(24-hour(), 1, 12, 45, 235);
        fillB = map(24-hour(), 1, 12, 70, 150);
    }

    background(fillR, fillG, fillB);
    /*Fill conditions:
     *Goes from dark blue to pale yellow if 0 < hour < 12
     *Goes from pale yellow to dark blue if 12 >= hour > 24 
     */

    if(fillR > 190) {
        stroke(39, 58, 115);
        fill(39, 58, 115, 65);
    } else {
        stroke(255);
        fill(255, 65);
    }
    //changes stroke to dark/light based on brightness of background
    
    circle(0, 0, secondRad*2);
    circle(0, 0, minuteRad*2);
}

I was inspired by mob spawners in Minecraft when making this clock. The mob models in spawners spin faster and faster until a mob spawns from it, then it slows down and starts speeding up again until the next mob spawns.

This clock shows how close the next minute is to passing and how soon the next hour will pass, rather than displaying the exact time. The circles rotating the center speed up exponentially as the time nears the next unit. The outer circle represents minutes/hour and the inner one represents seconds/minute. The background also changes color across a gradient every hour (see code comments).


Daytime hours
Nighttime colors

Project 06 Abstract Clock

sketch 

var c; //color
var hourcolor; //color of the hour flower
var mincolor; //color of the minute flower
var seccolor; //color of the second flower
var wintercolor = '#ffffff'; //color of the winter ground
var springcolor = '#c6ed4c'; //color of the spring ground
var summercolor = '#29d359'; //color of the summer ground
var fallcolor = '#f26f16'; //color fo the fall ground

function setup() {
    createCanvas(480, 480);
    hourcolor = color(255,72,72,200); //red
    mincolor = color(255,46,131,200); //pink
    seccolor = color(123,52,214,200); //purple

}

function draw() {
  background('#5e99ef'); //blue sky
  push();
  flower(110,320-10*hour(),hourcolor); //hour flower 
  pop();
  push();
  flower(230,320-4*minute(),mincolor); //minute flower
  pop();
  push();
  flower(350,320-4*second(),seccolor); //second flower
  pop();
  
  noStroke();
  if (month() > 2 & month() <= 5) { //when it is spring--March, April, May 
    fill(springcolor);
    rect(0,width-70,width,70);
  } else if (month() > 5 & month() <= 8  ) { //when it is summer--June, July, August
    fill(summercolor);
    rect(0,width-70,width,70);
  } else if (month() > 8 & month() <= 11) { //when it is fall--September, October, November
    fill(fallcolor);
    rect(0,width-70,width,70);
  } else { //when it is winter--December, January, February
    fill(wintercolor);
    rect(0,width-70,width,70);
  }
}

function flower(x,y,c) { //flower structure
  translate(x,y);
  noStroke();
  fill('#86e55a'); //green
  rect(-2,0,5,500); //flower stem
  ellipse(-10,100,20,10); //stem leaf
  ellipse(10,150,20,10); //stem leaf
  ellipse(-10,200,20,10); //stem leaf
  ellipse(10,250,20,10); //stem leaf
  fill(c);
  for (var i = 0; i < 5; i ++) { //flower petals
    ellipse(0, 0, 20, 70);
    rotate(PI/5);
  }
  fill('#ffd961'); //yellow
  ellipse(0,0,30,30); //flower middle circle
}

Project 6: Abstract Clock

(The illustration file wasn’t loading properly so I had to embed it twice!)

Since Nintendo recently announced that Hyrule Warriors: Age of Calamity is coming out soon, I decided to create a clock inspired by The Legend of Zelda’s Breath of the Wild. The sky changes color depending on the hour, the clouds move across the sky every minute, and pink sparkles appear every second.

breath of the wild
var dusk;
var dawn;
var sparkleX = [];
var sparkleY = [];
var randomW = [];
var randomH = [];
let yPerl = 0.0;

function preload() {
    mySon = loadImage("link_illustration.png");
}

function setup() {
    createCanvas(480, 300);
    //angleMode(DEGREES);

    greenDusk = color(162, 219, 202); //dusk sky color
    yellowDawn = color(252, 246, 211); //dawn sky color
    mountainColor = color(56, 116, 150); //color of the mountains
    cloudColor = color(225, 223, 184); //colod of the clouds
    ledgeColor = color(19, 68, 97); //color of Link's ledge
    ledgeShadow = color(4, 42, 50, 75); //color of ledge shadow
    hyrulePink = color(255, 145, 203); //color of the sparkles

    lerpValue = 0;
    dusk = "nightfall";
    dawn = "daybreak";
    sunlight = "sunrise";
    moonlight = "twilight";

    //sparkles
    for (i = 0; i < 60; i++) {
        sparkleX[i] = random(width);
        sparkleY[i] = random(175, 300);
        randomW[i] = random(3, 6);
        randomH[i] = random(3, 6);
    }
}

function draw() {
    background(0);
    noStroke();
    sky(); //sky incremently changes color based on hour

    push(); //clouds move across sky based on minute
    var m = minute();
    driftingCloud = map(m, 0, 60, 0, width);
    translate(driftingCloud, 0);
    clouds();
    pop();

    mountains(); //randomly generated mountains
    castle(); //castle in the distance

    //sparkles in the horizon
    fill(hyrulePink);

    for (i = 0; i < second(); i++) {
        rect(sparkleX[i], sparkleY[i], randomW[i], randomH[i]);
    }
    
    //ledge that Link stands on
    ledge();

    //illustration of Link
    scale(0.2);
    image(mySon, 1100, 350);

}

//sky incremently changes color each hour
function sky() {
    var h = hour();

    if (dawn === "daybreak") {
        lerpValue = map(h, 23, 0, 0, 1);
    }
    else {
        lerpValue = map(h, 0, 23, 0, 1);
    }

    if (h < 12) {
        lerpValue = map(h, 0, 11.5, 0, 1);
    } else {
        lerpValue = map(h, 11.5, 23, 1, 0);
    }
    
    var skyChange = lerpColor(greenDusk, yellowDawn, lerpValue);
    fill(skyChange);
    rect(0, 0, width, height);
}

//mountain horizon
function mountains() {
    fill(mountainColor);
    beginShape();
    let xPerl = 0;

    for (let x = 0; x <= width; x += 10){
        let y = map(noise(xPerl), 0, 1, 150, 200);
        vertex(x, y);
        xPerl += 0.2;
    }

    yPerl += 0.2;
    vertex(width, height);
    vertex(0, height);
    endShape(CLOSE);
}

//clouds based on minute
function clouds() {
    fill(cloudColor);
    var m = minute();

    for (var c = 0; c <= m; c++) {

        //top left middle cloud
        push();
        scale(0.75);
        translate(0, -50);
        beginShape();
        curveVertex(0, 150);
        curveVertex(10, 140);
        curveVertex(25, 130);
        curveVertex(45, 135);
        curveVertex(70, 115);
        curveVertex(100, 120);
        curveVertex(140, 100);
        curveVertex(190, 140);
        curveVertex(210, 150);
        endShape(CLOSE);
        pop();

        //middle cloud
        push();
        translate(150, -20);
        beginShape();
        curveVertex(0, 150);
        curveVertex(10, 140);
        curveVertex(25, 130);
        curveVertex(45, 135);
        curveVertex(70, 115);
        curveVertex(100, 120);
        curveVertex(140, 100);
        curveVertex(190, 140);
        curveVertex(210, 150);
        endShape(CLOSE);
        pop();

        //top left small cloud
        push();
        scale(0.5);
        translate(-70, -80);
        beginShape();
        curveVertex(0, 150);
        curveVertex(10, 140);
        curveVertex(25, 130);
        curveVertex(45, 135);
        curveVertex(70, 115);
        curveVertex(100, 120);
        curveVertex(140, 100);
        curveVertex(190, 140);
        curveVertex(210, 150);
        endShape(CLOSE);
        pop();

        //bottom left large cloud
        push();
        scale(1.25);
        translate(-90, -20);
        beginShape();
        curveVertex(0, 150);
        curveVertex(10, 140);
        curveVertex(25, 130);
        curveVertex(45, 135);
        curveVertex(70, 115);
        curveVertex(100, 120);
        curveVertex(140, 100);
        curveVertex(190, 140);
        curveVertex(210, 150);
        endShape(CLOSE);
        pop();

        //top right cloud
        push();
        scale(0.75);
        translate(320, -80);
        beginShape();
        curveVertex(0, 150);
        curveVertex(10, 140);
        curveVertex(25, 130);
        curveVertex(45, 135);
        curveVertex(70, 115);
        curveVertex(100, 120);
        curveVertex(140, 100);
        curveVertex(190, 140);
        curveVertex(210, 150);
        endShape(CLOSE);
        pop();

        //top middle cloud
        push();
        scale(0.5);
        translate(50, -110);
        beginShape();
        curveVertex(0, 150);
        curveVertex(10, 140);
        curveVertex(25, 130);
        curveVertex(45, 135);
        curveVertex(70, 115);
        curveVertex(100, 120);
        curveVertex(140, 100);
        curveVertex(190, 140);
        curveVertex(210, 150);
        endShape(CLOSE);
        pop();

        //far left middle cloud
        push();
        translate(-250, -50);
        beginShape();
        curveVertex(0, 150);
        curveVertex(10, 140);
        curveVertex(25, 130);
        curveVertex(45, 135);
        curveVertex(70, 115);
        curveVertex(100, 120);
        curveVertex(140, 100);
        curveVertex(190, 140);
        curveVertex(210, 150);
        endShape(CLOSE);
        pop();
    }
}

//ledge where Link is standing
function ledge() {
    push();
    fill(ledgeColor);
    translate(width/1.8, height + 10);
    beginShape();
    vertex(-30, -50);
    vertex(0, -90);
    vertex(90, -85);
    vertex(130, -40);
    vertex(160, 50);
    vertex(-60, 50);
    endShape(CLOSE);
    pop();

    push();
    fill(ledgeShadow);
    translate(width/1.8, height + 10);
    beginShape();
    vertex(-10, -75);
    vertex(0, -90);
    vertex(90, -85);
    vertex(130, -40);
    vertex(160, 50);
    endShape(CLOSE);
    pop();
}

//castle in the horizon
function castle() {
    fill(mountainColor);
    rect(125, 110, 30, 100); //castle tower
    rect(102, 150, 75, 100); //castle building
    rect(90, 165, 100, 50); //castle ledge
    rect(122.5, 125, 35, 10); //lower level of castle
    triangle(120, 110, 140, 50, 160, 110); //main spire
    triangle(100, 150, 107.5, 110, 115, 150); //left spire
    triangle(165, 150, 172.5, 110, 180, 150); //right spire
    triangle(85, 200, 92.5, 130, 100, 200); //bottom left spire
    triangle(180, 200, 187.5, 130, 195, 200); //bottom right spire

    //windows
    fill(greenDusk);
    rect(135, 110, 5, 10);
    rect(130, 110, 2, 10);
    rect(135, 140, 10, 10);

    //jagged rocks from mountain
    push();
    fill(mountainColor);
    rectMode(CENTER);
    translate(450, 225);
    rotate(PI/1.2);
    rect(0, 0, 50, 250);
    rotate(PI/4.0);
    rect(415, -150, 40, 250);
    rect(200, -50, 35, 250);
    pop();
}
Sketch of the clock’s features.
Quick sketch of Link I drew for this project.

Project 06 – Abstract Clock

I recently saw a tv show that talked about fish. It reminded me of my goldfish I used to take care of for 7 years, but died just a few months before I graduated high school. In memories of my goldfish, I wanted to create an abstract clock of a fish tank in space on an unknown planet. Each tank represents hours, minutes, and seconds as the water fills up the tank.

sketch
//Stefanie Suk
//ssuk@andrew.cmu.edu
//15-104 Section D

var fishx = 15; //width of fish
var fishy = 10; //height of fish

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

function draw() {
    var h = hour();
    var m = minute();
    var s = second();

    var starx = random(0, 600);   //random x position of stars
    var stary = random(0, 250);   //randolm y position of stars

    background(50); //background color

    //moon and stars
    fill("yellow");
    ellipse(70, 70, 100, 100);  //moon at top left 
    ellipse(starx, stary, 5, 5);  //stars randomly placed

    //light brown base of planet
    fill(184, 165, 162)
    rect(0, 250, width, 200);  

    //darker brown oval holes on planet, left to right
    fill(158, 142, 140);
    strokeWeight(6);
    stroke(0);
    ellipse(30, 300, 100, 40);
    ellipse(100, 380, 100, 40);
    ellipse(300, 290, 100, 40);
    ellipse(400, 350, 100, 40);
    ellipse(600, 280, 100, 40); 

    //mapping time to fit in the fish tank
    mS = map(s, 0, 70, 0, 110);
    mM = map(m, 0, 70, 0, 110);
    mH = map(h, 0, 30, 0, 110); 
    
    //hour tank on left, dark blue
    strokeWeight(5);
    stroke(255);
    fill(31, 56, 240);
    rect(120, 150, 100, 100);  
    
    //minute tank in middle, dark blue
    stroke(255);
    fill(31, 56, 240);
    rect(260, 150, 100, 100); 
    
    //second tank on right, dark blue
    stroke(255);
    fill(31, 56, 240);
    rect(400, 150, 100, 100);  

    //three fish in each tank right to left
    strokeWeight(1);
    stroke(0);
    fill(255, 169, 157);
    ellipse(420, 230, fishx, fishy);
    triangle(427, 230, 435, 225, 435, 235);
    ellipse(320, 200, fishx, fishy);
    triangle(313, 200, 305, 195, 305, 205);
    ellipse(190, 215, fishx, fishy);
    triangle(197, 215, 205, 210, 205, 220);  

    //time rect in tank changing upwards, light blue
    noStroke();
    fill(157, 185, 255);
    rect(122.5, 152, 95, 95 - mH); //hour
    fill(157, 185, 255); 
    rect(262.5, 152, 95, 95 - mM); //minute
    fill(157, 185, 255);
    rect(402.5, 152, 95, 95 - mS); //second

}
Sketch

Project 6 – Clock

sketchDownload
//Se A Kim
//Section D
//seak

var x = [];
var y = [];
var dx = [];
var dy = [];
var c = [];


function setup() {
    createCanvas(400, 400);
    for (var i = 0; i < 100; i ++){
        x[i] = random(width);
        y[i] = random(height);
        dx[i] = random(-5,5);
        dy[i] = random(-5,5);
        c[i] = color(random(255), random(255), random(255));
    }
    frameRate(20);
}

function draw() {
    background(0);

    //drawing circles in the background
    noStroke();
    for(i = 0; i < 50; i++){
        fill(c[i], 100, 100);
        ellipse(x[i], y[i], 20);
        x[i] += dx[i];
        y[i] += dy[i];
        if(x[i] > width){
            x[i] = 0;
        } else if (x [i] < 0){
            x[i] = width;
        } 
        if (y[i] > height){
            y[i] = 0;
        } else if (y[i] <0){
            y[i] = height;
        }
    }

    //clock ellipses
    var s = second();
    var m = minute();
    var h = hour();

    push();
    translate(200, 200);
    noStroke();

    //second circle
    let sAngle = map(s, 0, 60, 0, 360);
    var sx = 50 * cos(radians(sAngle));
    var sy = 50 * sin(radians(sAngle));
    fill(c[i]);
    rotate(radians(-90));
    ellipse(sx, sy, 100);

    //minute circle
    let mAngle = map(m, 0, 60, 0, 360);
    var mx = 50 * cos(radians(mAngle));
    var my = 50 * sin(radians(mAngle));
    fill(255, 100, 100, 100);
    rotate(radians(90));
    ellipse(mx, my, 80);

    //hour circle
    let hAngle = map(h, 0, 60, 0, 360);
    var hx = 50 * cos(radians(hAngle));
    var hy = 50 * sin(radians(hAngle));
    fill(255, 255, 255, 100);
    rotate(radians(10));
    ellipse(hx, hy, 100);

    pop();
}

For this project, I wanted to practice some of our in class exercises/lectures and fully understand the cos and sin (polar coordinates) and on arrays. I integrated these topics with the clock.

Project – 06 – abstract clock

sketch
    // Fangzheng Zhu
    // Section D
    // jtimczyk@andrew.cmu.edu
    // Project-06-abstract clock



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


function draw (){
    angleMode(DEGREES);
    let hr = hour();
    let mn = minute();
    let sc = second();

    push();
    translate(240,240);
    rotate (-90);
    strokeWeight(8);

    // second circle
    stroke(255,100,150);
    noFill();
    var end1 = map(sc, 0, 60, 0, 360);
    arc(0,0,300,300,0,end1);

    //minute circle
    stroke(150,100,255);
    var end2 = map(mn, 0, 60, 0, 360);
    arc(0, 0, 280, 280, 0, end2);

    //hour circle
    stroke(150,255,100);
    let end3 = map(hr%12, 0, 12, 0, 360);
    arc(0, 0, 260, 260, 0, end3);
    pop();

    


    //face
    //black eyebrows 
    stroke(255);
    fill(0);
    rectMode(CENTER);
    rect(170, 170, 25, 5, 15);
    rect(310, 170, 25, 5, 15);
  
    //eyes
    ellipseMode(CENTER);
    ellipse(170, 200, 20, 20);
    ellipse(310, 200, 20, 20);
  
    //nose
    noStroke();
    strokeWeight(6);
    fill(204, 95, 95);
    rect(240, 230, 15, 30, 20);
  
    //lips
    stroke(250);
    noFill();
    rect(240, 280, 60, 20, 20);
  
    //teeth
    line(240, 270, 240, 290);
    line(240 - 15, 270, 240 - 15, 290);
    line(240 + 15, 270, 240 + 15, 290);

    //face animation
    if (sc % 2 == 0) {
    //eyebrows raise
    //cover old eyebrows w white
    stroke(0);
    strokeWeight(8);
    rectMode(CENTER);
    rect(170, 170, 25, 5, 15);
    rect(310, 170, 25, 5, 15);
    //new raised eyebrows
    strokeWeight(5);
    stroke(255);
    rect(170, 170, 25, 5, 15);
    rect(310, 170, 25, 5, 15);
    
    //mouth becomes smaller
    //cover old mouth
    //lips
    strokeWeight(10);
    stroke(0);
    noFill();
    rect(width/2, 280, 60, 20, 20);
    //teeth
    line(width/2, 270, width/2, 290);
    line(width/2 - 15, 270, width/2 - 15, 290);
    line(width/2 + 15, 270, width/2 + 15, 290);
    //new small mouth
    strokeWeight(6);
    stroke(255);
    ellipse(width/2, 280, 20,20);
  }
  
}

Project 06: Abstract Clock

For my abstract clock I built it off the idea that we (or at least I), run on coffee. The day starts with a cup of coffee and is essentially continuously fueled by yet another cup. The clock begins with 12 empty cups on the screen that represent each hour in the AM or PM. Then with each minute – the coffee level increases in the cup until its filled, capped, and sleeved. Ticking along is a coffee bean counter that is representative of each second that goes by (the brewing/drip process) that helps fill the cup.

During the AM hours, the background represents a daytime sky with a sun. Then during PM hours, there is a night sky with a moon and randomly generated stars.

sketch

//Helen Cheng
//helenc1@andrew.cmu.edu
//Section C
//Project-06

var mugX = [];
var currH;
var starX = [];
var starY = [];

function setup() {
    createCanvas(480, 300);
    rectMode(CENTER);
    //initializes array with num of cups
    for (h=0; h<12; h++) {
        mugX[h] =  h*40 + 20
    }

    for (i=0; i< 20; i++) {
        starX[i] = random(width);
        starY[i] = random(height);
    }
}

function draw() {
    //colors sky based on AM or PM
    if(hour()<12){
        dayTime();
    }
    else{
        nightTime();
    }

    //draws table
    fill(235, 227, 218);
    rect(240, 250, 480, 200);

    //draws a coffee bean per second
    for(s =0; s<second(); s++){
        coffRow = Math.floor(s/20);
        coffeeBean(45 + 20*(s-20*coffRow), 200 + 30*coffRow);
    }
  
    //draws coffee cups depicting hours
    currH = hour()%12;
    for (h=0; h<12; h++) {
        if (h<currH){
          fill(92, 48, 7);
          strokeWeight(1);
          rect(mugX[h], height/2, 30, 50); 
          strokeWeight(0);
          ellipse(mugX[h], height/2 + 25, 30, 10);
          //cap
          fill(191, 155, 187);
          rect(mugX[h], height/2-25, 35, 10);
          ellipse(mugX[h], height/2-30, 25, 10);
          //cup sleeve
          rect(mugX[h], height/2, 35, 20);
        }
        else{
          fill(240, 234, 223);
          strokeWeight(1);
          rect(mugX[h], height/2, 30, 50); 
          arc(mugX[h], height/2 + 25, 30, 10, 0, PI);
        }
    }
  
    //fills coffee cup per minute
    for (m=0; m<minute(); m++) {
        strokeWeight(0);
        fill(92, 48, 7);
        ellipse(hour()%12*40 + 20, (height/2+25)-(m*50/60), 30, 10);
    }
}

function coffeeBean(x,y){
    strokeWeight(2);
    fill(92, 48, 7);
    ellipse(x, y, 10, 20);
    line(x, y-10, x, y+10);
} 

function nightTime() {
    background(35, 41, 94);
    fill(242, 242, 233);
    circle(width/3, height/5, 30);

    for (i=0; i< 20; i++) {
        circle(starX[i], starY[i], 5);
    }
}

function dayTime() {
    background(152, 210, 237);
    fill(245, 205, 103);
    circle(width/3, height/5, 40);
}

sketch of concept

Abstract Clock

sketchDownload
//Ian Lippincott
//ilippinc@andrew.cmu.edu
//Section: D
//Project-06-A

var c1;
var c2;
var s = second();

function setup() {
    createCanvas(480, 480);
    //Define background colors
    c1 = color(17, 19, 42);
    c2 = color(84, 17, 102);
    
}



function draw() {
	//Background
	setGradient(c1, c2);
	//Stars
	stroke(255);
	strokeWeight(2);
	point(30, 50);
	point(400, 80);
	point(250, 30);
	point(35, 200);
	point(100, 420);
	point(10, 370);
	point(400, 400);
	point(270, 430);
	noStroke();
	//Moon base
	//Light Moon Color
	fill(253, 242, 199);
	circle(240, 240, 320);

	//Moon shadow
	//Dark Moon Color
	fill(226, 199, 145);
	beginShape();
	vertex(240, 80);
	bezierVertex(25, 87, 25, 393, 240, 400);
	bezierVertex(100, 393, 100, 87, 240, 80);
	endShape();

	//Dark Spots
	circle(220, 260, 60);
	circle(320, 200, 25);
	circle(240, 140, 10);
	circle(180, 180, 10);
	circle(200, 200, 10);
	circle(340, 270, 20);
	circle(320, 290, 8);
	circle(290, 340, 20);
	circle(180, 330, 15);

	//Light Spots
	fill(253, 242, 199);
	circle(130, 220, 50);
	circle(145, 165, 20);
	circle(155, 320, 40);

	//Hour Counting Shadow
	fill(226, 199, 145, 170);
	beginShape();
	vertex(240, 80);
	bezierVertex(25, 87, 25, 393, 240, 400);
	bezierVertex(25 + hour() * (320 / 24), 393, 25 + hour() * (320 / 24), 87, 240, 80);
	endShape();

	//Minute Counting Cloud
	drawCloud(minute() * 8, 350);

	//Second Counting Witch
	drawWitch(-60 + second() * 480 / 60, 300);



}


//Makes Gradient Background
function setGradient(c1, c2) {
	noFill();
	for (var b = 0; b < height; b++) {
		var inter = map(b, 0, height, 0, 1);
		var c = lerpColor(c1, c2, inter);
		stroke(c);
		line(0, b, width, b);
	}
}


function drawCloud (x, y) {
	push();
	fill(80, 58, 96);
	translate(x, y);
	rect(0, 0, 120, 30, 12);
	rect(10, 10, 170, 30, 10);
	rect(-20, 20, 100, 30, 15)
	rect(30, 30, 100, 30, 20);
	rect(100, 20, 100, 20, 15);
	rect(100, 30, 140, 10, 15);
	pop();
}

function drawWitch (x, y) {
	translate(x, y);
	fill(39, 27, 53);
	ellipse(36, 48, 48, 20);
	strokeCap(ROUND);
	strokeWeight(4);
	stroke(39, 27, 53);
	line(36, 48, 140, 48);
	strokeCap(SQUARE);
	strokeWeight(1);
	beginShape();
	vertex(36, 38);
	bezierVertex(27, 36, 18, 40, 0, 47);
	bezierVertex(18, 55, 27, 60, 40, 50);
	endShape();
	angleMode(DEGREES);
	push();
	rotate(30);
	ellipse(95, -5, 32, 18);
	pop();
	push();
	rotate(-35);
	ellipse(60, 75, 32, 18);
	pop();
	beginShape();
	vertex(89, 18);
	bezierVertex(82, 26, 65, 29, 50, 28);
	bezierVertex(60, 30, 70, 38, 75, 45);
	endShape();
	beginShape();
	vertex(106, 21);
	vertex(108, 28);
	vertex(110, 34);
	vertex(102, 40);
	vertex(100, 38);
	vertex(95, 21);
	endShape();
	push();
	rotate(80);
	rect(40, -98, 25, 3);
	pop();
	push();
	rotate(30);
	rect(95, -40, 5, 3);
	pop();
	push();
	rotate(20);
	ellipse(105, -29, 12, 15);
	pop();
	beginShape();
	vertex(105, 15);
	bezierVertex(98, 10, 95, 8, 95, 3);
	bezierVertex(95, 4, 100, 6, 106, 2);
	endShape();
	


}

For this project, I wanted to create a clock that took inspiration from the Studio Ghibli movie Kiki’s Delivery Service. I make my design first in Illustrator.

Project-06: Abstract Clock

For the Abstract Clock project, I used a grid of 24 circles to denote the hour and the red circle as the second hand

https://editor.p5js.org/ssahasra/full/YVNbtFtzJ

[the p5.js embed code was not rendering so I uploaded a video of the p5.js preview]

https://editor.p5js.org/ssahasra/sketches/YVNbtFtzJ