Month: September 2020

LO2 – Generative Art

LIA’s SV01, SV15, SV04, SV08 was a generative art installation at One Culver creative space, Culver City, California, displayed on 2018/07/01 – 2018/09/30 and 2018/07/01 – 2018/12/31. Most of her contract work seems to be displayed on a large screen in large, public areas. The large scale of LIA’s art is what inspires me– it commands just the right amount of presence and has the impact to elevate the space to feel more high-end and dynamic. Though the reel showcases moving pictures that involve both angular and more fluid, blob-like shapes, they all complement the architectural elements of the space and serves as both an aesthetically-pleasing side piece but also a moment for visitors to be present in the space and admire the artwork. 

I believe the algorithm that generated the work is probably dependent on layers and has a flexible system that controls transparency. Semi-transparent layers crossing over each other at a more-or-less constant pace are a recurring element in LIA’s work. LIA’s artistic sensibilities are very present in her work, as she must create a piece of work that not only matches but elevates the experience of a large space. It is functional in that way, but it is also a very abstract concept that she must translate into a tangible product.

Project 2 – Variable Faces

For my variable face project, I chose to randomize chicken faces! This project seemed difficult at first, but after studying the sample code template, I had a better understanding of how and where to assign and use variables. My biggest challenge was figuring out how to randomize the chicken beak, since the code for a triangle consists of six coordinates; I had to figure out which coordinates to randomize and which coordinates to stay constant (so the beak doesn’t fly around the canvas). Overall, however, this project was quite fun and I think my chicken turned out reallyyyy cute 😀

Maggie-Variable Faces
var eyeSize = 15;
var faceWidth = 200;
var faceHeight = 300;
var beakWidth = 18;
var beakHeight = 30;
var cheekSize = 20;
var crown1Size = 40;
var crown2Size = 30;
var r=133;
var g=217;
var b=92;
function setup() {
    createCanvas(500, 500);
}
 
function draw() {
    background(r,g,b);
    noStroke();
    //face
    fill(255,255,255);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    //eyes
    fill(0, 0 ,0);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    //beak
    fill (239,128,9);
    triangle((width/2) - (beakWidth/2),height/2, width/2, height/2 + beakHeight,(width/2) + (beakWidth/2), height/2);
    //cheek
    fill (243,187,200);
    var cheekLX = width/2 - faceWidth/3;
    var cheekRX = width/2 + faceWidth/3;
    ellipse(cheekLX, height /2 + 25, cheekSize, cheekSize);
    ellipse(cheekRX, height/2 +25, cheekSize, cheekSize);
    //crown 1
    fill(247,86,79);
    var crownLX = width/2 - 10;
    var crownRX = width/2 + 10;
    ellipse(crownLX, height/2 - 70, crown1Size, crown1Size);
    ellipse(crownRX, height/2 - 70, crown2Size, crown2Size);


}
 
function mousePressed() {
    r = random(110, 200);
    g = random(50,217);
    b = random(50, 200);
    faceWidth = random(130, 320);
    faceHeight = random(120, 350);
    eyeSize = random(6, 22);
    beakWidth =random(15, 40);
    beakHeight = random(15,20);
    cheekSize = random (15, 30);
    crown1Size = random(40,65);
    crown2Size = random(30, 70);
}

My Variable Portrait

Eamonn Burke Variable Portrait
var eyeSize = 10;
var faceWidth = 100;
var faceHeight = 400;
var mouthWidth = 75;
var mouthHeight = 50;
var noseWidth = 20;
var noseHeight = 75;
var eyeballLeft = 5;
var eyeballRight = 5;

function setup() {
    createCanvas(640, 480);

}

