Author: locust bean gum

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.

sketchDownload

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);
	rotate(radians(-30));
	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() {
	//shadow
	fill(0,200);
	ellipse(90,430,220,50);
	//swaddling 
	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);
	quad(0,430,10,400,45,380,60,430);
	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);
	}
}
Process Sketch

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.

Performance of John Cage’s “Music of Changes: Book 1”

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.

sketchDownload
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);
	//head
	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.

Image of “Organised Labour (2016)”

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.

sketchDownload
// 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;
	}
}
A Chiharu Shiota installation that helped inspire my work

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.

Video of “Apparatum” in Use


Project – Dynamic Drawing

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

sketchDownload

//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.

Video about the making of Digital Grotesque I

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.

sketchDownload
var eyeSize = 10;
var foreheadWidth = 200;
var foreheadHeight = 100;
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);
	ellipse(width/2 - foreheadWidth/2,foreheadY + 20,earSize*1.5,earSize); //left ear
	ellipse(width/2 + foreheadWidth/2,foreheadY + 20,earSize*1.5,earSize); //right ear
	fill(hairColor);
    circle(width/2, foreheadY,foreheadWidth + 25); //hair
	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, foreheadY, foreheadWidth, foreheadHeight); //forehead
    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));
	foreheadHeight = random(80, (cheekHeight/2));
	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.

Snapshot of Obelisk.