/*
Aaron Lee
//Section C
//sangwon2@andrew.cmu.edu
Project-06-Abstract Clock
*/
function setup() {
createCanvas(400, 400);
angleMode(DEGREES);
}
function draw(){
var H = hour();
var M = minute();
var S = second();
for (H = 0; H < 23; H++) {
noStroke();
let z = map(H, 0, 23, 255, 0);// mapping background day and night
let m = map(H, 0, 23, 0, 240); //mapping moon and sun
background(0, z, 255); //druing the day it is light blue, during night it is dark blue
fill (252, m, 3); //during the day it is red(sun) during night it is yellow (moon)
ellipse(width / 2, height / 2, 200, 200);
stroke(255);//satellite that represents seconds
noFill();
let sec1 = map (S, 0, 60, 360, 0);
arc (200, 200, 300, 300, sec1, 0);
stroke(0, z, 255)
let sec2 = map (S-1, 0, 60, 360, 0);
arc (200, 200, 300, 300, sec2, 0);
stroke(255);//satellite that represents minutes
noFill();
let min1 = map (M, 0, 60, 0, 360);
arc (200, 200, 250, 250, 0, min1);
stroke(0, z, 255);
let min2 = map (M-1, 0, 60, 0, 360);
arc (200, 200, 250, 250, 0, min2);
stroke(255);//satellite that represents hours
noFill();
let hr1 = map (H, 0, 24, 0, 360);
arc (200, 200, 350, 350, 0, hr1);
stroke(0, z, 255);
let hr2 = map (H-1, 0, 24, 0, 360);
arc (200, 200, 350, 350, 0, hr2);
}
}
sketch
Color of the background and the sphere changes in order to indicate time. The movement of the satellites that orbit around each represent hr, min and sec.
Because of the time of year, I decided to make mine about Halloween. I based my design on the Charlie Brown Halloween special “It’s The Great Pumpkin, Charlie Brown”. I looked up a bunch of photos from this special and started taking what I liked from them and mixing them into my sketch. I had my sketch be of the pumpkin patch where the kids would wait for the Great Pumpkin, and would have the sun and moon tell what time of day it was. I also decided to have the sky change color in response to these. I used if statements and the hour() variable in order to accomplish this. I then went about creating the patch, using for loops to create lots of leaves and also the lines dividing a fence. I individually created each pumpkin in the patch, making the main one the kids are behind the largest and bumpiest.
//Julia Nishizaki
//Section B
//jnishiza@andrew.cmu.edu
//Project 06, Abstract Clock
var islandX = 240; //starting X coordinate of island center
var islandY = 210; //y coordinate of island center, stays constant
var islandHalfWidth = 75;
var islandH = 100; //tallest height of island mountain
var islandSpeed = 0.001; //controls the lag of island movement
var sheepSpeed = 0.01;
var gearWidth = 12; //the radius of the gear (represents radius of inner "circle")
var gearThick = 2;
var sheepW = 20;
var sheepH = 15;
var sheepHeadW = 8;
var sheepHeadH = 12;
var ear = 4; //size of sheep ear ellipse
var eye = 2; //size of sheep eye ellipse
var sheepX = 0;
function setup() {
createCanvas(480, 480);
rectMode(CENTER);
angleMode(DEGREES);
}
function draw() {
background(220);
var h = hour(); //24 hour clock
var m = minute();
var s = second();
difisland = islandX - mouseX;
islandX = constrain(islandX, islandHalfWidth * 3, width - islandHalfWidth * 3) + difisland * islandSpeed; //causes the island to move slowly to mouse position
//sky, fades as time changes
colorMode(HSB, 100); //change color mode in order to help with darkening/lightening the sky
if (h > 18 & h < 24 || h > -1 && h < 6) {
b = 15;
}if (h > 5 & h < 13) {
b = 15 + (h * 7);
} if (h > 11 & h < 19) {
b = 99 - ((h - 12) * 7);
}
c = color(55, 60, b);
fill(c);
rect(width / 2, height / 2, width, height);
//ground
colorMode(RGB); //switch back to RGB from HSB
fill(92, 147, 13);
rect(width * 0.5, height - 25, width, 50);
//mountain on island
stroke(92, 147, 13);
fill(92, 147, 13);
strokeWeight(14);
strokeJoin(ROUND);
beginShape(); //vertices that form the mountain
vertex(islandX - islandHalfWidth, islandY);
vertex(islandX - islandHalfWidth * 0.3, islandY - islandH * 0.75);
vertex(islandX - islandHalfWidth * 0.1, islandY - islandH * 0.6);
vertex(islandX + islandHalfWidth * 0.2, islandY - islandH);
vertex(islandX + islandHalfWidth * 0.65, islandY - islandH * 0.3);
vertex(islandX + islandHalfWidth * 0.8, islandY - islandH * 0.3);
vertex(islandX + islandHalfWidth, islandY);
vertex(islandX - islandHalfWidth, islandY);
endShape();
//door in mountain
var doorH = 45
noStroke();
fill(58, 109, 29);
rect(islandX - islandHalfWidth * 0.3, islandY - doorH * 0.5, 20, doorH, 15, 15, 0, 0);
noStroke(); //door knob
fill(44, 84, 41);
ellipse(islandX - islandHalfWidth * 0.375, islandY - doorH * 0.5, 3, 3);
//window in mountain
var winHalfLength = 25 * 0.5 //radius of window
if (h > 7 & h < 19) {
fill(58, 109, 29);
ellipse(islandX + islandHalfWidth * 0.2, islandY - islandH * 0.5, 25, 25);
} else { //makes the window glow yellow when it's "dark" outside
fill(255, 197, 68);
ellipse(islandX + islandHalfWidth * 0.2, islandY - islandH * 0.5, 25, 25);
}
stroke(44, 84, 41);
strokeWeight(3); //bars of the window:
line((islandX + islandHalfWidth * 0.2) - winHalfLength, islandY - islandH * 0.5, (islandX + islandHalfWidth * 0.2) + winHalfLength, islandY - islandH * 0.5);
line(islandX + islandHalfWidth * 0.2, (islandY - islandH * 0.5) - winHalfLength, islandX + islandHalfWidth * 0.2, (islandY - islandH * 0.5) + winHalfLength);
//underneath the island
stroke(44, 84, 41);
fill(44, 84, 41);
strokeWeight(18);
beginShape(); //vertices that form the underside
vertex(islandX - islandHalfWidth, islandY);
vertex(islandX - islandHalfWidth * 0.75, islandY + islandH * 0.4);
vertex(islandX - islandHalfWidth * 0.5, islandY + islandH * 0.5);
vertex(islandX - islandHalfWidth * 0.3, islandY + islandH * 0.75);
vertex(islandX - islandHalfWidth * 0.1, islandY + islandH * 0.85);
vertex(islandX + islandHalfWidth * 0.2, islandY + islandH * 0.6);
vertex(islandX + islandHalfWidth * 0.5, islandY + islandH * 0.5);
vertex(islandX + islandHalfWidth * 0.65, islandY + islandH * 0.3);
vertex(islandX + islandHalfWidth * 0.8, islandY + islandH * 0.25);
vertex(islandX + islandHalfWidth, islandY);
vertex(islandX - islandHalfWidth, islandY);
endShape();
//gear, rotates every second
push();
strokeWeight(2);
stroke(255);
translate(islandX + islandHalfWidth * 0.99, islandY + islandH * 0.1);
for (var g = 0; g < 60; g ++) {
if (g > s || g < s) {
push();
rotate(180 + g * 6);
line(0, gearWidth, 0, gearWidth + gearThick);
pop();
} else { //highlights the second hand on the gear
push();
stroke(124, 17, 17);
rotate(180 + g * 6);
gearMiddle(0, 0); //rotates the center cutouts of the gear
line(0, gearWidth, 0, gearWidth + 2 * gearThick); //the second hand
pop();
}
}
pop();
//ladder, increases by one rung each minute
var ladderH = 5;
var ladderW = 15;
var ladderX = islandX - islandHalfWidth;
stroke(153, 124, 232);
strokeWeight(2);
line(ladderX, islandY - 9, ladderX, islandY);
line(ladderX + ladderW, islandY - 9, ladderX + ladderW, islandY);
for (var i = 0; i < m; i += 1) {
var ladderY = (islandY - 3) + 4 * i; //Y coordinate for the start of the ladder
if (i < 9 || i > 9 & i < 19 || i > 19 && i < 29 || i > 29 && i < 39 || i > 39 && i < 49 || i > 49) { //creates everything but the 10's
stroke(255);
line(ladderX, ladderY, ladderX + ladderW, ladderY); //the rungs of the ladder that correspond to everything but the multiples of 10
} else {
stroke(153, 124, 232);
line(ladderX, ladderY, ladderX + ladderW, ladderY); //the rungs of the ladder that correspond to every 10 minutes
}
stroke(153, 124, 232);
line(ladderX, ladderY - ladderH, ladderX, ladderY + ladderH); //left vertical rail of ladder
line(ladderX + ladderW, ladderY - ladderH, ladderX + ladderW, ladderY + ladderH); //right vertical rail of ladder
}
//text: hour, minute, second, colons
noStroke();
textSize(14);
var textX = width * 0.5;
var textY = height - 20;
var coltextdistX = 20;
var coltextdistY = 2; //adds to the Y coordinates for the colons, to visually center them vertically
fill(255);
rect(textX, textY - 5, 100, 25, 30, 30, 30, 30);
fill(255, 197, 68);
textAlign(RIGHT); //hour text
if (h < 10) {
text(nf(h, 1, 0), textX - 1.4 * coltextdistX, textY);
} else {
text(nf(h, 2, 0), textX - 1.4 * coltextdistX, textY);
}
fill(92, 147, 13);
textAlign(CENTER); //colon and minute text
text(':', textX - coltextdistX, textY - coltextdistY); //colon between hour and minute
text(':', textX + coltextdistX, textY - coltextdistY); //colon between minute and second
fill(153, 124, 232);
text(nf(m, 2, 0), textX, textY);
textAlign(LEFT); //second text
fill(124, 17, 17);
if (s < 10) {
text(nf(s, 1, 0), textX + 1.4 * coltextdistX, textY);
} else {
text(nf(s, 2, 0), textX + 1.4 * coltextdistX, textY);
}
//sheep stack
difsheep = mouseX - sheepX;
sheepX = constrain(sheepX, sheepW, (width - sheepW * 1.5)) + difsheep * sheepSpeed; //causes the sheep to move slowly to mouse position
for (var y = 0; y < h; y += 1) {
sheep(sheepX, (height * 0.95 - sheepH * 2) - (y * sheepH * 1.15));
if ((sheepX - mouseX) > 0) {
sheepHead(- sheepW * 0.25 + (sheepX * 0.5), (height * 0.95 - sheepH * 2) - (y * sheepH * 1.15));
} else {
sheepHead(sheepW * 0.25 + (sheepX * 0.5), (height * 0.95 - sheepH * 2) - (y * sheepH * 1.15));
}
}
}
//gear cutouts
function gearMiddle(x, y) { //creates the center cutouts of the gear
for (var d = 0; d < 4; d ++) {
push()
stroke(255);
strokeWeight(2);
rotate(d * 45);
line(x, y - gearWidth - 2 * gearThick, x, y + gearWidth + 2 * gearThick);
pop();
}
}
//sheep
function sheep(x, y) {
push();
translate(x, y);
stroke(0);
strokeWeight(2);
line(-sheepW * 0.25, 0, -sheepW * 0.25, sheepH * 0.6); //sheep leg left
line(sheepW * 0.25, 0, sheepW * 0.25, sheepH * 0.6); //sheep leg right
noStroke();
fill(0);
ellipse(-sheepW * 0.5, 0, ear, ear); //sheep tail left
ellipse(sheepW * 0.5, 0, ear, ear); //sheep tail right
fill(255);
stroke(255, 197, 68)
strokeWeight(1.25);
rect(0, 0, sheepW, sheepH, 15, 15, 15, 15); //sheep body
pop();
}
function sheepHead(x, y) {
push();
translate(x, y);
noStroke();
fill(0);
rect(x, y / 600, sheepHeadW, sheepHeadH, 3, 3, 15, 15); //sheep head
ellipse(x - sheepHeadW * 0.5, (y / 600) - sheepHeadH * 0.2, ear, ear); //left sheep ear
ellipse(x + sheepHeadW * 0.5, (y / 600) - sheepHeadH * 0.2, ear, ear); //right sheep ear
fill(255);
ellipse(x - 2, y / 600, eye, eye); //left sheep eye
ellipse(x + 2, y / 600, eye, eye); //right sheep eye
pop();
}
While I didn’t really explore unconventional ways to read time through this project, I tried to seamlessly embed time into a simple but fun illustration, so that it became more of an artefact, rather than something really practical. I was initially inspired by the concept of cuckoo clocks, but my clock eventually warped into a floating island. I ended up creating a 24 hour clock, where the number of sheep represent the hour, the number of rungs on the ladder represent the minute, and the gear on the island shows the seconds.
For my abstract clock, I initially started with an idea revolving around an outer space theme. I wanted to use ellipses to form loophole-like forms and a harmonious shape overalls that move in rhythm to a ticking clock. It was really difficult figuring out how to implement time and speed with these shapes I wanted to incorporate. However, it was really enjoyable to experiment and finally create an artwork that changes depending on how much time has passed, and that the image will not stay the same.
//Margot Gersing - Project 06 - mgersing@andrew.cmu.edu - Section E
function setup(){
createCanvas(480, 480);
angleMode(DEGREES);
}
function draw() {
background(255, 237, 233);
translate(width/1000, height);
rotate(270); // to start at top of screen
//time variables
var s = second();
var m = minute();
var h = hour() % 12;
//outline of ellipse - mapped to reflect time
var ah = map(h, 0, 12, 0, 360);
var am = map(m, 0, 60, 0, 360);
var as = map(s, 0, 60, 0, 360);
//ellipse size - mapped to reflect time
var eh = map(h, 0, 12, 300, 400);
var em = map(m, 0, 60, 150, 250);
var es = map(s, 0, 60, 10, 100);
// ellipse - radius increase to reflect time
noStroke();
fill(255, 192, 44); //hour circle
ellipse(width/2, height/2, eh, eh);
fill(111, 163, 118); //minute circle
ellipse(width/2, height/2, em, em);
fill(246, 195, 203); //second circle
ellipse(width/2, height/2, es, es);
//outlines
//seconds
noFill();
stroke(229, 56, 26);
strokeWeight(5);
arc(width/2, height/2, es, es, 0, as); //outline to reflect seconds passing
//minutes
noFill();
stroke(14, 94, 67);
strokeWeight(10);
arc(width/2, height/2, em, em, 0, am); //outline to reflect minutes passing
//hours
noFill();
stroke(255, 233, 105);
strokeWeight(15);
arc(width/2, height/2, eh, eh, 0, ah); //outline to reflect hour passing
}
For this project I wanted to create a bullseye shape that reflected the time in two ways, the outline and the size. I tried to make each circle proportionally sized so that the hour is largest, and second is the smallest. The outline is a more obvious way of showing the time and the size of the circle is much more subtle especially when it comes to the minute and hours.
//Fanjie Jin
//Section C
//fjin@andrew.cmu.edu
//Project 6
function setup() {
createCanvas(480,480);
}
function draw() {
background(15, 20, 60);
//change the hour, min and sec into variables
var S = second();
var M = minute();
var H = hour();
//display the grid for percentages
stroke(255)
strokeWeight(1)
line(240, 25, 240, 455)
stroke(255)
strokeWeight(1)
line(20, 240, 480, 240)
//display the percentage signs
fill(255);
text(" 0% ", 450, 237);
fill(255);
text(" 25% ", 228, 470);
fill(255);
text(" 50% ", 5, 237);
fill(255);
text(" 75% ", 228, 18);
//outer circle
stroke(255);
noFill();
ellipse(240, 240, 400, 400);
//arc plate displays hours overall percentage of hour
MappedH = H / 24;
strokeWeight(1);
fill(100, 140, 222);
arc(240,240, 400, 400, 0, MappedH *2 * PI);
//outer circle
fill(15, 20, 60);
stroke(255);
ellipse(260, 240, 300, 300);
//display the grid for hours
for(a = 0 ;a < 360; a += 15){
push();
translate(240,240);
strokeWeight(1);
stroke(255, 255, 0);
rotate(radians(a));
line(0,0,200,0);
pop();
}
//outer circle
fill(15, 20, 60);
stroke(255);
ellipse(260, 240, 300, 300);
//display the grid for seconds and how many seconds have passed
for(i = 0 ;i < 360; i += 6){
push();
translate(260,240);
stroke(255, 0, 0);
rotate(radians(i));
line(0,0,150,0);
pop();
}
push();
translate(260,240);
rotate(radians(6 * S));
stroke(255);
line(0,0,150,0);
pop();
fill(15, 20, 60);
ellipse(270, 240, 200, 200);
//display how many minutes have passed
MappedM = M / 60;
push();
translate(270, 240);
noStroke();
fill(100, 108, 222);
arc(0,0, 200, 200, 0, MappedM *2 * PI);
pop();
//draw grid for minutes
for(a = 0 ;a < 360; a += 6){
push();
translate(270,240);
strokeWeight(1);
stroke(255, 255, 0);
rotate(radians(a));
line(0,0,100,0);
pop();
}
//inner ellipse 3
fill(15, 20, 60);
stroke(255);
ellipse(249, 240, 150, 150);
//circle at the center would expand based on seconds
fill(50, 20, 60);
noStroke();
ellipse(249, 240, S * 2.5, S * 2.5);
//display the actual time at the middle of the canvas
fill(255);
text(nf(H, 2,0) + ":", 220, 237);
text(nf(M, 2,0) + ":", 240, 237);
text(nf(S, 2,0), 260, 237);
//line showing the beginning
stroke(255);
strokeWeight(2);
line(240, 240, 600, 240);
}
In this abstract clock project, I have decided to treat it with a minimalistic approach. Overall, there are three rings, and from the center to the outer ring, the minutes, seconds, and hours are being displayed. The gird has showed the percentage, so from the clock, viewer will be understand how much percent of the day has been passed. There is a circle expanding constantly at the center of the clock based on how many seconds have been passed. Lastly, I have experimented with the idea of offset so compositionally, its more intriguing.
//sarah kang
//section c
//sarahk1@andrew.cmu.edu
//project-06-clock
function setup() {
createCanvas(480, 480);
background(0);
}
function draw() {
//current time
var S = second();
var M = minute();
var H = hour();
//remap
var RMH = map(H, 0, 23, 0, 360);
var RMM = map(M, 0, 59, 0, 360);
var RMS = map(S, 0, 59, 0, 360);
var sec = S / 60;
var rad = 100;
var dim = 80;
var dim2 = 40;
var dim3 = 30;
var x1 = 220;
var y1 = 160;
var x2 = 350;
var y2 = 260;
var x3 = 200;
var y3 = 340;
var x4 = 80;
var y4 = 390;
var x5 = 400;
var y5 = 60;
angleMode(DEGREES);
//first bubble
fill(63, 57, 64);
noStroke();
ellipse(220, 160, sec * dim, sec * dim); //center
//big ring for hours
noFill();
stroke(105, 9, 46);
strokeWeight(1);
arc(x1, y1, rad + 80, rad + 80, 0, RMH);
//med ring for minutes
stroke(240, 192, 201);
strokeWeight(4);
arc(x1, y1, rad + 50, rad + 50, 0, RMM);
//small ring for seconds
stroke(201, 231, 255);
strokeWeight(7);
arc(x1, y1, rad, rad, 0, RMS);
//second bubble
fill(94, 86, 93);
noStroke();
ellipse(350, 260, sec * dim, sec * dim); //center
//big ring for seconds
noFill();
stroke(105, 9, 46);
strokeWeight(4);
arc(x2, y2, rad + 100, rad + 100, 0, RMS);
//med ring for minutes
stroke(240, 192, 201);
strokeWeight(8);
arc(x2, y2, rad + 75, rad + 75, 0, RMM);
//small ring for hours
stroke(201, 231, 255);
strokeWeight(12);
arc(x2, y2, rad + 20, rad + 20, 0, RMH);
//third bubble
fill(99, 101, 115);
noStroke();
ellipse(200, 340, sec * dim2, sec * dim2); //center
//big ring for seconds
noFill();
stroke(105, 9, 46);
strokeWeight(1);
arc(x3, y3, rad + 40, rad + 40, 0, RMS);
//med ring for seconds
stroke(240, 192, 201);
strokeWeight(2);
arc(x3, y3, rad + 20, rad + 20, 0, RMS);
//small ring for seconds
stroke(201, 231, 255);
strokeWeight(4);
arc(x3, y3, rad, rad, 0, RMS);
//4th bubble
fill(140, 143, 161);
noStroke();
ellipse(80, 390, sec * dim2, sec * dim2); //center
//big ring for seconds
noFill();
stroke(105, 9, 46);
strokeWeight(1);
arc(x4, y4, rad, rad, 0, RMS);
//med ring for seconds
stroke(240, 192, 201);
strokeWeight(2);
arc(x4, y4, rad - 10, rad - 10, 0, RMS);
//small ring for seconds
stroke(201, 231, 255);
strokeWeight(4);
arc(x4, y4, rad - 20, rad - 20, 0, RMS);
//5th bubble
fill(149, 140, 161);
noStroke();
ellipse(400, 60, sec * dim3, sec * dim3); //center
//big ring for seconds
noFill();
stroke(105, 9, 46);
strokeWeight(1);
arc(x5, y5, rad - 20, rad - 20, 0, RMS);
//med ring for seconds
stroke(240, 192, 201);
strokeWeight(2);
arc(x5, y5, rad - 30, rad - 30, 0, RMS);
//small ring for seconds
stroke(201, 231, 255);
strokeWeight(4);
arc(x5, y5, rad - 45, rad - 45, 0, RMS);
}
I wanted to make a bubble clock and vary the hour, minute, and second variables by the layers of the bubbles. To make the frame changes more apparent, I used more seconds variables in the visualization.
For my clock I made a scene at the ocean. The small clock shows the progression of an hour (when it’s near the end of the screen the hour’s about to change) and the big cloud shows the progression of a minute. The water is controlled by a sin function so it makes a whole cycle in a minute. There is a transparent layer on top of the water (called oceanLight) that also expands and contracts sinusoidally. It has the same x,y value (0,2*height/3+yMin) so that it follows the blue water exactly.
There is also a simple function to make the sky more orange during specific hours (6am to 6pm) and more blue otherwise.
/*
Ellan Suder
15104 1 D
esuder@andrew.cmu.edu
Project-06
*/
var skyColor;
var oceanColor;
var oceanColorLight;
var sandColor;
var logColor;
var notchColor;
var orangeSky;
var purpleSky;
var boatColor;
var prevSec;
var millisRolloverTime;
var hr;
function setup() {
skyColor = color(140,220,240);
oceanColor = color(60,140,190);
oceanColorLight = color(219,222,236,150);
sandColor = color(220,190,110);
logColor = color(97,54,35);
notchColor = color(141,94,43);
orangeSky = color(248,170,66,40);
purpleSky = color(129,36,229,40);
boatColor = color(200,50,50);
createCanvas(480, 480);
noStroke();
//gets accurate starting time
hr = hour() + minute()/60 + second()/60/60;
}
function draw() {
background(skyColor);
//fetch current time
var H = hour();
var M = minute();
var S = second();
if (prevSec != S) {
millisRolloverTime = millis();
}
prevSec = S;
var mils = floor(millis() - millisRolloverTime);
//smooth out seconds and minutes
var secondsWithFraction = S + (mils / 1000.0);
var minutesWithFraction = M + (mils / 60000.0);
var cloudPositionSec = map(secondsWithFraction, 0, 60, -150, width + 50);
var cloudPositionMin = map(minutesWithFraction, 0, 60, -75, width + 25);
//ocean - full cycle every minute
var seconds = hr + (millis() * 0.001) /60;
var yMin = sin(seconds * TWO_PI) * height/4; //highest value is 2*height/3 + height/4, lowest is 2*height/3 - height/4. one full cycle is a minute
var yMin2 = sin(seconds * TWO_PI) * height/20;
fill(oceanColor);
rect(0,2*height/3+yMin,
width,height/4-yMin); //2*height/3 is middle value/start of sin wave. goes up and then down
//sand + log + light water
fill(logColor);
rect(height/4,height/2-30,55,height/2-30,5,5);
fill(notchColor);
triangle(height/4+55,2*height/3-5, //top
height/4+35,2*height/3,
height/4+55,2*height/3+10);
fill(oceanColorLight);
rect(0,2*height/3+yMin,
width,height/20+yMin2);//sits on top of blue water/yMin
fill(sandColor);
ellipse(width/2,height-30,width+500,70);
ellipse(height/4+55/2,height-53,120,30);
//cloud that moves across screen in an hour
fill(225,235,240);
drawCloud(cloudPositionMin,height/3,50);
//cloud that moves across screen in a minute
fill(250,250,250);
drawCloud(cloudPositionSec,height/5);
boatY=2*height/3+yMin+20;
drawBoat(width/2,boatY);
//night and day overlay color
if(H >= 6 & H < 18) {
fill(orangeSky);
} else {
fill(purpleSky);
}
rect(0,0,width,height);
}
function drawCloud(x,y,size = 100) {
push();
noStroke();
//fill(230);
ellipse(x, y, size, size);
ellipse(x + size*.5, y + size*.05, size, size);
ellipse(x + size, y, size, size*.8);
ellipse(x + size*.3, y - size*.2, size*.8, size*.8);
ellipse(x + size*.7, y - size*.35, size*.8, size*.8);
pop();
}
function drawBoat(x=width/2,y=height/2) {
fill("black");
rect(x+30,y-220,
12,220);
fill("white");
triangle(x+42,y-220,
x+150,y-103,
x+42,y-90);
fill(boatColor);
beginShape();
vertex(x-20, y-80);
vertex(x+220, y-80);
vertex(x+170, y);
vertex(x, y);
endShape(CLOSE);
}
My representation of the clock showed three different parts of the clock. I wanted to portray hours, minutes, and seconds in three different manners. By doing this, I was able to code the outside of the circle with an arc, showing the hour. I made an inner loop with the minutes by using stroke lines. And finally, the seconds were done with the squares in the perimeter.
//Crystal Xue
//15104-section B
//luyaox@andrew.cmu.edu
//Project_06
var eyeballSize = 180;
var eyeChange = 20;
function setup() {
createCanvas(600, 600);
}
function draw() {
background(230, 194, 152);
frameRate(600);
var h = hour();
var m = minute();
var s = second();
var eyeWidth = 150;
//eyebag
translate(120, 400)
fill(210, 180, 152);
noStroke();
beginShape();
for (var i = - 1; i < 12; i++) {
curveVertex(0.1 * PI * eyeWidth * i - 50, sin(0.1 * i * PI) * (110 + m) - 50);
}
endShape();
//drawing the eye shape
translate(-50, - 100);
stroke(0);
strokeWeight(10);
fill(255);
//drawing upper half of the eye
beginShape();
for (var i = -1; i < 12; i++) {
curveVertex(0.1 * PI * eyeWidth * i, -sin(0.1 * i* PI) * (110 + m));
}
endShape();
//drawing lower half of the eye
fill(255);
beginShape();
for (var i = - 1; i < 12; i++) {
curveVertex(0.1 * PI * eyeWidth * i, sin(0.1 * i * PI) * (110 + m));
}
endShape();
//change of eyeball colors
var r1 = 200 + 25 * sin(millis() / 100.0 );
var g1 = 200 + 25 * sin(millis() / 100.0 + HALF_PI);
var b1 = 200 + 25 * sin(millis() / 100.0 - HALF_PI);
var eyeballX = 5 * h;
var eyeballY = 0;
x = sin(frameCount / 10) * eyeChange;
y = cos(frameCount / 10) * eyeChange;
//drawing eyeball
translate(200, 0);
noStroke();
fill(r1, g1, b1);
ellipse(eyeballX, eyeballY, eyeballSize + x, eyeballSize + y);
if (s % 2 == 0) {
fill(0);
ellipse(eyeballX, eyeballY, 100, 100);
fill(255);
ellipse(eyeballX + 20, eyeballY - 20, 10, 10);
}else {
fill(0);
ellipse(eyeballX, eyeballY, 130, 130);
fill(255);
ellipse(eyeballX + 20, eyeballY -20, 15, 15);
}
//closing lid and eye bag when tired
if (h < 8) {
translate(-200,0);
fill(230, 194, 152);
stroke(0);
strokeWeight(10);
beginShape();
for (var i = -1; i < 12; i++) {
curveVertex(0.1 * PI * eyeWidth * i, -sin(0.1 * i* PI)* (110 + m));
}
endShape();
}
}
This is a project represent a normal student eye in a day. The pupil is changing its size every second, and the eye size is increasing based on minutes. And the entire eyeball is moving from left to right based on hours. during sleeping hours (12:00 – 8:00 am) the top eyelid is closed because of fatigues.
![[OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2020/08/stop-banner.png)
