Project-06-Abstract-Clock – [OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice

Project-06-Abstract Clock

Tak — Mon, 12 Oct 2020 16:47:35 +0000

var y = 0;


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

function draw() {
  var v = 25
  background(230, 207, 106);

  //glass beaker
  fill(225, 230, 255);
  noStroke();
  rect(130,480,220,-270);
  stroke(80);
  strokeWeight(3);
  line(130,480,130,480-270);
  line(480-130,480,480-130,480-270);
  ellipse(240,480-270,220,10);
  

  //waterdrop
  fill(103,197,255);
  noStroke()
  ellipse(240,y,45);
  y = y + v;
  if (y > 480) {
    y = 0
  }

  //Pipe dropping water from the top
  noStroke();
  fill(71, 76, 84);
  rect(210,0,60,90);
  fill(0);
  ellipse(240,90,60,4);
  noStroke();


  //water level indicating seconds
  noStroke()
  fill(103,197,255);
  rect(130,480,220,-second()*4.5);
  stroke(83,167,245)
  strokeWeight(0.5)
  ellipse(240,480-second()*4.5,220,10);
  loop()

  //beaker outline 
  noFill();
  stroke(80);
  strokeWeight(3)
  line(130,480,130,480-270);
  line(480-130,480,480-130,480-270);
  ellipse(240,480-270,220,10);



}

When thinking of a clock, or the idea of a clock, I was fascinated by the idea of how only something constant can be used as a device to define time. Systems that are perfectly constant are hard to find in this world, therefore we try to fine tune what we have to create a machine we can rely on. Water droplet’s relationship with gravity is constant most of the time. Therefore I thought it would be interesting to measure time with how fast droplets of water fill up a glass. Realistically, there are many other components in play that will affect how accurate this “clock” is but I found this alternate method of measuring time very fascinating.

Project-06-Abstract-Clock

Isabel Xu — Mon, 12 Oct 2020 13:44:00 +0000

sketch Download

//Isabel Xu
//15-104 Section A
//Project 6
var circ_size;
var s;
var h;
var m;

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

  //choose HSB colorMode for further arguments on hue and saturation
  colorMode(HSB);
  frameRate(10);
} 

function draw() { 
  background(255);

  let h = hour();
  let s = second();
  //define the hue of the cicle with the current hour 
  //define the saturation of the circle with the current second
  fill(360-h*15,104-s*1.73,255);
  noStroke();
  
  //define the size of the cicle by the current second
  let circ_size = (second ())*8;
  //ellipseJitter effect
  ellipse(width/2+random(-3,3), width/2+random(-3,3), circ_size, circ_size);
  
	// When the circle gets bigger than the screen
	// Make it small again
 	if (circ_size > 480) {
   	 circ_size = 0;
  	}
  	let m = minute()
  	push();
    //let the following element to locate at the center
  	translate(width/2+random(-3,3),0);
    //fill the rect with color that subtracted from the color of the circle
  	fill(h*15,s*1.73,255);
  	//define the length of the rect with the current minute
  	rect(-10,0,10,(m*8));
  	pop();
}

Abstract Clock-Candy shop

ophelia — Mon, 12 Oct 2020 13:07:40 +0000

I want to design a dreamy, childish candy shop that displays time in an interesting way. I sketched out the candy shop and decorated it with colorful candies and lollipops. I painted the candy shop in pastel colors. The lollipops placed on the candy box represent the 60 seconds in a minute, and the lollipop that corresponds with the current second in local time will pop out. The background of the candy shop represents morning, noon, and night. It changed color three times a day according the changing hours. The stripes on the table stand for minute. The white stripe moves downwards as time passes.

sketch

var cx=[];
var cy=[];



function setup() {
    createCanvas(480, 480);
    background(220);
    frameRate(5);
    
}

