Category: Project-06-Abstract-Clock

Project 06: Abstract Clock

The idea here was to use a binary representation for a clock. Green is 1, red is 0. The clock hours with the back square as the MSB, while minutes have the back square as the LSB. If the back left square is green, that means it’s 8 o’clock, and if the back right square is green, that means it’s 8:01. The back building, tells whether it is afternoon or not. This is also the return of 3D space in my projects. Hooray.

yeeeeeeeeeeeeet

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

/* 
  Idea: Create a small town that tells the time based on what's "open."
  Doors will represent a binary pattern on each side of town.
  A building in the back tells whether it is am or pm.
*/

function draw() {
    background(0);

    fill(255);
    stroke("#FF00FF");

    // fill the floor and make a road
    drawCube(-10000, 200, 1, 20000, 0, 20000);
    fill(128);
    drawCube(-200, 200, 1, 400, 0, 20000);

    // draw am pm  tower
    fill("#800080");
    drawCube(-200, -400, 2400, 400, 600, 400);
    fill(hour() < 12 ? "#800000" : "#008000");
    drawCube(-100, -300, 2400, 200, 200, 0);

    // get time and store it
    let h = hour() % 12;
    let m = minute();

    var hStr = h.toString(2);
    var mStr = m.toString(2);

    // draw cubes and doors
    for (var i = 0; i < 4; i++) {
        fill("#800080");
        drawCube(200, -400, 1800 - (i * 500), 800, 600, 400);
        drawCube(-200, -400, 1800 - (i * 500), -800, 600, 400);
        
        // hour squares
        fill(hStr[i] == 1 ? "#008000" : "#800000");
        drawCube(-200, (i * -100), 1900 - (i * 500), 100, 100, 0);

        // minute squares
        fill(mStr[i] == 1 ? "#008000" : "#800000");
        drawCube(200, (i * -100), 1900 - (i * 500), -100, 100, 0);
        if (i > 1) {
            fill(mStr[i+2] == 1 ? "#008000" : "#800000");
            drawCube(200, 200 + (i * -100), 1900 - (i * 500), -100, 100, 0);
        }
    }

    
}

// the return of the 3d projection matrix

// uses projection matrix seen in this video:
// https://www.youtube.com/watch?v=ih20l3pJoeU
// the video is mostly math about projecting 3d coordinates to 2d coordinates
function projMatrixMult(coords) {
    // aspect ratio
    var a = width / height;

    // field of view
    var fov = HALF_PI;
    f = 1 / tan(fov / 2);

    // range of view
    var zNear = 0.1;
    var zFar = 1000;

    var q = zFar / (zFar - zNear);

    if (coords.length != 3) {
        print("Improper array size.");
        return coords;
    } else {
        // this calculates the result of multiplying [x, y, z, 1]
        // with a 4x4 projection matrix (not shown for lack of use without
        // the math.js extension)
        let projMat = [a * f * coords[0], f * coords[1], 
                       coords[2] * q - zNear * q, coords[2]];
        
        if (coords[2] != 0) {
            projMat[0] /= projMat[3];
            projMat[1] /= projMat[3];
            projMat[2] /= projMat[3];
            projMat[3] /= projMat[3];
            return projMat;
        } else {
            print("z is equal to 0");
            return coords;
        }
    }
}

