Category: SectionB

//Sam Rauch, section B, srauch@andrew.cmu.edu, project 06: abstract clock
//this code creates a beach with a tide. High tide is at noon, and low tide is at midnight.
//the grass rustles in the sea breeze. it gets darker from 7pm 8 pm and lighter from 6 to 7am. 

var grasslength = []; //length of blades of grass
var sandspotX = []; //x position of specks in sand
var sandspotY = []; //y position of specks in sand
var waveY; //height of the tide
var waveShift; //amount the water's edge fluctuates by 
var daytime; //the time of day in minutes
var darkness; //amount of darkness it is

function setup() {
    createCanvas(400, 400);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);

    //initializing x position of specks in sand
    for (var i = 0; i < 50; i++){
        sandspotX[i] = random(0, width);
    }

    //initializing y position of specks in sand
    for (var i = 0; i < 50; i++){
        sandspotY[i] = random(200, 400);
    }

    frameRate(5);

    //creating y position of tide. High tide is at noon, low tide is at midnight
    daytime = hour()*60 + minute(); //time of day, in minutes
    if (daytime < 690) { //if before noon
        waveY = map(daytime, 0, 690, 400, 200); //before noon, wave gets higher with time
    } else { //if after noon
        waveY = map(daytime, 690, 1380, 200, 400); //after noon, wave gets lower with time
    }

    //making it get lighter and darker at sunrise and sunset
    if (daytime >= 300 & daytime < 360) { //if from 5 to 6 am, it gets lighter
        darkness = map(daytime, 300, 360, 120, 0);
    } else if (daytime >= 1140 & daytime < 1200) { //from 7 to 8 pm, it gets darker
        darkness = map(daytime, 1140, 1200, 0, 120);
    } else if (daytime >= 360 & daytime < 1140) { //in the middle of the day, it's not dark
        darkness = 0;
    } else { //in the middle of the night, it's dark
        darkness = 120;
    }
}

function draw() {
    noStroke();
    background(155, 207, 207);

    //row of grass bunches
    for (var i = 0; i <2; i++){
        for(var j = 0; j<=width; j += 20) {
        grass(j, 220);
        }
    }
    
    //sand
    fill(196, 178, 122);
    rect(0, 200, width, 200);

    //little specks in sand
    strokeWeight(3);
    stroke(146, 128, 72)
    for (var i = 0; i<50; i++){
        point(sandspotX[i], sandspotY[i]);
    }
    noStroke();

    //assorted shells and starfish
    starfish(250, 250, color(120, 130, 120), 10);
    starfish(50, 340, color(50, 74, 64), 50);
    starfish(180, 370, color(120, 79, 97), 5);
    shell(140, 260, color(60, 50, 70), color(100, 80, 107), 60);
    shell(300, 300, color(80, 50, 50), color(120, 80, 97), -5);

    //waves
    waveShift = randomGaussian(1, 2);
    fill(30, 100, 155, 240);
    rect(0, waveY+waveShift, width, 300);
    fill(30, 100, 155, 100);
    rect(0, waveY-(random(1,3))+waveShift, width, 300);

    //rectangle that makes darkness and lightness of environment using alpha channel
    blendMode(MULTIPLY);
    fill(35, 50, 70, darkness);
    rect(0,0,width,height);
    blendMode(BLEND);
}

//makes starfish
function starfish(x,y, color, spin){
    push();
    translate(x,y);
    rotate(radians(spin));
    strokeWeight(4);
    stroke(color);
    for (var i = 0; i<5; i++){ //draw five arms from 0,0, rotating after each one
        line(0,0,0,-10);
        rotate(radians(72));
    }
    noStroke();
    pop();
}

//makes seashells
function shell(x,y, color1, color2, spin) {
    push();
    translate(x,y);
    rotate(radians(spin));
    strokeWeight(1);
    stroke(color1);
    fill(color2);

    var radius = 7; //radius of seashell, ie distance from circles to center
    var size = 12; //size of circles themselves
    var angle = radians(0); //theta of circle location
    for (var i = 0; i<20; i++) { //draw circles that get smaller as they get closer to the center
        ellipse ( cos(angle)*radius, sin(angle)*radius, size);
        angle-=radians(24);
        size -= i/20; //decrease size of circles
        radius -= i/30; //decrease radius of seashell       
    }
    noStroke();
    pop();
}

//makes a bunch of grass
function grass(x,y){
    push();
    translate(x,y);
    stroke(65, 100, 52);
    strokeWeight(2);
    rotate(radians(-40));
    for (var i = 0; i < 20; i++){ //creating each blade of grass in a bunch
        for (var j = 0; j < 20; j++){ //creating random lengths for each blade of grass
            grasslength[j] = random(35, 40);
        }
        line(0,0,0, -1*grasslength[i]);
        rotate(radians(4));
    }

    pop();
}

