Month: September 2021

Project 2: Variable Faces

sketch

var eyeSize = 50
var mouthType = 1
var eyebrowType = 1

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

function draw() {
    background(215, 167, 119);
    strokeWeight(0);
    fill(107, 70, 27); // eyes
    ellipse(width/3, height/3, eyeSize);
    ellipse(width*2/3, height/3, eyeSize);
    if (eyebrowType >=1) { // angry eyebrows
        fill(107, 70, 27);
        triangle(width/5, height/5, width/4, height/4, width/2, height/4);
        triangle(4*width/5, height/5, 3*width/4, height/4, width/2, height/4);
    } else if (eyebrowType < 1 & eyebrowType > .5) { // unibrow
        strokeWeight(20);
        line(width/4, height/5, 3*width/4, height/5);
    } else { // arc eyebrows
        noFill();
        strokeWeight(7);
        arc(width/3, height/4, 200, 100, -5/6 * PI, -PI/6);
        arc(2*width/3, height/4, 200, 100, -5/6 * PI, -PI/6);
    }
    noFill(); // nose
    strokeWeight(7);
    stroke(107, 70, 27);
    arc(width/2, height/2, 80, 80, PI/4, 3/4 * PI);
    stroke(107, 70, 27); // line mouth
    if (mouthType >= 1) {
        strokeWeight(7);
        line(width/3, 3*height/4, 2*width/3, 3*height/4);
    } else if (mouthType < 1 & mouthType > .5) { // open mouth
        strokeWeight(0);
        fill(107, 70, 27);
        ellipse(width/2, 3*height/4, width/2, height/10);
    } else { // smile mouth
        strokeWeight(7);
        arc(width/2, 3*height/4, 200, 100, PI/6, 5/6 * PI);
    }


}

function mousePressed() {
    eyeSize = random(25, 75);
    mouthType = random(1.5);
    eyebrowType = random(1.5);

}

I wanted to see what combination of facial features the computer would create, rather than creating combinations myself. While this prevented me from focusing on individual emotions, it’s been fun to see what the computer comes up with.

LookingOutwards-02

https://www.drwoohoo.com/portfolio/semi-autonomous-brushstrokes

While the concept seems simple enough, the thing I admire most about Dr. Woohoo’s work is the dynamic nature of his generations.
There seems to be a level of randomness to his work, but there is also a sense of intentionality in the strokes, almost as if they did it by hand.
Perhaps the most impressive to me is his choice of colour palette, as they are mostly non-standard yet visually appealing.
They use a combination of vibrant and neutral colors that somehow don’t clash.
While I’m not sure exactly how the brushes work – I imagine they work somewhat similarly to Sketchbook custom brushes – I think there is a component creating an illusion both of direction and depth of movement.
Generative art seems to be the best way for Dr. Woohoo to express their vision – they seem to want to combine the ideas of DNA/RNA with art and vivid colours, and the generative art medium seems perfect.

Project-02-Face-Variables

sketch
//Nami Numoto
//15104 1A
// Simple beginning template for variable face.
var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var noseWidth = 20;
var noseDirection = 0;
var noseHeight = 30;
var mouthPosition = 200;
var mouthHeight = 20;

function setup() {
    createCanvas(300, 300);
}

function draw() {
    strokeWeight(2);
    background(180);
    fill(156, 132, 104);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    fill(255)
    ellipse(eyeLX, height / 2, eyeSize, eyeSize); // eye 1
    ellipse(eyeRX, height / 2, eyeSize, eyeSize); // eye 2
    fill(0)
    ellipse(eyeLX, height / 2, eyeSize / 2, eyeSize / 2); // iris 1
    ellipse(eyeRX, height / 2, eyeSize / 2, eyeSize / 2); // iris 2
    line(width / 2, height / 2, noseWidth + width / 2, noseHeight + height / 2); // directional nose line
    line(width / 2, height / 2 + noseHeight, noseWidth + width / 2, height / 2 + noseHeight); // bottom nose line
    noFill();
    beginShape(); //creative rendition of a mouth, testing out curveVertex()  :)
    curveVertex(width / 2 - faceWidth / 3, mouthPosition + mouthHeight);
    curveVertex(width / 2 - faceWidth / 3, mouthPosition + mouthHeight);
    curveVertex(width / 2, mouthPosition);
    curveVertex(width / 2 + faceWidth / 3, mouthPosition + mouthHeight);
    curveVertex(width / 2 + faceWidth / 3, mouthPosition + mouthHeight);
    endShape(); //sometimes the mouth goes off the face. call it art
}