// self explanatory
// note to self: add rotation parameters
// note to self: generalize for any number of points greater than 4 (later)
function drawCube(x, y, z, wid, hei, d) {
    // push 3d coords to an array
    let cubePoints3D = [];
    cubePoints3D.push([x, y + hei, z]); // front bottom left            0
    cubePoints3D.push([x, y, z]); // front top left                     1
    cubePoints3D.push([x + wid, y + hei, z]); // front bottom right     2
    cubePoints3D.push([x + wid, y, z]); // front top right              3
    cubePoints3D.push([x, y + hei, z + d]); // back bottom left         4
    cubePoints3D.push([x, y, z + d]); // back top left                  5
    cubePoints3D.push([x + wid, y + hei, z + d]); // back bottom right  6
    cubePoints3D.push([x + wid, y, z + d]); // back top right           7

    // get projection and add to list of points
    let cubeProj = [];
    for (let i = 0; i < cubePoints3D.length; i++) {
        cubeProj.push(projMatrixMult(cubePoints3D[i]));
    }

    // this scales the image to be on screen
    for (let i = 0; i < cubeProj.length; i++) {
        cubeProj[i][0] += 1;
        cubeProj[i][1] += 1;

        cubeProj[i][0] *= width / 2;
        cubeProj[i][1] *= height / 2;
    }

    // need 6 quads for the 6 faces of the cube, draw the further quads first
    // realistically, without camera movement or rotation, i can draw only
    // 5 quads and still have it look find regardless of placement
    // if i add rotation, i need to add conditionals for what is drawn first
    
    // back face
    quad(cubeProj[7][0], cubeProj[7][1], cubeProj[6][0], cubeProj[6][1],
        cubeProj[4][0], cubeProj[4][1], cubeProj[5][0], cubeProj[5][1]);
    
    // bottom
    quad(cubeProj[6][0], cubeProj[6][1], cubeProj[4][0], cubeProj[4][1],
        cubeProj[0][0], cubeProj[0][1], cubeProj[2][0], cubeProj[2][1]);

    // top
    quad(cubeProj[7][0], cubeProj[7][1], cubeProj[5][0], cubeProj[5][1],
        cubeProj[1][0], cubeProj[1][1], cubeProj[3][0], cubeProj[3][1]);

    if (x > 0) {
        // left
        quad(cubeProj[5][0], cubeProj[5][1], cubeProj[4][0], cubeProj[4][1],
            cubeProj[0][0], cubeProj[0][1], cubeProj[1][0], cubeProj[1][1]);

        // right
        quad(cubeProj[7][0], cubeProj[7][1], cubeProj[6][0], cubeProj[6][1],
            cubeProj[2][0], cubeProj[2][1], cubeProj[3][0], cubeProj[3][1]);
    } else {
        // right
        quad(cubeProj[7][0], cubeProj[7][1], cubeProj[6][0], cubeProj[6][1],
            cubeProj[2][0], cubeProj[2][1], cubeProj[3][0], cubeProj[3][1]);

        // left
        quad(cubeProj[5][0], cubeProj[5][1], cubeProj[4][0], cubeProj[4][1],
            cubeProj[0][0], cubeProj[0][1], cubeProj[1][0], cubeProj[1][1]);
    }
    
    // front
    quad(cubeProj[3][0], cubeProj[3][1], cubeProj[2][0], cubeProj[2][1],
        cubeProj[0][0], cubeProj[0][1], cubeProj[1][0], cubeProj[1][1]);

    // the lines are no longer necessary
}

Project 6: Abstract Clock

sketch
/*
Bon Bhakdibhumi
bbhakdib
Section D
*/

function setup() {
    createCanvas(480, 480);
    background(0);
    frameRate(1);
}

function draw() {
    noStroke();
    var x = random(0, 480);
    var y = random(0, 480);

// every second generate 1 random white star
    fill(255);
    circle(x, y, 3);

// every minute generate 1 cyan star
  if(second() == 59) {
      fill(0, 255, 255);
      circle(x, y, 10);
  }

// every hour generate 1 yellow star
  if (minute() == 59 & second() == 59) {
      fill(255, 255, 0);
      circle(x, y, 35)
  }
// when clock reaches 24 hr reset background to black
  if (hour() == 23 & minute() == 59 && second() == 59) {
      background(0);
  }
}

For this project, I was inspired by the concept of time and the universe, which is still yet to be fully discovered or understood. In my work, a second is represented by a small “white start” appearing into the “universe.” A minute is by a “blue star”, and an hour is represented by a yellow star. When the clock reaches 24 hours, the canvas is reset to black

The Universe

Project 06 Abstract Clock

In this project the aim was to create various patterns based on numerical operations on the values of time it self. The resulting clock behaves more like a timer, that resets every 20 seconds. There are in reality 6 different types of patterns that can be created based on manipulating the numeric value of seconds, but by overlaying two 10 second patterns, there begins to be a higher level of nuance to the resulting geometries.

sketch
//tjchen
//section a
//abstract clock

var angle = 0;
var r = 0; // distance from center 
var framecount= 0;

function setup() {
    createCanvas(480, 480);
    background(0);
    noStroke();
    frameRate(60);
}

function draw() {
//map time to color
    var minutecolor = map(minute(),0,59,0,255);
    var secondcolor = map(second(),0,59,0,255);
//reset's stopwatch after 20 seconds 
    if(second()%20==0){
        fill(0);
        square(0,0,width);
    }
//new pattern every 10 seconds
    if (second()%10 === 0){
        angle=0;
        r = 0 ;
        framecount = 0;
    }
    var cenX = (width/2);
    var cenY = (height/2);
//draw circles 
    push();
    translate(cenX,cenY);
    x = r*cos(radians(angle));
    y = r*sin(radians(angle));
    fill(random(255),minutecolor,secondcolor);
    circle(x,y,3);
    r += 0.75;
// creates circle pattern 
    angle += map(second(),0,59,0,360); 
    pop();
    framecount+=1
}

