Month: October 2018

sketch

//Kai Zhang
//Section B
//kaiz1@andrew.cmu.edu
//Project-06

var prevSec; //previous second
var msr = 0;//millisecond rollover
var wcol = 0; //wallpaper color
var scol = 0; //second loop color
var mcol = 0; //minute loop color
var hcol = 0; //hour loop color

function setup() {
    createCanvas(600, 600);
    colorMode(HSB, 100);
}

function draw() {
    var h = hour();
    var m = minute();
    var s = second();
    var mils; //millisecond
    var fcd = 0; //frame count decrease


    background(wcol, 40, 30);
    angleMode(RADIANS);

    wcol += 0.1;
    if (wcol > 99) {
        wcol = 0;
    }
    
    strokeWeight(4);
    stroke(20);
    noFill();

    if (prevSec != s) {
        msr = millis();
    }
    prevSec = s;
    var mils = floor(millis() - msr);

    
    //hour loop
    push();
    translate(300, 410);

    stroke(40);
    for (var size = 320; size < 401; size += 20) {
        ellipse(0, 0, size, 100);
    }

    stroke(hcol + 75, 40, 90);
    for (var size = 320; size < 401; size += 20) {
        arc(0, 0, size, 100, -PI / 2, h/12 * 2*PI - PI / 2);
    }

    hcol += 0.1;
    if (hcol > 25) {
        hcol = -75;
    }
    pop()


    //minute loop
    push()
    translate(300, 340);

    stroke(40);
    for (var size = 320; size < 401; size += 20) {
        ellipse(0, 0, size, 100);
    }

    stroke(mcol + 50, 40, 90);
    for (var size = 320; size < 401; size += 20) {
        arc(0, 0, size, 100, -PI / 2, m/60 * 2*PI - PI / 2);
    }


    mcol += 0.1;
    if (mcol > 50) {
        mcol = -50;
    }
    pop()


    //second loop
    push()
    translate(300, 270);

    stroke(40);
    for (var size = 320; size < 401; size += 20) {
        ellipse(0, 0, size, 100);
    }

    stroke(scol + 25, 40, 90);
    for (var size = 320; size < 401; size += 20) {
        arc(0, 0, size, 100, -PI / 2, (s/60 + mils/60000) * 2*PI - PI / 2);
    }

    scol += 0.1;
    if (scol > 75) {
        scol = -25;
    }
    pop()


    
    //mils loop
    push()
    translate(300, 200);
    stroke(77);
    strokeWeight(4);
    arc(0, 0, 320, 100, millis()/1000 * 2*PI, (millis() - 200)/1000 * 2*PI);
    arc(0, 0, 340, 100, (millis() - 100)/1000 * 2*PI, (millis() - 300)/1000 * 2*PI);
    arc(0, 0, 360, 100, (millis() - 200)/1000 * 2*PI, (millis() - 400)/1000 * 2*PI);
    arc(0, 0, 380, 100, (millis() - 300)/1000 * 2*PI, (millis() - 600)/1000 * 2*PI);
    arc(0, 0, 400, 100, (millis() - 400)/1000 * 2*PI, (millis() - 800)/1000 * 2*PI);
    pop()
}

For this project I’m also considering an apporach to do a 3 dimensional abstract clock using 2D primitives. There are 4 sets of loops running on the tracks stacking bottom up and each shows the hour, minute, second, and milisecond. However, the milisecond loops are moving too fast so I rather make it a infinite looping than resetting at each second. The color of the loops and background are also changing the hue constantly, and they’re offest in H value so they’re always in contrast colors.

sketch

/* Jenni Lee
Section E
jennife5@andrew.cmu.edu
Project - 06
*/

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

