Month: September 2020

Project 2- Variable Faces

For this week’s project, I started off by creating a rough sketch on photoshop so I can refer back to the points when I code the image. My goal for myself this week with the project was to create something that was fun and colorful, which I thought fit perfectly with the changing features.

my photoshop sketch
chris variable project
var eyewhite=15
var eyeblack=10
var hairheight=300
var hairwidth=250
var cheek=30
var lips=20
var glasseswidth=55
var glassesheight=40

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

function draw() {
	background(220,255,254);
	noStroke();
	fill(68,27,85); //dark purple
	ellipse(325,300,hairwidth, hairheight); //hair right
	ellipse(290,260,hairwidth, hairheight); //hair left
	fill(42,15,53);//dark shadow purple
	ellipse(313,300,160,220); //shadow hair
	noFill();
	stroke(248,50,143);
	ellipse(245,330,cheek);//left earring
	ellipse(385,330,cheek);//right earring
	noStroke();
	fill(242,183,169); //neck culture
	rect(290,350,50,74); //neck
	fill(255,208,197); //light peach
	ellipse(313,260,160,185); //top circle head
	triangle(241,301,385,301,315,391); //chin
	fill(248,50,143); //pink
	rect(146,410,335,150,50);//shirt
	fill(68,27,85); //dark purple
	ellipse(257,200,138,150); //bang1
	ellipse(354,215,114,118); //bang2
	fill(255);
	ellipse(285,285,eyewhite);//left white eye
	ellipse(340,285,eyewhite);//right white eye
	fill(0);
	ellipse(289,285,eyeblack);//left black eye
	ellipse(344,285,eyeblack);//right black eye
	fill(255,172,152);
	ellipse(314,310,20);//nose
	ellipse(260,310,cheek);//left cheek
	ellipse(370,310,cheek);//right cheek
	fill(248,50,143);//pink
	ellipse(311,345,lips);
	ellipse(319,345,lips);
	noFill();
	stroke(116,251,218); //turquoise
	strokeWeight(2);
	rect(250,266,glasseswidth,glassesheight,10); //glasses
	rect(320,266,glasseswidth,glassesheight,10); //glasses
}

function mousePressed(){
    eyewhite = random(15,45);
    eyeblack = random(10,25);
    hairheight = random(300,500);
    hairwidth = random(250,450);
    cheek = random(30,50);
    lips = random(5,30);
    glassesheight = random(30,50);
    glasseswidth = random(50,65);
}

Project 2 – Variable Faces

alienface
// Yoo Jin Kim
// 15104 - section D
// yoojink1@andrew.cmu.edu
// Project-02

var faceWidth = 300;
var faceHeight = 160;
var eyeSize = 65; 
var eyeWidth = 70;
var eyeHeight = 100;
var eyeTwinkleX = 23;
var eyeTwinkleY = 18;
var tongueSize = 36;
var B = 100;
var crownTipY = 140;


function setup() {
    createCanvas(480, 640);
    background(0);
}

function draw() {
	//background color
	background(color(B));

	//alien head shape
	strokeWeight(0);
	fill(171,190,188);
	beginShape();
	curveVertex(width/2 - faceWidth/2, height/2);
	curveVertex(width/2 - faceWidth/2, height/2);
	curveVertex(width/4, height/2 - (faceHeight - 40));
	curveVertex(width/2, height/2 - faceHeight); 
	curveVertex(width * (3/4), height/2 - (faceHeight - 40));
	curveVertex(width/2 + faceWidth/2, height/2);
	curveVertex(width/2, 441);
	endShape(CLOSE);

	strokeWeight(0);
	beginShape();
	curveVertex(width/2 + faceWidth/2, height/2);
	curveVertex(width/2 + faceWidth/2, height/2);
	curveVertex((width/4) * 3, height/2 - (faceHeight - 40));
	curveVertex(width/2, height/2 - faceHeight); 
	curveVertex(width/4, height/2 - (faceHeight - 40));
	curveVertex(width/2 - faceWidth/2, height/2);
	curveVertex(width/2, 441);
	endShape(CLOSE);

	//crown
	strokeWeight(0);
	fill(214,178,69);
	triangle(376,crownTipY,350,200,318,184);
	triangle(343,185,343,crownTipY - 20,305,181);
	triangle(307,crownTipY - 25,295,178,325,186);

	strokeWeight(0);
	fill(171,190,188);
	quad(353,197,295,171,276,190,342,230);


	//mouth - stagnant
	fill(0);
	stroke(0);
	ellipse(240,395,43,10);

	//tongue
	fill(0,135,53);
	quad(251,396,228,396,230,401,248,404);
	beginShape();
	curveVertex(230,401);
	curveVertex(248,401);
	curveVertex(width/1.98, height/2 + 2.6 * tongueSize);
	curveVertex(width/2, height/2 + 2.6 * tongueSize);
	endShape(CLOSE);

	//right eye
	translate(width/1, height/90);
	rotate(PI/3.0);
	fill(37,44,46);
	ellipse(186,295,eyeWidth,eyeHeight);

	//left eye
	translate(width/4.8,height/2.95);
	rotate(PI/3.0);
	fill(37,44,46);
	ellipse(186,95,eyeWidth,eyeHeight);

	//left eye twinkle
	fill(255);
	ellipse(191,127,eyeTwinkleX,eyeTwinkleY);

	//right eye twinkle
	fill(255);
	ellipse(119,height/14 - 57.5,eyeTwinkleX,eyeTwinkleY);
}

