sketch
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.
]]>
sketchDownload
//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();
}
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.
sketchvar cx=[];
var cy=[];
function setup() {
createCanvas(480, 480);
background(220);
frameRate(5);
}
function draw() {
//the background changes with the hours
if(0<h<8){
background(179, 179, 255);
}
else if(8<h<16){
background(255, 191, 216);
}
else if(16<h<24){
background(2, 3, 82)
}
var d = new Date();
var h = d.getHours();
var m = d.getMinutes();
var s = d.getSeconds();
//draw the candy shop
console.log(s);
fill(3, 252, 202);
drawRoof();
drawPillars();
drawBox();
drawTable(m);
drawCandy();
//draw the 60 lollipops that represent seconds.
//The lollipop that represents the current second will pop up as the special lollipop
for (i=0;i<60;i++){
cx.push(random(95,385));
cy.push(random(250,280));
if (i==s){
drawSpecial(cx[s],cy[s]-50)
}
else{
drawCircle(cx[i],cy[i]);
}
}
}
function drawSpecial(x,y){
fill(random(0,255),random(0,255),random(0,255));
triangle(x,y,x-20,y-10,x-20,y+10);
triangle(x,y,x+20,y-10,x+20,y+10);
fill(200, 252, 86)
line(x,y,x,300);
circle(x,y,30);
}
//the decoration candy
function drawCandy(){
line(240,100,240,20);
line(240,100,440,150);
line(240,100,40,150);
fill(255, 252, 194);
triangle(260,100,290,80,290,120);
triangle(220,100,190,80,190,120);
fill(200, 252, 86)
ellipse(240,100,60,40);
fill('white');
ellipse(240,100,50,10);
fill(0);
ellipse(240,100,10,10)
}
function drawCircle(x,y){
line(x,y,x,300);
fill(random(0,255),random(0,255),random(0,255));
circle(x,y,20);
}
function drawPillars(){
fill('white');
rect(50,150,20,200);
rect(410,150,20,200);
}
function drawRoof(){
triangle(240,20,40,150,440,150);
}
//the stripes on the table correspond the minutes
function drawTable(m){
fill(190, 157, 245);
for (i=0;i<60;i++){
if(i==m){
fill('white');
rect(20,350+i*2,440,2);
}
else{
fill(117, 140, 255)
rect(20,350+i*2,440,2);
}
}
}
function drawBox(){
fill(134, 240, 234)
rect(90,300,300,100);
}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();
}
}
sketchDownload
var 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.
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!
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;
}
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.
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.
sketch
var 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!
]]> // 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.
]]>sketch
function 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.
]]>