function draw() {
	if (mouseX > width/2 & mouseY > height/2){
		background (0,255,77);		//bright green
	} else if (mouseX < width/2 & mouseY <= height/2){		
		background (0,239,255); 		//bright blue
	} else if (mouseX > width/2 & mouseY < height/2){
		background (255,0,230);			//bright pink
	} else {
		background (255,255,0); 		//bright yellow
	}


		fill(255,204,153);		//beige
	ellipse(width/2,height/2,faceWidth,faceHeight);		//face
		fill(209,109,202);		//pink
		
if (faceHeight <  250) {
  line (width/2, height/2 +faceHeight/3.5, width/2 + faceHeight/3.5, height/2 + faceHeight/3.5);		//straight mouth
} else if (faceHeight < 300) {
	beginShape();		//smile
		curveVertex (width/2,height/2 + faceHeight/3.5);
		curveVertex (width/2,height/2 + faceHeight/3.5);
		curveVertex (width/2 + faceWidth/10, height/2 + faceHeight/3);
		curveVertex (width/2 + faceWidth/5, height/2 + faceHeight/3);
		curveVertex (width/2 + faceWidth/3.5, height/2 + faceHeight/3.5);
		curveVertex (width/2 + faceWidth/3.5, height/2 + faceHeight/3.5);
		endShape();	
} else if (faceHeight < 370) {
	ellipse(width/2,height/2 + faceHeight/3.5,mouthWidth,mouthHeight);		//open mouth
} else {
	fill(0,0,0);		//black
	circle(width/2, height/2 + mouthHeight*1.69, mouthHeight/3.75)		//round mouth dark
	fill(255,46,130);		//pink-red
	beginShape();		//tongue
		curveVertex(width/2 - mouthWidth/10, height/2 + mouthHeight*1.75);
		curveVertex(width/2 - mouthWidth/10, height/2 + mouthHeight*1.75);
		curveVertex(width/2 + mouthWidth/5, height/2 + mouthHeight*2);
		curveVertex(width/2 + mouthWidth/2.5, height/2 + mouthHeight*2.25);
		curveVertex(width/2 + mouthWidth/2, height/2 + mouthHeight *2);
		curveVertex(width/2 + mouthWidth/10, height/2 + mouthHeight*1.75);
		curveVertex(width/2 + mouthWidth/10, height/2 + mouthHeight*1.75);
	endShape();
}

		fill(255,192,129);		//dark beige
	beginShape();		//nose
		curveVertex(width/2 - noseWidth/2.5, height/2 - noseHeight);
		curveVertex(width/2 - noseWidth/2.5, height/2 - noseHeight);
		curveVertex(width/2, height/2 + noseHeight);
		curveVertex(width/2 - noseWidth, height/2 + noseHeight*2);
		curveVertex(width/2 - noseWidth*2, height/2 + noseHeight);
		curveVertex(width/2 - noseWidth*0.7, height/2 - noseHeight);
		curveVertex(width/2 - noseWidth*0.7, height/2 - noseHeight);
	endShape();

if (noseHeight < 30) {		
	fill(0,0,0)
	var nostrilSize = 15
	ellipse (width/2-noseWidth * 1.6, height/2 + noseHeight, nostrilSize, nostrilSize);			//left nostril
	ellipse (width/2 - noseWidth * 0.5, height/2 + noseHeight, nostrilSize, nostrilSize);		//right nostril
}

if (faceWidth < 200) {
		var eyeLX = width/2 - faceWidth/4;		//spread apart eyes
		var eyeRX = width/2 + faceWidth/4;
} else {
		var eyeLX = width/2 - faceWidth * 0.35;		//normal
		var eyeRX = width/2; - faceWidth * 0.2;		//normal
}

		var eyeLY = height/2 - faceHeight * 0.3;
		var eyeRY = height/2 - faceHeight * 0.3;

		fill(255,255,255);		//white
	ellipse(eyeLX,eyeLY,eyeSize,eyeSize);		//left eye
	ellipse(eyeRX,eyeRY,eyeSize,eyeSize);		//right eye
		
if (eyeSize > 50) {		
		fill(3,129,75);		//green
	ellipse(eyeLX,eyeLY,eyeballLeft, eyeballLeft);		//left pupil
	ellipse (eyeRX,eyeRY, eyeballRight, eyeballRight);		//right pupil
} else {
		fill(3,129,75);		//green
		var x = constrain(mouseX,eyeLX - eyeSize/2 + eyeSize/4,eyeLX + eyeSize/2 - eyeSize/4);		//eyeball constraint
	ellipse (x,eyeLY, eyeSize/4, eyeSize/4);		//moving left pupil
		var y = constrain(mouseX,eyeRX - eyeSize/2 + eyeSize/4,eyeRX + eyeSize/2 - eyeSize/4);		//eyeball constraint
	ellipse (y, eyeRY, eyeSize/3, eyeSize/3);		//moving right pupil
}
		
		fill(0,0,0);		//black
if (faceHeight > 300) {
	rect(eyeLX - eyeSize/2,eyeLY - eyeSize/2 - faceHeight/10, eyeSize, eyeSize/4);		//left eyebrow
} else {
	rect(eyeLX - eyeSize/2,eyeLY - eyeSize/1.3- faceHeight/10, eyeSize, eyeSize/4);		//raised left eyebrow
}	
	rect(eyeRX - eyeSize/2,eyeRY - eyeSize/2 - faceHeight/10, eyeSize, eyeSize/4);		//right eyebrow

}