function mousePressed() {
	//random assignment of drawing with mouse clicks
	clear(); //reshaping of head instead of adding onto the original shape
	background(0);
	faceWidth = random(200,350);
	faceHeight = random(160,200);
	eyeWidth = random(50,100);
	eyeHeight = random(100,120);
	tongueSize = random(34,42);
	B = random(0,170);
	crownTipY = random(70,160);
	eyeTwinkleX = random(15,23);
	eyeTwinkleY = random(10,18);
}

I was inspired by the alien emoji to create these variable faces. I love aliens 🙂

LO 2 – Generative Art

Michael Hansmeyer – Zauberflöte (2018)

Grotto set design for Mozart’s Magic Flute, directed by Romeo Castellucci

As an architecture student, I was first interested in this project because the creator was an architect. Michael Hansmeyer is an architect who focuses his works on generative thinking, “thinking about designing a process to generate objects.”

He maximizes his creativity by exploring with computational “natural and artificial” accidents.

For this project specifically, the goal was to produce forms, shapes that “appear synthetic and organic” at the same time. The results were not foreseen as there was a continuous regeneration of the form with the computer until satisfied. There were no references or inspirations prior to the project.

I find the collaboration of generative design and an opera unique and compelling in terms of architectural, computational, artistic, aesthetic purposes. It creates new spatial experiences and sensations that one cannot create with human ability. I admire the high quality, rich details in the result as well as the architect’s confidence and control between the fine line of chaos and order. His imagination of the unimaginable is quite intriguing. 

Description of the piece itself: “The geometry was voxelized and partitioned into the nine distinct elements that are visible on stage. Four elements descend from the ceiling, while five others are rolled into space.”

Reference: http://www.michael-hansmeyer.com/zauberfloete

LO 2: My Admiration

The art piece “Into the Trees” published on September 8th, 2010 by Robert Hodgin and Zoë Keating mixes code and keyboard commands with music, to create a stunning video of redwoods. When I first saw this piece, I found it eye catching, aesthetically pleasing, and quite simply, beautiful. After reading about it, I saw it was modeled after the redwoods of northern California, home of the composer, Zoë. I admired this, because I’ve always wanted to live in a redwood house when I first learned of how huge they are. Also, I love listening to instrumental music and I believe the cello is a beautiful instrument. I admire all of these elements, including how the piece operates, because they resonate with me and my likes. Robert normally makes a simple beat, but was inspired by Zoë’s music, and expanded his senses to create code that matched the haunting and somber beat of Zoë’s cello. The code was more extensive than creating basic 3D objects (e.g a table or shapes), so Robert had to invest in additional tech to get the granular aspects of the trees, etc. The extra care and articulation makes this a wonderful collaboration.

Here’s the link for more information: http://roberthodgin.com/project/into-the-trees

And a short clip of the artwork:

Project 2-Changing Faces

changing_facesDownload
var eyeSize=40;
var faceWidth=250;
var faceHeight=300;
var browHeight=270
var smile=5
var pie=0
var pupil=18
var lidSize=5

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

