Category: Project-06-Abstract-Clock

sketch

//Yinjie Tian
//Section D
//yinjiet@andrew.cmu.edu
//Assignment 06

var x = []; 
var y = [];
var dx = []; 
var dy = []; 
var color = []; 


function setup() { 
    createCanvas(480, 480);
    angleMode(DEGREES);
    for (i = 0; i < 100; i++) { 
        x[i] = random(width);
        y[i] = random(height);
        dx[i] = random(-5, 5);
        dy[i] = random(-5, 5);
        color[i] = color(random(255), random(255), random(255));
        
    }
    frameRate(5);
}


function draw() {
 
    background(0);
 
 //stars at the background   
    noStroke();
    for (i = 0; i < 100; i++) {  // for each stars at the back ...
        fill(color[i]);
        ellipse(x[i], y[i], 10, 10);
        x[i] += dx[i];
        y[i] += dy[i];
        
        if (x[i] > width) x[i] = 0;        //horizontally
        else if (x[i] < 0) x[i] = width;
        if (y[i] > height) y[i] = 0;       //vertically
        else if (y[i] < 0) y[i] = height;
    }

        var h = hour();
        var m = minute();
        var s = second(); 
        var ring = random(1, 50);

//planets (clock)
    push();
    noStroke();
    
    translate(width/2,height/2);
    rotate(s * (360/60));


    fill(0, 200, s * 5);
    ellipse(200, 0, 80+ring, 80+ring);
    fill(0);
    ellipse(200, 0, 80, 80);
    fill(200, 200, s * 5);
    ellipse(200, 0, 60, 60);
    
    line()

    pop();
    
    push();
    noStroke();
    fill(200, m * 5, 200);
    translate(width/2,height/2);
    rotate(m*(360/60));
    
    ellipse(60, 0, 40, 40);
    pop();
    
    push();
    noStroke();
    fill(h * 25, 200, 200);
    translate(width/2,height/2);
    rotate(h*(360/12));
    
    ellipse(100, 0, 20, 20);
    pop();

//center rotational axis
    strokeWeight(4);
    stroke(255)
    line(width / 2 - 25, height / 2, width / 2 + 25, height / 2);
    line(width / 2, height / 2 - 25, width / 2, height / 2 + 25);
    fill(255, 0, 0);
    ellipse(width/2, height/2, 10, 10); 

}

I was inspired by how the solar system operates like a clock that all the planets are rotating around the sun. For the clock I created, I drew three planets rotating around the center point where the nearest one represents hour, the medium one represents minute and the furtherest one tells the second.

sketch

// CJ Walsh 
// Section D
// cjwalsh@andrew.cmu.edu
// Project-06

var cx, cy;
var sunDim, hourDim, minDim, secDim;
var hx, hy;
var mx, my;
var sx, sy;
var tx = [];
var ty = [];
var starNum;
var colors = ['white', '#D8B495', '#DBD8A2'];

function setup() {
	createCanvas(480, 480);
	cx = width/2;
	cy = height/2;
	sunDim = 0.2*480; // establishing variables for the sun and orbit paths
	hourDim = 0.55*480;
	minDim = 0.85*480;
	secDim = 70;
	starNum = 150;
	
	// loop created for generation of stars
	for (i = 0; i < starNum; i++) {
		tx[i] = random(0, width);
		ty[i] = random(0, height);
	}
}

function draw() {
	background('black');

	// drawing background of stars
	for (i = 0; i < starNum; i++) {
		fill(colors[i%3]);
		ellipse(tx[i], ty[i], 5, 5);
	}

	var s = second(); // establishing variables for sec, min, hr
	var h = hour() % 12; // hours set to 12 hr day rather than 24hr
	var m = minute();

	var sAngle = s/60*2*PI - PI/2; // establishing variables for angle of hands 
	var mAngle = m/60*2*PI - PI/2 + s/60/60*2*PI;
	var hAngle = h/12*2*PI - PI/2 + m/60/12*2*PI;


	// drawing paths of orbit
	noFill();
	stroke('#919191');
	strokeWeight(2);
	ellipse(cx, cy, hourDim, hourDim);
	ellipse(cx, cy, minDim, minDim);

	// drawing sun and radiating lines
	noStroke();
	fill('#DB5858');
	ellipse(cx, cy, sunDim, sunDim);
	noFill();
	stroke('#FFC269');
	for (s = sunDim; s <= sunDim+4*12; s+=12) {
		ellipse(cx, cy, s, s);
	}

	// Hour Planet 
	hx = cx + hourDim/2*cos(hAngle);
	hy = cy + hourDim/2*sin(hAngle);
	drawHour();

	// Minute Planet 
	mx = cx + minDim/2*cos(mAngle);
	my = cy + minDim/2*sin(mAngle);
	drawMin();

	// Second Moon
	sx = mx + secDim/2*cos(sAngle);
	sy = my + secDim/2*sin(sAngle);
	drawSec();
	

}

function drawHour() {
	noStroke();
	fill('#DD6C9F');
	ellipse(hx, hy, 50, 50);
	fill('#844364');
	ellipse(hx+14, hy+3, 15, 15);
	ellipse(hx-6, hy-5, 5, 5);
	ellipse(hx-10, hy+10, 10, 10);

}

function drawMin() {
	noStroke();
	fill('#4A74A5');
	ellipse(mx, my, 35, 35);
	fill('#303C6D');
	ellipse(mx-3, my-6, 17, 13);
	ellipse(mx+4, my+6, 6, 6);
}

function drawSec() {
	noStroke();
	fill('#73B3FF');
	ellipse(sx, sy, 12, 12);
}

For this project I wanted to create a clock that looked like planets orbiting a sun. Although the design is still centered around circular themes, I think its still breaking outside the idea of a clock, and definitely couldnt be identified as a clock by first glance. My process began with sketching my ideas on paper, and then translating that into a drawing using Adobe Illustrator. After that I was able to translate my sketches into code, creating both fixed and animated objects on my canvas. I used the knowledge I gained from Assignment C to help me create my new clock. I added in the ability of the planets to move slightly in the transition from minute to minute or hour to hour. As a final touch, I drew some randomly generated stars to fill the background. This was definitely a fun project to make, though one that challenged my knowledge.