function mousePressed(){		
	faceWidth = random(100,400);
	faceHeight = random(200, 500);
	eyeSize =  random(30,80);
	mouthWidth = random (50,80);
	mouthHeight = random (50,80);
	noseWidth = random (20,50);
	noseHeight = random (20,65);
	eyeballRight = random (5,30);
	eyeballLeft = random (5,30);
	nostrilSize = random (10,15);
	}

noLoop();

My self portrait contains variables such as face height, face width, mouth height and width, eye size, and more. I used lots of conditionals so as to try to make the face as unique as possible each time. I also used constraints, but was not able to include motion, so I want to figure out how to integrate that soon soon.

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.

Project 02: Variable Face

sketch
/*
Bon Bhakdibhumi
Section D
*/
var cheekSize = 44;
var eyeSize = 15;
var mouthWidth = 52;
var mouthHeight = 52;
var faceWidth = 178;
var faceHeight = 267;
var r = 240;
var g = 92;
var b = 138;

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

function draw() {
    background(255);
    stroke(1);
    noFill();
    //face
    beginShape();
    curveVertex(276, 221);
    curveVertex(265, 215);
    curveVertex(257, 214);
    curveVertex(250, 213);
    curveVertex(234, 215);
    curveVertex(230, 214);
    curveVertex(204, 229);
    curveVertex(191, 235);
    curveVertex(169, 251);
    curveVertex(160, 260);
    curveVertex(152, 271);
    curveVertex(141, 296);
    curveVertex(142, 313);
    curveVertex(143, 322);
    curveVertex(142, 337);
    curveVertex(139, 353);
    curveVertex(137, 365);
    curveVertex(135, 412);
    curveVertex(146, 431);
    curveVertex(157, 422);
    curveVertex(171, 453);
    curveVertex(198, 468);
    curveVertex(215, 473);
    curveVertex(251, 471);
    curveVertex(299, 426);
    curveVertex(313, 388);
    curveVertex(325, 341);
    curveVertex(337, 305);
    curveVertex(340, 292);
    curveVertex(288, 229);
    endShape(CLOSE);
    //right ear
    ellipse(335, 350, 30, 59);
    // left ear
    ellipse(132, 336, 24, 62);
    //nostril
    noStroke();
    fill(0);
    ellipse(218, 380, 9, 9);
    ellipse(230, 380, 9, 9);
    // cheeks
    var xLcheek = width/2 - faceWidth*0.4
    var xRcheek = width/2 + faceWidth/4
    var o = 60
    noStroke();
    fill(r, g, b, o);
    ellipse(xLcheek, height/1.7, cheekSize, cheekSize);
    ellipse(xRcheek, height/1.7, cheekSize, cheekSize);
    // mouth
    var xMouth = width/2.15
    fill(0);
    arc(xMouth, height/1.55, mouthWidth, mouthHeight, 0, PI, CHORD);
    // left eye
    var xLeye = width/1.5 - faceWidth*0.19
    ellipseMode(RADIUS);
    fill(0);
    ellipse(xLeye, height/2, eyeSize, eyeSize); 
    ellipseMode(CENTER);
    fill(255);
    ellipse(xLeye, height/2, eyeSize, eyeSize);
    // right eye
    var xReye = width/1.5 - faceWidth*0.75
    ellipseMode(RADIUS);
    fill(0);
    ellipse(xReye, height/2, eyeSize, eyeSize); 
    ellipseMode(CENTER);
    fill(255);
    ellipse(xReye, height/2, eyeSize, eyeSize);
}

function mousePressed(){
    r = random(20, 200);
    g = random(20, 200);
    b = random(20, 200);
    cheekSize = random(35, 50);
    mouthWidth = random(0, 70);
    mouthHeight = random(0,70);
    eyeSize = random(10, 20);
}

I based my project off a minimalistic illustration I did in Illustrator. I made the mouth size, cheek size, and eye size generative to create varying facial expressions for the same person. I then decided to make the cheeks change color and shape while maintaining a low opacity, making the drawing more dynamic while also persevering its minimalistic style.

My initial sketch

Aaron Koblin – Flight Paths

Flight Patterns – Aaron Koblin