function draw() {
  var H = hour(); // brightness of the background is controlled by the hour
  var bgr = 174 * (24 - H) / 24; // range of r is 42 to 216
  var bgg = 166 * (24 - H) / 24; // range of g is 73 to 239
  var bgb = 167 * (24 - H) / 24; // range of b is 73 to 240
  background(bgr + 42, bgg + 73, bgb + 73); 
 
 // brightness of grass is controlled by color
  bgr = 173 * (24 - H) / 24; // range of r is 57 to 230
  bgg = 156 * (24 - H) / 24; // range of g is 81 to 237
  bgb = 125 * (24 - H) / 24; // range of b is 51 to 176
  noStroke();
  fill (bgr + 57, bgg + 81, bgb + 51);
  rect (0, 600, 600, 200);

  // tail
  push();
  translate(400, 510);
  var S = second() % 2;
  if (S == 0) { // tail points to different direction depending on even or odd second number
    rotate(60 / PI + PI);
  } else {
    rotate(120 / PI + PI);
  }
  noStroke();
  ellipseMode(CORNER);
  fill (247, 202, 201);
  ellipse(0, 0, 40, 140);
  pop();

  // body
  push();
  translate(300, 570);
  noStroke();
  fill(229, 196, 168);
  ellipse(0, 0, 250, 200);
  pop();

  // face
  push();
  translate(200, 580);
  noStroke();
  fill(239, 208, 172);
  ellipse(0, 0, 200, 150);
  pop();

  //ears
  push ();
  noStroke();
  fill(239, 208, 172); // left ear
  triangle(100, 572, 102, 490, 150, 515); 
  fill (252, 217, 224); // left inner ear
  triangle(108, 561, 110, 510, 138, 528); 

  //right ear
  fill(239, 208, 172); // right ear
  triangle(240, 512, 290, 490, 295, 560); 
  fill (252, 217, 224); // right inner ear
  triangle(250, 521, 282, 506, 285, 553); 
  pop ();

  // eyes. the posiiton of the eye ball is decided by 
  // the minutes, and it circles one round in 60 minutes
  push(); 
  translate(140, 570);
  noStroke ();
  fill(255, 255, 255);
  // left eye
  ellipse(0, 0, 36, 36);
  //left eye ball
  var M = minute();
  angleMode(DEGREES);
  fill(130, 115, 100);
  ellipse(cos(M / 60 * 360 - 90) * 9, sin(M / 60 * 360 - 90) * 9, 18, 18);

  // right eye
  fill(255, 255, 255);
  ellipse(100, 0, 36, 36); 
  // right eye ball
  fill(130, 115, 100);
  ellipse(cos(M / 60 * 360 - 90) * 9 + 100, sin(M / 60 * 360 - 90) * 9, 18, 18);
  angleMode(RADIANS);

  // nose
  fill(130, 115, 100);
  ellipse(50, 20, 10, 10); 

  //blush
  fill(252, 217, 224);
  ellipse(5, 30, 35, 10); // left blush
  ellipse(95, 30, 35, 10); // right blush
  pop();

  // left paw
  push();
  translate(152, 650);
  rotate(40 / PI);
  strokeWeight(3);
  stroke(255);
  fill(239, 208, 172);
  ellipse(0, 0, 80, 40);
  pop();

  // right paw
  push();
  translate(232, 650);
  rotate(-40 / PI);
  strokeWeight(3);
  stroke(255);
  fill(239, 208, 172);
  ellipse(0, 0, 80, 40);
  pop();
}
// The tail moves left and right every second, the eyeballs make a 360 rotation each hour,
// it moves clock wise every minute. The sky gets darker with each hour. It's the brightest
// at the beginning of the day and dark at the end of the day. 

Cats are my favorite animal, so I wanted my abstract clock to be one. This project was highly enjoyable for me, as not only was it a fun challenge to design it, but it was entertaining to fully customize it to my own tastes. Seconds are indicated by the tail moving left and right each second. Minutes are indicated with the eyeballs moving clock wise every minute, completing a 360 rotation by the end of the hour. Hours/time of day is indicated through the ground and sky getting darker with each hour of the day. These two elements are very light in the morning and dark at night, similar to the sun setting.

Process work ^