function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'faceWidth' gets a random value between 75 and 150.
    faceWidth = random(75, 150);
    faceHeight = random(100, 200);
    eyeSize = random(10, 30);
    noseWidth = random(10, 30);
    noseDirection = random(0, 2);
    if (noseDirection > 1) {
        noseWidth = -1 * noseWidth;
    }
    mouthHeight = random(-10, 10);
}

Project 2: Variable Faces

sketch-beansDownload
//Yeon Lee, Section C
//Project-02: Variable Faces; Face Variables

var backgroundR = 180;
var backgroundG = 200;
var backgroundB = 255;
var head = 190;
var hoodieColorR = 253;
var hoodieColorG = 253;
var hoodieColorB = 150;
var headWidth = 150;
var headHeight = 150;
var eyeSize = 24;
var blushSize = 25;
var mouth =  1
 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(backgroundR, backgroundG, backgroundB);

    //ears + head (back)
    var w = 330;
    var h = 250;
    var earSize = 80;
    var earY = h - 0.5 * head;
    var leftEarX = w + 0.45 * head; //hoodie size changes every time you click
    var rightEarX = w - 0.45 * head;

    fill(hoodieColorR, hoodieColorG, hoodieColorB); //hoodie color changes every time you click
    noStroke();
    ellipse(leftEarX, earY, earSize, earSize); //head with hoodie
    ellipse(rightEarX, earY, earSize, earSize);
    ellipse(w, 220, head, 1 * head); //cheek shape on the bottom
    ellipse(w, 280, 35 - head, head / 2);

    //head (front)
    fill(255, 255, 255);
    ellipse(w, h - 10, head / 1.2, head / 1.2); //face
    ellipse(w, h + 30, 45 - head, head / 2); //cheek shape on the bottom

    //eyebrows + eyes
    var leftEyeX = w - headWidth * 0.3; //eye size changes every time you click
    var rightEyeX = w + headWidth * 0.3;

    fill(45, 34, 25); 
    arc(leftEyeX, h - 40, 10, 5, PI, 0); //eyebrows
    arc(rightEyeX, h - 40, 10, 5, PI, 0);
    ellipse(leftEyeX, h, eyeSize, eyeSize); //eyes
    ellipse(rightEyeX, h, eyeSize, eyeSize);

    fill(255, 255, 255); //white part of eyes
    ellipse(leftEyeX + 6, h - 7, eyeSize / 5, eyeSize / 5);
    ellipse(rightEyeX + 6, h - 7, eyeSize / 5, eyeSize / 5); 
    ellipse(leftEyeX, h + 15, eyeSize, eyeSize / 4); //smiling eyes
    ellipse(rightEyeX, h + 15, eyeSize, eyeSize / 4);

    //nose
    var noseX = w;
    var noseY = head * 0.05 + 245; //nose size changes every time you click
    var noseSize = head / 45;
    fill(255, 182, 193);
    ellipse(noseX, noseY, noseSize, noseSize - 2);

    //blush
    var mouthSize = head / 35;
    var mouthW = noseSize * 3;
    var leftBlushX = w - mouthW * 5;
    var rightBlushX = w + mouthW * 5;

    fill(255, 139, 139, 50);
    ellipse(leftBlushX, h + 40, blushSize * 2, blushSize * 2);
    ellipse(rightBlushX, h + 40, blushSize * 2, blushSize * 2);

    //mouth
    var mouthX = w;
    var mouthY = head * 0.05 + 253;

    if (mouth < 2){ //mouth changes to either a smile or surprised every time you click 

        //smile
        fill(255, 106, 106);
        arc(mouthX, mouthY, 12, 20, 0, PI, CHORD);

    } else if (mouth < 3) {
        //surprise
        fill(255, 106, 106);
        ellipse(mouthX, mouthY + 10, 15, 20);
    }

}
 