Project 6: Abstract Clock

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

function draw() {
    background(241, 225, 174);
    
    //background elements art
    stroke(0);
    noFill(); 
    ellipse(300, 360, 90); //minute ellipse outline
    triangle(350, 30, 430, 90, 410, 105); //top r corner triangle
    fill(41, 72, 108, 220); //blue quad
    quad(170, 100, 190, 270, 290, 320, 60, 450);
    fill(41, 72, 108, 180); //blue circle
    ellipse(300, 160, 40);
    fill(120, 79, 58, 220); //brown quad
    quad(50, 160, 130, 370, 340, 465, 180, 350);
    fill(226, 170, 56, 150); //yellow circles
    ellipse(110, 300, 130);
    ellipse(180, 30, 30);
    
    push();
    noStroke();
    fill(192, 50, 47, 220);  //red triangle and ellipse
    triangle(80, 35, 135, 90, 20, 130);
    ellipse(230, 450, 25);
    fill(120, 79, 58, 200); //brown triangle
    triangle(270, 240, 430, 380, 240, 350);
    fill(0);    //black triangle
    triangle(380, 350, 440, 400, 370, 390);
    pop();

    //hours red arc
    push();
    translate(300, 200);
    rotate(-135);
    hr();
    pop();

    //wavy lines
    push();
    noFill();
    strokeWeight(2);
    strokeCap(SQUARE);
    translate(370, 200);
    rotate(30);
    bezier(40, -40, -40, -40, 40, 40, -40, 45);
    translate(10, 10);
    bezier(35, -35, -40, -40, 35, 35, -20, 35);
    pop();

    //minutes yellow arc
    push();
    translate(300, 360);
    rotate(-90);
    scale(.5);
    mins();
    pop();

    //seconds black line
    push();
    translate(240, 240);
    rotate(-135);
    sec();
    pop();
}

//hours, minutes, seconds functions
function hr() {
    var h = hour();
    noFill();
    strokeCap(SQUARE);
    strokeWeight(10);
    stroke(192, 50, 47);
    var hourHand = map(h % 24, 0, 24, 0, 360);
    arc(0, 0, 200, 200, 0, hourHand);
}

function mins() {
    push();
    var m = minute();
    noFill();
    strokeCap(SQUARE);
    strokeWeight(80);
    stroke(226, 170, 56, 200);
    var minHand = map(m, 0, 60, 0, 360);
    arc(0, 0, 100, 100, 0, minHand);
    pop();
    push();
    fill(0);
    ellipse(0, 0, 50);
    pop();
}

function sec() {
    var s = second();
    strokeCap(SQUARE);
    strokeWeight(10);
    stroke(0);
    var secHand = map(s, 0, 60, 0, 360);
    rotate(secHand);
    line(0, 0, 150, 150);
}

For my project, I was inspired by Bauhaus art and design and decided to make an abstract clock based on abstract artwork. When I started the project, I knew I wanted to use a combination of basic graphic elements to represent time instead of making a representational scene. After looking through some Bauhaus work, I found Kandinsky’s “Arch and Point” (1923). I think that the composition and interaction of shapes is really pleasing in this painting.

I did some quick sketches to think about what elements could represent elements of time. I simplified the composition to capture the most prominent elements of the piece and used the red arc to represent hours, the yellow arc to represent minutes, and the black line to represent seconds for a 24-hour clock.

“Arch and Point” by Kandinsky
digital sketch

Project 06: Abstract Clock

For this project I wanted to play with circles and colors.

sketch
//Jessie Chen
//D
//jessiech@andrew.cmu.edu
//Project 06
//Abstract Clock


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

