Category: Project-06-Abstract-Clock

 

sketch

// Catherine Coyle
// ccoyle@andrew.cmu.edu
// Section C
// Project 6 - Abstract Clock


var notes = [];
var audience = [];
var mouthY = 120;
var dir = .3;

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

function draw() {
  var H = hour() % 12;
  var M = minute();
  var S = second();

  // this accounts for an off by 1 error that happens in the afternoon
  if (hour() > 12) {
    H = (hour() % 12) - 1;
  }


  // resetting the storage of notes/audience members every
  // new minute/new hour
  if (S == 0) {
    notes = [];
  }

  if (M == 0) {
    audience = [];
  }

  // the basic bg art of the clock is gonna be really complicated
  // so to keep draw() from getting too messy im doing it 
  // in another function
  drawBG();

  // generating randomized notes
  for(var i = 0; i < S; i++) {
    // only add on one per draw call so its not
    // generating a ton of notes every second
      if (i == notes.length) {
        notes.push([random(15,width-10), random(height / 2), 
          random(-3,3), random(-3,3), 1, 1]);
      }
  }

  // do same thing for minutes
  for(var i = 0; i < M; i++) {
      if (i == audience.length) {
        audience.push([random(20, width - 20), random(height / 2 + 80, height - 20)]);
      }
  }


  // i want to draw the notes and have them float around!
  for(var i = 0; i < notes.length; i++) {
      // 0 is x, 1 is y, 2 is xvel, 3 is yvel, 4 is xdir, 5 ydir
      notes[i][0] += notes[i][4] * notes[i][2];
      if (notes[i][0] > width - 10 || notes[i][0] < 15) {
        notes[i][4] = -1 * notes[i][4]
      }
      notes[i][1] += notes[i][5] * notes[i][3];
      if (notes[i][1] > height / 2 + 20 || notes[i][1] < 0) {
        notes[i][5] = -1 * notes[i][5];
      }
      // this whole thing is just basic movement stuff
      // but it looks more complicated bc the values are stored in
      // nested lists
      drawNote(notes[i][0], notes[i][1]);
  }

  // partially hardcoding drawing locations for coffee cups (hours)
  for(var i = 0; i <= H; i++) {
      if (i < 3) {
        drawCoffee(25 + i*45, height / 2 + 20);
      }
      if ((i >= 3) & (i < 5)) {
        drawCoffee(50 + (i - 3) * 45, height / 2 - 23);
      }
      if (i == 5) {
        drawCoffee(75 + (i - 5) * 45, height / 2 - 65);
      }
      if ((i > 5) & (i < 9)) {
        drawCoffee(width - 10 - (i - 5) * 45, height / 2 + 20);
      }
      if ((i >= 9) & (i < 11)) {
        drawCoffee(width - 35 - (i - 8) * 45, height / 2 - 23);
      }
      if (i == 11) {
        drawCoffee(width - 105, height / 2 - 65);
      }
  }

  // i want him to be in front of the music
  drawKK();

  // the audience (minutes) are randomized in front of him
  for(var i = 0; i < audience.length; i++) {
      drawAudience(audience[i][0], audience[i][1]);
  }

  // i want his mouth to move as he sings!
  mouthY += dir;
  if (mouthY > 128) {
    dir = -dir;
  }
  if (mouthY < 120) {
    dir = -dir;
  }

  // drawing the actual mouth
  fill(0);
  stroke(0);
  strokeWeight(3);
  line(width / 2, 105, width / 2, 115);
  line(width / 2, 115, width / 2 + 10, 120);
  line(width / 2, 115, width / 2 - 10, 120)
  noStroke();
  quad(width / 2 + 10, 120, width / 2, 115, width / 2 - 10, 120, width / 2, mouthY);

  // i want him to blink too
  drawEyes(S);

  drawSpotlight();

}



// everything below here is less coding magic and
// more magic numbers for graphics
function drawBG() {
    noStroke();
    background(193, 120, 51);
    // platform top
    fill(197, 155, 113);
    rect(0, height / 2 + 40, width, 200);
    // platform front
    fill(132, 62, 11);
    rect(0, height / 2 + 70, width, 200);
}