function draw() {
    //the background changes with the hours
    if(0



Project-06 Abstract Clock
robert — Mon, 12 Oct 2020 09:25:13 +0000

The squares measure, from inside out: seconds, minutes, hours, days, years, decades, and centuries.



sketch//Robert Rice
//rdrice
//Section C

var today = new Date();
var years = today.getFullYear()
var months = today.getMonth();
var days = today.getDate() + months*30.42;  //calculates days based on the average number of days in each month
var hours = today.getHours()    //aproximately correct for any given day in the year
var minutes = today.getMinutes() 
var seconds = today.getSeconds();
var v = [years%1000/100, years%100/10, years%10, days, hours, minutes, seconds] //the current values for centuries, decades, years, days, hours, minutes, & seconds
var t = [10, 10, 10, 365, 24, 60, 60]   //the total number of each unit in one cycle


var r = []  //radii for centuries, decades, years, days, hours, minutes, seconds squares (calculated below)
var s = [1.902*Math.pow(10, -10), 1.902*Math.pow(10, -9), 1.902*Math.pow(10, -8), 1.902*Math.pow(10, -7), 0.0000694, 0.00167, 0.1]   //speeds, degrees per frame
var a = [0, 0, 0, 0, 0, 0, 0]  //angles, 0 by default for testing
var w = []  //stroke weight

var iw = 5  //the stroke weight of the indicator squares


function setup() {
    createCanvas(600, 600);
    background(0);
    angleMode(DEGREES);
    rectMode(CENTER);
    frameRate(60);

    r[0] = (width/2)*sqrt(2);
    w[0] = 15

    print(v);

    for (i=1; i<=6; i++) {          //calculates the inset radii based on the first radius
        r[i] = (r[i-1]/2)*sqrt(2);
    }

    for (i=1; i<=6; i++) {          //calculates the stroke weights
        w[i] = (w[i-1])/2;
    }

    for (i=0; i<=6; i++) {          //sets all the starting angles based on current date & time
        a[i] = (v[i]/t[i])*360
    }
}

function draw() {
    background(50);
    noFill();
    
    translate(width/2, height/2);
    stroke(255);

    for (i=0; i<=6; i++) {
        push();
        rotate(a[i]);   //moves the rectangle
        a[i] = a[i] + s[i];
        strokeWeight(w[i]);
        rect(0, 0, r[i], r[i]); //creates the actual rectangle

        strokeWeight(iw);   //creates an indicator rectangle to help the viewer understand where in the rotation everything is
        rect(r[i]/2 - 5 - (w[i]/2), r[i]/2 - 5 - (w[i]/2), 5, 5);   //"start" is all indicators at bottom right corner
        pop();
    }



}








Project 06-Abstract-Clock
tian — Mon, 12 Oct 2020 06:09:45 +0000

sketchDownloadvar x = 0;
var y = 0;
var sDiam;

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

function draw() {
    var s = second();
    var m = minute();
    var h = hour();
    background(0, 0, h*10); //gets lighter by the hour
    translate(width/2, height/2);
    minuteRing(s, m);
    secondRing(s, m, sDiam);
}

function minuteRing(s, m) { //big circle that appears within a minute
    noStroke();
    fill(148, 96, 139, s*4.25); //opacity increases with second
    circle(x, y, 10*m); //diameter increases with minute
}
 
function secondRing(s, m, sDiam) {  //the ticking clock that moves every second
    fill(148, 96, 139);
    rotate(radians(s*6)); //rotate every second by 6 degrees
    var sDiam = (PI*10*m)/60; //diameter is circumference divided by 60 secs
    circle(x+(10*m/2), y, sDiam);
    triangle(x, y, x+(10*m/2), y-(sDiam/2), x+(10*m/2), y+(sDiam/2));
}



For this project I struggled a bit because I didn’t have enough time to create what I had visualized. I was inspired by the flower that blooms at night and wanted to create an image where the pedals grow bigger and bigger as time goes on. 



I was only able to get the one pedal moving instead of having the whole flower in the background but basically the circle reveals itself to full opacity every minute as the pedal rotates, then the ring diameter increases with the minute. The background blue becomes lighter by the hour to signify sky. 







Project 6 – Abstract Clock
jubbies — Mon, 12 Oct 2020 04:15:00 +0000

I began this project in a very different place than where I ended up – after exploring many different ways of how I could potentially represent the CMU fence as a clock, I ditched that idea and went with creating a binary clock. 



When I was a kid, my dad had a clock like this. Although I could never read it, it looked fancy and important to me and made me feel like maybe one day I would deserve to know what it all meant. It wasn’t until this project that I found out how to read it!







I think this graphic captures it well
My dad told me that the clock always looked like a cityscape to him. I agreed, so naturally that is what I chose to code for this project. 




sketchDownload// Assignment 06 - PROJECT – ABSTRACT CLOCK
// Name: Jubbies Steinweh-Adler
// Email: jsteinwe@andrew.cmu.edu
// Class: Section D


var lightOn;
var lightOff;
var column = [2, 4, 3, 4, 3, 4];
var canvasMargin = 100;
var innerMargins = 10;

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

  //WINDOW COLORS
  lightOn = color(180, 180, 0);
  lightOff = color(70, 70, 40);
}

function draw() {
  background(27, 27, 128); //Blue


  var timeString = whatTime(); // run whatTime function once and rename output 
  var cLength = column.length;
  rWidth = (width - 2 * canvasMargin) / cLength;


  //- BACKGROUND- 
      //moon 
      fill(248, 243, 200);
      circle(width * (2 / 3), height * (1 / 3), 250);

      //buildings
      //back
      fill(5);
      rect(0, height / 2, width, height);
      rect(60, height / 2 - 40, 100, 200);
      rect(width - 100, height / 2 - 40, 80, 200);
      //front
      fill(20);
      rect(105, 130, 145, 235, 0, 80, 0);
      rect(262, 173, 127, 190);
      fill(50);
      rect(202, 220, 132, 146);
      rect(248, 173, 44, 61);
      rect(264, 148, 12, 28);

      //reflected buildings
      push();
      translate(0, 200);
      fill(20);
      rect(105, 165, 145, 235);
      rect(262, 165, 127, 190);
      fill(50);
      rect(202, 165, 132, 146);
      pop();

  //- TIME FORMATTING -
      //CONVERT TIME STRING TO BINARY STRING
      for (var i = 0; i < cLength; i++) { //run 6 times
        var rx = canvasMargin + rWidth * (i + 0.5);
        var binary = floor(timeString[i]).toString(2); //converts time to binary string

        //test proper binary conversion
        print("a = " + binary.toString());

        //REVERSING BINARY DATA 
        //positional data for drawing depends on reversal
        binary = binary.split("");
        binary = reverse(binary);
        binary = binary.join("");

        //test proper binary reversal
        print("b = " + binary.toString());


    //-DRAWING CLOCK ELEMENTS -
    for (var p = 0; p < column[i]; p++) {
      var ry = (height - 50) - ((rWidth * p) + canvasMargin);
      var reflectY = height - canvasMargin + (p * rWidth);
      var rectWidth = rWidth - (1.8 * innerMargins);

      //FILL WINDOW WITH CORRECT COLOR 
      //if character in pth position is 1, turn on
      if (binary.charAt(p) === '1') {
        fill(lightOn);
        //if not, turn off
      } else {
        fill(lightOff);
      }

      //WINDOW SHAPE
      rect(rx, ry, rectWidth / 2, rectWidth * (3 / 4));

      // - FOREGROUND - 
      //Water reflection

      rect(rx, reflectY, rectWidth / 2, rectWidth * (3 / 4));
      fill(40, 40, 120, 30);
      noStroke();
      rect(0, height - 115, width, height);
    }
  }

}

function whatTime() {
  //creates live time string with no spaces

  var h = hour();
  if (h > 9) { // if hour value greater than 9, return as is
    hrs = h.toString();
  } else { //if less than 9, add zero as spacer digit
    hrs = "0" + h.toString();
  }

  var m = minute();
  if (m > 9) {
    mins = m.toString();
  } else {
    mins = "0" + m.toString();
  }

  var s = second();
  if (s > 9) {
    secs = s.toString();
  } else {
    secs = "0" + s.toString();
  }


  //FUNCTION OUTPUT - (hhmmss)
  return hrs + mins + secs;

}



a quick sketch to capture my idea




Project 6 – Abstract Clock
alyssa — Mon, 12 Oct 2020 03:58:47 +0000


sketchDownload
var w = 100; //color change
var h; //hour
var m; //minute
var s; //second
var c = []; //color gradient setup

function setup() {
    createCanvas(480, 480);
    for (var i = 0; i < 12; i++) {
    	c[i] = color(w, mouseY, 200);
    	if (i > 6) {
    		w -= 20;
    	} else {
    		w += 20;	
    	}
    }
    background(220);
    strokeWeight(0);
    frameRate(10);
}

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

	//hours
	if(h<12) {
		background(0, 50*h,50 );
	} else {
		background(0,255-50*(h-12),50);

	//setup
	translate(240, 240);
	circles();

	//minutes
	rotate(radians(6));
		fill(mouseY, m * 5, 200);
		push();
		ellipse(0, 0, 100, m);
		pop();
		}

	//seconds
	rotate(radians(6));
		fill(mouseX, 100 - s * 5, 200);
		push();
		rotate(radians(s * 6));
		ellipse(0, 0, 100, 2 * s);
		pop();
		}