function draw() {
    //background(255, 234, 204);
    background(255)
    var hr = hour();
    var min = minute();
    var sec = second();
    translate(240, 240);
    rotate(radians(-90));
    noStroke();
    //blue minute circle
    let minAngle = map(min, 0, 60, 0, 360);
    fill(0, 200, 255, 190);
    var xmin = 65 * cos(radians(minAngle));
    var ymin = 65 * sin(radians(minAngle));
    ellipse(xmin, ymin, 180, 180);
    //tick inside circle
    push();
    strokeWeight(5);
    stroke(255);
    line(xmin * 2.35, ymin * 2.35, xmin * 2.23, ymin * 2.23);
    pop();
    //yellow seconds circle
    let secAngle = map(sec, 0, 60, 0, 360);
    fill(255, 213, 0, 220);
    var xsec = 50 * cos(radians(secAngle));
    var ysec = 50 * sin(radians(secAngle));
    ellipse(xsec, ysec, 150, 150);
    //tick inside circle
    push();
    strokeWeight(5);
    stroke(255);
    line(xsec * 2.45, ysec * 2.45, xsec * 2.3, ysec * 2.3);
    pop();
    //pink hour circle
    let hrAngle = map(hr % 12, 0, 12, 0, 360);
    var xhr = 85 * cos(radians(hrAngle));
    var yhr = 85 * sin(radians(hrAngle));
    fill(255, 0, 119, 190);
    ellipse(xhr, yhr, 220, 220);
    //tick inside circle
    push();
    strokeWeight(5);
    stroke(255);
    line(xhr * 2.17, yhr * 2.17, xhr * 2.26, yhr * 2.26);
    pop();
    //centerdot
    fill(255);
    ellipse(0, 0, 10, 10);
    //ticks
    tick(255, 153, 201); //pink
    push();
    rotate(radians(30));
    tick(255, 234, 125) //yellow
    pop();
    push();
    rotate(radians(60));
    tick(182, 237, 252); //blue
}


function tick(r, g, b) {
    radius = 225;
    for (angle = 0; angle < 360; angle = angle + 90) {
        var x = radius * cos(radians(angle));
        var y = radius * sin(radians(angle));
        fill(r, g, b);
        ellipse(x, y, 25, 25);
    }
}

Project – 06 – Abstract Clock

sketchDownload
/* 
 * Amy Lee 
 * amyl2
 * Section B 
 */ 

 var x = []; 
 var y = []; 

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

    // For the random placement of the stars
    for (i = 0; i < 60; i++){
    	x[i] = random(10,390); 
    	y[i] = random(10,200); 
    }

}

function draw() {
    noStroke(); 

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

    // Background color gets darker as seconds pass by 
	background (83 - (2*s), 143 - (2*s), 213 - (2*s));

    // Drawing static hills
    fill(122,172,136); 
    ellipse(80,435,300,440);    
    fill(122,172,136); 
    ellipse(width-80,435,300,440);  
    fill(161,206,148); 
    ellipse(200,440,500,400);

    // New star appearing every minute 
    for(i = 0; i < m; i ++){
    	fill(252,255,149); 
    	ellipse(x[i],y[i],7,7); 
    }

    // Moon increasing size every second  
    var s1 = map(s, 0, 60, 0,200); 

    // Drawing Moon 
 	stroke(242, 242, 242,40);
  	strokeWeight(10);
  	fill(220,220,220,50);
  	ellipse(50, 50, s1, s1);

    // Drawing Sheep 
	noStroke(); 
    // Legs
    fill(92); 
    ellipse(175,315,15,50);
    ellipse(225,315,15,50); 
    // Body 
    fill(255);
    ellipse(200,310,50,50); 
    ellipse(170,280,50,50); 
    ellipse(200,270,50,50); 
    ellipse(230,280,50,50); 
    ellipse(170,300,50,50); 
    ellipse(230,300,50,50); 
    // Fur texture 
    fill(152); 
    ellipse(220,290,15,15); 
    fill(255); 
    ellipse(222,290,15,15); 

    fill(152); 
    ellipse(190,305,15,15); 
    fill(255); 
    ellipse(188,305,15,15); 

    fill(152); 
    ellipse(193,315,8,8); 
    fill(255); 
    ellipse(191,315,8,8); 

    fill(152); 
    ellipse(170,282,15,15); 
    fill(255); 
    ellipse(172,282,15,15);   

   	// Face 
    fill(92);  
    ellipse(240,270,40,40);

    // Making the eye close or open every hour  
    var eyeDiam = 20; 
    if ((h%2)>0){
    	eyeDiam = 20; //closed 
    }else if((h%2)==0){
    	eyeDiam = 0.1; //opened 
    }
    // Ear 
    ellipse(220,275,20,10);
    // Eye 
    fill(0); 
    ellipse(240,270,15,15); 
    fill(92);
    ellipse(235,265,eyeDiam,eyeDiam); 

    // Tail 
    fill(255); 
    ellipse(140,290,20,10); 

    // Fence 
    fill(175,140,117);
    rect(0,350,15,height); 
    rect(385,350,15,height); 
    rect(0,360,width,10); 
    rect(0,380,width,10); 

  }

For this project, I thought of how I used to try counting sheep to fall asleep when I was younger. Unfortunately, it usually didn’t work too well. As a result, I was inspired to create an abstract clock that depicts a sheep trying to sleep but waking up every hour. The moon expands and the night sky gets darker every second. A new star also appears every minute.

Project-06

sketch


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

