Project 6 – Abstract Clock

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!

Leave a Reply