function circles() {
	for (var i = 0; i < 12; i++ ) {
		fill(c[i] - 200);
		circle(300, 0, 100);
		rotate(radians(30));
	}
	for (var i = 0; i < 12; i++ ) {
		fill(c[i] - 100);
		circle(200, 0, 100);
		rotate(radians(30));
	}
	for (var i = 0; i < 12; i++ ) {
		fill(c[i]);
		circle(150, 0, 100);
		rotate(radians(30));
	}
}




You can move the mouse around to change the color. This design was inspired by the loading buttons on websites. Loading buttons often remind me of how slowly time passses, so I used the circles in loading buttons as inspiration for my clock. 



example of loading buttons
 By the hour, the background gets darker or lighter. By the minute, the shade of the circle in the center background changes gets lighter. By the second, the circle in the middle grows wider, and resets after one minute. 



rough sketch of my design



Project 6 – Abstract Clock
TaterT — Mon, 12 Oct 2020 03:56:50 +0000

sketchvar angle = 0;

function setup() {
    createCanvas(480, 410);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(0, 5, 50);
    push();
    frameRate(1);
    translate(240, 480);
    rotate(radians(6) * second());
    earth();
    pop();
    scale(0.3);
    translate(0, 300);
    for (var m = 0; m < hour(); m ++) {
        translate(60, 0);
        star();
    }
}

