Category: Section C

sketch

//Thomas Wrabetz
//Section C
//twrabetz@andrew.cmu.edu
//Project-05

var LAVA;
var accMillis;
var S;
var M;
var eruptionOn = false;
var eruptionCoords = [];
var eruptionV = 5;
var eruptionY;
var sec;

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

function draw()
{
    LAVA = color(195+minute(), 130, 21);
    background(220);
    drawVolcano();
    //seconds
    fill( LAVA );
    if( S != second() )
        accMillis = 0;
    S = second();
    accMillis += millis() - M;
    M = millis();
    sec = second() + accMillis / 1000;
    if( second() >= 45 )
    {
        eruption();
    }
    if( second() <= 45 )
        rect( width * 0.4, height - 75 - sec * ( height - 75 ) / 60, width * 0.2, height );
    else
        rect( width * 0.4, height - 75 - (45 * ( height - 75 ) / 60) + ( ( sec - 46 ) * ( height - 75 ) / 14 ), width * 0.2, height );
}

function eruption()
{
    if( second() == 45 )
    {
        eruptionV = 5;
        eruptionY = height / 5;
        eruptionCoords = [width * 0.45, width * 0.5, width * 0.55 ]
    }
    for( var i = 0; i < 3; i++ )
    {
        fill( LAVA );
        ellipse( eruptionCoords[i], eruptionY, 10, 10 );
        eruptionCoords[i] += (eruptionCoords[i] - width / 2) * 0.0025;
        eruptionCoords[i] += random(-0.001,0.001);
    }
    eruptionY -= eruptionV * 0.1;
    eruptionV -= 0.0125;
}

function drawVolcano()
{
    //Volcano
    fill( 50 );
    triangle( -width * 0.2, height, width * 0.4, height / 5, width * 0.4, height );
    triangle( width * 1.2, height, width * 0.6, height / 5, width * 0.6, height );
    fill( 150 );
    rect( width * 0.4, height / 5, width * 0.2, 4 * height / 5 );
    fill( LAVA );
    ellipse( width / 2, height, 200, 200 );
    //Side triangles
    for( var i = 0; i < 12; i++ )
    {
        if( i == hour() ) fill( 150 );
        angle = ( i + 1 ) * PI / 36;
        triangle( width / 2 + 100 * cos( PI - angle - 0.05 ), height - 100 * sin( PI - angle - 0.05 ),
                  width / 2 + 100 * cos( PI - angle + 0.05 ), height - 100 * sin( PI - angle + 0.05 ),
                  width / 2 + 200 * cos( PI - angle ), height - 200 * sin( PI - angle ) );   
    }
    for( var i = 12; i < 24; i++ )
    {
        if( i == hour() ) fill( 150 );
        angle = ( i - 11 ) * PI / 36;
        triangle( width / 2 + 100 * cos( angle - 0.05 ), height - 100 * sin( angle - 0.05 ),
                  width / 2 + 100 * cos( angle + 0.05 ), height - 100 * sin( angle + 0.05 ),
                  width / 2 + 200 * cos( angle ), height - 200 * sin( angle ) );   
    }
}

It’s a volcano. The lava color is based on the minutes. The height of the lava in the tube is based on the seconds ( it is completely empty at the start of a minute ). The lava streaks around the base represent the hours.

sketch

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

