Month: October 2018

sketch

//Jonathan Liang
//jliang2
//section A






var ballX = 200;
var ballY = 0;
var speedX = 5;
var count = 0;
var xS = [];
var yS = 0;
var xM = [];
var yM = 0;
var xH = [];
var yH = 0;
var ySpeedS = 10;
var ySpeedM = 5;
var ySpeedH = 3;
var radius = 20;

var action = false;
var dayColor = 255;





function setup() {
    createCanvas(400, 400);
    
 //seconds 
    for (var i = 1; i < 60; i++) {
    	xS[i] = random(20, width - 20);
    	
    }
 //minutes   
    for (var i = 1; i < 60; i++) {
    	xM[i] = random(20, width - 20);
    }
 //hours
 	for (var i = 1; i < 12; i++) {
 		xH[i] = random(20, width - 20);
 	}
}

function draw() {

	frameRate(3);	

//fetching current time
	var H = hour();
    var M = minute();
    var S = second();
    dayColor = map(H, 0, 24, 255, 0);
    H = H % 12;

//background color
	background(dayColor);


//hours
	for (var i = 0; i <= H; i++) {
		noStroke();
		fill(128, 212, 255);
		ellipse(xH[i], yH, radius);
		xH[i] += speedX;
		yH += ySpeedH;
		if (yH > height-20 || yH < 0) {
			ySpeedH = -ySpeedH;
			radius += 10;
		}
		if (xH[i] > height-20 || xH[i] < 0) {
			speedX = -speedX;
			radius += 10;
		}
		

		
	}

//minutes
	for (var i = 0; i <= M; i++) {
		noStroke();
		fill('yellow');
		ellipse(xM[i], yM, 15, 15);
		xM[i] += speedX;
		yM += ySpeedM;
		if (yM > height-20 || yM < 0) {
			ySpeedM = -ySpeedM;
		}
		if (xM[i] > height-20 || xM[i] < 0) {
			speedX = -speedX;
		}
		
	}

//seconds
	for (var i = 0; i <= S; i++) {
		noStroke();
		fill('orange');
		ellipse(xS[i], yS, 10, 10);
		xM[i] += speedX;
		yS += ySpeedS;
		if (yS > height-20 || yS < 0) {
			ySpeedS = -ySpeedS;
		}
		if (xS[i] > height-20 || xS[i] < 0) {
			speedX = -speedX;
		}
		
	}








}

Uh for this project, I start with, with a concept, of the world. The world is so hectic and fast moving that we have trouble keeping track of time. The minutes and seconds represent the stars in the sky and the gradually expanding blue circles (hours) represent the tide of the ocean. The minutes and the seconds move so fast, which is symbolic of how life moves so quickly, that we don’t have time to look at the stars in the sky. This whole paragraph sounds incredibly corny and I’m so sorry that it does.

sketch

/*
Jamie Dorst
jdorst@andrew.cmu.edu
Section A
Project-06
*/

//VARIABLES
//shelf height
var shelfY = [100, 220, 340, 460];

// flame vertices
var flameX1 = 35;
var flameY1 = 40;
var flameX2 = 45;
var flameX3 = 40;
var flameY3 = 20;
// candle width
var candleW = 30;
// candle x positions array
// 6 variables, same in every column, increasing by 80
var candleX = [25, 105, 185, 265, 345, 425];
// candle y positions array
// 4 variables, same in every row
var candleY = [];
// candle heights
// one for each candle
var candleH = [];
// color arrays
var flameColors = ['orange', 'gold'];
var fColor = 0;
var woodColors = ['saddlebrown', 'peru'];
var wColor = 0;

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