function earth() {
    //earth
    translate(-240, -480);
    fill(188, 255, 255);
    noStroke();
    circle(240, 480, 300);
    //summer tree
    noStroke();
    fill(95, 58, 0);
    rect(230, 280, 20, 50);
    fill(71, 191, 12);
    circle(250, 240, 30);
    circle(233, 285, 30);
    fill(23, 139, 0);
    circle(255, 265, 40);
    circle(222, 249, 40);
    fill(164, 202, 156);
    circle(250, 290, 20);
    fill(140, 223, 123);
    circle(220, 270, 30);
    fill(37, 98, 25);
    circle(240, 260, 30);
    //fall tree
    fill(95, 58, 0);
    rect(390, 470, 50, 20);
    fill(255, 166, 13);
    circle(450, 460, 40);
    circle(440, 500, 20);
    circle(470, 490, 30);
    fill(255, 230, 160);
    circle(430, 480, 30);
    fill(246, 236, 64);
    circle(470, 470, 30);
    fill(201, 79, 60);
    circle(455, 500, 20);
    fill(255, 102, 0);
    circle(450, 480, 30);
    //winter tree
    fill(95, 58, 0);
    rect(230, 630, 20, 50);
    fill(255);
    circle(225, 673, 30);
    circle(250, 685, 40);
    circle(210, 690, 30);
    circle(260, 710, 30);
    circle(230, 710, 50);
    //spring flower
    fill(35, 169, 8);
    rect(40, 475, 50, 10);
    circle(75, 475, 10);
    circle(75, 485, 10);
    fill(204, 153, 255);
    circle(15, 480, 30);
    circle(30, 460, 30);
    circle(30, 500, 30);
    circle(50, 468, 30);
    circle(50, 493, 30);
    fill(245, 255, 149);
    circle(35, 480, 25);
}

