//Claire Xu
//xux1@andrew.cmu.edu
//Section B
//Project 05
var spacing = 400/30;
var distance = 400/30;
var diam = 4;
function setup() {
createCanvas(400, 400);
}
function draw() {
let s = second();
let m = minute();
let h = hour();
background(245);
//hour
fill(33, 72, 39);
arc(width/2, height/2, 350, 350, 0 + TWO_PI * h/12, PI + TWO_PI * h/12);
noFill();
strokeWeight(2);
stroke(100);
strokeCap(SQUARE);
arc(width/2, height/2, 220, 220, 0 + TWO_PI * h/12, PI + TWO_PI * h/12);
arc(width/2, height/2, 190, 190, 0 + TWO_PI * h/12, PI + TWO_PI * h/12);
arc(width/2, height/2, 160, 160, 0 + TWO_PI * h/12, PI + TWO_PI * h/12);
//minute
noStroke();
fill(163, 199, 139);
arc(width/2, height/2, 325, 325, 0 + TWO_PI * m/60, PI + TWO_PI * m/60);
noFill();
strokeWeight(2);
stroke(205);
strokeCap(SQUARE);
arc(width/2, height/2, 250, 250, 0 + TWO_PI * m/60, PI + TWO_PI * m/60);
arc(width/2, height/2, 220, 220, 0 + TWO_PI * m/60, PI + TWO_PI * m/60);
arc(width/2, height/2, 190, 190, 0 + TWO_PI * m/60, PI + TWO_PI * m/60);
//second
noStroke();
fill(241, 225, 191);
arc(width/2, height/2, 300, 300, 0 + TWO_PI * s/60, PI + TWO_PI * s/60);
noFill();
strokeWeight(2);
stroke(255);
strokeCap(SQUARE);
arc(width/2, height/2, 280, 280, TWO_PI * s/60, PI + TWO_PI * s/60);
arc(width/2, height/2, 250, 250, TWO_PI * s/60, PI + TWO_PI * s/60);
arc(width/2, height/2, 220, 220, TWO_PI * s/60, PI + TWO_PI * s/60);
//clock center
noStroke();
fill(241, 225, 191);
circle(width/2, height/2, 100);
fill("black");
circle(width/2, height/2, 10);
}
For this project I was inspired by an abstract clock that I saw online, which abstracts the second/minute/hour hands, where it would have entire half-circle plates rotating to count the time. I used arc to draw the half-circles, and instead of trying to rotate the arc through the center, I discovered that I could just redraw the arc at new positions every frame according to the time. I wish I could figure out how to have holes in the half-circle plates like in the real abstract clock images. Unlike the real abstract clock reference, the line that’s tangent to the flat side of the half-circle is where the time is pointed at.
//Ghalya Alsanea
//Section B
//galsanea@andrew.cmu.edu
//Project-06
//configure sizes of each water bowl
var secBowl = 25;
var minBowl = 18;
var hrBowl = 20;
//define x coordinates and y start points for each bowl
var secX = 200;
var secY = 150;
var minX = 300;
var minY = 60;
var hourX = 150;
var hourY = 90;
//water drop animation start X and Y positions
var startX = 0;
var startY = 0;
//set up fill matrix for the seconds
//row is time intervals (s)
//columns are fill for the seconds bowls
var fills =[['blue' , 255 , 255 , 255 ],
[255 , 'blue', 255 , 255 ],
['blue' , 'blue', 255 , 255 ],
[255 , 255 , 'blue', 255 ],
['blue' , 255 , 'blue', 255 ],
[255 , 'blue', 'blue', 255 ],
['blue' , 'blue', 'blue', 255 ],
[255 , 255 , 255 , 'blue'],
['blue' , 255 , 255 , 'blue'],
[255 , 'blue', 255 , 'blue'],
['blue' , 'blue', 255 , 'blue'],
[255 , 255 , 'blue', 'blue'],
['blue' , 255 , 'blue', 'blue'],
[255 , 'blue', 'blue', 'blue'],
['blue' , 'blue', 'blue', 'blue'],
]
function setup() {
createCanvas(480, 480);
angleMode(DEGREES);
}
function draw() {
background("pink");
//background mechanisms --> graphics
noStroke();
//top
fill(255);
arc(width/2, 20, 50, 50, 0, 180);
fill('blue');
arc(width/2, 30, 40, 28, 0, 180);
//bottom
circle(width/2, height -50, 50);
//connecting tubes
rect(width/2 - 3, 32, 6, height - 100);
rect(minX - 2, minY + minBowl * 0.6 * 29, 4, minBowl + 10);
//blue lines
noFill();
strokeWeight(3);
stroke('blue');
//minute connectors
line(minX, (minY + minBowl * 31 * 0.6), width/2, height - 50);
line(minX - minBowl +2, minY + minBowl * 0.6 * 30, minX, minY + minBowl * 0.6 * 30);
//seconds connectors
line(secX, secY + secBowl*6, secX, secY + secBowl*7);
line(secX, secY + secBowl*7, width/2, secY + secBowl*8);
line(secX, secY, secX, secY - secBowl*3);
arc(secX + 8, secY - secBowl*3, 16, 16, 180, 360);
line(secX + 16, secY - secBowl*3, secX + 16, secY - secBowl*2);
arc(secX + 24, secY - secBowl*2, 16, 16, 0, 180);
line(secX + 32, secY - secBowl*2, secX + 32, 35);
//don't start filling up hours if it's noon or midnight
if(hour() == 12) {
stroke(255);
} else {
stroke('blue');
}
//hour connectors
line(minX - minBowl*2, hourY + hrBowl * 1.2 * 12, hourX, hourY + hrBowl * 1.2 * 12);
line(hourX, hourY + hrBowl * 1.2 * 11, hourX, hourY + hrBowl * 1.2 * 12);
//purely white lines
stroke(255);
arc(minX- minBowl*1.5 + 2, minY, minBowl, minBowl, 180, 360);
line(minX - minBowl*2 + 2, minY, minX - minBowl*2 + 2, hourY);
line(hourX, hourY-25, hourX, hourY);
line(hourX, hourY-25, width / 2 - 15, 25);
//do the math to figure out the times in useful numbers
//since the cycle is in 2 minute intervals
//you have to shift the seconds in the second minute
if(minute() % 2 == 0) {
var s = floor(second() / 8);
} else {
var s = floor((60 + second())/8);
}
//if minutes is divisible by 2, fill one of the minute bowls
var m = floor(minute()/2);
//every hour, fill one hour bowl
var h = hour() % 12;
//seconds base
for (i = 0; i < 4; i++) {
noStroke();
//assign each bowl to it's color
fill(fills[s][i]);
circle(secX, secY + secBowl * 1.5 * i, secBowl + 4*i);
rect(secX - 3.5, secY + secBowl * 1.5 * i, 7, secBowl + 4*i);
}
//minutes base
strokeWeight(0.5);
for (i = 0; i < 30; i++) {
noStroke();
//figure out if bowl should be filled with water
if(30 - i <= m){
fill("blue");
}
else {
fill(255);
}
//bowls
ellipse(minX, minY + minBowl * i * 0.6, minBowl, minBowl / 2);
rect(minX - 2, minY + minBowl * 0.6 * i, 4, minBowl / 2);
//siphon tube
rect(minX - minBowl, minY + minBowl * 0.6 * i, 4, minBowl);
//tick marks for every 10 minutes
if (i % 5 == 0) {
push();
translate(minX + minBowl, minY + minBowl * i * 0.6);
stroke("blue");
for(var a = 0; a < 30 - i; a+=5){
line(0, 0, a/2 + 2, 0);
}
pop();
}
}
//hours base
for (i = 0; i < 12; i++) {
noStroke();
//figure out if bowl should be filled with water
if(12 - i <= h){
fill("blue");
}
else {
fill(255);
}
//bowls
circle(hourX, hourY + hrBowl*1.2*i, hrBowl);
rect(hourX - 3, hourY + hrBowl * 1.2 * i, 6, hrBowl);
//siphon tube
rect(minX - minBowl*2, hourY + hrBowl * 1.2 * i, 4, hrBowl*2);
}
// water dripping annimation
push();
translate(secX, secY - secBowl);
stroke('blue');
strokeWeight(3);
//draw dashed line
for (i = 0; i < 160; i+=20) {
var y = map(startY, 0, secBowl*8, 0, 100);
line(startX, y+i, startX, y + i + 5);
}
//animate line
startY = startY + 2;
//reset after 3 bowls
if (startY > secBowl*3) {
startY = 0;
}
pop();
}
For this project I was inspired by this clock in a mall I used to go to back home, which is the oldest mall in Kuwait. I used to sit in the main lobby as a child and stare at the sculpture for hours. Here’s a video…
Trying to figure out how to draw the water clock
Trying to understand the spacing of drops to seconds
I started by doing a lot of research about water clocks and how they work. You can find a brief history here. I decided to take the modern approach of the scientist, Bernard Gitton’s. I used this animation to visually understand how the clock works, and I used the explanations behind the physics of the timepiece and the calculations found on this page to figure out the code necessary to simulate the water clock.
The biggest challenge was trying to understand how the seconds were working. I used an excel sheet to understand when each of the bowls need to be filled during which second, and mapped that to a 2D array matrix.
For my abstract clock, I first wanted to use words to go about my design, but I felt that it would be a bit too complicated. I felt the purpose of this project was to make it easy to still tell time while making it more interesting to do so. I really enjoyed making this project because I went through a lot of trial and error models until I found something I really liked. I also like the different sized in the boxes just to make it vary a bit more. When the Hour Box is full, that represents 24 hours. When the Minute Box is full that represents 60 minutes. When the Second Box is full, that represents 60 seconds.
//Sean B. Leo
//sleo@andrew.cmu.edu
//Section C
//Project 6
//Abstract Clock
function setup() {
createCanvas(600, 600);
pixelDensity(1);
frameRate(1);
}
function draw() {
var S = second();
var M = minute();
var H = hour();
var s1 = map(S, 0, 60, 0, 255);
var m1 = map(M, 0, 60, 0, 255);
var h1 = map(H, 0, 24, 0, 255);
loadPixels();
for(var y=0; y<400; y++){
for(var x=0; x<400; x++){
var index= (x + y *width)*4;
pixels[index+0] = y-m1;
pixels[index+1] = h1;
pixels[index+2] = x-s1;
pixels[index+3] = 255;
}
}
updatePixels();
}
I started thinking about abstracting the concept of time itself. Instead of viewing time as an exacting and regimented number, what if it could be displayed more like a feeling or mood? What if by looking at a display we could have a sense of the passing of time rather than knowing what time it is exactly?
I created a color field that adjusts it’s rgb values over time through a pixel array. No second is the same composition as the next though the change is subtle. Below you can see the progression of time over the day and familiar timestamps.
I think there are a lot of artistic applications of this project; mainly using the generated color field as a light source. Rather than a reading of time in a specific format: a watch, wall clock, microwave, etc. A lamp emitting the color field would affect the room it is in a subtly convey time passing.
For my wallpaper I thought to use a textile pattern I was familiar with. Houndstooth is useful in that it can be scaled to be very small or abstractly large.
//Sean B. Leo
//sleo@andrew.cmu.edu
//Section C
//Project 05 Wallpaper
var x1 = 10; //changing the value of x1 will change the scaling of the pattern
var x2 = x1*2;
var x3 = x1*3;
var x4 = x1*4;
var y1 = x1;
var y2 = y1*2;
var y3 = y1*3;
var y4 = y1*4;
var value = 0;
function setup() {
createCanvas(600, 600);
}
function draw() {
noStroke();
background(255);
//Scales the color based on the mouse position
r = map(mouseX, 0, width, 0, 200);
g = map(mouseX/mouseY, 0, 600, 0, 200);
b = map(mouseY, 0, height, 0, 200);
for (var x = 0; x < width+x1; x += x1*4) {
for (var y = 0; y <height+y1; y += y1*4) {
houndstooth (x-30, y-30);
}
}
}
function houndstooth(x,y) {
fill(r, g, b);
push();
translate(x, y);
rect(x2, y2, x2, y2);
quad(0, y4, x2, y2, x2, y3, x1, y4);
quad(x2, y4+y1, x3, y4, x4, y4, x2, y4+y2);
triangle(x3, y2, x4, y1, x4, y2);
triangle(x4, y2, x4+x1, y2, x4, y3);
pop();
}
/* the original coordinate positions draw to determine the relative values
rect(50, 50, 50, 50);
quad(0,100, 50, 50, 50, 75, 25, 100);
quad(50, 125, 75, 100, 100, 100, 50, 150);
triangle(75, 50, 100, 25, 100, 50);
triangle(100, 50, 125, 50, 100, 75);
*/
var starX = [];
var starY = [];
// star position arrays
function setup() {
createCanvas(600, 600);
for (i = 0; i < 100; i++) {
starX[i] = random(width);
starY[i] = random(height);
} // randomizing star x and y positions
}
function draw() {
background(0, 0, 10);
noStroke();
fill(255, 210, 10);
ellipse(300, 300, 50, 50);
//sun
stroke(200);
strokeWeight(1.5);
noFill();
ellipse(300, 300, 500, 500);
// outer orbit
stroke(200);
strokeWeight(1);
noFill();
ellipse(300, 300, 350, 350);
// middle orbit
stroke(200);
strokeWeight(0.5);
noFill();
ellipse(300, 300, 250, 250);
// inner orbit
var S = second();
var M = minute();
var H = hour();
var mappedS = map(S, 0, 59, 0, 354);
var mappedM = map(M, 0, 59, 0, 354);
var mappedH = map(H, 0,23, 0, 354);
// time variables
push();
//stars
for (i = 0; i < 100; i++) {
noStroke();
fill(255, 255, 255, 75);
ellipse(starX[i], starY[i], 2, 2);
}
translate(300, 300);
// red planet
rotate(radians(mappedH));
noStroke();
fill(230, 50, 15);
ellipse(0, -250, 20, 20);
// grey planet
rotate(radians(mappedS));
noStroke();
fill(150);
ellipse(0, -125, 10, 10);
pop();
var moonX = 300 + -175 * (cos(radians(mappedM)));
var moonY = 300 + -175 * (sin(radians(mappedM)));
// circle math!
push();
translate(moonX, moonY);
noStroke();
fill(70, 210, 200);
ellipse(0, 0, 25, 25);
// blue planet
stroke(200);
strokeWeight(0.5);
noFill();
ellipse(0, 0, 60, 60);
// moon orbit
rotate(radians(mappedS));
noStroke();
fill(150);
ellipse(0, -30, 10, 10);
// moon
pop();
}
This project was really interesting to do because I got to revisit and experiment with the translate() and rotate() functions. I also incorporated arrays into my piece, and was really satisfied with the result. One thing I learned that I don’t think I remember seeing before is the map() function, which I think made it a lot easier to convert measures of time into evenly-spaced coordinates without hard-coding in the math.
Blue White Black 0.48by Tyler Hobbs is one of his many algorithmic computational pieces that displays the properties of randomness. Hobbs is a generative artist that particularly focuses on the interaction between randomness and order. This particular piece models how brush strokes would appear on a physical canvas. At first glance, the painting exudes a loose and free vibe. However, upon closer inspection, you can actually notice the fine structure and detail involved in the rendering of each brush stroke. By using computational algorithms, Hobbs created an art piece that seems random at first, but is actually made with extreme mathematical precision.
A close-up of a portion of Blue White Black 0.48
I was attracted to this art piece because of how realistic the brush strokes and paint drips were rendered. These brush strokes looked really random to me at first but after looking closely, the details and preciseness involved amazed me. I really loved how Hobbs was able to blend the dichotomy of loose painting and precise algorithmic computation into this piece.
What is extremely interesting about Manolo’s art is that he basically mimics certain design logic of existing paintings, but with a twist. He reduces the paintings into their simplest geometries, and with that pieces back the painting through code and algorithms to produce a fresh and more modern version of the precedents. Manolo manages to keep the spirit and core of each art piece but putting a more computation spin onto them. It is really interesting to see how minute changes in variables can produce such beautiful and unique artworks, and in a way makes the art more accessible to viewers by having a more recognizable methodology of computation.
/* Mari Kubota
49-104 Section D
mkubota@andrew.cmu.edu
Assignment 6
*/
function setup(){
createCanvas(400,400);
}
function draw(){
background(178,208,166);
noStroke();
//creates vars to call on time
var sec= second();
var min= minute();
var hr= hour();
var size= 200;
//Mapping time to shape components
var mappedSec = map(sec, 0,59, width/2-size,width/2+size);
var mappedMin = map(min,0, 59, 0, size);
var mappedHr = map(hr, 0, 23, 270, 630);
//blue circle
fill(178,208,220);
ellipse(width/2, height/2, size, size);
//Background color circle ellipsing blue circle (seconds)
fill(178,208,166);
ellipse(mappedSec, height/2, size, size);
//white circle (minutes)
fill(225);
ellipse(width/2, height/2, mappedMin, mappedMin);
//yellow arc (hours)
angleMode(DEGREES);
stroke(255,248,175);
noFill();
strokeWeight(10);
arc(width/2, height/2, size+50, size+50, 270, mappedHr);
}
sketch of abstract clock
In this project I was inspired by the waxing and waning of the moon. Every second shifted a background colored circle over the blue circle to give an illusion of an eclipse. The center white circle grows bigger every minute. And the yellow arc on the outside grows longer every hour in a 24 hour period. The most challenging part of this assignment was adjusting the time variables to the right numbers and components.
/*
Joanne Chui
Section C
Project 6
*/
function setup(){
createCanvas(400,400);
}
function draw(){
var s = second();
var m = minute();
var h = hour() % 12;
background(255, 194, 38);
stroke(150, 50, 40);
fill(255, 212, 105);
//second
strokeWeight(15);
noFill();
stroke(255, 212, 105);
arc(200, 200, 300, 300, -HALF_PI, TWO_PI * (s/60)-HALF_PI)
//minute
for(i = 0; i < m; i++){
strokeWeight(1);
ellipse(200, 200, 300 - (i*5), 300 - (i*5));
}
//hour
strokeWeight(30);
noFill();
stroke(255, 225, 150);
arc(200, 200, 350, 350, -HALF_PI, TWO_PI * (h/12)-HALF_PI)
}
I was interested in visually embedding the amount of time that had passed into the image so that the time was still readable. I was inspired by the various simplistic apple watch faces.
![[OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2020/08/stop-banner.png)
