Month: October 2017

sketch

//Sheenu You
//Section E
//sheenuy@andrew.cmu.edu
//Project-06
var one=50

var prevSec;
var millisRolloverTime;

function setup() {
    createCanvas(480, 480);
    millisRolloverTime = 0;
}

function draw() {
    background(198,229,217); // My favorite blueish greem
    
    // Fetch the current time
    var H = hour();
    var M = minute();
    var S = second();
    
    // Reckon the current millisecond, 
    // particularly if the second has rolled over.
    // Note that this is more correct than using millis()%1000;
    if (prevSec != S) {
        millisRolloverTime = millis();
    }
    prevSec = S;
    var mils = floor(millis() - millisRolloverTime);
    
    var hourBarWidth   = map(H, 0, 23, 0, width);
    var minuteBarWidth = map(M, 0, 59, 0, width);
    var secondBarWidth = map(S, 0, 59, 0, width);
    
    // Make a bar which *smoothly* interpolates across 1 minute.
    // We calculate a version that goes from 0...60, 
    // but with a fractional remainder:
    var secondsWithFraction   = S + (mils / 1000.0);
    var secondsWithNoFraction = S;
    var secondBarWidthChunky  = map(secondsWithNoFraction, 0, 60, 0, width);
    var secondBarWidthSmooth  = map(secondsWithFraction,   0, 60, 0, width);
    
    noStroke();
    //Metronome Variables 
    var speed =2;
    var dir = 1;
    var secondx = 120
    var winklex=240
    //Controls Metronome Arm
    if(S%2==0){
    	 secondx = 120
    } else { 
    	 secondx = 360
    }
    //Metronome Itself
    fill(151,208,199)
    ellipse(240,438,420,50)
    fill(214,129,137);
    quad(184,47,294,47,367,324,101,324);
    rectMode(CORNERS);
    rect(101,324,367,439);
    fill(198,164,154)
    quad(189,52,289,52,362,322,106,322)
    fill(233,78,119)
    triangle(111,367,111,430,357,430)
    fill(244,234,213)
    rect(219,66,263,311)
    strokeWeight(3);
    stroke(233,78,119);
    //Metronome Arm
    line(secondx,74,240,325)
    fill(233,78,119);
    rect(106,323,362,328);
    fill(244,234,213);
    rect(107,331,361,363);
    noStroke();
    fill(214,129,137);
    text("Minutes",220,78)
    //Minutes Dashes
    for(var poop=0; poop<M+1;poop++){
    	    stroke(233,78,119);
        strokeWeight(1);
    	line(240,308-poop*4,258,308-poop*4)
    	//Resets Dashes when Minutes is 0(?)
    	if(M==0){
    		fill(244,234,213)
    		rect(219,66,263,311)

    	}
    }
    //Hours
    text("Est. 19"+H,215,351)

}

 

 

 

 

 

When I was very young, I never understood what a metronome was used for. The only thing that I found fascinating about the thing was the satisfying ticking noises, a unique and signature sound that sounded different and more pleasant compared to other ticking objects I encountered with everywhere at the time. Although the movement of the wand was repetitive and wasn’t really that interesting, I used to wonder why and how it moves back and fourth. I always wondered about the purpose of the metronome until I started to learn how to play the piano and learned that the metronome was used to control your tempo. Before I knew anything about the metronome, I assumed the metronome to be some type of clock since it had numbers, ticked, and moved back and fourth like a pendulum on old fashioned wall clocks or grandfather clocks. This gave me the inspiration to make this project. Although the color palette is a bit strange and there is no ticking noises, I still really like this project regardless.

sketch

//Elizabeth Wang
//Section E
//elizabew@andrew.cmu.edu
//Project 6: Abstract clock

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

function draw() {

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

  background(0,167,225);

  fill(255);
  noStroke();
  ellipse (150, 120, 50, 100); //left ear
  ellipse (250, 120, 50, 100); //right ear
  ellipse (200, 200, 200, 200); //head

  fill(255,200,87);
  ellipse (175, 210, 20, 10); //nose

  stroke(0);
  strokeWeight(2);
  fill(255);
  ellipse (140, 180, 50, 50); //right eye
  ellipse (220, 180, 50, 50); //left eye

  var thetaSecond = ((3*PI)/2) + (PI/30) * s; //increments of 60 for seconds
  var xls = 140 + 10*cos(thetaSecond); //x left eye position
  var yls = 180 + 10*sin(thetaSecond); //y left eye position
  var xrs = 220 + 10*cos(thetaSecond); //x right eye position
  var yrs = 180 + 10*sin(thetaSecond); //y right eye position
  fill(0);
  noStroke();
  ellipse (xls, yls, 30, 30); //left eye moving
  ellipse (xrs, yrs, 30, 30); //right eye moving


  //mouth
  noStroke();
  fill(52,52,52);
  rect(158, 225, 40, 2*m, 20, 20, 10, 10); //mouth gets bigger every minute
  if (m>30){ //when mouth gets big, also a mark for when it is past 30 minutes

    var xt = 100 + 80*cos(thetaSecond); //x right eye position
    var yt = 200 + 80*sin(thetaSecond); //y right eye position
    textSize(20);
    text("it's been 30 minutes, I'M LATE!", xt, yt);
    fill(189,217,191);

  }


  //cheek blush

  if (h == 0){ //changing from 24 to 12 hour time
    h = 12;
  }
  if (h > 12){
    h = h - 12;
  }

  for(var x = 0; x < h ; x++){ //every hour there is a new blush line
    stroke(237,106,90);
    var spacing = x * 15;
    line(spacing + 130, 200, spacing + 90, 220);

  }

}

Reflection

This project was difficult for me in the sense that it was hard for me to distance myself from what actual clocks generally looks like. At first I tested out trying to make a flower grow out of a cactus and eventually die as the day went on, but it ended up being too complicated, so I simplified it to a face instead. I’m happy with how the final looks, but I still feel as though if I had more time, I would add more graphic elements. The face itself rolls its eyes every second, and every minute that passes, the mouth gets longer. Once 30 minutes passes, text pops up that informs the user that it has been over 30 minutes. For the hour, I added “blush” lines, and each line represents one hour.