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.