Month: October 2018

jeeyoonk06

var x = [];
var y = [];

function setup() {
    createCanvas(500, 500);
    for (i = 0; i < 100; i++){
    	x[i] = random(50, 450);
    	y[i] = random(50, 450);
    }
}

function draw() {
	background(1, 41, 71);
	var S = second(); //variables for time
	var M = minute();
	var H = hour();

	var Hmap = map(H, 0, 20, 0, 500); // ground (pink block) adds up every "HR"
	for(i = 0; i < H; i++)
		stroke(255);
        strokeWeight(2);
		fill(255, 138, 143);
		rect(0, 460, Hmap, 40);

	stroke(255); //fire fly JAR
	strokeWeight(2);
	line(192, 196, 289, 196);
	line(192, 196, 192, 242);
	line(192, 242, 163, 274);
	line(163, 274, 163, 460);
	line(163, 460, 318, 460);
	line(318, 460, 318, 274);
	line(318, 274, 289, 242);
	line(289, 242, 289, 196);

	push(); //Jar lid
	translate(260, -78)
	fill(255);
	rotate(PI / 3);
	rect(192, 196, 10, 100); 
    pop();

    for(i = 0; i < S; i++){ //tiny firefly appears every "SEC"
    	fill(247, 246, 146);
    	noStroke();
    	ellipse(x[i], y[i], 4, 4);
    }

    push(); //firefly rotates every "MIN"
    translate(width / 2, height / 2);
    noStroke();
    ellipseMode(CENTER);
    fill(255);
    rotate(radians(M * 6));
    stroke(255);
    strokeWeight(0.8);
    line(85, 70, 87, 80); //left bug tentacle
    stroke(255);
    strokeWeight(0.8);
    line(75, 60, 74, 80); //right bug tentacle
    noStroke();
    fill(249, 196, 65); //body
    ellipse(80, 40, 19, 50);
    fill(247, 216, 146);
    ellipse(80, 40, 17, 30);
    fill(244, 224, 189);
    ellipse(80, 40, 14, 18);
    fill(45, 16, 35); //wings
    ellipse(75, 50, 10, 33);
    fill(45, 16, 35); //wings
    ellipse(85, 50, 10, 33);
    fill(255, 0, 68); //head
    ellipse(80, 65, 12, 12);
    fill(0); //left eye
    ellipse(85, 70, 5, 5);
    fill(0);
    ellipse(75, 70, 5, 5);
    pop();

}

For this project, I was inspired by the fireflies I saw in my backyard. The tiny firefly adds up every second, pink block adds up every hour, and the firefly in the middle rotates every minute. From last week to this week, my biggest challenge had been understanding “arrays” and “loops”. Through this project, I could understand these concepts better, and I had fun exploring different styles, color, and movements of the parts of the project.

Christine Chen-Project-06-Abstract Clock

/*
Christine Chen
Section E
cyc1@andrew.cmu.edu
Project-06-Abstract Clock
*/

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

function draw() {
    background(43, 43, 47); //darl gray background

    //background circle
    strokeWeight(0); //no stroke
    for (i = 560; i > 320; i = i - 60){
        fill(70); //light gray
        ellipse(200, 200, i, i);

        fill(55); //medium gray
        ellipse(200, 200, i - 20, i - 20);

        fill(43); //dark gray
        ellipse(200, 200, i - 40, i - 40); 
    }

    var angleH = 0; //angle for hour circle rotations
    var angleM = 0; //angle for minute circle rotations
    var angleS = 0; //angle for second circle rotations

    //y position for the circles of Hour, Minute, Second
    var yH = 0; 
    var yM = 20; 
    var yS = 40; 
    
    //Fetch current time
    var H = hour();
    var M = minute();
    var S = second();

    //ratio for controlling spiral circles within borders
    var ratio = 0.3 * width;

    strokeWeight(0.5);

    //Seconds Spiral
    for (var i = 0; i < S; i++){
        push();
        translate (200, 200);
        rotate(angleS);

        stroke(255); //white
        line(0, yS, 0, 0); //draw from canvas center to circle center

        noStroke();
        fill(255); //white
        ellipse(0, yS, 5, 5);
        pop();

        yS += ratio/60;
        angleS += 12;
    }

    //Hour Spiral
    for (var i = 0; i < 24; i++){
        push();
        translate (200, 200);
        rotate(angleH);
        
        if(i < H){
            fill(133, 185, 250); //light blue for current time
        } else {
            fill(100); //gray circles for the rest
        }
    
        ellipse(0, yH, 13, 13);
        pop();

        yH += ratio/24;
        angleH += 30;
    }


    //Minute Spiral
    for (var i = 0; i < 60; i++){
        push();
        translate (200, 200);
        rotate(angleM);

        if(i < M){
            fill(122, 150, 255); //dark blue for current time
        } else {
            fill(70); //gray circles for the rest
        }

        ellipse(0, yM, 10, 10);
        pop();

        yM += ratio/60;
        angleM += 12;
    }


}

    

My idea was a lot harder to create than I thought it would be. I created a spiral form of an abstract clock. The largest circles represent the hour, the medium sized ones represent minutes, and the smallest ones represent seconds. All 24 circles representing hours and all 60 circles representing minutes are drawn out. They get lighted up to represent the current time. The smallest circles representing seconds are drawn in real time which shows how time is moving forward.

I added in the background layers of ellipses and to make the clock more visually interesting. I also experimented with lines and added the lines to connects the canvas center to the second circles to make the movement of the clock more dynamic. I also ended up with having the circles of the more center parts of the spiral overlapping each other because I just like how it gives it a more dynamic “spiral” look rather than having equal distances between all of the circles.