## Project – 06: Abstract Clock

For my abstract clock, I was inspired by scenes of rainy days. First, I did a rough sketch of the various visual elements that I wanted to comprise the scene. Then, I made notes on the sketch of various elements that I wanted to be reactive to time. I decided that the color of the clouds should be reactive to the hour; as such, the cloud color gets darker with each hour of the day. Additionally, I made the sky change color for a range of hours during the day. The rain is generated depending on how many seconds have elapsed in the minute (e.g. 30 seconds into a minute, 30 lines of rain appear). Lastly, the width of the umbrella increases with each minute and resets at the start of each hour.

sketch
``````
var rainX = [];
var rainY = [];
var buildingStart = [];

function setup() {
createCanvas(480, 480);
background(220);
text("p5.js vers 0.9.0 test.", 10, 15);
for (i = 0; i < 10; i++){
buildingStart[i] = random(height/7,height/2);
}
}

function draw() {
noStroke();
if (hour() < 6){
background(117,128,181);
} else if(hour() >= 6 & hour() < 19){
background(68,117,181);
} else if (hour() == 19 ){
//sunset colors
background(160,24,85);
noStroke();
fill(237,100,21,150);
rect(0,0,width,3*height/4);
} else {
background(8,6,48);
}
cityscape();
//ground
fill(76,75,62);
rect(0,360,width,height);
fill(0,100);
rect(0,360,width,110);
baby();
rock();
rain();
cloud();
push();
translate(130,330);
umbrella();
pop();
}

function cloud() {
fill(255 - (10*(hour())));
var circleX = 0;
var circleY = 0;
noStroke();
//cloud gets darker with each hour
ellipse(width/2,0,width,height/8);
//for loop was slowing down browser so I wrote out each circle
circle(circleX,circleY,height/3);
circle(circleX + 48,circleY - 10,height/3);
circle(circleX + 48*2,circleY,height/3);
circle(circleX + 48*3,circleY,height/3);
circle(circleX + 48*4,circleY,height/3);
circle(circleX + 48*5,circleY + 10,height/3);
circle(circleX + 48*6,circleY + 20,height/3);
circle(circleX + 48*7,circleY + 10,height/3);
circle(circleX + 48*8,circleY,height/3);
circle(circleX + 48*9,circleY,height/3);
circle(circleX + 480,circleY - 15,height/3);

}

function rain() {
for(i = 0; i <= second(); i++){
rainX[i] = random(0,480);
rainY[i] = 0;
stroke(175,199,216);
line(rainX[i],rainY[i],rainX[i],height - 10);
}

}

function baby() {
fill(0,200);
ellipse(90,430,220,50);
fill(221,173,218);
rect(80,400, 60, 40);
circle(80,420,40);
circle(140,420,40);
//face
fill(173,156,133);
circle(130,420,38);
//eyes
if (hour() >= 20){
stroke(0);
strokeWeight(1.5);
line(130,405,130,415);
line(130,425,130,435);
} else {
fill(0);
circle(130,410,5);
circle(130,430,5);

}

}

function umbrella() {
//top of umbrella
fill(102,24,33);
arc(0,0,150 + minute(),90,PI,0,CHORD); //umbrella width increases with each minute
fill(25,16,10);
rect(0,0,3,100);
//handle
beginShape();
vertex(0,100);
curveVertex(0,110);
curveVertex(-5,115);
vertex(-10,105);
vertex(-10,108);
curveVertex(-5,118);
curveVertex(3,110);
vertex(3,100);
endShape(CLOSE);
//top
triangle(-1,-40,0,-60,1,-40);

}

function rock() {
fill(31,31,35);
fill(255,30);
triangle(10,400,45,380,30,420);

}

function cityscape() {
for(i = 0; i < 10; i++){
fill(0,100);
rect(48*i,buildingStart[i], 48, height);
}
}``````

## Looking Outwards – 06: Randomness

A work of music that employs randomness and chance is John Cage’s “Music of Changes.” I admire this piece because it introduces a level of objectivity into the creative process. John Cage controlled the randomness in the composition by referencing the Chinese book the I Ching. He previously arranged the chords, notes, etc. of the music, but he took notes from the book to order these elements. He used this method to create four “books” of music which comprise the “Music of Changes.” John Cage’s artistic sensibilities are manifested in the final work because the random conglomeration of the musical phrases he composed amplify and complement the random and erratic feeling the phrases convey.