function draw() {
    background(165, 222, 214);
    strokeWeight(1);
    noFill()
    ellipse(width/2, height/2, faceWidth, faceHeight);
    strokeWeight(2);
    fill(255);
    var eyeL=width/2-faceWidth*0.25
    var eyeR=width/2+faceWidth*0.25
    ellipse(eyeL, height/2, eyeSize); //eyes
    ellipse(eyeR, height/2, eyeSize);
    fill(0);
    ellipse(eyeL, height/2, pupil); //pupils
    ellipse(eyeR, height/2, pupil);
    fill(118, 186, 177);
    arc(eyeL, height/2, eyeSize + lidSize, eyeSize, 9.4, 2*PI); //eyelids
    arc(eyeR, height/2, eyeSize + lidSize, eyeSize, 9.5, 2*PI);
    noFill();
    strokeWeight(4);
    eyeL=width/2-faceWidth*0.35
    eyeR=width/2+faceWidth*0.35
    line(eyeL, 270, 200, browHeight); //brows
    line(eyeR, 270, 275, browHeight)
    arc(width/2, 375, 100, smile, 0, pie*PI);//mouth
}

function mousePressed() {
    browHeight=(random(240, 300) | 0);
    console.log(browHeight);
    smile=random(3, 75);
    pupil=random(10, 30);
    pie=random(0,1);
    eyeSize=random(40, 60);
    lidSize=(0, 6)
}

I decided to make the various expressions of someone who would get punched in the face at a bar.

LO 02 – Generative Art

Moka Schitta: Knots

Today I will be analyzing generative art created by Moka Schitta. Upon entering his portfolio site, I was greeted by colorful computational designs that reflect the artist’s style. To dive deeper into his/her work, I will be talking about the piece Knots (2020). Knots is a 60 second animation loop of knots that will never untie. Regarding the project, I really admire the pure fact that the artist used code to diversify their designs. The quick processing that is possible with code really elevates his/her work, and generates multiple pieces, which in other mediums, would take a long time to produce. For me personally, the idea of creating multiple versions of one project, generated through code is captivating.  If I had to guess the algorithm used for this piece, perhaps it is done using some sort of “delay” function, and having a colored background as base, and an overlaying an opaque color. And everytime the code is generated, it erases part of the opaque overlay, thus revealing the colorful background, and creating the “knot” shape. The creator’s artistic sensibilities are present and loud in their algorithm. As you can see, the general color scheme of the “knots” are visually appealing, and the concept behind this project is very meaningful. 

View portfolio here

LO-Generative Artwork

The project Zauberflöte is a massive architectural feat from generative artist Michael Hansmeyer. He created it as set design for Romoeo Castellucci’s production of Mozart’s Magic Flute for the La Monnaie theater in Brussels. The first thing I admire about it and that anyone notices, is the scope. The structure is massive and consumes the entire stage. The detail of the sculpture is intense, and I truly can’t comprehend how many tiny details that would never be seen from the audience were included in this piece. I also admire the way it fits with the show, the Magic Flute.

Zauberflöte Grotte, Michael Hansmeyer (2018)

Hansmeyer uses CAD software and algorithmic architecture techniques. For the Zauberflöte grotto, the algorithm was used to create something that appeared both synthetic and organic using a generative subdivision algorithm. There is a simple input form that is divided into smaller surfaces over and over again. By altering division rations, Hansmeyer and his team can create very complex geometric surfaces.

Hansmeyer often asks himself “what is the origin of the forms that we design?” and “what kind of forms could we design if we could free ourselves from our experience?” He uses computational design to find these unseen forms to create something no human could think of. His artistic sensibilities are centered around exploration and a deviation from the tradition, and that’s why he uses the generative subdivision algorithm to create shapes that are seemingly irrational.

LO-2: Marius Watz’s Probability Lattice

I selected Marius Watz on the basis that he was not an American, but was intrigued immediately upon seeing his work. The work of his I chose to focus on was his Probability Lattice installation, which are printed figures from a Makerbot 3D printer. I was drawn to these as they seem to have ordered randomization, where the patterns change, but there is continuity that stems from the change. Finding where the change occurs is fascinating. Watz does not explain his process or algorithm, so I did some research regarding the work’s title. Lattice theory, to put briefly, deals with order theory in regards to abstract and advanced algebra. I assume that the algorithm used by Watz randomizes probabilities with equations that produce these lattice diagrams, as he has other probability series that create other shapes with different algorithm titles. Watz is known for his bold style, ranging from sharp lines, boxy shapes, and bright colors. The algorithms I am assuming he uses must come through in this nature.

Probability Lattice, Marius Watz, May 9, 2012
Marius Watz’s Probability Lattice, May 9, 2012

Project-02-Variable-Face

Alien generator!

I wanted to do something a little less straightforward than a human face so I decided to do alien faces, with variable star background behind as well. I also played around with how to do the mouse click function and using noLoop and loop to assign all random variables in the main program instead of assigning variables in the mousePressed function.

AlienFace