function draw() {
    background(255, 239, 213);
    noStroke();
    
    // Fetch the current time
    var H = hour();
    var M = minute();
    var S = second();

    //Glass streaks
    stroke(0);
    line(100, 150, 115, 135);
    line(100, 155, 120, 135);
    line(105, 155, 120, 140);

    line(220, 150, 235, 135);
    line(220, 155, 240, 135);
    line(225, 155, 240, 140);

    line(340, 150, 355, 135);
    line(340, 155, 360, 135);
    line(345, 155, 360, 140);
    
    // Compute the widths of the rectangles
    var mappedH = map(H, 0,23, 0, 300);
    var mappedM = map(M, 0,59, 0, 300);
    var mappedS = map(S, 0,59, 0, 300);

    //Display glasses
    noFill();
    stroke(0);
    rect(30, 100, 100, 300);
    rect(150, 100, 100, 300);
    rect(270, 100, 100, 300);
    
    // Display the rectangles. 
    fill(47, 184, 255);
    quad(30, 400 - mappedH, 130, 400 - mappedH, 130, 400, 30, 400);
    fill(47, 132, 255);
    quad(150, 400 - mappedM, 250, 400 - mappedM, 250, 400, 150, 400);
    fill(47, 46, 255);
    quad(270, 400 - mappedS, 370, 400 - mappedS, 370, 400, 270, 400);

    //Glass bases
    fill(0);
    rect(30, 390, 100, 10);
    rect(150, 390, 100, 10);
    rect(270, 390, 100, 10);

    //Water drops
    fill(47, 184, 255);
    ellipse(80, 50, 50, 50);

    fill(47, 132, 255);
    ellipse(200, 50, 50, 50);

    fill(47, 46, 255);
    ellipse(320, 50, 50, 50);

    // Display numbers to indicate the time
    fill(255);
    textAlign(CENTER);
    textSize(15);
    text(H, 80, 50);
    text(M, 200, 50);
    text(S, 320, 50);
    

    
}

I really like the glass half-empty and glass half-full idea, and how it gets harder to see things as glass half-full as time runs out. So I flipped it, and made it so the glasses fill with water as time goes on. It took me a while to figure out how map() works, but I eventually got it.

sketch

 //Ashley Chan
 //Section C
 //ashleyc1@andrew.cmu.edu
 //Project-06-Abstract-Clock

var  lastSecond;
var  currentSecond;

var lastMinute;
var currentMinute;

var lastHour;
var currentHour;

var secondAngle;
var minuteAngle;
var hourAngle;

var x = 0;
var y = 0;

var maxDiameter = 280;
var theta = 0;

var strokeCol;
var weight;


function setup() {
    frameRate(1);
    createCanvas(300, 300);
   // translate(150, 150); //Set origin to center of canvas
    angleMode(DEGREES);
    background(215, 192, 208);
    drawMinuteArc();
}

function draw() {
    translate(150, 150); //Set origin to center of canvas
    rotate(-90); //set hands so they start where 12 would be

        drawStuffBasedOffMinute();

        drawStuffEverySecond();

        drawMinuteArc();

        drawStuffBasedOffHour();

     
     if (second() != 0) {
     //clock outline
        stroke(255);
        strokeWeight(5);
        noFill();
        ellipse(0, 0, 200, 200);

    }


}

function drawStuffBasedOffHour() {

      currentHour = hour();

            if (lastHour != currentHour) {

                //calculate how much to rotate hour rect
                hourAngle = currentHour * (360/12);
                    //For every hour that passes, rotate hour rect
                    for (var i = 0; i <= 12; i++){
                        push();
                        rotate(hourAngle);
                        fill(255, 100, 150, 8);
                        noStroke();
                        rect(0, 50, 25, 25);
                        pop();

                    }

            }
}


function drawStuffBasedOffMinute() {

      currentMinute = minute();
      
            if (lastMinute != currentMinute) {
                //have circle with stroke outline pulse according to minute
                for (var i = 0; i < 60; i ++) {
                    var diam = (sin(theta) * maxDiameter/2) + maxDiameter/2;

                    strokeWeight(.1);
                    stroke(0);
                    noFill();
                    ellipse(0, 0, diam, diam);

                    theta += 1;
                    }
                }

                
}

function drawStuffEverySecond() {

      currentSecond = second();

                if (currentSecond != 0) {

                    //Calculate how much to rotate line
                    secondAngle = currentSecond * (360/60);
                        push();
                        rotate(secondAngle);
                        fill(255, 100, 150, 8);
                        stroke(50, 50, 50);
                        line(0, 0, 80, 0);
                        noStroke();
                        ellipse(0, 110, 10, 10);
                        pop();
                    
            }

            else {
                setup();
            }

}

function drawMinuteArc() {

            if (lastMinute != currentMinute) {
                //calculate houw much to rotate min hand
                minuteAngle = currentMinute * (360/60);
                    //For every hour that passes, rotate hour hand
                    push();
                    rotate(minuteAngle);
                    stroke(255);
                    strokeWeight(1);
                    ellipse(20, 20, 25, 25);            
                    pop();

                print(minuteAngle);
        }   
}