function star() {
    fill(240, 255, 135);
    frameRate(10);
    var x = [50, 61, 83, 69, 71, 50, 29, 31, 17, 39];
    var y = [18, 37, 43, 60, 82, 73, 82, 60, 43, 37];
    var nPoints = x.length;
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        vertex (x[i] + random(-3, 3), y[i] + random(-3, 3));
    }
    endShape(CLOSE);
}




My inspiration for this clock is earth! A full rotation will occur every minute, and a star will appear every hour!



Project-06-Abstract-Clock
xmf — Mon, 12 Oct 2020 03:50:31 +0000

sketch
  // Xander Fann xmf Section B

function setup() {
    createCanvas(600, 600);
    background(220);
}

function draw() {
    var s = second()*10;
    var m = minute()*10;
    var h = hour()/2;
    background(190, 210, 255);//sky
    noStroke()
    //human
    push();
    translate(m,0)
    fill(0)
    circle(0,390,20) //head
    ellipse(0,430,30,50) // body
    pop();
    //sun
    fill(255,255,0,150); // yellow, lowered opacity
    circle(width/2,height/2,h*30);
    if (h>= 12) {circle(width/2,height/2,h/30); //when past 12 the sun shrinks
    }
    //cloud
    push();
    translate(s,0);
    for(x = 25;x<=145;x+=40){ // three clouds changing arch height and opacity
      fill(255,255,255,x/1.5);arc(x,200,200,x*1.5,PI,0)
    }
    pop();
    //bridge and ground
    fill(142, 224, 137);
    stroke(176, 147, 91);
    strokeWeight(7);
    line(0,450,600,450);
    noStroke();
    arc(0,height,400,300,PI,0);//ground
    arc(width,height,400,300,PI,0);

}




Back then the daylight outdoors was the only way to tell when it was time to work or sleep. My abstract clock is determined by the movement of the sky, the movement of the human doing work and the size of the sun. The sun is getting larger as time increases towards the day and the man will always be moving to do work.



Project 6 – Abstract Clock
iris — Mon, 12 Oct 2020 03:50:15 +0000

sketchfunction setup() {
    createCanvas(600,600)
    background(0)
    angleMode(DEGREES);

    fill(10);
    ellipse(width / 2, height / 2, 400, 400);
}

function draw() {

    //movement
    a = sin(frameCount)
    b = cos(frameCount)

    translate(width / 2, height / 2);
    background(0, 10)

    strokeWeight(0.5);
    //month
    push();
    stroke(155, b * 100 + 55, 155);
    rotate(180 / 12 * month() - 45);
    line(300 * a, 200 * b, 100 * b, 50 * a);
    pop();
    //day
    push();
    stroke(a * 100 + 55, 155, 155);
    rotate(180 / 31 * day() - 45);
    line(50 * a, 10 * b, 300 * b, 300 * a);
    pop();

    strokeWeight(3);
    //hour
    push();
    stroke(100);
    rotate(180 / 24 * hour() - 45);
    line(200 * a, 200 * b, 200 * b, 200 * a);
    pop();
    //min
    push();
    stroke(b * 100 + 155, a * 100 + 155, 255);
    rotate(180 / 12 * min() - 45);
    line(175 * a, 175 * b, 175 * b, 175 * a);
    pop();
    //second
    push();
    stroke(second() * 2 + 135, 375 - second() * 2, 255);
    rotate(180 / 60 * second() - 45);
    line(150 * a, 150 * b, 150 * b, 150 * a);
    pop();

};



For this project, I wanted to go for a more abstract way to display a conventional-looking clock in order to challenge the way we look and think about time. I wanted to focus on temporality and make it so that even the clock base itself isn’t necessarily visible or present.