Category: SectionD

Project2 – Variable Faces

Pikachu is too cute so I make him uglier.

pikachu
/*
 * Fangzheng Zhu
 * fangzhez@andrew.cmu.edu
 * Section D
 *
 * This program draws variable faces.
 */

var eyeSize = 40;
var faceWidth = 100;
var faceHeight = 150;
var cheekSize = 40;
var TopHeadWidth = 210;
var TopHeadHeight = 180;
var BottomHeadWidth = 230;
var BottomHeadHeight = 170;
var x=40;
var y=10;
var r=35;
var z=20;
var ballSize=40;
var a=100;
var b=100;

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

function draw() {
    background(180);
    //Ball
    stroke(0);
    strokeWeight(4);
    fill(255,0,0);
    arc(a,b,ballSize,ballSize,180,360);
    fill(255,255,255);
    arc(a,b,ballSize,ballSize,0,180);
    line(a-ballSize/2,b,a+ballSize/2,b);
    ellipse(a,b,ballSize/4,ballSize/4);

    //TopFace
    noStroke();
    fill(255, 218, 36);
    ellipse(width / 2, height / 2, TopHeadWidth, TopHeadHeight);
    //BottomFace
    ellipse(width / 2, height / 2 + 50, BottomHeadWidth, BottomHeadHeight);

    //Eye black
    fill(0);
    noStroke();
    ellipse(width/2 - 45, height/2 - 10, eyeSize, eyeSize);
    ellipse(width/2 + 45, height/2 - 10, eyeSize, eyeSize);

    //Eye white
    fill(255);
    noStroke();
    ellipse(width/2 - x, height/2 -y, eyeSize - 20, eyeSize - 20);
    ellipse(width/2 + x, height/2 -y, eyeSize - 20, eyeSize - 20);

    //Nose
    fill(0);
    ellipse(width / 2, height / 2 + 20, 10, 5);

    //LeftCheek
    fill(255, 0 , 0);
    noStroke();
    ellipse(width / 2 - BottomHeadWidth/3, height / 2 + 50, cheekSize, cheekSize +10);
    //RightCheek
    ellipse(width / 2 + BottomHeadWidth/3, height / 2 + 50, cheekSize, cheekSize +10);



    //right mouth
    strokeWeight(3);
    stroke(0,0,0);
    fill(255, 218, 36);
    arc(width/2+ 17, height/2 + 30, 45, 45, z, 140);
    arc(width/2- 17, height/2 + 30, 45, 45, 40, 180-z);

    //Left Ear
    fill(255, 218, 36);
    noStroke();
    translate(width/2, height/2);
    rotate(-r);
    ellipse(-30, -150, 50, 150);
    //Right Ear
    rotate(2*r);
    ellipse(30, -150, 50, 150);
}

function mousePressed() {
    eyeSize = random(30, 50);
    BottomHeadWidth = random(210,240);
    BottomHeadHeight = random(150,180);
    TopHeadHeight = random(170, 190);
    TopHeadWidth = random(180,200);
    cheekSize = random(30, 60);
    x = random(30,40);
    y = random (8,12);
    r = random (30,45);
    z = random (10,45);
    ballSize = random (40,100);
    a = random (0,width);
    b = random (0, height);
}

Looking Outwards 02: Generative Art

The project Autotroph.OBJ was created by Raven Kwok in 2020.


I admire this project because it combines digital art with a real 3D space. The algorithm of this project is simply polygon drawing method. The artist applies the work onto different layers of the acrylic glass sheet and customized lighting travels back and forth between those layers, which creates a subtle animation of cell division. The biggest inspiration from this project is although we can create 3D dimensions in digital art, it is still a 2D platform, on a screen, or canvas. If we can think of the project in a real 3D space, the boundaries are broken and we can generate more interring artworks.

LO: Generative Art

I admire Joshua Davis’s art piece, ‘HPsprout’, because of the vague randomness of triangles with different colors but also includes the pattern of how geometric triangles are repetitive.

This piece can somehow be described with a term, “chaos” but also can be described as geometric. It is also interesting how the mood of the piece changes depending on the number of triangles. Depending on how the artist articulates the shape of it, the audience can be allured more into the art piece. This artist loves playing with new ideas and tools. That is why he decided to #GoMakeThings and challenged himself to make something new images. Not only fundamentally thinking about those primary colors, but he also wrapped all those new transparent PNGs into some processing code to come with an infinite number of colors/layouts.

This piece n0t only includes some processing code but also requires hand-made efforts. The artist had to scan the pools of color from shredded papers to come up with natural dropped shadows and lights.

HPsprout colors
 Different elevations to create natural drop shadows

LO 2 – Generative Art

“the V01D” (2018) by Joshua Davis is a generative work that utilizes audio reactive algorithms to create fascinating, complex imagery. This piece was a large-scale installation created for the OFFF Festival in Barcelona. Davis has created numerous computational art/design projects, many of which use programming to visualize sound.

I really admire Davis’s work because of the unique, ever-changing visuals that he is able to achieve and am interested to learn more about the execution of his work. From what I can tell, I think that Davis used real-time algorithms that respond to audio in order to generate transformative animations. In this specific work, he used Kurt Uenela / Null + Void’s music to determine the motion of the piece.

