zimmy – Page 2 – [OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice

LO-05

Vincent Schwenk & Vitaly Grossmann

Vincent Schwenk and Vitaly Grossman teamed up with a group of designers from all over the world to create an up-close exploration of material qualities represented through 3D renderings. Their animation brings viewers into an abstract and playful world of textures ranging from soft, yarn-like hairballs to sleek and polished industrial parts. One key aspect that I find intriguing is that the materials shown in the video are not real-life objects; rather, they take on ever-changing, organic forms that bend, shift, and meld into one another, keeping viewers continuously engaged with the sequence. The extensive rendering and computation for this project were done in Cinema 4D, as shown in a process video that is equally as engaging and vibrant.

Project-05: Wallpaper

zimmy wallpaper

function setup() {
    createCanvas(600, 600);
    background(254, 218, 187);
}

function draw() {

	for(var x = 0; x <= 600; x += 150){
	    for(var y = 0; y <= 650; y += 104){
		    shoe(x, y);
		}

    }
}

function shoe(x, y) {
    push();
    translate(x, y);
	noStroke();
	strokeWeight(1);
	fill(255, 187, 220);
	circle(85, -10, 63);
	fill(255);
	rect(0, 0, 80, 30); // lower body of shoe
	fill(207);
	arc(0, 30, 60, 60, -PI, 0); // grey toe
	fill(255);
	arc(10, 30, 60, 60, -PI, 0); // white toe
	rect(50, -30, 30, 60); // upper body
	// main body of shoe

	fill(54, 85, 165);
	arc(30, 14, 20, 20, radians(40), radians(220));
	triangle(28, 15, 36, 22, 75, -9);
	fill(255);
	circle(28, 8, 13);
	// nike check

	stroke(207);
	ellipse(32, -14, 47, 40);
	fill(254, 218, 187);
	noStroke();
	ellipse(23, -26, 56, 55);
	// lace section

	fill(240);
	rect(-30, 27, 110, 7);
	fill(207);
	triangle(-17, 27, -5, 20, 20, 27);
	arc(80, -30, 25, 28, PI/2, PI);
	// sole and heel patch

	stroke(240);
	strokeWeight(5);
	strokeCap(ROUND);
	noFill();
	/* line(50, -15, 60, 15);
	line(100, 0, 100, 50); */ 

	bezier(47, -20, 20, -45, -20, 10, -35, -52);
	bezier(50, -10, 60, 15, 100, 0, 115, 52);
	// shoelaces

    pop();

}

For this wallpaper, I took inspiration from the shoes I was wearing that day and decided to turn them into a stylized illustration. The whole shoe is illustrated in one function, based on an initial illustration I made in Adobe Illustrator. The most difficult aspect of drawing the shoe was figuring out how to accurately recreate the nike check using the shapes and forms afforded by Javascript, as well as drawing the bezier curves that make up the laces. Afterward, I was able to use some of the hexagon assignment to inform the for loop, and adjusted the start/end points for the laces to make them meet.

Project-04

For this project, I started with a basic pattern I wanted to achieve, then kept modifying it and exploring what I could do with mouse movements as well. Move your mouse around to reveal the hidden face 😀

zimmy string

function setup() {
    createCanvas(400, 300);
    background(0);
    stroke(255);

}

function draw() {
	var xL1 = 0;
	var xL2 = 0;
	var y1 = 0;
	var y2 = 400;
    
    stroke(255, 131, 100);
    var y = 0
    for(var x = 0; x <= 400; x += 10){
        line(x, y, mouseX, mouseY);
    } // orange lines that follow mouse and fill in the background

    noStroke();
    fill(0);
    circle (130, 130, 10);
    circle(150, 130, 10);
    arc(140, 140, 30, 30, 0, PI, CHORD);
    // hidden smiley face :D

    stroke(255, 210, 235);
    for (var y1 = 0; y1 <= 300; y1 +=10) {
    	line(xL1, y1, xL2, y2);
    	xL2 += 40;
    } // pink lines in bottom left corner

    var xR1 = 400;
    var xR2 = 400;
	var y1 = 0;
	var y2 = 400;
    for (var y1 = 0; y1 <= 300; y1 +=10) {
    	line(xR1, y1, xR2, y2);
    	xR2 -= 40;
    } // pink lines in bottom right corner

    stroke(255);
    xL2 = 0;
    for (var y1 = 0; y1 <= 300; y1 +=10) {
    	line(xL1, y1, xL2, y2);
    	xL2 += 30;
    } // white lines in bottom left corner
    
    stroke(200, 0, 200);
    xR2 = 400;
    for (var y1 = 0; y1 <= 300; y1 +=10) {
    	line(xR1, y1, xR2, y2);
    	xR2 -= 30;
    } // purple lines in bottom right corner
    
    stroke(239, 29, 255);
    xR2 = 400;
    y2 = 0;
    for (var y1 = 300; y1 >= 0; y1 -=10) {
    	line(xR1, y1, xR2, y2);
    	xR2 -= 10;
    } // purple lines in top right corner
    
    stroke(255, 131, 199);
    xL2 = 0;
    y2 = 0;
    for (var y1 = 300; y1 >= 0; y1 -=10) {
    	line(xR1, y1, xR2, y2);
    	xR2 -= 10;
    } // pink lines in top right
    

}

LO-04

Title: Sonic Playground
Artist: Yuri Suzuki

Installed in the plaza outside the High Museum of Art in Atlanta, GA, Yuri Suzuki’s “Sonic Playground” is an interactive collection of colorful structures that invites visitors to explore and modify the qualities of sound. These life-size sculptures emit computationally curated sounds depending on where users are standing, sitting, listening, or speaking, encouraging museum-goers to explore the area and test how different interactions affect sound output. The software aspect of the installation was done by Luca Dellatorre, who used Grasshopper and Rhinoceros to manipulate how the acoustics are emitted, reflected, and received. I was intrigued by this art piece because of the way it creates a welcoming, visually friendly environment for visitors while incorporating a level of sonic complexity that is not immediately noticeable but gets uncovered the more time one spends with it.

Children play with and explore the Sonic Playground

Project-03 Dynamic Drawing

Because I had trouble figuring out where to begin on this project, I took a more structured approach and thought of a concept and composition beforehand. I chose to depict the rotting of a banana as time passes, an experience that is unfortunately all too familiar to me 🙁

zimmy banan

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

function draw() {
	background (255, 246, 234);
	fill (247, 210, 228);
	noStroke();
	rect (0, 330, 480, 310); // table

	fill(200, 138, 94);
	circle(100, 150, 145);
	fill(255, 255, 255);
	circle(100, 150, 130); // clock

	fill(14, 16, 51);
	push();
	translate(100, 150); // center of clock
	rotate(radians(mouseX/20)); // rotates at 1/60 of the speed of minute hand
    ellipse(0, -15, 4, 30); // hour hand 
	pop();

	push();
	translate(100, 150); // center of clock
	rotate(radians(mouseX*3)) // rotates 60x speed of hour hand
	ellipse(0, -25, 4, 50); // minute hand
	pop();

	stroke(140, 156, 190);
	strokeWeight(10);
	noFill();
	bezier(280, 208, 280, 100, 400, 100, 400, 208);
	line(400, 208, 400, 485);
	fill(140, 156, 190);
	noStroke();
	ellipse(400, 500, 105, 40); // banana hook

	fill(140, 156, 190, 50);
	ellipse(constrain(mouseX, 160, 235), 550, 200, 45); // right shadow; moves in a confined space with mouseX
	ellipse((320-(constrain(mouseX, 160, 220))), 550, 200, 45); // left shadow; moves opposite mouseX

	fill(254, 218, 65);
	stroke(228, 170, 36);
	strokeWeight(2);
	arc(80, 253, 400, 400, radians(-15), radians(105), CHORD); // leftmost banana
	arc(100, 280, 400, 400, radians(-25), radians(100), CHORD); // middle banana
	arc(120, 315, 400, 400, radians(-35), radians(90), CHORD); // rightmost banana
    noFill();
	arc(-9, 270, 600, 590, radians(-14), radians(50)); // detail on rightmost banana

	noStroke();
	fill(134, 92, 36, mouseX-40);
	ellipse(273, 286, 10, 8);
	ellipse(270, 326, 20, 33);
	ellipse(240, 420, 43, 45);
	fill(134, 92, 36, mouseX-100);
	ellipse(290, 360, 36, 45);
	ellipse(240, 375, 40, 40);
	fill(134, 92, 36, mouseX-200);
	ellipse(198, 460, 30, 20);
	ellipse(285, 400, 8, 12);
	arc(185, 368, 100, 100, radians(-50), radians(105), CHORD); // spots on rightmost banana appear at different times

	fill(134, 92, 36, mouseX-100);
	ellipse(140, 425, 28, 22);
    ellipse(190, 345, 14, 14)
	fill(134, 92, 36, mouseX-300);
	ellipse(150, 400, 30, 36) // spots on middle banana

	fill(134, 92, 36, mouseX-200);
	ellipse(80, 430, 14, 13);
	arc(80, 370, 80, 80, radians(-20), radians(110), CHORD); // spots on leftmost banana

    push();
    fill(254, 218, 65, mouseY-80);
    textSize(constrain(mouseY/3, 30, 70));
    textAlign(CENTER, CENTER);
    text("yummy", 330, 50);











}

Looking Outwards-03

Work: Times Eureka Pavilion
By: NEX Architecture x Marcus Barnett

The Times Eureka Pavilion in London is the stunning result of a collaboration between NEX Architecture and Marcus Barnett for the 2011 Chelsea Flower Show. As it sits in a garden among a lush collection of plants, the pavilion imitates the cellular makeup of these plants: branch-like structures emerge from one another and let light through into the cubic space inside, as if viewers are peering through a microscope at a section of a fibrous stem. To generate this work, the creators used computational genetic algorithms, representing the intricacies of the natural world in a grander, more calculated way. I especially admire the fact that this structure gives back to the space within which it resides–it is said that the roof collects rainwater and lets it back into the soils, and the way the walls are structured disperses natural light both into the interior and exterior. I believe that this is a perfect example of technology and nature living in harmony, complementing one another instead of competing for dominance.

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);
}

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 1-Self Portrait