function drawKK() {
    // stool legs
    fill(209, 175, 66);
    rect(width / 2 - 60, height / 2, 20, 60);
    rect(width / 2 + 40, height / 2, 20, 60);
    fill(201, 146, 58); // back leg
    rect(width / 2 - 10, height / 2, 20, 45);
    // stool
    fill(201, 146, 58); // stool shadow
    ellipse(width / 2, height / 2 + 3, 150, 38);
    fill(209, 175, 66); // this is the main stool color
    ellipse(width / 2, height / 2, 150, 30);
    // kk body
    fill(255);
    ellipse(width / 2, 180, 90, 120)
    fill(247, 242, 234); // kk shadow color
    ellipse(width / 2, 110, 68, 68);
    // kks head
    fill(255);
    ellipse(width / 2, 75, 90, 90);
    ellipse(width / 2, 100, 70, 70);
    // eyebrowsss
    fill(0);
    ellipse(width / 2 + 22, 65, 23, 25);
    ellipse(width / 2 - 22, 65, 23, 25);
    fill(255);
    ellipse(width / 2 + 22, 70, 24, 15);
    ellipse(width / 2 - 22, 70, 24, 15);
    // ears
    noStroke();
    fill(255);
    triangle(width / 2 + 40, 40, width / 2 + 60, 40, width / 2 + 57.5, 70);
    triangle(width / 2 - 40, 40, width / 2 - 60, 40, width / 2 - 57.5, 70);
    // right leg
    ellipse(width / 2 + 25, height / 2 - 10, 35, 100);
    fill(247, 242, 234);
    ellipse(width / 2 + 30, height / 2 + 40, 30, 30);
    fill(255);
    ellipse(width / 2 + 30, height / 2 + 35, 30, 30);
    //left leg
    fill(255);
    ellipse(width / 2 - 15, height / 2 - 5, 70, 35);
    fill(247, 242, 234);
    ellipse(width / 2 + 18, height / 2, 20, 28);
    fill(255);
    ellipse(width / 2 + 15, height / 2, 20, 30);
    // guitar neck
    fill(160, 109, 27);
    rect(width / 2, height / 2 - 60, 130, 20);
    fill(102, 69, 17);
    rect(width / 2 + 120, height / 2 - 62.5, 30, 25);
    fill(183, 177, 167); // little knobs at the end
    ellipse(width / 2 + 125, height / 2 - 65, 4, 4);
    ellipse(width / 2 + 135, height / 2 - 65, 4, 4);
    ellipse(width / 2 + 145, height / 2 - 65, 4, 4);
    ellipse(width / 2 + 125, height / 2 - 35, 4, 4);
    ellipse(width / 2 + 135, height / 2 - 35, 4, 4);
    ellipse(width / 2 + 145, height / 2 - 35, 4, 4);
    // guitar body
    fill(209, 175, 6);
    beginShape();
    curveVertex(192, 220);
    curveVertex(181, 188);
    curveVertex(187, 160);
    curveVertex(199, 153);
    curveVertex(221, 156);
    curveVertex(234, 163);
    curveVertex(247, 162);
    curveVertex(256, 160);
    curveVertex(267, 167);
    curveVertex(277, 188);
    curveVertex(277, 205);
    curveVertex(268, 213);
    curveVertex(254, 214);
    curveVertex(239, 213);
    curveVertex(228, 217);
    curveVertex(210, 221);
    curveVertex(185, 211);
    curveVertex(181, 188);
    curveVertex(183, 173);
    endShape();
    // guitar details
    fill(175, 123, 40); // background thing
    ellipse(width / 2 + 3, height / 2 - 45, 30, 20);
    fill(102, 69, 17); // hole
    ellipse(width / 2 + 10, height / 2 - 52, 25, 25);
    ellipse(width / 2 - 30, height / 2 - 52, 10, 25);
    // kks hands
    fill(255);
    ellipse(width / 2 - 55, height / 2 - 75, 30, 30);
    ellipse(width / 2 + 70, height / 2 - 35, 30, 30);
}

