Project 6 – Clock

//Se A Kim
//Section D
//seak

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


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

function draw() {
    background(0);

    //drawing circles in the background
    noStroke();
    for(i = 0; i < 50; i++){
        fill(c[i], 100, 100);
        ellipse(x[i], y[i], 20);
        x[i] += dx[i];
        y[i] += dy[i];
        if(x[i] > width){
            x[i] = 0;
        } else if (x [i] < 0){
            x[i] = width;
        } 
        if (y[i] > height){
            y[i] = 0;
        } else if (y[i] <0){
            y[i] = height;
        }
    }

    //clock ellipses
    var s = second();
    var m = minute();
    var h = hour();

    push();
    translate(200, 200);
    noStroke();

    //second circle
    let sAngle = map(s, 0, 60, 0, 360);
    var sx = 50 * cos(radians(sAngle));
    var sy = 50 * sin(radians(sAngle));
    fill(c[i]);
    rotate(radians(-90));
    ellipse(sx, sy, 100);

    //minute circle
    let mAngle = map(m, 0, 60, 0, 360);
    var mx = 50 * cos(radians(mAngle));
    var my = 50 * sin(radians(mAngle));
    fill(255, 100, 100, 100);
    rotate(radians(90));
    ellipse(mx, my, 80);

    //hour circle
    let hAngle = map(h, 0, 60, 0, 360);
    var hx = 50 * cos(radians(hAngle));
    var hy = 50 * sin(radians(hAngle));
    fill(255, 255, 255, 100);
    rotate(radians(10));
    ellipse(hx, hy, 100);

    pop();
}