function setup() {
createCanvas(300, 300);
}
function draw() {
var H = hour();
var M = minute();
var S = second();
//Sky gets lighter with an hourly increment
background (0, 10 * H, 255);
//Sun moves position with the minute
fill (250,218,94);
noStroke();
ellipse (M * 5, 50, 50, 50);
//Cloud floats with the second
fill('White');
noStroke();
arc(20 + S * 4,100,30,30, PI/2, 3*PI/2);
fill('White');
noStroke();
arc(30 + S * 4,85,30,30, 3*PI/4, (3*PI/4) + 3*PI/2);
fill('White');
noStroke();
arc(50 + S * 4,85,30,30, 3*PI/4, (3*PI/4) + 3*PI/2);
fill('White');
noStroke();
arc(60 + S * 4,100,30,30, 3*PI/2, PI/2);
fill ('White');
noStroke();
rect(20 + S * 4,85,40,30);
//Sand
fill (225,191,146);
rect (0, 190, width, height);
//Sand particles
for (var x = 0; x < width; x += 10) {
for (var y = 210; y < height; y += 20) {
textSize (25);
fill(87,72,60);
text ('.', x, y);
}
}
}
Original Sketch
I originally wanted to create a project that would continuously draw stars (constellation) as the seconds go by, but as I worked on the project, realized that I wanted to move an object across- thus, I used a cloud. I had a difficult time creating a shape of the cloud, so I decided to hardcode each piece of the cloud (4 arcs + 1 rectangle). I even had a difficult time getting ideas about how I would want my abstract clock to reflect… However, I am satisfied with my final outcome and how it turned out; I especially like the smooth transition of the background, which reflects the hour. A great addition would have been if the sky reflected the actual sky color at specific hours, instead of just going from dark blue to light blue.
/*
Victoria Reiter
Section B
vreiter@andrew.cmu.edu
Project-06-Abstract Clocks
*/
function setup() {
createCanvas(480, 260);
// declares variables later used for time
var h;
var m;
var s;
// declares value for opacity
var alphaValue;
}
function draw() {
// describes appearance of text
textFont('Colonna MT');
textAlign(CENTER);
// sets background color
background(209, 252, 235);
// variables for time
h = hour();
m = minute();
s = second();
// sizes for the images that will represent time aspects
var hourShapeWidth = width / 36;
var minuteShapeWidth = width / 200;
var secondShapeWidth = width / 170;
// makes a loop to count the hours, drawing forks, highlighting
// the fork that represents the current hour
for (var i = 0; i < 24; i++) {
if (i !== h) {
fill(25, 125, 75);
fork(i * (hourShapeWidth + 6) + 7, 65);
} else {
fill(255, 255, 0);
fork(i * (hourShapeWidth + 6) + 7, 65);
}
}
// makes a loop to count the minutes, drawing dining glasses
// and highlighting the glass that represents the current minute
var glassX = k * (minuteShapeWidth + 5.5) + 6
var glassY = height / 20;
angle = 0;
increment = 5;
for (var k = 0; k < 60; k++) {
if (k !== m) {
fill(150, 150, 255);
glass(k * (minuteShapeWidth + 5.5) + 6, 35);
} else {
fill(255, 255, 0);
glass(k * (minuteShapeWidth + 5.5) + 6, 35);
}
}
// makes a loop to count the seconds, drawing spoons and highlighting
// the spoon that represents the current minute
for (var j = 0; j < 60; j++) {
if (j !== s) {
fill(150, 155, 155);
spoon(j * (secondShapeWidth + 5) + 5, 15);
} else {
fill(255, 255, 0);
spoon(j * (secondShapeWidth + 5) + 5, 15);
}
}
// lines that divide the clock into representative "time zones" for meals
stroke(203, 158, 255, 150);
line(width / 4 + 1, 0, width / 4 + 1, height);
line(width / 2 - 3, 0, width / 2 - 3, height);
line(3 * width / 4 - 7, 0, 3 * width / 4 - 7, height);
// if the time is between midnight and 6am, it is breakfast time
if (h >= 0 & h < 6) {
noStroke();
alphaValue = 255;
fill(226, 140, 59, alphaValue);
textSize(17);
textStyle(BOLD);
text("Breakfast Time!", 60, 230);
scale(.5);
breakfast(57, 255);
} else {
noStroke();
alphaValue = 110;
fill(226, 140, 59, alphaValue);
textSize(17);
textStyle(NORMAL);
text("Breakfast Time!", 60, 230);
scale(.5);
breakfast(57, 255);
}
// if the time is between 6am and noon, it is lunch time
if (h >= 6 & h < 12) {
alphaValue = 255;
fill(48, 155, 24, alphaValue);
textSize(40);
textStyle(BOLD);
text("Lunch Time!", 357, 462);
scale(1.2, 1.5);
lunch(250, 180);
} else {
alphaValue = 110;
fill(48, 155, 24, alphaValue);
textSize(40);
textStyle(NORMAL);
text("Lunch Time!", 357, 462);
scale(1.2, 1.5);
lunch(250, 180);
}
// if the time is between noon and 6pm, it is dinner time
if (h >= 12 & h < 18) {
alphaValue = 255;
fill(204, 89, 71, alphaValue);
textStyle(BOLD);
textSize(30);
text("Dinner Time!", 495, 310);
scale(.8);
dinner(550, 225);
} else {
alphaValue = 110;
fill(204, 89, 71, alphaValue);
textSize(30);
textStyle(NORMAL);
text("Dinner Time!", 495, 310);
scale(.8);
dinner(550, 225);
}
// if the time is between 6pm and midnight, it is time for dessert !!
if (h >= 18 & h < 24) {
alphaValue = 255;
fill(224, 0, 160, alphaValue);
textStyle(BOLD);
text("Time for Dessert!!!", 870, 387);
scale(.575, .5);
dessert(1500, 468);
} else {
alphaValue = 110;
fill(224, 0, 160, alphaValue);
textStyle(NORMAL);
text("Time for Dessert!!!", 870, 387);
scale(.575, .5);
dessert(1500, 468);
}
}
// draws a spoon
function spoon(x, y) {
ellipse(x, y, 6, 8);
rect(x - 1, y, 2, 12);
}
// draws a drinking glass
function glass(x, y) {
arc(x, y, 8, 8, - 3 * PI / 16, PI + 3 * PI / 16, CHORD);
rect(x - 1, y, 2, 10);
rect(x - 2, y + 10, 5, 1);
}
// draws a fork
function fork(x, y) {
rect(x, y, 16, 5);
rect(x, y - 10, 2, 10);
rect(x + 5, y - 10, 2, 10);
rect(x + 10, y - 10, 2, 10);
rect(x + 14, y - 10, 2, 10);
triangle(x, y + 5, x + 16, y + 5, x + 8, y + 10);
rect(x + 6, y + 7, 4, 15);
}
// draws breakfast foods
function breakfast(x, y) {
eggs(x, y);
bacon(x + 75, y - 50);
}
// draws lunch foods
function lunch(x, y) {
sandwich(x, y);
apple(x + 95, y);
}
// draws dinner foods
function dinner(x, y) {
mashedPotatoes(x + 80, y + 90);
chicken(x, y);
}
// draws dessert
// function iceCream is put into this function just for ease of naming,
// since "dessert" better represents the meal of this specific time zone
// than does simply "ice cream"
function dessert (x, y) {
iceCream(x, y);
}
// draws two sunny-side up eggs
function eggs(x, y) {
noStroke();
fill(255, 255, 255, alphaValue);
ellipse(x, y, 100);
ellipse(x + 20, y + 75, 100);
fill(255, 155, 0, alphaValue);
ellipse(x + 15, y, 35);
ellipse(x + 45, y + 85, 35);
}
// draws two strips of bacon
function bacon(x, y) {
fill(255, 50, 50, alphaValue);
rect(x, y, 40, 180);
rect(x + 60, y, 40, 180);
fill(255, 150, 150, alphaValue);
rect(x + 25, y, 8, 180);
rect(x + 85, y, 8, 180);
}
// draws a sammich/sammie
function sandwich(x, y) {
fill(165, 130, 41, alphaValue);
ellipse(x - 5, y, 50);
ellipse(x + 35, y, 50);
rect(x - 20, y, 65, 75, 10);
fill(0, 255, 0, alphaValue);
quad(x - 25, y - 25, x + 15, y - 35, x + 20, y + 10, x - 10, y + 7);
quad(x - 20, y, x - 33, y + 25, x + 5, y + 45, x + 5, y);
quad(x - 20, y + 30, x - 14, y + 70, x + 20, y + 55, x + 10, y)
fill(255, 255, 0, alphaValue);
rect(x - 6, y - 22, 60, 95);
fill(255, 0, 0, alphaValue);
ellipse(x + 15, y + 15, 45, 85)
fill(165, 130, 41, alphaValue);
ellipse(x + 20, y - 5, 50);
ellipse(x + 55, y - 5, 50);
rect(x + 5, y - 5, 65, 75, 10);
}
// draws an apple
function apple(x, y) {
fill(102, 79, 22, alphaValue);
rect(x, y, 7, 20);
fill(230, 0, 0, alphaValue);
ellipse(x + 2, y + 55, 80, 70);
fill(0, 195, 0, alphaValue);
ellipse(x + 9, y + 17, 20, 6);
}
// draws a chicken drumstick
function chicken(x, y) {
fill(255, alphaValue);
rect(x - 10, y, 20, 125);
ellipse(x - 17, y + 120, 30);
ellipse(x + 13, y + 120, 30);
fill(165, 130, 41, alphaValue);
ellipse(x, y, 100, 125);
triangle(x, y + 40, x - 20, y + 75, x + 20, y + 75);
}
// draws a nice scoop of mashed potatoes with a slab of butter
function mashedPotatoes(x, y) {
fill(0, 0, 255, alphaValue);
ellipse(x, y, 200, 15);
fill(255, alphaValue);
arc(x, y, 100, 100, PI, 0);
fill(255, 255, 0, alphaValue);
rect(x - 15, y - 52, 50, 30, 10);
}
// draws a yummy ice cream cone
function iceCream(x, y) {
fill(25, 255, 255, alphaValue);
ellipse(x, y + 50, 150);
fill(255, 25, 235, alphaValue);
ellipse(x, y - 50, 150);
fill(191, 158, 74, alphaValue);
triangle(x - 80, y + 80, x + 80, y + 80, x, y + 220);
fill(245, 0, 0, alphaValue);
ellipse(x + 15, y - 125, 35);
fill(185, 0, 0, alphaValue);
rect(x + 15, y - 150, 2, 20);
fill(0, alphaValue);
quad(x - 20, y - 30, x - 14, y - 38, x - 12, y - 9, x - 18, y - 25);
quad(x - 40, y - 70, x - 34, y - 60, x - 30, y - 74, x - 28, y - 65);
quad(x + 20, y - 50, x + 29, y - 60, x + 35, y - 44, x + 28, y - 55);
quad(x + 60, y - 20, x + 54, y - 25, x + 57, y - 14, x + 65, y - 25);
fill(132, 25, 255, alphaValue);
ellipse(x - 15, y + 33, 10);
ellipse(x - 55, y + 25, 15);
ellipse(x - 25, y + 55, 8);
ellipse(x + 40, y + 25, 10);
ellipse(x + 25, y + 65, 12);
}
My clock for this week reflects my own biological clock…for when to eat meals! If it were truly accurately, every time of day would be “Time for Dessert!!!,” but for the sake of the project, I’ve also included breakfast, lunch, and dinner.
At the top are spoons to count the seconds, glasses for the minutes, and forks for the hours. The opacity of the meals also change, and are fully opaque when it is time to eat them!
Initial sketch of my idea (PS I got caught in the rain the other day so the pages are now all wet and crinkly)
I assigned foods that are typical to each meal [in the US anyway], like some nice bacon and eggs, a sandwich and apple, a chicken drumstick and mashed potatoes with butter, and ice cream. If I ever feel both hungry and confused I will turn to this clock for meal suggestions!
Airspace Studio – Studio M Architects, Thom Faulders
Airspace Tokyo is a multi-family residence spread over four floors, with two photographic studios located on the first and second floor. The exterior screen facade design expresses an almost non-existent distinction between interior and exterior. Designed by Thom Faulders, the screen is capable of giving the structure its own architectural identity and at the same time acting as an urban interface in a neighborhood of row houses. The façade pattern is inspired by the previous vine patterns growing over the walls, and the designer reproduced the ‘random’ pattern of the vegetation through computer programming and repetition of modules.
closeup shot at the double layered facade screen
“The result – explain the authors of the project – translates into a reticular structure that gives shape to a transitory interstitial space between public and private, where the view changes every time you move, the rain does not reach the road by capillary action, the light is refracted on the shiny metallic surface”
Vera Molnar is widely known as a pioneering woman of computer generated graphics, but her works actually exist between the computer and the hand drawn. She primarily designs algorithms and computes these drawings based on a grid that corresponds to a computed set of variables. In the drawing below, Molnar has already defined the possibilities for each output, but uses an algorithm to offset the repetition and order of these outputs.
Structure de Quadrilateres (Square Structures), 1987, computer drawing with white ink on salmon-colored paper
Interruptions, 1968/1969, Ink plotter on paper
When Molnar worked with computers, there was a different richness to the drawing. Between this shift, from “machine imaginaire” to a “machine réelle,” (https://www.surfacemag.com/articles/vera-molnar-in-thinking-machines-at-moma/) Molnar was able to add more variation to her projects without the limitation of herself as the processor. Molnar’s randomness lies in the output of a logical algorithm. While the series of outputs is usually defined, the order, repetition, pattern of those outputs is randomly sorted based on the algorithm.
Interruptions à recouvrements (Disturbances through overlappings), 1969, Ink plotter on paper
After the drawing, Interruptions, was completed, Molnar then began Interruptions a recouvrements, which used the original drawing to compute the algorithm for the larger layering of drawings which includes variation in the scale, shape, and line thickness.
Molnar believes one power of the computer is that the random can create an aesthetic shock that ruptures the systematic and symmetrical. The rigor and meticulousness which she applies to her logics, is the human bias that computation and randomness cannot create alone. The work is so powerful because the “randomness” exists within Molnar’s bias.
// Lingfan Jiang
// Section B
// lingfanj@andrew.cmu.edu
// Project-06
var y = 100;
var up = 0;
function setup(){
createCanvas (480, 200);
}
function draw(){
background("pink");
//turn down the frame rate to limit the movement
frameRate(1);
angleMode(DEGREES);
var H = hour();
var M = minute();
var S = second();
//remap second according to the width of the canvas
var x = map(S, 0, 60, 0, 480);
//fill the base with dark grey
fill(45);
strokeWeight(0);
rect(0, 145, 48, 100);
rect(48, 140, 40, 100);
rect(88, 135, 40, 100);
rect(128, 130, 40, 100);
rect(168, 125, 40, 100);
rect(208, 120, 72, 100);
rect(280, 125, 40, 100);
rect(320, 130, 40, 100);
rect(360, 135, 40, 100);
rect(400, 140, 40, 100);
rect(440, 145, 40, 100);
//fill the platforms with different shades of grey
fill(240);
rect(0, 110, 48, 35);
fill(200);
rect(48, 105, 40, 35);
fill(160);
rect(88, 100, 40, 35);
fill(120);
rect(128, 95, 40, 35);
fill(100);
rect(168, 90, 40, 35);
fill(80);
rect(208, 85, 72, 35);
fill(100);
rect(280, 90, 40, 35);
fill(120);
rect(320, 95, 40, 35);
fill(160);
rect(360, 100, 40, 35);
fill(200);
rect(400, 105, 40, 35);
fill(240);
rect(440, 110, 40, 35);
textSize(10);
text('Time Survived:', 140, 170);
textSize(13);
text(nf(H + ' hours', 8, 0), 220, 170);
text(nf(M + ' minutes', 10, 0), 279, 170);
//set a strokeweight for the man
strokeWeight(0.7);
//body
line (x, y, x, y + 8);
//front leg
line (x, y + 8, x + 5, y + 10);
line (x + 5, y + 10, x + 5, y + 15);
//back leg
line (x, y + 8, x, y + 11);
line (x, y + 11, x - 5, y + 15);
//arms
line (x, y + 4, x + 6, y + 4);
line (x, y + 6, x + 6, y + 6);
//head
ellipse(x, y, 5, 5);
//pac-man at the back
strokeWeight(0.5);
fill("yellow");
arc(x - 30, y + 8, 20, 20, 40, 320, PIE);
//eye of pac-man
fill(0);
ellipse(x - 30, y + 3, 2.5, 2.5);
//set conditions so that the running man moves up 5 pixels every 5 seconds
if (S % 5 == 0) {
up = 5;
}
else {
up = 0;
};
//set the man back to the left of the screen
if (S > 60) {
x = 0;
};
//make the man goes up before he reaches the middle
if (S > 0 & S < 30){
y -= up;
}
//make the man goes down after he reaches the middle
if (S > 30 & S < 60) {
y += up;
};
}
The way to read the clock is that the minute and the hour are clearly stated in the text, and the second is related to the position of the stickman. The stickman would climb up 5 pixels every 5 seconds before it reaches to the middle, and it would climb down afterward.
The biggest struggle I had while doing this assignment is that I do not know how to make the man only step up once every 5 seconds and not to go straight up unstopping. Also, every time I refresh the page, the stickman would go back to its pre-set “y” location which causes a problem visually. Although there are a few hard codes in it, the final result still turns out good to me.
function setup() {
createCanvas(480, 100);
}
function draw() {
var H = hour();
var M = minute();
var S = second();
var colorFill = 0;
background('black');
for (var i = 0; i < H + 1; i++) {
colorFill = (3000/i);
stroke(colorFill, 0, 0);
line(width - i * 10 + 9, 0, width - i * 10 + 9, height/3);
}
for (var i = 0; i < 24 - H; i++) {
colorFill = (3000/i);
stroke(colorFill, 0, 0);
line(i * 10, 0, i * 10, height/3);
}
for (var i = 0; i < M + 1; i++) {
colorFill = (3000/i);
stroke(colorFill, 0, 0);
line(width - i * 5 + 4, height/3, width - i * 5 + 4, height/3*2);
}
for (var i = 0; i < 60 - M; i++) {
colorFill = (3000/i);
stroke(colorFill, 0, 0);
line(i *5, height/3, i * 5, height/3*2);
}
for (var i = 0; i < S + 1; i++) {
colorFill = (3000/i);
stroke(colorFill, 0, 0);
line(width - i * 2.5 + 1.5, height/3*2, width - i * 2.5 + 1.5, height);
}
for (var i = 0; i < 60 - S; i++) {
colorFill = (3000/i);
stroke(colorFill, 0, 0);
line(i * 2.5, height/3*2, i * 2.5, height);
}
}
For this project, I was inspired by a simple abacus.
The abacus has historically been used as a mathematical and computational device, but I immediately was inspired by this as a clock, with each row representing a different time keeping variable (hour, minute, seconds) and each vertical line counting those variables. The script basically reflects the current time on the right and whatever is left over on the left, as if someone is moving a line over for each second, minute, etc.
I began by creating ellipses first, but then decided to create lines to create a deeper graphic relationship between the the hour, minutes, and seconds, as you can see that while the spacing is different between the lines for each variable, there are times when all of the lines vertically connect and it adds another element to this abstraction.
A graphic before (bottom) and after (top) random edits; Guillermo Daldovo, Bernard Arce, Sonia Figuera (2014)
This is a project created for the REYKJAVIK VISUAL MUSIC PUNTOy RAYA FESTIVAL 2014, meant to capture the visual identity of the festival. The dot and line graphics were processed with graphical glitches, filmed as they were projected on the wall, printed and then re-scanned to distort the images that make up the motion graphics. The description mentions that this distortion created color and texture.
I love this project because the resulting message of the project is that randomness can create a better product, basically that it can help the whole be greater than the sum of its parts. Deterministic methods are nice because we can reliably get a product we want, but randomness allows us to explore beyond what we expect.
4900 Colors is a piece by German artist Gerhard Richter, comprised of 196 square panels of 25 coloured squares each, which can be rearranged in any number of ways to constantly create a new viewing experience.
A computer program assigns a color to each square chosen randomly from a selection of 25 colors. A program can also be used to decide how to combine and hang the panels, thus making their arrangement even more distanced from the “artist’s” hands.
View of 4900 Colors at exhibition and Richter explaining his work
As is discussed in this handy article, it is important to note that randomness does not always look how we imagine it. True randomness develops some patterns, there may be the same color which happens to group itself together, which may not appear random to our human eyes trained in detecting patterns, but which reflects the true randomness of nature.
This piece was interesting to me because it makes me question at what point do humans cease being the “artists”, and must instead pass the credit for art pieces off to the computers which make them? This was a statement Gerhard alluded to, when he said discussed “eradicating any hierarchy of subject or representational intent, and focusing on color to create an egalitarian language of art” (full information available here). While perhaps his intentions are noble, what is the point of art if it does not reflect someone’s intentions? Is there a truly objective art? And is this art we as humans are able to value?
var H;
var M;
var S;
var posX = 0;
var posY = 0;;
var rectSize;
function setup() {
createCanvas(480, 300);
}
function draw() {
noStroke();
posX = 0;
posY = 0;
background("pink");
//hour
H = hour();
for(var i = 0; i < 24; i++){
if(H == i){
fill(0);
}
else{
fill(240);
}
rect(posX, posY, width / 24, height / 3);
posX += width / 24;
}
posX = 0;
posY += 100;
//minute
M = minute();
for(var j = 0; j < 60; j++){
if(M == j){
fill(0);
}
else{
fill(240);
}
rect(posX, posY, width / 60, height / 3);
posX += width / 60;
}
posX = 0;
posY += 100;
//second
S = second();
for(var k = 0; k < 60; k++){
if(S == k){
fill(0);
}
else{
fill(240);
}
rect(posX, posY, width / 60, height / 3);
posX += width / 60;
}
}
For this project, I was inspired by making a simple abstract clock. My clock resembles a piano, with a white background and black stripes representing the hour, minute, and second in real time.
A quick sketch of what I wanted my clock to look like
While it is easy to retrieve random numbers using a computer program, there are a handful of artists who use random numbers picked by hand to create unique pieces of art. One artist that I especially thought was interesting is Kenneth Martin. In this series of paintings, he has a grid of squares that are numbered. He writes down all the numbers on separate pieces of paper and picks out random numbers. Each successive pair of numbers becomes a line, creating similar but very different sets of artworks.
One of Martin’s art piecesAnother art piece with the use of a singular color
What I find interesting about the artist himself is that he used to paint realistic portraits and landscapes for 20 years, before turning to abstract paintings that explored spatial relationships.
![[OLD FALL 2018] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2020/08/stop-banner.png)