## Project 5: Wallpaper

My process for creating this wallpaper assignment was to first create the repeating sun pattern and then the repeating snake pattern. To accomplish this, I created a separate sun function and snake function. After I created the two functions, I used a series of for loops to create the patterns. The symbols of the snake and the sun were inspired by the Temple of the Feathered Serpent in Teotihuacán.

sketch
``````function setup() {
createCanvas(500, 500);
background(220);
text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
background(97,104,181);
//sun pattern
push();
for(sunRow = 0; sunRow <= 9; sunRow += 1){
sun();
translate(50,0);
}
pop();
push();
translate(0,50);
for(sunRow = 0; sunRow <= 9; sunRow += 1){
sun();
translate(50,0);
}
pop();
push();
translate(0,100);
for(sunRow = 0; sunRow <= 9; sunRow += 1){
sun();
translate(50,0);
}
pop();
push();
translate(0,150);
for(sunRow = 0; sunRow <= 9; sunRow += 1){
sun();
translate(50,0);
}
pop();
push();
translate(0,200);
for(sunRow = 0; sunRow <= 9; sunRow += 1){
sun();
translate(50,0);
}
pop();
push();
translate(0,250);
for(sunRow = 0; sunRow <= 9; sunRow += 1){
sun();
translate(50,0);
}
pop();
push();
translate(0,300);
for(sunRow = 0; sunRow <= 9; sunRow += 1){
sun();
translate(50,0);
}
pop();
push();
translate(0,350);
for(sunRow = 0; sunRow <= 9; sunRow += 1){
sun();
translate(50,0);
}
pop();
push();
translate(0,400);
for(sunRow = 0; sunRow <= 9; sunRow += 1){
sun();
translate(50,0);
}
pop();
push();
translate(0,450);
for(sunRow = 0; sunRow <= 9; sunRow += 1){
sun();
translate(50,0);
}
pop();
translate(-20,0);
for(drawSnake = 0; drawSnake <= 5; drawSnake += 1){
snake();
translate(0,105);
}
noLoop();
}

function sun() {
noStroke();
fill(97,104,181);
square(0,0,50);
fill(249,235,219);
//sun 1
circle(25,25,25);
//sun rays 1
stroke(249,235,219);
line(25,25,25,5);
line(25,25,25,45);
line(5,25,25,25);
line(45,25,25,25);
line(25,25,10,10);
line(25,25,40,40);
line(25,25,10,40);
line(25,25,40,10);
}

function snake(){
noStroke();
fill(10,random(100,255),0);
//body
beginShape();
vertex(125,25);
curveVertex(150,35);
curveVertex(200,25);
curveVertex(250,35);
curveVertex(300,25);
curveVertex(320,30);
curveVertex(350,40);
curveVertex(375,30);
curveVertex(400,25);
vertex(475,32.5);
curveVertex(400,34);
curveVertex(350,50);
curveVertex(300,35);
curveVertex(250,50);
curveVertex(200,35);
curveVertex(150,50);
curveVertex(125,30);
endShape(CLOSE);
push();
//tongue
stroke(255,10,0);
line(90,29,80,29);
noStroke();
ellipse(110,29,40,15);
//eye
fill(255);
ellipse(110,27,5,3);
strokeWeight(3);
stroke(0);
//pupil
point(110,27);

}
``````

## LO- 3D Computer Graphics

A work of 3D graphics that I found interesting is the augmented reality installation “Organised Labour (2016)” by UK artist Alan Warburton. The installation is of green protesters that block a street in Paris and was produced for Une Journée de Coïncidences.
I admire the artwork’s simplicity and strong impact because I appreciate how Warburton uses clear digital models and AR to convey his ideas. I suppose that the algorithms used to render this artwork had to respond to the environment of the Parisian street so that the shadows and size of the installation fit into the environment convincingly. The artist’s goal of the project was to explore the immateriality of AR and how it relates to the urban landscape. As such, the artist’s sensibilities show through the final product because the green model fits into the environment but, due to its style and the fact that it only exists in the digital realm, is constantly reminding the viewer that its not a physical object.

## Project – String Art