function drawCoffee(x, y) {
    // mug
    noStroke();
    fill(255);
    rect(x, y, 30, 40);
    ellipse(x + 15, y, 30, 5);
    ellipse(x + 15, y + 40, 30, 5);
    // handle
    stroke(255);
    strokeWeight(5);
    noFill();
    ellipse(x, y + 20, 20, 20);
    // coffee
    noStroke();
    fill(132, 62, 11);
    ellipse(x + 15, y, 25, 2);
}

// will draw music note at given coords
function drawNote(x, y) {
  fill(0);
  stroke(0);
  strokeWeight(5);
  line(x, y, x, y + 20);
  noStroke();
  ellipse(x - 5, y + 20, 15, 10);
  triangle(x, y-2.25, x, y + 5.75, x + 12, y + 1.75);
}

// will draw audience member at coords
function drawAudience(x, y) {
  noStroke();
  fill(239, 239, 208);
  ellipse(x, y-1, 48, 50);
  fill(48, 49, 51);
  ellipse(x, y, 50, 50);
  fill(0);
  ellipse(x, y + 3, 46, 46);
}

function drawEyes(S) {
    if (S % 5 == 0) {
      fill(0);
      ellipse(width / 2, 105, 15, 10);
      strokeWeight(3);
      stroke(0);
      noFill();
      beginShape();
      curveVertex(width / 2 + 11, 85);
      curveVertex(width / 2 + 11, 85);
      curveVertex(width / 2 + 22, 88);
      curveVertex(width / 2 + 34, 85);
      curveVertex(width / 2 + 34, 85);
      endShape();
      beginShape();
      curveVertex(width / 2 - 11, 85);
      curveVertex(width / 2 - 11, 85);
      curveVertex(width / 2 - 22, 88);
      curveVertex(width / 2 - 34, 85);
      curveVertex(width / 2 - 34, 85);
      endShape();

    } else {
      // eyes and nose
      fill(0);
      ellipse(width / 2 + 22, 75, 15, 15);
      ellipse(width / 2 - 22, 75, 15, 15);
      ellipse(width / 2, 105, 15, 10);
      //eyelids
      strokeWeight(3);
      stroke(0);
      beginShape();
      curveVertex(width / 2 + 11, 71);
      curveVertex(width / 2 + 11, 71);
      curveVertex(width / 2 + 22, 68);
      curveVertex(width / 2 + 34, 71);
      curveVertex(width / 2 + 34, 71);
      endShape();
      beginShape();
      curveVertex(width / 2 - 11, 71);
      curveVertex(width / 2 - 11, 71);
      curveVertex(width / 2 - 22, 68);
      curveVertex(width / 2 - 34, 71);
      curveVertex(width / 2 - 34, 71);
      endShape();
    }
}

function drawSpotlight() {
  noStroke();
  fill(0, 0, 0, 30);
  quad(0, 0, width / 2 - 70, 0, width / 2 - 150, height / 2 + 70, 0, height / 2 + 70);
  quad(width, 0, width / 2 + 70, 0, width / 2 + 150, height / 2 + 70, width, height / 2 + 70);
  rect(0, height / 2 + 70, width, 200);
}

I simultaneously had a really fun time with this project while I’m also extremely happy I’m finished.

Anyone who’s played the Nintendo game Animal Crossing will recognize this character as KK Slider. Animal Crossing has always been one of my favorite series, and I thought that it was fitting to do a project related to it for this assignment because the game plays in real time as well.

The musical notes represent seconds, audience members minutes, and coffee mugs hours.

I had a lot more trouble with this than I expected too. I got stuck on more than a few off by one errors, and its probably the most graphically complex project I’ve made for this class so far. I had a really hard time with plotting out the acoustic guitar (it’s still a bit lopsided but much better now). I ended up writing a program that would let me click on the screen where I wanted to place my dots and then would print the array of coordinates. It also removed the most recent coordinate when you clicked a key because it was very easy to mess up, and I didn’t want to have to start over entirely.

Altogether this project was fun and I’m really proud of what I made! (My code is super long so I’m crossing my fingers for no missed style errors.)

abstractClock

//Justin Yook
//jyook@andrew.cmu.edu
//Section C
//Project 06

var prevSec;
var millisRolloverTime;

var sizeS = []; // stores sizes for each seconds raindrop drawn
var xS = []; // stores x coordinates for seconds raindrop
var yS = []; // stores y coordinates for seconds raindrop

