Month: October 2019

sketch

//Sewon Park
//sewonp@andrew.cmu.edu
//Section B
//Project-06

function setup() {
    createCanvas(400, 400);
    text("p5.js vers 0.9.0 test.", 10, 15);
    angleMode(DEGREES);
}

function draw() {
background(220);

var H = hour();
var M = minute();
var S = second();

fill(255,255,100);
ellipse(320,320,120,120); //Reference circle around second circle
fill(S*(4.25),S*(4.25),S*1.7); //Second circle changes color to match the reference Circle
ellipse(320,320,S*2,S*2); //Second circle grows to match the reference circle

fill(0,0,255);
ellipse(200,200,120,120); //Reference circle around minute cricle
fill(0,0,M*(4.25)); //Minute circle changes color to match the reference circle
ellipse(200,200,M*2,M*2); //Minute circle grows to match the reference circle

fill(255,0,0);
ellipse(80,80,120,120); //Reference circle around hour circle
fill(H*(4.25),0,0); //Hour circle changes color to match the reference circle on a 24 hour scale
ellipse(80,80,H*5,H*5); //Hour circle grows to match the reference circle on a 24 hour scale

push();
noStroke();
fill(255,255,0);
translate(width/2,height/2);
rotate(S*(6));
rotate(-90);
ellipse(85, 0, 50, 50);
pop(); //Yellow circle rotating to match second
    
push();
noStroke();
fill(0, 0, 255)
translate(width/2,height/2);
rotate(M*(6));
rotate(-90);
ellipse(80, 0, 40, 40);
pop(); //Blue Circle rotating to match minute
    
push();
noStroke();
fill(255, 0, 0);
translate(width/2,height/2);
rotate(H*(15)); //on a 24 hour scale
rotate(-90);
ellipse(75, 0, 30, 30);
pop(); //red circle rotating to match hour
   

}

For the abstract clock assignment, I wanted to show how as time passes, your day becomes “full”. As such I put base ellipses that represent the entirety of time (by seconds, minutes, and hours). As such, I used 24 hours as increments as 24 hours represents the entire day. Then, I put ellipses that grow and changes color as time passes to eventually become the base circles. I also created ellipses that spun just as the clock would.

sketch

//Ankitha Vasudev
//ankithav@andrew.cmu.edu
//Section B
//Project 06

//global variables 
var r = 148; // color of background
var g = 222;
var b = 255;
var r1 = 255; // color of starfish
var g1 = 130;
var b1 = 180;
var r2 = 120; // color of seaweed
var g2 = 200;
var b2 = 100;
var fishy = 200; //y position of fish 

var x = [50, 65, 70, 62, 65, 50, 35, 39, 30, 45];
var y = [365, 372, 375, 380, 395, 385, 395, 380, 375, 370];

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

function draw() { 

    // Current Time
    var H = hour();
    var M = minute();
    var S = second();

    // Changes background color based on 8-hour periods 
     if (H >= 0 & H <= 8) {
        background(r, g, b);
    } else if (H > 8 & H < 16) {
        background(r-50, g-50, b-20);
    } else if (H >= 16 & H <= 24) {
        background(r-150, g-150, b-50);
    }

    //position of fish according to seconds
    fishx1 = map(S, 0, 59, 0, width+110);
    fishx2 = map(M, 0, 59, width-20, -40);
    fishx3 = map(H, 0, 23, width-20, -30);

    //star color changes every second 
    //becomes lightest at the end of each minute
    r1 = map(S, 0, 59, 200, 255);
    g1 = map(S, 0, 59, 50, 200);
    b1 = map(S, 0, 59, 50, 200);
    
    //changes seaweed color every minute 
    r2 = map(M, 0, 59, 150, 0);
    b2 = map(M, 0, 59, 120, 0);

    //fish moving every second
    noStroke();
    fill(236, 185, 0);
    ellipse(fishx1-55, fishy, 90, 30);
    triangle(fishx1-95, fishy, fishx1-110, fishy-20, fishx1-110, fishy+20);

    //fish moving every minute
    fill(217, 180, 123);
    ellipse(fishx2+20, fishy-100, 40, 15);
    triangle(fishx2+30, fishy-100, fishx2+40, fishy-90, fishx2+40, fishy-110);

    //fish moving every hour
    fill(111, 72, 2);
    ellipse(fishx3, fishy+100, 50, 15);
    triangle(fishx3+20, fishy+100, fishx3+30, fishy+95, fishx3+30, fishy+105);

    //seaweed
    for (i = 0; i < width+5; i += 5) {
        fill(r2, g2, b2);
        triangle(i-5, height-30, i, height-60, i+15, height-30);
    }

   //sand 
    fill(240, 210, 142);
    rect(0, height-40, width, 50);

    //starfish
    fill(r1, g1, b1);
    beginShape();
    for (var i = 0; i < 10; i++) {
        vertex(x[i], y[i]);
    endShape();
}
    //text displaying time as reference 
    fill(100);
    text("Hour: " + H, 10, 20);
    text("Minute: " + M, 10, 35);
    text("Second: " + S, 10, 50);
}

For this project I wanted to create an animation that included changing positions and colors according to the time. Each fish moves at a different pace – one every second, one every minute and one every hour. The starfish changes color every second and camouflages with the sand by the of every minute. The seaweed changes color every minute and is the greenest at the end of every hour. The color of the sea varies at 8-hour intervals to show the time of the day(morning, afternoon or evening).