My String Art project is heavily inspired by the installation art of the Japanese artist Chiharu Shiota. The String Art assignment reminded me of her intricate installations of spaces and objects clad in an intricate weaving of thread. My process began with me drawing the setting, a dingy gallery space with an ominous void. Afterwards, I decided to make the drawing interactive and have the string art appear after the user clicks into the void.

sketch
``````// String Art
var dx1;
var dy1;
var dx2;
var dy2;
var dx3;
var dy3;
var dx4;
var dy4;
var dx5;
var dy5;
var numLines = 200;
var glowSize = 0;
function setup() {
createCanvas(400, 300);
background(0);
text("p5.js vers 0.9.0 test.", 10, 15);

}

function draw() {
var voidX = width/2 - 40;
var voidY = height/2 - 40;
background(0);
fill(220);
stroke(220);
rect(0,0,width,height); // room wall
stroke(255,0,0);
fill(0);
circle(voidX, voidY, 125); //sinister void
noStroke();
fill(255,0,0,20);
circle(voidX, voidY, 140 + glowSize); //glow around void
fill(100);
rect(0, height/2 + 70, width, height); //room floor
//wall lights
fill(255,255,0,70);
circle(50,0,30);
circle(120,0,30);
circle(190,0,30);
circle(260,0,30);
circle(330,0,30);
fill(255,255,0,100);
circle(50,0,40);
circle(120,0,40);
circle(190,0,40);
circle(260,0,40);
circle(330,0,40);
//reflection on floor
fill(255,255,0,20);
ellipse(190,height/2 + 90,300,10);
fill(255,255,0,45);
ellipse(190,height/2 + 90,200,5);
//if user clicks in void eye and string art appears
if (mouseIsPressed & abs(mouseX - voidX) <= 62.5 && abs(mouseY -voidY)<=62.5){
//eye
fill(255);
noStroke();
circle(voidX,voidY,60);
fill(255,0,0);
circle(voidX,voidY,20);
fill(0);
circle(voidX,voidY,10);
//string art
noFill();
strokeWeight(.1);
stroke(255,0,0);
line(width, 0, 0, 10);
line(10,0,width,30);
line(40,height,100,0);
line(300,0,350,height);
line(230,0,200,height);
dx1 = -width/numLines;
dy1 = 10/numLines
dx2 = (width-10)/numLines;
dy2 = -height/numLines;
dx3 = 60/numLines;
dy3 = -height/numLines;
dx4 = 50/numLines;
dy4 = height/numLines;
dx5 = -30/numLines;
dy5 = height/numLines;
var x1 = width;
var y1 = 0;
var x2 = 10;
var y2 = 0;
var x3 = 40;
var y3 = height;
var x4 = 300;
var y4 = 0;
var x5 = 230;
var y5 = 0;
for(var drawLine = 0; drawLine <= numLines; drawLine += 1){
line(x1,y1,x2,y2);
line(x1,y1,x3,y3);
line(x1,y1,x4,y4);
line(x1,y1,x5,y5);
line(x2,y2,x3,y3);
line(x2,y2,x4,y4);
line(x2,y2,x5,y5);
line(x3,y3,x4,y4);
line(x3,y3,x5,y5);
line(x4,y4,x5,y5);
x1 += dx1;
x2 += dx2;
x3 += dx3;
y1 += dy1;
y2 += dy2;
y3 += dy3;
x4 += dx4;
y4 += dy4;
x5 += dx5;
y5 += dy5;
}

}
if(glowSize == 60){
glowSize = 0;
} else {
glowSize += 1;
}
}

``````

## LO – Sound Art

A sound art project I found interesting is the installation “Apparatum” (2018) by panGenerator. I admire the retro-futurist look of the installation because it gives the device a grand science-fiction-esque look. I also admire the glitchy sounds that “Apparatum” generates because the timbre of the sound is very digital, but the flaws of the sound give it a more analogue feel. According to the artists, the sounds are generated by magnetic tape and optical components. The user of “Apparatum” controls these generative elements by creating a graphic score using the device’s interface. The Polish Radio Experimental Studio, a studio that experimented with electroacoustic sounds, inspired the look and timbre of the sounds produced. I think the artists creative sensibilities show through the device because it manages to create a unique object that wears its influences on its sleeve.

## Project – Dynamic Drawing

My process was starting with a sketch and then systematically testing and working out the individual controls for each circle.