This clock isn’t what I thought it would be. I think I had a lot of creative ideas that just didn’t completely work out. I wanted to create a pulsing circle based on the minute and have a “second” hand and circle revolve around the center. Every hour, a square would rotate as well. I also wanted all of these shapes to draw over each other. By doing so I could create a cool optical illusion effect which I think I was successful at but there are still bugs in my code that I couldn’t quite resolve. Additionally, wordpress seems to not be able to handle my clock since so much information is being stored and drawn over. My code doesn’t normally freeze when the index is run normally if you want to check: ashleyc1-Section C-Project-06

sketch

//erin ryan
//lab c
//eeryan@andrew.cmu.edu
//project 06 variable face

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

function draw() {//this is a 24 hour clock
  background(0);
  var h = hour();
  var m = minute();
  var s = second();
  for(var x = 0; x < width; x += 30){
    for(var y = 0; y < height; y += 30){
      fill(40,35,249);
      noStroke();
      ellipse(x, height/2, 2, 2);
      ellipse(width/2,y,2,2);
      }
    }
  stroke(255,255,0);
  noFill();
  ellipse(width/2,height/2, 300, 300);
//second indicator
  push();
  translate(width/2, height/2);
  rotate(s*6);
  stroke(255,248,220);
  strokeWeight(2);
  noFill();
  arc(150,150,25,25,180,0,CHORD);
  pop();
//minute indicator
  push();
  translate(width/4, height/4);
  rotate(m*6);
  stroke(205,92,92);
  strokeWeight(4);
  noFill();
  ellipse(0,0,60,60);
  pop();
//hour indicator
  push();
  translate(width/2, height/2);
  rotate(h*30);
  stroke(220,20,60);
  strokeWeight(5);
  noFill();
  line(0,10,0,50);
  pop();
}

I started off by looking at a lot of the clocks by Vincent Toupe. I ended up using three different shapes to represent the hour, minute, and second hands. It’s a 24 hour clock. I tried to find a color palette that worked with the simple, graphic elements of the piece.

sketch

var minuteCounterX = [];
var minuteCounterY = [];
var dy = [];
var col = [];

function setup() {
    createCanvas(150,480);
    background("#469f80");
    for (var m = 0; m < (60 - minute()); m++) {
        minuteCounterX[m] = random (5,140);
        minuteCounterY[m] = random (-10,20);
        dy[m] = random(1,3);
    }
}



function draw() {
    background("#469f80");
    secondsBall();
    for (var r = 0; r < 24 - hour(); r++) { //number of squares is hours left in day
        rectangles(r);
    }
    minutePetalsDraw(minuteCounterX,minuteCounterY);
}
    
function minutePetalsDraw(minuteCounterX,minuteCounterY) { //number of circles equals number of minutes left in the hour
    noStroke();
    for (m = 0; m < (60 - minute()); m++) {
          if (m%4 === 0) {
              fill("#fba919");
        }
          else if (m%4 == 1) {
              fill("#ef5b30");
        }
          else if (m%4 == 2) {
              fill("#96b9e2");
        }
          else {
              fill("#434b9f");
        }
        ellipse(minuteCounterX[m],minuteCounterY[m],10);
        minuteCounterY[m] += dy[m];
        if (minuteCounterY[m] > 480) {
          minuteCounterY[m] = 0;
        }
    }
}


function secondsBall() { //ball appears every other second and grows smaller as the minute passes
    frameRate(60);
    noStroke();
    fill("#e47884");
    if (second()%2 === 0) {
      ellipse(115,30,120 - (second()*2));
    }
}

function rectangles(r) { //number of squares remaining equal number of hours remaining in day
    frameRate(60);
    stroke("#f6f0b8");
    strokeWeight(2);
    noFill();
    rectMode(CENTER);
    push();
    translate(75,30+(r*18)); //each square is 18 pixels apart from center
    angleMode(DEGREES);
    rotate(millis()/45+(r*10)); //each square is 10 degrees apart from the other; number chosen for aesthetics
    rect(0,0,25,25);
    pop();
}