function draw() {
    background('black');
    // time variables
    var h = hour();
    var m = minute();
    var s = second();
    noStroke();

    // WOOD SHELVES
    // alternate wood color every minute
    if (m % 2 === 0) {
        wColor = 0;
    } else {
        wColor = 1;
    }
    // draw four shelves
        fill(woodColors[wColor]);
        rect(0, shelfY[0], 480, 20);
        rect(0, shelfY[1], 480, 20);
        rect(0, shelfY[2], 480, 20);
        rect(0, shelfY[3], 480, 20);

    // CANDLES
    // fill in y position array with 24 values
    // groups of 6, each increasing by 120
    // will change individually later as candles melt
    for (var i = 0; i < 6; i++) {
        candleY[i] = 40;
    }
    for (var i = 6; i < 12; i++) {
        candleY[i] = 160;
    }
    for (var i = 12; i < 18; i++) {
        candleY[i] = 280;
    }
    for (var i = 18; i < 24; i++) {
        candleY[i] = 400;
    }
    // fill in height array with 24 values of 60
    for (var k = 0; k < 24; k++) {
        candleH[k] = 60;
    }
    // one candle melts per hour
    for (var p = 0; p < 24; p++) {
        if (p < h) {
            candleH[p] = 0;
            candleY[p] = 0;
        } else if (p === h) {
            candleH[p] = candleH[p] - (candleH[p] * (m / 60));
            if (h < 6) {
                candleY[p] = shelfY[0] - candleH[p];
            }
            if (h >= 6 & h < 12) {
                candleY[p] = shelfY[1] - candleH[p];
            }
            if (h >= 12 & h < 18) {
                candleY[p] = shelfY[2] - candleH[p];
            }
            if (h >= 18 & h < 24) {
                candleY[p] = shelfY[3] - candleH[p];
            }
        }
    }
    // make four groups of six to draw the candles
    fill('white');
    // first row
    rect(candleX[0], candleY[0], candleW, candleH[0]);
    rect(candleX[1], candleY[1], candleW, candleH[1]);
    rect(candleX[2], candleY[2], candleW, candleH[2]);
    rect(candleX[3], candleY[3], candleW, candleH[3]);
    rect(candleX[4], candleY[4], candleW, candleH[4]);
    rect(candleX[5], candleY[5], candleW, candleH[5]);
    // second row
    rect(candleX[0], candleY[6], candleW, candleH[6]);
    rect(candleX[1], candleY[7], candleW, candleH[7]);
    rect(candleX[2], candleY[8], candleW, candleH[8]);
    rect(candleX[3], candleY[9], candleW, candleH[9]);
    rect(candleX[4], candleY[10], candleW, candleH[10]);
    rect(candleX[5], candleY[11], candleW, candleH[11]);
    // third row
    rect(candleX[0], candleY[12], candleW, candleH[12]);
    rect(candleX[1], candleY[13], candleW, candleH[13]);
    rect(candleX[2], candleY[14], candleW, candleH[14]);
    rect(candleX[3], candleY[15], candleW, candleH[15]);
    rect(candleX[4], candleY[16], candleW, candleH[16]);
    rect(candleX[5], candleY[17], candleW, candleH[17]);
    // fourth row
    rect(candleX[0], candleY[18], candleW, candleH[18]);
    rect(candleX[1], candleY[19], candleW, candleH[19]);
    rect(candleX[2], candleY[20], candleW, candleH[20]);
    rect(candleX[3], candleY[21], candleW, candleH[21]);
    rect(candleX[4], candleY[22], candleW, candleH[22]);
    rect(candleX[5], candleY[23], candleW, candleH[23]);

    // FLAMES
    // alternate flame color every second
    // draw flames
    if (s % 2 === 0) {
        fColor = 0;
    } else {
        fColor = 1;
    }
    fill(flameColors[fColor]);
    // move flames to follow candles
    for (var j = 0; j < 6; j++) {
        if (j === h) {
            flameX1 = candleX[j] + 10;
        }
    }
    for (var j = 6; j < 12; j++) {
        if (j === h) {
            flameX1 = candleX[j - 6] + 10;
        }
    }
    for (var j = 12; j < 18; j++) {
        if (j === h) {
            flameX1 = candleX[j - 12] + 10;
        }
    }
    for (var j = 18; j < 24; j++) {
        if (j === h) {
            flameX1 = candleX[j - 18] + 10;
        }
    }
    flameY1 = candleY[h];
    flameX2 = flameX1 + 10;
    flameX3 = flameX1 + 5;
    flameY3 = flameY1 - 20;
    triangle(flameX1, flameY1, flameX2, flameY1, flameX3, flameY3);
}

For this week’s project, I made a clock based on 24 candles, where the flame changes color every second, the wooden shelves change color every minute, and one candle melts per hour. I wanted to show time as something that we run out of every day, to give perspective on how we use it. I struggled a lot with this project; I didn’t realize how complicated it would be. But, I think I also learned a lot from it and I’m very satisfied that I got it to work in the end.