sketch
``````
//4 parameters: shade of circles/text, size of circles, position of circles, which message appears
function setup() {
createCanvas(600, 450);
background(220);
text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
background(255,0,0);
var grayscale = max(min(mouseX,255),0); //as mouse moves right circles become lighter
var size1 = max(min(mouseY,227),70); //increases size as mouse moves down. Min diameter is 70, max diameter is 227
var size2 = 297 - size1; //opposite of size 1, makes the middle circle have the opposite diameter of the other two
var yShift = constrain(mouseY,0,height/3); //as mouse moves down circles move down
var yShift1 = -yShift; //two circles move opposite direction of center circle
//mouse makes different messages appear
if(yShift == height/3){  //when the middle circle is at its lowest position the message "Et hoco modo nihil" appears
textSize(45);
fill(abs(255-grayscale));
textAlign(LEFT);
text('Et hoc',50,400);
textAlign(CENTER);
text('modo',width/2,50);
textAlign(RIGHT);
text('nihil',550,400);
}
if(yShift == 0){  //when the middle circle is at its highest position the message "In Quarta Parametri" appears
textSize(45);
fill(abs(255-grayscale));
textAlign(LEFT);
text('In',50,50);
textAlign(CENTER);
text('Quarta', width/2, 400);
textAlign(RIGHT);
text('Parametri',550,50);
}
if(height/3 + yShift + 30 == height/2){ //When all three circles are aligned the message "Quid est amor? Infantem et non cocuerunt mihi" appears
textSize(45);
textAlign(LEFT);
fill(grayscale);
text('Quid est amor?',50,50);
textSize(30);
textAlign(RIGHT);
fill(abs(255-grayscale));
text('Infantem et non nocuerunt mihi.',550,400);

}
noStroke();
fill(grayscale);
circle(width/5,(height*2)/3 + yShift1 + 10,size1);
circle((width*4)/5,(height*2)/3 + yShift1 + 10,size1);
fill(abs(255-grayscale)); //this circle experiences the opposite color of the other two
circle(width/2,height/3 + yShift + 30,size2);

}
``````

## LO- Computational Fabrication

A project of computational fabrication I admire is Michael Hansmeyer and Benjamin Dillenburger’s “Digital Grotesque I.” “Digital Grotesque I” is an installation that resulted as a result of Hansmeyer’s desire to explore the forms that could be created by 3D printed algorithms. I admire the intricacy and sculptural qualities of the space created because as an architecture student, I want to eventually be in a position where I can design architecture with similar visual qualities. Hansmeyer says that “every detail of the architecture is generated through customized algorithms, without any manual intervention.” As such, I suppose that the algorithms generate permutations of forms based on size and angle, that are affected by where they are generated in the model. I think that the creator’s artistic sensibilities are reflected in the intricate detail of the final result. The creator wanted to use algorithms to generate forms that are “between chaos and order, both natural and the artificial, neither foreign nor familiar.” The intricate sculptural definition of the resulting space reflects that immensely.

## Project: Variable Faces

The challenging part of this project was figuring out how much to constrain the random function for the various elements that are generated.

``````var eyeSize = 10;
var cheekWidth = 300;
var cheekHeight = 120;
var chinWidth = 30;
var chinHeight = 30;
var mouthWidth = 120;
var mouthHeight = 3;
var hairColor = 0;
var earSize = 57;
var fill = 67;
var noseWidth = 20;
var noseHeight = 15;
var eyebrowAngle = 0; //shifts eyebrow up and down to create expressions

