Month: October 2022

//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();
}