Some of Davis’s other works that I am particularly drawn to include “Golden Times,” “Take 10 Weightless,” and “Noise Paintings.” Across all of his works, his strong color sensibility is quite evident. I think that his understanding of color and visual composition are what make his work so successful.

“the V01D” (2018)
“the V01D” (2018)

LO: Generative Art

noise wrap, 2019 I

One generative art that I find inspiring is the “noise warp” series by Holger Lippmann. Using processing, Lippmann created his art by using a 2D X/Y noise structure that elongated shapes to produce brushstrokes. Lippmann was inspired heavily from the 20th-century artists who painted with expressive fluid brushstrokes. Even though his art was created through various long rectangles, they flow well and create fluidity. Through his code and noise, he was able to imitate that way of painting with various landscape photos he had taken himself. His generative art reminds me heavily of Van Gogh and Monet, but with Monet, the lines are more fluid. It distorts the reality of the landscape yet creates a beautiful fluidity of colors. I find this series very tranquil and pleasing to the eye, almost as if looking at his art in a dream state.

Holger Lippmann: http://www.lumicon.de/wp/?p=3623

Variable Face

sketch
//Jasmin Kim
//Section D

var eyeSize = 70;
var faceWidth = 200;
var faceHeight = 250;
var mouthSize = 80;
var mouthW = 80;
var mouthH=40;
var R = 188;
var G = 212;
var B = 246;


var value = 0;

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

function draw() {
    background(R,G,B);

    //Face Shape
    fill(243,213,B); //Beige
    noStroke();
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);  //Face
    var faceX = (width/2);
    var faceY = (height/2);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    
    //Body Shape
    var bodyW = faceWidth*1.8
    var bodyH = (height/2)+(height*0.6)
    rect((width/2)-(faceWidth/1.1),(height/2)+(faceHeight/2.4),bodyW,bodyH,80,80,20,20);
    
    //glass rectangle
    fill(158,157,156);
    stroke(1);
    rect(eyeLX,(height/2)-3,faceWidth/2,5);
    
    //Eyes
    stroke(7);
    strokeWeight(1);
    var eyeH = height/2
    ellipse(eyeLX, eyeH, eyeSize*1.3, eyeSize*1.3);   //gray glasses
    ellipse(eyeRX, eyeH, eyeSize*1.3, eyeSize*1.3);
    fill(255);
    ellipse(eyeLX, eyeH, eyeSize, eyeSize);           //white eyes
    ellipse(eyeRX, eyeH, eyeSize, eyeSize);
    
    //eyes moving
    fill(0);
    var moveXr = constrain(mouseX,eyeLX-(eyeSize/5),eyeLX+(eyeSize/5));
    var moveYr = constrain(mouseY,eyeH-(eyeSize/5),eyeH+(eyeSize/5));
    var moveXl = constrain(mouseX,eyeRX-(eyeSize/5),eyeRX+(eyeSize/5));
    var moveYl = constrain(mouseY,eyeH-(eyeSize/5),eyeH+(eyeSize/5));
    ellipse(moveXr, moveYr, eyeSize/2, eyeSize/2);       //black eyeball
    ellipse(moveXl, moveYl, eyeSize/2, eyeSize/2);

    //Mouth
    if(faceWidth <230){
        strokeWeight(5);
        line(eyeLX-(eyeSize/2),eyeH-40,eyeLX+(eyeSize/2),eyeH-50);               //sad eyebrow
        line(eyeRX-(eyeSize/2),eyeH-50,eyeRX+(eyeSize/2),eyeH-40);
        noStroke();
        fill(79,129,255)
        circle(eyeLX,(height*0.65),20);                                           //tears
        triangle(eyeLX-10, height*0.65, eyeLX, height*0.6,eyeLX+10, height*0.65);   //tears#2
        fill(0);
        ellipse(width/2,(faceY+(faceHeight/4.5))+10,50,45);     //black mouth
        if(faceHeight<290){
            stroke(4);
            line(280,90,(width/2)-20,130);      //hair
            line(300,90,(width/2)-14,125);
            line(320,90,(width/2)-8,118);
        }
        
    } else{
        fill(R,G,B);
        strokeWeight(1);
        var mouthY = faceY+(faceHeight/4.5);
        var mouthX = faceX-(mouthW/2);
        rect(mouthX, mouthY, mouthW, mouthH,25,25,25,25);       //normal mouth
        //Angry Eyebrows
        strokeWeight(5);
        line(eyeLX-(eyeSize/2),eyeH-50,eyeLX+(eyeSize/2),eyeH-40);
        line(eyeRX-(eyeSize/2),eyeH-40,eyeRX+(eyeSize/2),eyeH-50);
        //tongue
        strokeWeight(1);
        fill(239,133,154);
        arc(mouthX+(mouthW/2),mouthY+mouthH, mouthW/1.8, mouthH*0.8, PI, TWO_PI);

    }

    
}


function mousePressed() {
    faceWidth = random(200, 300);
    faceHeight = random(250, 350);
    eyeSize = random(40, 70);
    R = random(0,255);
    G = random(0,255);
    B = random(0,255);
    mouthW = random(55,85);
    mouthH = random(30,45);

}

For this project, I tried to show two different facial expressions while I limited the probability of hairs too. Skin color, background color, and eyebrows change as I click the mouse. An interesting part of this project is that I also tried to move the pupils according to the screen mouse.

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

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

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.