Abstract Clock

sketchDownload
//Ian Lippincott
//ilippinc@andrew.cmu.edu
//Section: D
//Project-06-A

var c1;
var c2;
var s = second();

function setup() {
    createCanvas(480, 480);
    //Define background colors
    c1 = color(17, 19, 42);
    c2 = color(84, 17, 102);
    
}



function draw() {
	//Background
	setGradient(c1, c2);
	//Stars
	stroke(255);
	strokeWeight(2);
	point(30, 50);
	point(400, 80);
	point(250, 30);
	point(35, 200);
	point(100, 420);
	point(10, 370);
	point(400, 400);
	point(270, 430);
	noStroke();
	//Moon base
	//Light Moon Color
	fill(253, 242, 199);
	circle(240, 240, 320);

	//Moon shadow
	//Dark Moon Color
	fill(226, 199, 145);
	beginShape();
	vertex(240, 80);
	bezierVertex(25, 87, 25, 393, 240, 400);
	bezierVertex(100, 393, 100, 87, 240, 80);
	endShape();

	//Dark Spots
	circle(220, 260, 60);
	circle(320, 200, 25);
	circle(240, 140, 10);
	circle(180, 180, 10);
	circle(200, 200, 10);
	circle(340, 270, 20);
	circle(320, 290, 8);
	circle(290, 340, 20);
	circle(180, 330, 15);

	//Light Spots
	fill(253, 242, 199);
	circle(130, 220, 50);
	circle(145, 165, 20);
	circle(155, 320, 40);

	//Hour Counting Shadow
	fill(226, 199, 145, 170);
	beginShape();
	vertex(240, 80);
	bezierVertex(25, 87, 25, 393, 240, 400);
	bezierVertex(25 + hour() * (320 / 24), 393, 25 + hour() * (320 / 24), 87, 240, 80);
	endShape();

	//Minute Counting Cloud
	drawCloud(minute() * 8, 350);

	//Second Counting Witch
	drawWitch(-60 + second() * 480 / 60, 300);



}


//Makes Gradient Background
function setGradient(c1, c2) {
	noFill();
	for (var b = 0; b < height; b++) {
		var inter = map(b, 0, height, 0, 1);
		var c = lerpColor(c1, c2, inter);
		stroke(c);
		line(0, b, width, b);
	}
}


function drawCloud (x, y) {
	push();
	fill(80, 58, 96);
	translate(x, y);
	rect(0, 0, 120, 30, 12);
	rect(10, 10, 170, 30, 10);
	rect(-20, 20, 100, 30, 15)
	rect(30, 30, 100, 30, 20);
	rect(100, 20, 100, 20, 15);
	rect(100, 30, 140, 10, 15);
	pop();
}

function drawWitch (x, y) {
	translate(x, y);
	fill(39, 27, 53);
	ellipse(36, 48, 48, 20);
	strokeCap(ROUND);
	strokeWeight(4);
	stroke(39, 27, 53);
	line(36, 48, 140, 48);
	strokeCap(SQUARE);
	strokeWeight(1);
	beginShape();
	vertex(36, 38);
	bezierVertex(27, 36, 18, 40, 0, 47);
	bezierVertex(18, 55, 27, 60, 40, 50);
	endShape();
	angleMode(DEGREES);
	push();
	rotate(30);
	ellipse(95, -5, 32, 18);
	pop();
	push();
	rotate(-35);
	ellipse(60, 75, 32, 18);
	pop();
	beginShape();
	vertex(89, 18);
	bezierVertex(82, 26, 65, 29, 50, 28);
	bezierVertex(60, 30, 70, 38, 75, 45);
	endShape();
	beginShape();
	vertex(106, 21);
	vertex(108, 28);
	vertex(110, 34);
	vertex(102, 40);
	vertex(100, 38);
	vertex(95, 21);
	endShape();
	push();
	rotate(80);
	rect(40, -98, 25, 3);
	pop();
	push();
	rotate(30);
	rect(95, -40, 5, 3);
	pop();
	push();
	rotate(20);
	ellipse(105, -29, 12, 15);
	pop();
	beginShape();
	vertex(105, 15);
	bezierVertex(98, 10, 95, 8, 95, 3);
	bezierVertex(95, 4, 100, 6, 106, 2);
	endShape();
	


}


	
	




For this project, I wanted to create a clock that took inspiration from the Studio Ghibli movie Kiki’s Delivery Service. I make my design first in Illustrator.

Leave a Reply