var sizeM = 0; // starting size of minute raindrop
var sizeH = 0; // starting sizse of hour raindrop

function setup() {
    createCanvas(300, 300);
    background(164, 194, 205);
}

function draw() {
    var S = second(); // keeps track of each second 
    var M = 0; // keeps track of each minute
    var H = 0; // keeps track of each hour

    // make sure that the second matches up properly with milliseconds passed
    if (prevSec != S) {
        millisRolloverTime = millis();
    }
    prevSec = S;
    var mils = floor(millis() - millisRolloverTime);

    // i represents current seconds raindrop
    for (var i = 0; i < S; i++) {
        var rxS = random(0, 300); // random x location of seconds raindrop
        var ryS = random(0, 300); // random y location of seconds raindrop
        xS.push(rxS); // append random x location of seconds raindrop to xS array
        yS.push(ryS); // append random y location of seconds raindrop to yS array

        var osizeS = 0; // all raindrops have size of 0 before expanding
        sizeS.push(osizeS); // append size of seconds raindrop to sizeS array


        fill(75, 105, 125, 200);
        noStroke();
        ellipse(xS[i], yS[i], sizeS[i], sizeS[i]);
        sizeS[i] += 1;
        
        // limit size of second raindrop size
        if (sizeS[i] > 40) {
            sizeS[i] = 40;
            fill(164, 194, 205);
            rect(0, 0, width, height);
        }

        // if second() reaches 59 seconds
        if (S % 59 == 0) {
            sizeS = [];
            xS = [];
            yS = [];
            M += 1; 

            // draw minute raindrop
            fill(75, 105, 125, 200);
            ellipse(width/2, height/2, sizeM, sizeM);
            sizeM += 1;

            // limit size of minute raindrop
            if (sizeM > 80) {
                sizeM = 80;
            }

            // if M reaches 59 minutes
            if (M % 59 == 0) {

                // draw hour raindrop
                fill(75, 105, 125, 200);
                ellipse(width/2, height/2, sizeH, sizeH);
                sizeH += 1;

                // limit size of hour raindrop
                if (sizeH > 120) {
                    sizeH = 120;
                }
            }
        }
    }
}

For this project, I tried to imitate raindrops falling into a pond. Every second, a small raindrop falls. And once it is one minute, a bigger raindrop appears. The hour raindrop follows the same idea. This project was the most difficult by far in my opinion, because I had to fully understand arrays to utilize it properly.

/* Hannah Cai
Section C
hycai@andrew.cmu.edu
Project-06-Abstract Clock
*/

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

function draw() {
    //background
    //wall
    noStroke();
    fill(222, 255, 251);
    rect(0, 0, 480, 420);
    //table
    fill(255, 192, 224);
    rect(0, 380, 480, 90);

    //tv
    //antennae base
    fill(0);
    ellipse(233, 165, 40, 40); 
    //antennae
    stroke(0);
    strokeWeight(2);
    line(185, 35, 220, 150); 
    line(285, 35, 245, 150); 
    //antennae tips
    strokeWeight(5);
    point(185, 35); 
    point(285, 35); 
    //feet
    noStroke();
    fill(255);
    rect(115, 408, 20, 10, 0, 0, 3, 3); 
    rect(340, 408, 20, 10, 0, 0, 3, 3); 
    //base
    fill(40);
    rect(104, 398, 265, 10); 
    //body
    rect(66, 165, 345, 233, 13, 13, 25, 25); 
    fill(0);
    rect(76, 172, 325, 220, 13, 13, 25, 25);
    //screen
    noStroke();
    fill("White");
    rect(108, 213, 192, 138, 25, 25, 28, 28); 
    //control bar
    fill(80);
    rect(327, 185, 45, 190, 3, 3, 3, 3); 
    fill(0);
    rect(329.5, 269, 40, 11);
    rect(329.5, 283, 40, 90);
    //knob 1
    fill(0);
    ellipse(350, 207, 36, 36);
    fill(80);
    ellipse(350, 207, 12, 12); 
    stroke(0);
    strokeWeight(2);
    line(350, 188, 350, 220);
    //knob 2
    fill(0);
    ellipse(350, 247, 30, 30);
    fill(80);
    ellipse(350, 247, 8, 8);
    line(350, 230, 350, 233);
    //other knobs
    fill(40);
    ellipse(387, 196, 14, 14);
    ellipse(387, 216, 11, 11);
    noFill();
    stroke(255);
    strokeWeight(1);
    ellipse(387, 271, 8, 8);
    ellipse(387, 312, 8, 8);
    ellipse(387, 354, 8, 8);

    //time variables
    // var H = hour();
    // var M = minute();
    // var S = second();
    var H = hour();
    var M = minute();
    var S = second();
    //maps time to screen width
    var mappedH = map(H, 0, 24, 0, 192);
    var mappedM = map(M, 0, 60, 0, 192);
    var mappedS = map(S, 0, 60, 0, 192);
    //color blocks
    push();
    blendMode(DIFFERENCE); //overlays the screen colors
    noStroke();
    fill("Red");
    rect(108, 213, mappedH, 138);
    fill("Green");
    rect(108, 213, mappedM, 138);
    fill("Blue");
    rect(108, 213, mappedS, 138);
    pop();

    //screen border
    noFill();
    stroke(0);
    strokeWeight(20);
    rect(98, 205, 212, 153, 32, 32, 38, 38); 
    stroke(40);
    strokeWeight(2);
    rect(90, 200, 227, 163, 4, 4, 7, 7);

}

