//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.