My self portrait! Got cut off though 🙁

portrait

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

function draw() {
	background(204, 234, 242)
	fill(255, 203, 87)
	noStroke();
	ellipse(600, 550, 898) // start hair
	fill(28, 13, 2)
	ellipse(600,428, 370)
	fill(40, 20, 3)
	rect(415, 428, 370, 303)
	fill(48, 23, 4)
	ellipse(600, 731, 370) // end hair
	
	fill(239, 192, 154) // start skin
	rect(385.5, 788, 429, 211)
	ellipse(600, 788.5, 428, 297)
	ellipse(600, 636, 112) 
	fill(244, 203, 166) // 
	rect(484.5, 417, 231, 43)
	ellipse(600, 427, 231, 218)
	ellipse(600, 518, 267) // end skin

	fill(0, 0, 0) // start eyes
	ellipse(545, 445, 35)
	ellipse(652, 445, 35)
	fill(244, 203, 166)
	ellipse(545, 460, 35)
	ellipse(652, 460, 35) // end eyes

	fill(224, 170, 148) // start nose
	ellipse(600, 518.5, 41, 15)
	fill(244, 203, 166)
	ellipse(600, 512, 41, 15)
	fill(249, 224, 205)
	ellipse(600, 507, 27, 14) // end nose

	fill(242, 181, 167) // start cheeks
	ellipse(516, 502, 69, 29)
	ellipse(682, 502, 69, 29) // end cheeks

	fill(255, 250, 240) // mouth
	ellipse(600, 568.5, 115, 73)
	fill(244, 203, 166)
	ellipse(600, 550, 136, 38) // mouth

	fill(255, 255, 255) // shirt
	rect(446.5, 761, 307, 238)
	rect(447, 678, 11, 90)
	rect(743, 678, 11, 90) 

	fill(239, 192, 154) // chest
	ellipse(600, 762, 289, 95)









}

LO 1-My Inspiration

Title: Generative Portraits
Artist: Diana Lange

“Generative Portraits,” a collection of work by graphic artist Diana Lange, depicts human-like entities, with each image made up of hundreds of white lines connected by nodes on a black background. While none of these pieces fully replicate a human face or form, they are often reminiscent of parts of facial features–an earlobe, the bridge of a nose, eyelids, etc. Lange uses Processing and 3D modeling software to construct each of these portraits, creating areas of higher visibility, detail, and clarity by increasing the concentration of interconnections in specific places. Although it’s unclear where Lange drew inspiration from for this collection, she as an artist often looks to the patterns found in nature, using them to inform her code.