For this project, I was initially planning to just have a simple square with overlaid colors, but while writing that code, I was reminded of old tvs, especially those with glitched screens:

I was inspired by that idea, so I sketched up a tv in Illustrator, put it into p5, and then modified my code so that the colors would fit to the screen.

The color layers are red, blue, and green (RBG) under the blend mode “difference,” so as they overlap and interact with each other, the screen’s color palette changes. The colors on the screen do not change only by the minute, but also by the time of day (based on the position of the hours, minutes, and seconds layers in relationship to each other).

sketch

/* Alexandra Kaplan
   aekaplan@andrew.cmu.edu
   Section C
   Project - 06
*/

var dropY = 100;
var dropX = 150
var xarray = [110];
var yarray = [105];

function setup() {
    createCanvas(400, 300); 
    frameRate(30); //each second is 30 frames
}

function draw() {
    background(230, 250, 255);
    var H = hour(); // current hour
    var M = minute(); // current minute
    var S = second(); // current second
    var milli = second(); //current millisecond
    var HWaterHeight = map(M, 0, 59, 0, height); // chages the height of the water according to the minute
    var waterColorb = map(H, 0, 23, 255, 120); // water changes from blue to grey over 24 hours
    var dropW = map(S, 0, 59, 25, 5); // water drops gets smaller as gets closer to a minute 
    
    // draw water level
    strokeWeight(0);
    fill(150, 170, waterColorb); // water changes from blue to grey over 24 hours
    rect(0, height - HWaterHeight, width, HWaterHeight);
    
    //draw water drops
    fill(170, 200, 225);    
    for(var i = 0; i < yarray.length; i++){ // draws water drop falling
    	ellipse(xarray[i], yarray[i], dropW, 20);
			yarray[i] += 5;      
    }

    if(frameCount % 30 === 0){ // every second a new drop is drawn
    	yarray.push(105);
        xarray.push(random(110, 140)) // randomizes x position of water droplets
    }

	faucet(); // draws faucet
}

function faucet(x, y){
	stroke(100);
	fill(120);
	rect(100, 80, 50, 35, 0, 0, 5, 5);
	rect(0, 40, 150, 50, 0, 10, 0, 0);
	stroke(160);
	strokeWeight(1);
	line(101, 113, 149, 109);
	line(100, 108, 149, 104);
	line(100, 103, 149, 99);
	line(100, 98, 149, 94);
}

For this project, I took inspiration from a leaky faucet. It keeps track of time by dripping once per second, the water goes from the bottom to the top every hour, and the color of the water changes from blue to green-brown throughout a 24 hour time period. It was definitely a more difficult project than I originally anticipated, as I had to draw on and combine a lot of concepts we have learned throughout the class. The part that I had the most trouble with was getting a new drop to drip at every second.