function draw() {
	background(0, 150, 250); //sky blue
	var s = second();
	var m = minute();
	var h = hour();
	var d = day();
	noStroke();

	//water
	fill(0, 0, 230); //water blue
	rect(0, 180, 480, 220);
	//waves
    for (var a = 0; a <= width; a = a+1) {
    	for (var b = 200; b <= 450; b = b+50) {
    	stroke(0, 0, 150);
    	strokeWeight(1);
    	point(a, b - 15 * sin(radians(a)));	
        }
    }
    fish(200, 250);
    fish(400, 300);
    fish(60, 275);
    
    //sand
    noStroke();
    fill(170, 100, 20) //darker brown, shows up as water receeds
    rect(0, 380-h*2, 480, 400);
	fill(185, 122, 40); //lighter brown with dots in the sand
	rect(0, 380, 480, 120);
	for (var sx = 20; sx <= width; sx = sx+40) {
		for (var sy = 400; sy <= height; sy = sy + 40) {
        stroke(223, 182, 112); //lightest brown
        strokeWeight(3);
        point(sx, sy);
		}
	}
	for (sx = 40; sx <= width; sx = sx + 40){
		for (sy = 420; sy <= height; sy = sy + 40){
			point(sx, sy);
		}
	}
	crab(s*8, 440);
	sun(m*8, 70);
	cloud(400, 50);
	cloud(50, 75);
	boat(d*13, 170);

}


function crab(x, y) {
	push();
	translate(x, y);
	noStroke();
	fill(230, 0, 0);
	ellipse(0, 0, 30, 20);
	fill(255);
	ellipse(-8, -9, 5, 5);
	ellipse(8, -9, 5, 5);
	fill(0);
	ellipse(-8, -9, 3, 3);
	ellipse(8, -9, 3, 3);
	stroke(230, 0, 0);
	strokeWeight(4);
	line(-10, 5, -25, 20);
	line(10, 5, 25, 20);
	line(-15, 0, -25, 5);
	line(15, 0, 25, 5);
	pop();
}

function fish(x, y) {
	push();
	translate(x, y);
	noStroke();
	fill(225, 0, 225); //light purple
	ellipse(0, 0, 30, 15);
	triangle(15, 0, 25, -10, 25, 10);
	fill(255);
	circle(-8, 0, 5);
	fill(0);
	circle(-8, 0, 3);
	pop();
}

function sun(x, y) {
	push();
	translate(x, y);
	noStroke();
	fill(255, 255, 0);
	circle(0, 0, 45);
	stroke(255, 150, 0);
	strokeWeight(7);
	line(30, 0, 50, 0);
	line(-30, 0, -50, 0);
	line(0, 30, 0, 50);
	line(0, -30, 0, -50);
	rotate(radians(45));
	line(30, 0, 50, 0);
	line(-30, 0, -50, 0);
	line(0, 30, 0, 50);
	line(0, -30, 0, -50);
	pop();

}

function boat(x, y) {
	push();
	translate(x, y);
	noStroke();
	fill(185, 122, 40); //main sand brown
	arc(0, 0, 60, 60, 0, PI, CHORD);
	rect(-5, -50, 5, 50);
	fill(255);
	triangle(0, -50, 0, -10, 30, -10);
	triangle(-5, -50, -5, -10, -30, -10);
	pop();
}

function cloud(x, y) {
	push();
	translate(x, y);
	noStroke();
	fill(240);
	circle(0, 0, 45);
	circle(25, 10, 25);
	ellipse(0, 20, 75, 20);
	pop();
}

I made this based on a beach scene. The crab moves across the sand with the seconds, the sun moves across the sky with the minutes, the water recedes with the hours, exposing the darker brown (wet) sand below it. The boat moves based on the day.

Abstract Clock

sketch.6.slDownload
// Sarah Luongo
// Section A

// This code aims to tell time via a buttefly, with the body filling to blue every second, purple dots being added every minute, and the background changing every hour.

var r = 12;
var g = 16;
var b = 30;

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