//Lily van Veen, section B, lvanveen@andrew.cmu.edu, project 6
var r; //red value
var g; //green value
var b; //blue value
var h; //hour
var m; //min
var s; //sec
var x = []; //x value of top point of stars
var y = []; //y value of top point of stars
var t = 0; // rotation/turn of stars

function setup() {
	frameRate(30);
    createCanvas(480, 480);
    background(235, 205, 124);
    for(var i = 0; i < 60; i++){ 
    	x[i] = random(30, width-30);
    	y[i] = random(30, height-240);
    }
}

function draw() {
	let h = hour();
    let m = minute();
    let s = second();
	if(h > 7 & h < 19){ //"sunrise" and "sunset" will happen @ 7 am & 7 pm respectively
    	r = 235; //yellow
    	g = 205;
    	b = 124;
    	background(r, g, b);
    }else if(h < 7 || h > 19){
    	r = 48; //blue
    	g = 68;
    	b = 133;
    	background(r, g, b);
    }else if(h == 7){
    	r += .01; // w/ .01 change in color @ 30 fps, will take abt 2 min to fully shift from day to night (also about the same time a sunset/sunrise takes :) )
    	g += .01;
    	b -= .01;
    	background(min(r, 235), min(r, 205), max(b, 124));
    }else if(h == 19){
    	r -= .01;
    	g -= .01;
    	b += .01;
    	background(max(r, 48), max(g, 68), min(b, 133));
    }

    for(var i = 0; i < m; i++){ // i is used to count the # of minutes; this is the section to draw the star - initally was going to put this under a function called drawStar(); but didn't function properly
    	push();
        translate(x[i], y[i]);
        rotate(radians(s*6));
    	fill(255, 249, 201); //light yellow
	    strokeWeight(0);
	    triangle(0, -5, -5, 5, 5, 5);
	    triangle(-5, 5, -7.5, 10, 0, 7.5);
	    triangle(5, 5, 7.5, 10, 0, 7.5);
	    triangle(0, 7.5, -5, 5, 5, 5);
	    triangle(-5, 5, -10, 0, 0, 0);
	    triangle(5, 5, 10, 0, 0, 0);
	    pop();
    }
    	push(); //creates path of sun to better indicate hour of the day, "sun" visible from 7 am -> 7 pm
    	translate(240, 480);
    	rotate(radians((((h-7)*60)+m)*(360/1440)));
    	strokeWeight(0);
    	fill(255, 248, 189);
    	ellipse(-215, 0, 50, 50);
    	pop();

    	push(); //creates path of sun to better indicate hour of the day, "sun" visible from 7 pm -> 7 am
    	translate(240, 480);
    	rotate(radians((((h-7)*60)+m)*(360/1440)+180));
    	strokeWeight(0);
    	fill(255, 248, 189);
    	ellipse(-215, 0, 50, 50); //so the ellipse to carve out moon shape is the same as bg :)
    	if(h > 7 & h < 19){ //"sunrise" and "sunset" will happen @ 7 am & 7 pm respectively
      	    r = 235;

/* Evan Stuhlfire
** estuhlfi@andrew.cmu.edu, section B
** Project 06: Abstract Clock  */

var r = 90; // radius of center circle, noon
var deg = 360; // degrees in a circle
var nodeCount = 24; // 24 hours, each node is one hour
var c = []; // color array
var x = []; // x position of circle
var theta = []; //angle
var size = []; // diam of the circles
var defaultColor;
var tempSize = 0; // allows the nodes to grow with time
var pSize = 25;

function setup() {
    createCanvas(480, 480);
    background(127, 198, 164);
    fillArray(); // fill arrays with start values

}

function draw() {
    var thetaRotate = 40; // canvas rotation

    background(127, 198, 164);
    drawCrops();

    // build color array
    buildColorArray();

    stroke(93, 115, 126);
    // settings to draw circles (nodes)
    push(); // save settings
    translate(width/2, height/2); // reset origin to center
    rotate(radians(thetaRotate)); // rotate canvas to draw at an angle

    // call function to draw the nodes
    drawNodes();
    pop(); // restore settings

    // make crops reactive to mouse location and time
    pSize = mouseX/hour();
}

function drawCrops() {
    var rows = width/30;
    var cols = height/30;
    var incr = width/16;
    
    var s1 = width/16;
    var s2 = height/16;
    var len = pSize;
    var a = len/4; 

    // loop over double for loop to add colums and rows of crops
    for(var i = 0; i < rows; i++) {
        for(var j = 0; j < cols; j++) {
            push();
            translate(s1/2, s2/2);
            drawOne(len, a); 
            pop();
            s2 += 2 * incr;
        }
        s1 += 2 * incr;
        s2 = incr;
    }
}

function drawOne(len, a) {
    // function to draw on plant for crops
    stroke(93, 115, 126, 60);
    line(0, -a, 0, len);
    line(-a, -a, 0, len/2);
    line(a, -a, 0, len/2);
}

function buildColorArray() {
    // set the default color
    defaultColor = color(242, 245, 234);

    // fill array with colors
    for(var i = 0; i < x.length; i++){
        if(i < 3) {
            c[i] = color(93, 115, 126);    
        } else if(i < 6) {
            c[i] = color(118, 129, 179);
        } else if(i < 9) {
            c[i] = color(214, 248, 214);
        } else if(i < 11) {
            c[i] = color(163, 213, 255);
        } else if(i < 14) {
            c[i] = color(250, 243, 62);
        } else if (i < 16) {
            c[i] = color(163, 213, 255);
        } else if (i < 19) {
            c[i] = color(214, 248, 214);
        } else if (i < 22) {
            c[i] = color(118, 129, 179);
        } else if (i < 25) {
            c[i] = color(93, 115, 126)
        }
    }
}

function fillArray() {
    var angle = 30; // nodes are positioned 30 degrees apart
    var angle2 = 150; // starting point for second set of nodes
    var dist = 65; // nodes begin at dist from center
    var offset = 1.2 // distance offset 
    var offset2 = .8 
    var minSize = 15; // can be no smaller than minSize

    // fill arrays with start values
    x.push((-deg/2) + 10);
    theta.push(180);
    size.push(r * offset2); // 80% size of center

    // fill array with first 12 nodes
    for(var i = 1; i < nodeCount/2; i++) {
        x[i] = dist;
        theta[i] = angle * i;
        size[i] = max(r * i/18, minSize);

        dist = dist + i * offset;
    }

    // push center circle into array
    x.push(deg/2 - 10);
    theta.push(0);
    size.push(r);

    dist = dist - i * offset; // undo last dist calc
    // fill array with last 12 nodes
    // loop backward so that decreasing i can be used to decrease size
    for(i = x.length; i > 2; i--) {
        x.push(dist);
        theta.push(angle2);
        size.push(max(r * i/22, minSize));

        dist = dist - i * offset2;
        angle2 -= angle;
    }

    // push last circle into array, midnight
    x.push(0);
    theta.push(0);
    size.push(r * offset2); // 80% size of center
}

function drawNodes() {
    var h = hour();
 
    stroke(93, 115, 126);
    // draw line behind center node so that it is behind
    line(0, 0, deg/2, 0);

    // draw the satellite nodes
    push();

    translate(x[0], 0); // reset origin to top circle
    loopAndDraw(0, x.length/2, h);

    // draw top midnight circle
    fill(c[0]);
    circle(0, 0, r * .8);
    pop();

    push();
    translate((deg/2) -10, 0);
    loopAndDraw(int(x.length/2) + 1, x.length, h);

    pop();
}

function loopAndDraw(start, end, h) {
    var dx;
    var dy;
    var current = false; // identify the current node

    // iterate over arrays
    for(var i = start; i < end; i++) {
        dx = x[i] * cos(radians(theta[i]));
        dy = x[i] * sin(radians(theta[i]));

        // midnight
        if(h == 0) {
            h = 24;
        }
        // if the hour has passed or is the current hour use fill
        if(i < h){
            fill(c[i]);
        } else if (i == h) {
            current = true;
            fill(c[i]);
        } else {
            fill(defaultColor);
        }

        stroke(93, 115, 126);
        line(0, 0, dx, dy);
        circle(dx, dy, size[i]);

        if(current) {
            currentHour(i, dx, dy);
        }

        current = false;
    }
}

function currentHour(i, dx, dy) {
    // add time elements to nodes to track time
    // subtract to adjust for rotation of canvas
    var s = second() * 6 - 140;
    var m = minute() * 6 - 140;
    var h = hour() * 30 + minute()/2 - 140; 

    fill(c[i]); // use the color stored in the array
    push();
    translate(dx, dy);
    // make current circle bigger
    tempSize = size[i] * 1.32;
    circle(0, 0, tempSize);

    // have a second hand orbit the current hour
    if(i > 3 & i < 23) {
        fill(c[i - 3]); //use previous color.
    } else {
        fill(defaultColor);
    }
    // mark hours
    var hx = size[i] * .6 * cos(radians(h));
    var hy = size[i] * .6 * sin(radians(h));
    circle(hx, hy, tempSize * .25);

    // mark minutes
    var mx = size[i] * .3 * cos(radians(m));
    var my = size[i] * .3 * sin(radians(m));
    
    circle(mx, my, tempSize * .2);

    // mark seconds
    var armX = size[i] * .55 * cos(radians(s));
    var armY = size[i] * .55 * sin(radians(s));
    strokeWeight(1);
    circle(armX, armY, tempSize * .15);
    pop();
}