I wanted my designs to follow the concept of visualizing “time left” as opposed to “time passed”. We often view the positive space of things (the black ink that forms the letter) as opposed to the negative space (the white around a letter that comes together to form the black). I played with various geometric shapes and compositions, and had fun experimenting with color.

The rotating squares represent the number of hours left in the day; the confetti circles represent the number of minutes left in the hour, and the size of the blinking circle, which appears and disappears every second, correlates to the number of seconds left in the minute.

The confetti circles was a bit of a challenge. I had tried using a for loop to initialize an array of x and y coordinates; however, I had initially put the for loop in the draw function. As a result, the circles kept on being redrawn and “spazzing”. After trying (with no avail) to set conditions for when the for loop would redraw, I learn that I’d needed to put the for loop in the setup function.

Something I still don’t quite understand is that even though the setup function is called once, the array still changes with the minute. Thus, does the setup function change if the parameters inside it change? When I’d tried printing the minute or second in the setup function, the value in the console didn’t change even as the minute and second did.

Above are some sketches I did for color and composition

sketch

//Selina Lee
//Section C
//selinal@andrew.cmu.edu
//Project-06

var prevSec;
var millisRolloverTime;
var centX = 300; //center coordinates
var centY = 300;
var numcirc = 12; // number of circles to draw 
var distanceS = 250; //distance away from center with second pi clock 
var distanceM = 225; //distance away from center with minute pi clock 
var distanceH = 175; //distance away from center with hour pi clock 
var angle = 0;  //start angle for circle rotation

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

    millisRolloverTime = 0;
}

function draw() {
	background(170, 170, 255);

	// 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 hourArcAngle   = map(H, 0, 23, 0, 360); //angles away from 0 or 12 o'clock
    var minuteArcAngle = map(M, 0, 59, 0, 360);
    
    // 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 secondArcAngleSmooth  = map(secondsWithFraction,   0, 60, 0, width);
    
    var strike = radians(270); //so that arcs start at 12:00 placement

    var alphaincS = map(S, 0, 59, 0, 155); //increase transparency from full circle
    var alphaincM = map(M, 0, 59, 0, 105); 
    var alphaincH = map(H, 0, 23, 0, 105);

    noStroke();
    fill(255, 230, 130, 100 + alphaincS);
    arc(centX, centY, 500, 500, strike, radians(secondArcAngleSmooth) + strike); //yelllow outside circle for seconds

    fill(255, 180, 130, 150 + alphaincM);
    arc(centX, centY, 450, 450, strike, radians(minuteArcAngle) + strike); //orange circle for minutes

    fill(255, 150, 130, 150 + alphaincH);
    arc(centX, centY, 350, 350, strike, radians(hourArcAngle) + strike); //red circle for hours by 24

    var angleObjectS = 360/numcirc; //divides circles evenly on outside
	for (var i = 0; i < numcirc; i++) //for loops for making circles revolve around center point
	{
		var posX = centX + distanceS *cos( radians(angleObjectS*i + angle) );
	var posY = centY + distanceS *sin( radians(angleObjectS*i + angle) );
	fill(255, 0, 0, 50);
	ellipse(posX, posY, 30, 30);
	}

	var angleObjectM = 360/numcirc;
	for (var i = 0; i < numcirc; i++)
	{
	var posX = centX + distanceM *cos( radians(angleObjectM*i + angle) );
	var posY = centY + distanceM *sin( radians(angleObjectM*i + angle) );
	fill(255, 150, 0, 50);
	ellipse(posX, posY, 30, 30);
}
	var angleObjectH = 360/numcirc;
	for (var i = 0; i < numcirc; i++)
	{
	var posX = centX + distanceH *cos( radians(angleObjectH*i + angle) );
	var posY = centY + distanceH *sin( radians(angleObjectH*i + angle) );
	fill(255, 255, 0, 50);
	ellipse(posX, posY, 30, 30);
}
}
    

sijings-Abstract Clock

var eyeballx;
var eyebally;
var mouthp=326;
var hourF=255;
var minuteF=255;
var secondF=255;
var centerS=5;
var eyeballs=30;
var eyelidsx1=480/2; //replaced width
var eyelidsx2=80;
var eyelidsx3=180;
var eyelidsy1=480/2-20;
var eyelidsy2=80;
var eyelidsy3=360;

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