function draw() {
    // Background changes different shades of blue every hour
    H = hour();
    // Black - medium blue from 12 AM - 7 AM
    if (H<8){
        background(r*H, g*H, b*H);
    // Medium blue - light blue from 8 AM - 4 PM
    } else if (H >= 8 & H <= 16) {
	background(r*H, g*H, 245*H);
    // Light blue - dark blue from 5 PM - 11 PM
    } else {
        background(192 - (r+13)*(H-16), 255 - (g+20)*(H-16), 255 - b*(H-16));
    }

    translate(width/2, height/2);
    // Pink wings for the butterfly
    fill(255, 50, 123);
    butterflyW();

    // Body of the butterfly
    fill(0); // Black
    ellipse(0, 0, 6, 100);

    // Body filling to a blue color every second
    fill(120, 150, 160);
    var S = map(second(), 0, 59, 0, 100);
        ellipse(0, 0, 6, S);

    // Purple dots added every minute
    fill(75, 0, 110);
    rotate(radians(45));
    for (var j = 0; j < minute(); j++) {
	// Bottom right wing
	if(j <= 15) {
	    circle(j*12+13, 0, 10);
	// Top left wing 
	} else if(j <= 30) {
	    circle(-(j-15)*12-7,0,10);
	// Bottom left wing
	} else if (j <= 45) {
	    rotate(radians(90));
	    circle((j-30)*12+7,0,10);
	    rotate(radians(-90));
	// Top right wing
	} else {
	    rotate(radians(90));
	    circle(-(j-45)*12-7,0,10);
	    rotate(radians(-90));
	}
    }
}

function butterflyW() {
    var da = PI/100;
    beginShape();
    for (var i = 0; i <= 2*PI; i += da) {
	var w = sin(2*i) * width/2;
	var x = w * cos(i);
	var y = w * sin(i);
	vertex(x, y);
    }
    endShape(CLOSE);
}

I wanted to do a butterfly to tell time for this project because I was inspired by one of the many faces on my apple watch. Also, I used to love catching butterflies when I was younger (and letting them go of course). I think there are a lot of beautiful butterflies out there. I would’ve like to do a more exquisite butterfly, but I felt it was better to try and have the assignment requirements down before designing anything too crazy. I was happy to at least show a little design to the butterfly with the addition of purple dots every minute.

Project : 06

sketch 
/*Aadya Bhartia
Section A 
abhartia@cmu.edu*/

//initializing arrays to hold x and y position of candy based on hours 
var candyX = [0,0,25,-25,-8,43,-42,15,-21,40,-45,6,12];
var candyY = [0,47,40,40,18,18,18,12,2,-5,-10,-15,-20];
var minX = 90;
var minY = 90;
var secX = 260;
var secY = 380;
var hr = 0;

function setup() {
    createCanvas(500, 500);
    background(255, 217, 206);
}
function draw() {
	background(255, 217, 206);
	var s = second();
	var m = minute();
	var h = hour();
	var angle = 0;
	var secR = s/60;
	var minR = m/60;
	//seconds 
	fill(139, 170, 173,90);
	noStroke();
	ellipse(secX, secY, 177*secR); //circle increasing in size for seconds
	stroke(64, 78, 92);
	strokeWeight(1/20*s);
	noFill();
	arc(secX,secY,200, 200, 0 , 2*PI * secR);
	stroke(146, 55, 77);
	strokeWeight(1/6*s); //stroke gets thicker based on seconds
	noFill();
	arc(secX,secY,184, 184, 0 ,2*PI * secR);
	fill(221, 117, 150);
	noStroke();
	rect(secX+82,secY-8,200,10); //bar for seconds 
	//minutes 
	fill(221, 117, 150);
	noStroke();
	rect((minX-3),(minY +62),6,400);//base for the candy ball to count minutes 
	push();
	noFill();
	strokeWeight(1/5*m);
	stroke(113, 10, 53);
	translate(minX,minY);
	ellipse(0, 0, 140); //base for the candy ball to count minutes
	stroke(0);
	strokeWeight(1);
	//hour
	hr = h%12; // number of candy in the ball count the hours 
	candy(hr);
	pop();
	//minutes counted with hearts in a 6 by 10 grid 
	var ctr = [];
	var counter = 0;
	for(var i = 0;i<60;i++){ //creating an array to store all possible minutes 
		ctr.push(i);
	}
	for(var x = 1;x<7;x++){
		for(var y = 1;y<=10;y++){
			push();
			translate(320,8);
			if(counter == m){
				fill(255); //white colour for current minute 
				heart(25*x,25*y);
			}
			else{
				fill(221, 117, 150,random(100,200));
				heart(25*x,25*y);
			}
			pop();
		counter+=1;
		}
	}
}
//candy helps count the hours 
function candy(hr){
	for(var j = 1; j<=hr;j++){//candy globe effect given by the predefined array counting the hours
		fill(random(100,200),random(0,50),random(20,70));
		ellipse(candyX[j],candyY[j],35);
	}
}
function heart(minX,minY){ //creating hearts which count the minutes 
	ellipse(minX-4,minY,9);
	ellipse(minX+4,minY,9);
	triangle(minX-8,minY+2,minX+8,minY+2,minX,minY+10)
}
For this project, I decided to create something which had elements of a candy store the seconds are calculated through the circle on the bottom right, the minutes by the candy globe shell and by the hearts while the hours are shown through the number of candy balls in the globe.