Koblin’s map of the United States flight paths for a day.
A motion visualization of the paths.

I am combining economic, psychological and creative studies as a Behavioral Economics major and an architecture and (hopefully) design minor. My combined vision of these two fields is actually exactly what is being manifested in this project. I love that in economics, human behavior is solidified and represented in a graph (hence the BePO major). The design comes in for most effectively representing this data to a viewer, and I think that Koblin used design perfectly to emulate the nature of flight paths. His sensibility comes in when making decisions about how to use brightness to suggest crowded areas, color for flight type, and opacity to enhance movement. So, this artwork essentially captures the type of work I want to be involved in. The team used Processing, a software designed to mimic hand-drawn visuals, to visualize the data. I would guess that the algorithm uses the start and endpoints of flights, as well as the speed, height, and time of day. There may be code that provides the most efficient and safe route using engine science and other air traffic to generate paths.

Project 02–Variable Face

For this project, I made a frog whose features change with each click. By following the template and thinking about the proportions of each feature in relation to one another, I made it so that every frog looks different.

Zimmy Frog
// Zimmy Kang
var eyeSize = 60;
var faceWidth = 200;
var faceHeight = 150;
var pupilSize = 30;
var mouthWidth = 50;
var mouthHeight = 40;
var bodyWidth = 150;
var bodyHeight = 150;
var bellyWidth = 100;
var bellyHeight = 100;
var feetWidth = 40;
var feetHeight = 40;



 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(51, 212, 255);
    noStroke();
         fill(29, 80, 29);
         ellipse(width/2, height/2 + 50, 450, 300); // lily pad
    fill(29, 112, 29);
    ellipse(width/2, height/2, bodyWidth, bodyHeight); // body

         var footLX = width/2 - bodyWidth*0.30;
         var footLY = height/2 + bodyHeight/2;
         var footRX = width/2 + bodyWidth*0.30;
         var footRY = height/2 + bodyHeight/2;
         arc(footLX, footLY, feetWidth, feetHeight, PI, TWO_PI, CHORD);
         arc(footRX, footRY, feetWidth, feetHeight, PI, TWO_PI, CHORD); // feet
    fill(174, 206, 44);
    ellipse(width/2, height/2, bellyWidth, bellyHeight); // belly
         fill(67, 155, 67);
         ellipse(width / 2, height / 3, faceWidth,  faceHeight); // face
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    var eyeLY = height/3 - faceHeight*0.25;
    var eyeRY = height/3 - faceHeight*0.25;
    var socket = eyeSize+10;
    ellipse(eyeLX, eyeLY, socket, socket);
    ellipse(eyeRX, eyeRY, socket, socket); // sockets
         fill(255, 255, 255);
         stroke(29, 112, 29);
         ellipse(eyeLX, eyeLY, eyeSize, eyeSize);
         ellipse(eyeRX, eyeLY, eyeSize, eyeSize); // eye whites
    fill(0);
    noStroke();
    ellipse(eyeLX, eyeLY, pupilSize, pupilSize);
    ellipse(eyeRX, eyeLY, pupilSize, pupilSize); // pupils
         fill(255, 183, 179);
         var mouthX = width/2;
         var mouthY = height/3 + faceHeight*0.1; //mouth location
         stroke(29, 112, 29);
         arc(mouthX, mouthY, mouthWidth, mouthHeight, 0, PI, CHORD); // mouth
    

 

}
 
function mousePressed() {
    faceWidth = random(200, 480);
    faceHeight = random(150, 200);
    eyeSize = random(50, 90);
    pupilSize = random (10, 49);
    socket = random(60, 80);
    mouthWidth = random(50, 190);
    mouthHeight = random(10, 90);
    bodyWidth = random(150, 400);
    bodyHeight = random(80, 180);
    bellyWidth = random(100, 140);
    bellyHeight = random (30, 70);
    feetWidth = random(40, 75);
    feetHeight = random(40, 50);
}

LO 2 – Generative Art

Galápagos

Karl Sims (1997)

http://www.karlsims.com/galapagos/

The piece of generative art that I find fascinating is Galápagos by Karl Sims—an interactive evolution of virtual “organisms.” Viewers participate by selecting an organism they find the most aesthetically interesting out of 12 organisms displayed on TV screens. They then stand on sensors in front of the display, and the chosen organism mates, mutates, and reproduces to form new offspring. Organisms not selected are transformed into new offspring from the chosen organism. Gradually, increasingly interesting and creative organisms are produced and emerge on the TV displays.