function mousePressed() {
    // when you click, these variables are reassigned
    // to random values within specified ranges
    backgroundR = random(100, 150);
    backgroundG = random(100, 150);
    backgroundB = random(200, 250);    
    head = random(180, 300);
    hoodieColorR = random(220, 255);
    hoodieColorG = random(220, 255);
    hoodieColorB = random(130, 180);
    headWidth = random(100, 200);
    headHeight = random(100, 250);
    eyeSize = random(24, 34);
    blushSize = random(25, 30);
    mouth = random(1, 3);
}

At first, it was challenging to work with positioning locations, but I got used to arithmetic solutions and enjoyed assigning names to variables. I had a lot of fun experimenting with reassigning the random values when you click for mousePressed() function.

LO: Generative Art

Refik Anadol’s “Machine Hallucinations” represent his most recent synesthetic reality experiments using projections.

Refik Anadol’s “Machine Hallucinations” is an generated A/V Performance and Installation art that uses Archive and Machine Learning algorithms to project 100 million photographic memories of New York City. The installation provides such cinematic experiences by multilayering and generating a vast, dynamic visual archive of the city. I found it absolutely intriguing how Anadol used artificial intelligence machine to produce photographs in motion to reflect the memories of the city. By creating a hallucinative imagery, it almost feels like another reality revealed in front of us. I also admire how the projection aspect makes even the audience like a part of the work as it illuminates and spotlights the people. In his work, Anadol attempts to represent the “reality, totality, and the depth of human imagination,” and unearth novel connections between collective consciousness and visual narrative using machine intelligence.

Reference: https://refikanadolstudio.com/projects/machine-hallucination/

LO: Generative Art

Memo Akten’s Simple Harmonic Motion #12 for 16 Percussionists at RNCM (2015) is a really interesting musical composition and performance piece. The rhythmic patterns are dictated by a computer, and communicated to the musicians through earpieces. While human tendency is to stay in time with each other, the cues cause each drummer to pay attention only to their own beats. This allows them to go in and out of sync as the program runs. I admire that Akten was able to create a performance that is straddles the line between what is music and what is simply noise. The intuitive emotional aspect of playing an instrument is seemingly stripped away as these drummers are simply an extension of the computer’s directions. I would be curious to see what would happen if a more complex and sonically pleasing piece were translated into this system. Sheet music and its digital counterparts can be seen as similar instructions, but this piece is unique in the way that the instructions are delivered. Rather than having written music and a conductor, the musicians do not see the bigger picture and can only rely on what they’re being told in the moment.

Project-02: Variable Faces

Since I did not use the environmental variables to write my function, it took me a while at first to rewrite parts of my code. Then I re-define some variables by using the var …=random(num1, num2) to approach to the final generative faces. It is frustrating during the process when debugging it, but I feel super proud of myself when I finally get my code working. 
siyunw-Generative faces
var eyeSize = 10;
var faceWidth = 100;
var faceHeight = 150;
var hairWidth =350;
var hairHeight =350;
var neckWidth = width / 2;
var neckHeight= 4*neckWidth / 3;
var mouthSize= 40;
var mouthHeight = 30;
var backgroundR=250;
var backgroundG=150;
var backgroundB=100;

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

function draw() {
    background(backgroundR,backgroundG,backgroundB);

    fill(255,204,153);
    circle((width-hairWidth) / 2,height / 2,50);  
    circle(width-(width-hairWidth) / 2,height / 2,50);//ears

    fill(255,153,51);
    ellipse(width / 2, height / 2, hairWidth, hairHeight);
    rect((width-hairWidth) / 2,(height / 2),hairWidth,4*(hairHeight / 2) / 3);//face
    
    var eyeLX = width / 2 - faceWidth * 0.15;
    var eyeRX = width / 2 + faceWidth * 0.15;
    fill(0);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);//eyes


    fill(0);
    ellipse(width/2,3*height / 4,mouthSize,mouthHeight);
    //mouse

}

function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'faceWidth' gets a random value between 75 and 150.
    backgroundR=random(200,300);
    backgroundG=random(100,200);
    backgroundB=random(50,150);
    faceWidth = random(75, 150);
    faceHeight = random(100, 200);
    eyeSize = random(10, 30);
    hairWidth = random(300,400)
    hairHeight = random(300,400);
    neckWidth = random(150,250);
    mouthSize = random(35,80);
    mouthHeight = random(25,70);
}