var centerX = 240;
var centerY = 320;

function setup() {
    createCanvas(480, 640);
    background(220);
}

function draw() {
background(0);
noStroke();
var maincolorR = random(0, 255);
var maincolorG = random(0, 255);
var maincolorB = random(0, 255);
var headWidth = random(50,460);
var headHeight = random(50, 460);
var earWidth = random(10,70);
var earHeight = random(10,70);
//space backrgound
    fill(250);
	var starSize = random(4,7);
	for (let i = 0; i < 40; i++){
        ellipse(random(0,480), random(0,640), starSize, starSize);
	}
	for (let i = 0; i < 60; i++){
        ellipse(random(0,480), random(0,640), starSize-2, starSize-2);
	}
//neck
    //filling with primary color
        fill(maincolorR,maincolorG,maincolorB);
        var widthNeck = random(30, headWidth);
        rect(centerX-(widthNeck/2), centerY, widthNeck,centerY);
    //adding dark tone over for depth
        fill(0,0,0,50);
        rect(centerX-(widthNeck/2), centerY, widthNeck,centerY);
//ears
    //left ear
        fill(maincolorR,maincolorG,maincolorB);
        ellipse(centerX-(headWidth/2), centerY, earWidth, earHeight);
        //dark tone
        fill(0,0,0,50);
        ellipse(centerX-(headWidth/2), centerY, earWidth, earHeight);
    //right ear
        fill(maincolorR,maincolorG,maincolorB);
        ellipse(centerX+(headWidth/2), centerY, earWidth, earHeight);
        //dark tone
        fill(0,0,0,50);
        ellipse(centerX+(headWidth/2), centerY, earWidth, earHeight);
//body
    fill(maincolorR,maincolorG,maincolorB);
    ellipse(centerX,640,random((widthNeck+30),480),random(80,200));
//antenna
    //left antenna
        triangle(centerX-(headWidth/3), centerY, centerX-(headWidth/6), centerY, centerX-(headWidth/4.5), centerY-headHeight);
        fill(0,0,0,50);
        triangle(centerX-(headWidth/3), centerY, centerX-(headWidth/6), centerY, centerX-(headWidth/4.5), centerY-headHeight);
    //right antenna
        fill(maincolorR,maincolorG,maincolorB);
        triangle(centerX+(headWidth/3), centerY, centerX+(headWidth/6), centerY, centerX+(headWidth/4.5), centerY-headHeight);
        fill(0,0,0,50);
        triangle(centerX+(headWidth/3), centerY, centerX+(headWidth/6), centerY, centerX+(headWidth/4.5), centerY-headHeight);
//face
	fill(maincolorR,maincolorG,maincolorB);
    ellipse(centerX,centerY,headWidth,headHeight);
//nose 
    fill(maincolorR,maincolorG,maincolorB);
    ellipse(centerX, centerY+(headHeight/6), random(6,headWidth/10), random(6, headHeight/10));
    fill(0,0,0,50);
    ellipse(centerX, centerY+(headHeight/6), random(6,headWidth/10), random(6, headHeight/10));
//eyes
    //left eye
	    fill(0,0,0);
	    ellipse(centerX-random(10, headWidth/3), centerY, headWidth/8, headHeight/6);
	//right eye
        ellipse(centerX+random(10, headWidth/3), centerY, headWidth/8, headHeight/6);
//mouth
    ellipse(centerX, centerY+(headHeight/3), random(20,headWidth/6), random(5, headHeight/9));
//number
    fill(250);
    text('specimen number:',145,50);
    text(round(random(0,50000)), 260, 50);
noLoop();
}

function mouseReleased() {
  loop();
}

Looking Outwards- 02

I chose this project because I was impressed by the complexity of the algorithm behind the creation, in addition to the striking visuals. I admire how it’s based on particle interactions and collisions from the natural world, instead of abstractly defined particles with ‘random’ interactions. I like the transparency and honesty of using particle collisions and interactions because of how it makes the concepts accessible through visual representation. The algorithm uses particle simulations where the interactions between particles create color and form. I don’t understand how the different colors and textures are defined, but it seems like certain parts of the interaction are encoded to certain colors and materials. The artistic sensibilities are showcased by the framing and definition of the visuals (how zoomed the viewpoint is), the color and light contrast, and the pacing of the video visuals. This combined with the strong algorithm creates a complex and captivating visual experience, as the pattern of interactions has elements of repetition and randomness.

Markos Kay “Quantum Fluctuations: Experiments in Flux”
http://www.mrkism.com/quantum.html