I was first drawn to this piece because I thought the organisms looked extremely cool—one had multicolored spikes and tentacles, another had globular yellow “feet” protruding from a mushroom shaped “body,” and another one seemed fluorescent with its glowing “legs” that resembled butterfly wings. To create this piece, I assume that Sims would use the randomize function that we used in class to continuously create refreshing and new designs. The parameters, however, would become more constricting as the evolutionary line becomes more specific with each participant selection to create a family of organisms that are visually related. 

The “parent” organism is in the upper left corner, and the remaining 11 organisms are “offspring” from that parent. Mutations cause various differences between the offspring and their parents.
The twelve screen display in which viewers select the most aesthetically interesting organism to continue the evolutionary line.

Looking Outwards 02

Title: Ultrachunk
Artists: Memo Atken, Jennifer Walshe

Ultrachunk is a generative project collaboration between vocalist Jennifer Walshe and artist Memo Atken within which Atken used a machine learning system to produce recordings of Walshe’s face and voice based on pre-recorded videos of the singer’s improvisations. Walshe was then able to perform live with her AI doppelganger, harmonizing as the generated image reproduced her voice in real time. The result is an unconventionally beautiful–yet sometimes haunting–duet of sounds and faces. I am fascinated by this project as I feel that it begins to demonstrate the extent of the power of AI. While captivating and intriguing to watch, it also brings up a new set of questions and possibilities–to what extent can technology infiltrate the world of art? Music has traditionally been an artform produced from human emotion and consumed by those who relate to it, but what happens when a piece of machinery can generate the same results?

A recording of Walshe performing with her AI generated self.

Project-02-Variable Face

sketchDownload
//Jiayu Xu
//Section A
var bodyWidth=450;
var bodyHeight=400;
var handWidth=90;
var handHeight=100;
var feetWidth=110;
var feetHeight=90;
var eyeDiameter=60;
var teethWidth=60;
var teethHeight=30;
var eyeBrowrightX=213;
var eyeBrowrightY=120;
var eyeBrowleftX=427;
var eyeBrowleftY=175;
var mouthWidth=243;
var mouthHeight=160;
var righthandHeight=240;
var lefthandHeight=240;
function setup() {
    createCanvas(640,480);
    background(random(204,255),random(204,255),random(204,255));
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	stroke(0);
	strokeWeight(8);
	fill(153,76,0);
	ellipse(width/2-bodyWidth/2-20, righthandHeight, handWidth, handHeight);//righthand
	ellipse(width/2+bodyWidth/2+20, lefthandHeight, handWidth, handHeight);//lefthand
	ellipse(width*1/3, height-50, feetWidth, feetHeight);//rightfeet
    ellipse(width*2/3, height-50, feetWidth, feetHeight);//leftfeet
	fill(195,126,48);
	ellipse(width/2,height/2,bodyWidth,bodyHeight);  //body
	strokeWeight(30);
	line(eyeBrowrightX, eyeBrowrightY, width/3+60, height/4+50);//right eyebrow
	strokeWeight(8);
	line(eyeBrowleftX, eyeBrowleftY, width*2/3-60, height/4+55);//left eyebrow
	fill(0);
	circle(width/2-70, height/2-10, eyeDiameter);//righteye
	circle(width/2+70,height/2-10, eyeDiameter);//lefteye
	fill(153,76,0);
    arc(width/2,height*3/5, mouthWidth, mouthHeight, 0, PI);//mouth
    
    fill(255);
    noStroke();
    rect(width/2-teethWidth/2, height*3/5, teethWidth, teethHeight);//teeth
}

function mousePressed() {
	clear();
	bodyWidth=random(400,451);
	bodyHeight=random(300,400);
	eyeDiameter=random(40,70);
	eyeBrowrightX=random(200,220);
	eyeBrowrightY=random(120,200);
	eyeBrowleftY=random(150,180);
	mouthWidth=random(200,300);
	mouthHeight=random(0,160);
	righthandHeight=random(200,300);
	lefthandHeight=random(200,300);
	handWidth=random(80,100);
	handHeight=random(90,108)
	background(random(204,255),random(204,255),random(204,255));



}

The face in my work is “Shooky” from BT21, which is a cartoon character designed by Suga from BTS. I chose it because it can be easily represented by basic geometric figures and I would love to see how its facial expressions change after every click.

BT21 - LINE FRIENDS INC