function setup() {
createCanvas(480, 640);
background(67);
text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
noFill();
stroke(random(0,255),random(0,255),random(0,255));
strokeWeight(1);
circle(random(0,480),random(0,640),random(40,500)); //hypnotic background generator
circle(random(0,480),random(0,640),random(40,500)); //repetition to increase speed of generator
var foreheadY = height/2 - (cheekHeight/2);
var chinY = height/2 + (cheekHeight/2);
noStroke();
fill(255,223,64);
beginShape(); // yellow
vertex(width/2, chinY + 10);
curveVertex(width/2 + 150, chinY + 40);
curveVertex(width/2 + 220, height);
vertex(width/2, height);
endShape(CLOSE);
fill(161,156,35,100);
beginShape(); // yellow cloak shaodw
vertex(width/2, chinY + 15);
curveVertex(width/2 + 148, chinY + 43);
curveVertex(width/2 + 218, height);
vertex(width/2, height);
endShape(CLOSE);
fill(207,165,93);
beginShape(); //body
vertex((width/2-chinWidth/2) -10,height/2 + (cheekHeight/2) - (chinHeight/2) + cheekHeight*.75);
curveVertex(width - 100, height/2 + (cheekHeight/2) - (chinHeight/2) + cheekHeight*.75);
vertex(width - 50, height);
endShape(CLOSE);
fill(225,204,115);
fill(hairColor);
fill(207,165,93);
rect((width/2-chinWidth/2) -10, height/2 + (cheekHeight/2) - (chinHeight/2), chinWidth + 20, cheekHeight*.75); //neck
fill(225,204,115);
ellipse(width/2, height/2, cheekWidth, cheekHeight); //cheeks
fill(179,30,90,100);
circle(width/2 - (cheekWidth/4 + 10), height/2, cheekWidth/8); //left rosy cheek
circle(width/2 + (cheekWidth/4+ 10), height/2, cheekWidth/8); //right rosy cheek
var eyeposLX = (width/2 - foreheadWidth/4);
var eyeposRX = (width/2 + foreheadWidth/4);
var eyeposY = (height/2 - foreheadHeight/2);
fill(0);
circle(eyeposLX,eyeposY,eyeSize); //left eye
circle(eyeposRX,eyeposY,eyeSize); //right eye
fill(200,60,20);
beginShape(); //monk robe
vertex(0,height);
curveVertex(width*.25,height*.6875);
curveVertex(width/2, chinY + 20);
vertex(width - 50, height - 20);
vertex(width - 40, height);
endShape(CLOSE);
fill(105,40,30,150);
triangle(0,height, width*.25, height*.6875, width*.25 + -70, height); //red cloak shadow
triangle(width*.25 + 40,(height*.6875) +30, width*.25 + 20, height, width*.25 - 20, height); //red cloak shadow
triangle(width*.25 + 70, height, width*.25 + 80,(height*.6875) + 25, width*.25 + 170, height);
triangle(width*.25 + 230, height, width*.25 + 195, height - 100, width*.25 + 300, height);
fill(225,204,115);
ellipse(width/2, height/2 + (cheekHeight/2), chinWidth, chinHeight); //chin
fill(0);
ellipse(width/2,height/2 + cheekHeight/4 ,mouthWidth,mouthHeight); //mouth
fill(135,108,61);
beginShape(); //nose
vertex(width/2 - noseWidth, height/2 - 10);
curveVertex(width/2, height/2);
vertex(width/2 + noseWidth, height/2 - 10);
curveVertex(width/2, height/2 + noseHeight);
endShape(CLOSE);
stroke(0);
noFill();
strokeWeight(5);
line(eyeposLX - 10, eyeposY - 15, eyeposLX + 20, (eyeposY - 15) + eyebrowAngle); //left eyebrow
line(eyeposRX - 20, (eyeposY - 15) + eyebrowAngle, eyeposRX + 10, eyeposY - 15); //right eyebrow
}

function mousePressed() {
cheekWidth = random(200, 325);
cheekHeight = random(120,200);
foreheadWidth = random(150, (cheekWidth - 100));
chinWidth = random(30,80);
chinHeight = random(30,70);
mouthHeight = random(1,30);
mouthWidth = random (40, cheekWidth/2);
background(random(0,255),random(0,255),random(0,255));
hairColor = random(0,250);
earSize = random(40, 70);
noseWidth = random(10,30);
noseWidth = random(10,40);
eyebrowAngle = random(-10,20);
eyeSize = random(10,20);
}

``````

## LO- Generative Artists

“Obelisk” (2020) by the artist Leander Herzog is a work of generative art that I find inspirational. I admire the artwork because it utilizes simple colors and geometries to create a hypnotic effect. The color palette and the motion remind me of the Op-Art of artists like Bridget Riley. I suppose that the algorithm behind this generative art work generates vertical and horizontal lines and restricts them so that they only display in specified areas. For the vertical lines, I believe there is a variable that adds an increasing value to the x-coordinate of the endpoints, and for the horizontal lines, I believe a similar increasing variable is applied to the y-coordinate of the endpoints. Most likely, there is also code in place to reset these values when the variable has increased to a certain number, so that the motion loops. I think that the algorithm reflects the creator’s attraction to the ideas of repetition and permutation.