Project 06 – clock

Hi friends!! For those that don’t know me very well, I spend a lot of time talking about astrology. Instead of making a clock that tells the time per say, I made a clock that tells the current astrological sign in the ascendant, which changes every two hours. I know it’s not exactly the same goal as the project but look at my symbols for each sign! I spent so long making them!!

sketchDownload
//To quickly explain, I'm making a clock for astrological rising signs in the Libra season (right now)
//Rising signs change every 2 hours
var x;
var y;
var h;

function setup() {
    createCanvas(100, 650);
    background(255);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

//symbols for eahc of the signs
function aries(x, y) {
	strokeWeight(3);
	beginShape();
	curveVertex(x, y);
	curveVertex(x, y);
	curveVertex(x + 10, y - 16);
	curveVertex(x + 25, y + 32);
	curveVertex(x + 40, y - 16);
	curveVertex(x + 50, y);
	curveVertex(x + 50, y);
	endShape();
}

function taurus(x, y) {
	strokeWeight(3);
	beginShape();
	curveVertex(x, y);
	curveVertex(x, y);
	curveVertex(x + 25, y + 16);
	curveVertex(x + 50, y);
	curveVertex(x + 50, y);
	endShape();
	noFill();
	circle(x + 25, y + 32, 32);
}

function gemini(x, y) {
	strokeWeight(3);
	line(x, y, x + 50, y);
	line(x + 15, y, x + 15, y + 40);
	line(x + 35, y, x + 35, y + 40);
	line(x, y + 40, x + 50, y + 40);
}

function cancer(x, y) {
	strokeWeight(3);
	beginShape();
	curveVertex(x, y);
	curveVertex(x, y);
	curveVertex(x + 25, y - 5);
	curveVertex(x + 50, y);
	curveVertex(x + 50, y);
	endShape();
	beginShape();
	curveVertex(x, y + 35);
	curveVertex(x, y + 35);
	curveVertex(x + 25, y + 40);
	curveVertex(x + 50, y + 35);
	curveVertex(x + 50, y + 35);
	endShape();
	circle(x + 10, y + 7, 20);
	circle(x + 40, y + 28, 20);
}

function leo(x, y) {
	strokeWeight(3);
	beginShape();
	curveVertex(x, y);
	curveVertex(x, y);
	curveVertex(x - 10, y - 20);
	curveVertex(x + 10, y - 24);
	curveVertex(x + 20, y - 20);
	curveVertex(x + 10, y + 20);
	curveVertex(x + 20, y + 18);
	curveVertex(x + 20, y + 18);
	endShape();
	circle(x - 10, y, 20);
}

function virgo(x, y){
	strokeWeight(3);
	line(x, y, x, y + 40);
	beginShape();
	curveVertex(x, y + 5);
	curveVertex(x, y + 5);
	curveVertex(x + 10, y);
	curveVertex(x + 10, y + 40);
	curveVertex(x + 10, y + 40);
	endShape();
	beginShape();
	curveVertex(x + 10, y + 5);
	curveVertex(x + 10, y + 5);
	curveVertex(x + 20, y);
	curveVertex(x + 20, y + 40);
	curveVertex(x + 25, y + 45);
	curveVertex(x + 25, y + 45);
	endShape();
	beginShape();
	curveVertex(x + 20, y + 15);
	curveVertex(x + 20, y + 15);
	curveVertex(x + 35, y + 10);
	curveVertex(x + 15, y + 45);
	curveVertex(x + 15, y + 45);
	endShape();
}

function libra(x, y) {
	strokeWeight(3);
	line(x, y, x + 50, y);
	beginShape();
	curveVertex(x, y - 10);
	curveVertex(x, y - 10);
	curveVertex(x + 15, y - 10);
	curveVertex(x + 10, y - 30);
	curveVertex(x + 25, y - 40);
	curveVertex(x + 40, y - 30);
	curveVertex(x + 35, y - 10);
	curveVertex(x + 50, y - 10);
	curveVertex(x + 50, y - 10);
	endShape();
}

function scorpio(x, y) {
	strokeWeight(3);
	line(x, y, x, y + 40);
	beginShape();
	curveVertex(x, y + 5);
	curveVertex(x, y + 5);
	curveVertex(x + 10, y);
	curveVertex(x + 10, y + 40);
	curveVertex(x + 10, y + 40);
	endShape();
	beginShape();
	curveVertex(x + 10, y + 5);
	curveVertex(x + 10, y + 5);
	curveVertex(x + 20, y);
	curveVertex(x + 20, y + 40);
	curveVertex(x + 25, y + 45);
	curveVertex(x + 30, y + 40);
	curveVertex(x + 30, y + 40);
	endShape();
	triangle(x + 28, y + 38, x + 32, y + 42, x + 31, y + 36);
}

function sag(x, y) {
	strokeWeight(3);
	line(x, y, x + 30, y - 40);
	line(x + 5, y - 30, x + 30, y - 10);
	line(x + 15, y - 40, x + 30, y - 40);
	line(x + 30, y - 40, x + 40, y - 25);
}

function cap(x, y) {
	strokeWeight(3);
	beginShape();
	curveVertex(x, y);
	curveVertex(x, y);
	curveVertex(x + 5, y + 20);
	curveVertex(x + 10, y);
	curveVertex(x + 15, y - 5);
	curveVertex(x + 20, y);
	curveVertex(x + 20, y + 35);
	curveVertex(x + 15, y + 40);
	curveVertex(x + 15, y + 40);
	endShape();
	circle(x + 30, y + 30, 20);
}

function aqua(x, y) {
	strokeWeight(3);
	line(x, y, x + 10, y - 5);
	line(x + 10, y - 5, x + 15, y);
	line(x + 15, y, x + 25, y - 5);
	line(x + 25, y - 5, x + 30, y);
	line(x + 30, y, x + 40, y - 5);
	line(x + 40, y - 5, x + 45, y);
	line(x, y + 20, x + 10, y + 15);
	line(x + 10, y + 15, x + 15, y + 20);
	line(x + 15, y + 20, x + 25, y + 15);
	line(x + 25, y + 15, x + 30, y + 20);
	line(x + 30, y + 20, x + 40, y + 15);
	line(x + 40, y + 15, x + 45, y + 20);
}

function pisces(x, y) {
	strokeWeight(3);
	line(x, y, x + 50, y);
	beginShape();
	curveVertex(x, y - 20);
	curveVertex(x, y - 20);
	curveVertex(x + 15, y);
	curveVertex(x, y + 20);
	curveVertex(x, y + 20);
	endShape();
	beginShape();
	curveVertex(x + 50, y - 20);
	curveVertex(x + 50, y - 20);
	curveVertex(x + 35, y);
	curveVertex(x + 50, y + 20);
	curveVertex(x + 50, y + 20);
	endShape();
}

function draw() {
	//aries(25, 18);
	//taurus(25, 50);
	//gemini(25, 105);
	//cancer(25, 160);
	//leo(50, 235);
	//virgo(33, 260);
	//libra(25, 350);
	//scorpio(35, 360);
	//sag(33, 460);
	//cap(35, 470);
	//aqua(27, 530);
	//pisces(25, 580);
	//when we are in the range of this ascendant, the color of the symbol and the background reflects the element of that sign
	h = hour();
	if (h >= 0 & h < 2) {
		background(255, 54, 54);
		stroke(175, 0, 0); //fire is red
		leo(50, 235);
	} else if (h >= 2 & h < 4) {
		background(54, 255, 54);
		stroke(0, 175, 0); //earth is green
		virgo(33, 260);
	} else if (h >= 4 & h < 6) {
		background(150, 255, 255);
		stroke(0, 222, 222); //air is crystal blue
		libra(25, 350);
	} else if (h >= 6 & h < 8) {
		background(107, 107, 255);
		stroke(0, 0, 212); //water is royal blue
		scorpio(35, 360);
	} else if (h >= 8 & h < 10) {
		background(255, 54, 54);
		stroke(175, 0, 0);
		sag(33, 460);
	} else if (h >= 10 & h < 12) {
		background(54, 255, 54);
		stroke(0, 175, 0);
		cap(35, 470);
	} else if (h >= 12 & h < 14) {
		background(150, 255, 255);
		stroke(0, 222, 222);
		aqua(27, 530);
	} else if (h >= 14 & h < 16) {
		background(107, 107, 255);
		stroke(0, 0, 212);
		pisces(25, 580);
	} else if (h >= 16 & h < 18) {
		background(255, 54, 54);
		stroke(175, 0, 0);
		aries(25, 18);
	} else if (h >= 18 & h < 20) {
		background(54, 255, 54);
		stroke(0, 175, 0);
		taurus(25, 50);
	} else if (h >= 20 & h < 22) {
		background(150, 255, 255);
		stroke(0, 222, 222);
		gemini(25, 105);
	} else {
		background(107, 107, 255);
		stroke(0, 0, 212);
		cancer(25, 160);
	}
}