Project 2: Variable Faces

sketch

// Simple beginning template for variable face.
var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var noseWidth = 15;
var noseHeight = 15;
var mouthWidth = 20;
var mouthHeight = 20;
var eyebrowHeight = 20;
var eyebrowWidth = 40;
var fillFaceR = 200
var fillFaceG = 200
var fillFaceB = 200
var filleyeR = 200
var filleyeG = 200
var filleyeB = 200
var fillMouthR = 200
var fillMouthG = 200
var fillMouthB = 200
var fillBrowR = 200
var fillBrowG = 200
var fillBrowB = 200
var fillHairR = 200
var fillHairG = 200
var fillHairB = 200


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

function draw() {
    background(255, 242, 242);
    strokeWeight(0);
    fill(fillFaceR, fillFaceG, fillFaceB);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    strokeWeight(0);
    fill(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);
    fill(166, 83, 83)
    ellipse(width/2, 250, noseWidth, noseHeight);
        //nose
    fill(fillMouthR, fillMouthG, fillMouthB);
    ellipse(width/2, 280, mouthWidth, mouthHeight);
        //mouth function
    fill(fillBrowR, fillBrowG, fillBrowB);
    var eyebrowLX = width / 2 - faceWidth * 0.5 
        //Left eyebrow variable thing
    var eyebrowRX = width / 2 + faceWidth * 0.52
        //Right eyebrow variable thing
    rect(eyebrowLX, height / 2 - 20, eyebrowWidth, eyebrowHeight);
        //Left Eyebrow
    rect(eyebrowRX - 40, height / 2 - 20, eyebrowWidth, eyebrowHeight);
        //Right Eyebrow
    strokeWeight(0);
    fill(fillFaceR, fillFaceG, fillFaceB);
    rect(width / 2 - 17, 265, 35, 15)
        //this is the rectangle that makes the mouth into a smile
    strokeWeight(0);
    fill(fillHairR, fillHairG, fillHairB);
    ellipse(width / 2, height / 3 + 10, 40, 40)
        //this is the hair bun



}

function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'faceWidth' gets a random value between 75 and 150.
    faceHeight = random(120, 150);
    eyeSize = random(10, 30);
    noseWidth = random(5, 12);
    noseHeight = random(5, 12);
    mouthWidth = random(15, 35);
    mouthHeight = random(5, 25);
    eyebrowHeight = random(6, 20);
    eyebrowWidth = random(30, 45);
    fillFaceR = random(70, 255);
    fillFaceB = random(70, 150);
    fillFaceG = random(70, 150);
    filleyeR = random(10, 100);
    filleyeG = random(10, 100);
    filleyeB = random(10, 100);
    fillMouthR = random(150, 255);
    fillMouthG = random(1, 50);
    fillMouthB = random(1, 50);
    fillBrowR = random(0, 100);
    fillBrowG = random(0, 100);
    fillBrowB = random(0, 1255);
    fillHairR = random(0, 255);
    fillHairG = random(0, 100);
    fillHairB = random(0, 255);
}

My main challenges were trying to place the eyebrows correctly, and getting the colors correct. I think starting was also a bit difficult, but once I got use to using global variables a bit more it got easier.

LO: Generative Art

A piece of generative art that I admire is “Differential Lattice” created by artist Anders Hoff. From a visual perspective, I think it is extremely beautiful. The small components coming together to create a very intricate lattice is very interesting. I also admire it because I am extremely interested in the process the artist had to go through to produce it. This course is my first introduction to code as well as computational art, and I think that it has been so interesting to see how the language of the code interacts with the visual art. I am just so curious as to how Hoff had to harness that code in order to create this very intricate piece. The artist said that they used Cython to produce this piece. When going into depth about his process, he talked about how he used a lot of differential meshes and systems to create the piece. It seems as though, there is a pattern of nodes being plotted, and the computer keeps using that program to create similar patterns and move throughout the canvas. I think that you can tell that the artist has an appreciation for additive pieces. In some of the ones I saw on their website, there was a start in the middle of the canvas, and then growth coming out from that point into the canvas.

https://inconvergent.net/generative/differential-lattice/