function draw() {
    background(250,250,250);
    var h = hour();
    var m = minute();
    var s = second();
    //eyeball-second
    eyeballx=width/2;
    eyebally=height/2-30;
    secondF=255-s*2;//transparency decreasing based on minutes seconds and hours
    minuteF=255-m*5;
    hourF=255-h*10;
    angleMode(DEGREES);
    noFill();
    strokeWeight(3);
    //eyes opening-second
    if (s%2==0){//for each second, eye will correspondingly open and close
        stroke(0,0,0,secondF);
        push();
        fill(0,0,0,secondF);
        ellipse(eyeballx,eyebally,centerS,centerS);
        fill(0,20,128,secondF);
        ellipse(eyeballx,eyebally,eyeballs,eyeballs);
        pop();
        arc(eyelidsx1, eyelidsy1, eyelidsx2, eyelidsy2, eyelidsx3, eyelidsy3);
    }else{
        stroke(0,0,0,secondF);
        arc(eyelidsx1, height/2-50, eyelidsx2, eyelidsy2, eyelidsy3, eyelidsx3);
    }

    fill(0,0,0,secondF);
    ellipse(width/2+5,84,20,20);
    noFill();
    stroke(0,0,0,secondF);
    curve(width/2+40, 86, width/2+5, 94, width/2+5, 181, width/2+40, 115);
    fill(173,115,66,minuteF); //for colouring fading in minute
    stroke(0,0,0,hourF);//for colouring fading in hour
    push();
    strokeWeight(0);
    curve(width/2-110, height/2+6, width/2+5, height/2+4, width/2+5, height/2+71, width/2-310, height/2-80);
    strokeWeight(3);
    fill(172,36,25,hourF);
    curve(width/2+10, 396, width/2-10, mouthp, width/2+37, mouthp, width/2+30, 431);
    curve(width/2+10, 121, width/2-10, mouthp, width/2+82, mouthp, width/2+30, 121);
    translate(45, 0);//for moving the second lips
    curve(width/2+10, 396, width/2-10, mouthp, width/2+37, mouthp, width/2+30, 431);
    pop();
    
    //minute
    var fp1=width/2;
    var fp2=height/2-70;
    var offset1=10;
    var offset2=15;
    for (var y = 0; y < 6; y++) {//nested for loop for drawing the cols and rows
        noStroke();
        for (var x = 0; x < 5; x++) {
            if (((x+1)+(y)*5)<=m){//determing when the next dot appears
                fill(168,59,32,minuteF);
                var py = fp1 + y * offset1;
                var px = fp2 + x * offset2;
                ellipse(px, py, 10, 10);
            }
        }
    }
    var fp3=width/2;
    var fp4=height/2+70;
    for (var y1 = 0; y1 < 6; y1++) {
        noStroke();
        for (var x1 = 0; x1 < 5; x1++) {
            if (((x1+1)+(y1)*5)<=(m-30)){//note: need to minus 30 for calculating the second part of the dots
                fill(168,59,32,minuteF);
                var py1 = fp3 + y1 * offset1;
                var px1 = fp4 + x1 * offset2;
                ellipse(px1, py1, 10, 10);
            }
            
        }
    }

    //hour
    noFill();
    stroke(173,115,66,hourF);
    arc(width/2-110, height/2-70, 50, 50, 90, 270);
    var hourh=height/2-50
    for (var i=0;i<h;i++){//number of earings accordings to number of hours
        ellipse(width/2-110, hourh,20,20);
        hourh+=10;
    }
}

For this project, I intended to express an idea of “fading”. The start point of the clock will be a full face with all features visible (not including the earings and the wrinkles, since they are the indication of cumulative time). Then, as time progressed, the eyes will blink (close and open) as an indicator for seconds. The number of wrinkles will increase as minutes increases. So the number of blush will be the number of minutes for each hour. Lastly, the number of earings will be the number of hours. Thus, a way to calculate time is to add the number of earings with number wrinkles and the number of times the eye blinks. At the end, the whole face will fade away.

Here are some screenshots for different time periods, so we can see the different representation of time changes.