Category: SectionD

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.

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 2: Variable Faces

generative faces

var faceWidth = 135;
var faceHeight = 150;
var eyeSize = 8;
var colG = 90
var colB = 40
var colR = 150
var earWidth = 19
var earHeight = 20
var hairColorR = 10
var hairColorG = 10
var hairColorB = 10
var hairHeight = 10
var hairCurve = 10
var hairWidth = 10
var noseWidth = 10
var noseHeight = 10
var noseColorR = 10
var noseColorG = 10
var noseColorB = 10
var mouthWidth = 10
var mouthHeight = 10
 
function setup() {
    createCanvas(480, 640);
}
 
function draw() {
    background(241,255,250);
    noStroke();

    fill(hairColorR, hairColorG, hairColorB) // hair
    ellipse(width / 2 , height / 2 - 40, hairWidth, hairHeight,)

    fill (colR, colG, colB)
    ellipse(width / 2 - 50, height / 2, earWidth, earHeight); // left ear

    fill (colR, colG, colB)
    ellipse(width / 2 + 50, height / 2, earWidth, earHeight); // left ear

    fill(colR, colG, colB)
    ellipse(width / 2, height / 2, faceWidth,  faceHeight); // face

    fill(hairColorR, hairColorG, hairColorB) // hair and face connector
    rect(200,255,75,25)

    fill(noseColorR, noseColorG, noseColorB) // nose
    ellipse(width / 2  , height / 2 + 10, noseWidth, noseHeight)

    fill (0) // eyes
    var eyeLeft = width / 2 - faceWidth * 0.25;
    var eyeRight = width / 2 + faceWidth * 0.25;
    ellipse(eyeLeft, height / 2, eyeSize, eyeSize);
    ellipse(eyeRight, height / 2, eyeSize, eyeSize);

    fill(0) //mouth
    ellipse(width / 2, height / 2 + 30, mouthWidth, mouthHeight)

    fill(colR, colG, colB) //mouth 2
    rect(210,335,60,15)

}

function mousePressed() {
    faceWidth = random(80,100);
    faceHeight = random(90,120);
    eyeSize = random(10, 20);
    colG = random(0,256);
    colR = random (0,256);
    colB = random(0,256);
    earWidth = random(28,30);
    earHeight = random(20,35);
    hairColorR = random(0,200);
    hairColorG = random(0,166);
    hairColorB = random(10,250);
    hairHeight = random(80,100);
    hairWidth = random(100,200);
    noseColorR = random(4,256);
    noseColorG = random(10,56);
    noseColorB = random(0,200);
    noseWidth = random(8,10);
    noseHeight = random(2,8);
    mouthWidth = random(20,30);
    mouthHeight = random(10,18);
}

It was quite a challenge trying to understand how to change certain features of the face while making everything connected at the same time and also thinking about how to randomize color was also challenging.

LO: Generative Art

This piece by Anders Hoff mimics the fracturing patterns that occur in brittle materials like glass or ceramic. The process by which this piece was created was by randomly creating new fractures from the tip of fractures that are already present. Without looking at the code, I think that Hoff probably made sure that the line of the new fracture started where the previous line ended but in a random direction and at a random length. I think that this piece is really interesting because it has a deeper meaning of fractures in materials and in social infrastructures and viewers could make up their own conclusions and theories on what the piece means rather than it being obvious and upfront. This piece was part of a larger collection that explores how simple algorithms and rules can have wildly complex and intricate results and I think that using generative art and coding to explore this idea is really unique and intelligent.

Artwork

Artist: Anders Hoff

Year: 2014

Variable Faces 02

It was a lot of fun deciding what to change and what style to approach this project with. It was little challenging finding the right places to put random face features but I was able to use the sample code to infer how to make changes.

sketch

//Jia Ning Liu
//jianingl@andrew.cmu.edu
//Section D

var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var mouthLength = 30
var colorR = 200
var colorG = 200
var colorB = 200
var mouthStart = 30 
var mouthHeight = 30 //controls the y coordinate of the mouth
var hairRadius = 40 //controls size of hair
var noseLength = 30

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

function draw() {
    noFill()
    background(204, 255, 204);
    strokeWeight(5); //increases stroke weight to give face a more graphic feel
    fill (colorB, colorG, colorR); //generated a random RGB color
    ellipse(width / 2, height / 2 - 80, hairRadius); // creates hair of different sizes
    fill (colorR, colorG, colorB);
    ellipse(width / 2, height / 2, faceWidth, faceHeight);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    fill (colorG, colorB, colorR);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    //generates a random length of line for the mouth
    line(width / 2 - mouthStart, height / 2 + mouthHeight, width / 2 + mouthLength, height / 2 + mouthHeight); 
    fill(colorB, colorG, colorR);
    rect(width / 2, height / 2, 5, noseLength); // generates different nose lengths
}

function mousePressed() {
    faceWidth = random(75, 150);
    faceHeight = random(100, 200);
    eyeSize = random (10, 30)
    mouthLength = random (20,80)
    colorR = random(1,256)
    colorG = random(1,256)
    colorB = random (1,256)
    mouthStart = random (20,80)
    mouthHeight = random (20,50)
    hairRadius = random (100,200)
    noseLength = random (10,40)
}

LO 02: Generative Art

Walk-Through Raster by Frieder Nakes stood out to be the most inspirational due to its visual exceptionality. Walk-Through Raster is a computer-generated image that was produced under two procedures. The first process is the drawing of white, blue, red, yellow, and orange marks by a calcomp plotter output device. The second process is the regeneration of the image through silkscreen. The most admirable aspects of this piece would be composition, color, and technique. Dynamic is demonstrated through varied line density. Some areas of the canvas are highly crocheted while other areas remain in simple forms. The spectrum of colors from dark shades of red and blue to lighter shades of yellow and orange create a distinctive pattern within the canvas. The technique of plotting color and varied lines with visual respectability is also considered highly admirable since the technique was unlike any other at its current time. Frieder Nake is renowned as the pioneer of computational art. He was a mathematician, computer scientist, as well as a generative artist. As an expert in computer programming, Nake generated mathematical algorithms combined with the plotter machine to create an abundance of genuine artworks like Walk-Through Raster. Plotter machines function to produce vector graphic drawings based on computer programming. Nake must have utilized the characteristics of programming such as randomness or repetition and its manifestation through plotter machines to create interesting artworks.

https://www.artsy.net/artwork/frieder-nake-walk-through-raster-vancouver-version

Project 2: Variable Faces

sketch

//Michelle Dang, Section D

var faceWidth; 
var faceHeight;
var faceCurve;
var eyeSize;

var nr; //nose color
var ng;
var nb;

var smileW;
var smileL;

var noseWidth;
var noseHeight;

var face = 1;
var nose = 1;
var eye =1;
var smile=1;
var haircut=1;

var r =0;
var g= 0;
var b=0;

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

function draw() {
    background(168, 220, 237)
    noStroke()

    push()
    fill(r, g, b)
    rectMode(CENTER)
    rect(width/2, height/2+300, 220, 300, 90, 90, 0, 0)
    pop()

    if (face == 1) {
    fill(141, 85, 36)
    // ellipse(width/2, height/2, 200, 250)
    ellipse(width/2, height/2, 250, 270)
    }

    if (face == 2) {
    fill(224, 172, 105)
    // ellipse(width/2, height/2, 200, 250)
    ellipse(width/2, height/2, 250, 270)
    }

    if (face == 3) {
        fill(255, 219, 172)
        // circle(width/2, height/2, 250)
        ellipse(width/2, height/2, 250, 270)
    }

    if (face == 4) {
        fill(198, 134, 66)
        // ellipse(width/2, height/2, 270, 270)
        ellipse(width/2, height/2, 250, 270)
    }
     if (face == 5) {
        fill(241, 194, 125)
        ellipse(width/2, height/2, 250, 270)
    }

    // fill(hairR, hairG, hairB);
    // arc(width/2, height/2-(faceWidth/2)+50, faceWidth, faceHeight+200, PI, TWO_PI); // bowl cut


    if (haircut ==1) {
        fill(0)
        rect(width/2-125, height/2-135, 130, 110, 20, 0,90, 20)
        rect(width/2, height/2-135, 130, 110, 0, 20,20, 90)
    }

    if (haircut==2) {
        for (var x=115; x<350; x+=50) {
            fill(200, 100, 100)
            rect(x, 185, 50, 80, 0, 0, 90, 90)
        }
    }

    if (haircut == 3) {
        fill(227, 174, 50)
        arc(width/2, height/2-30, 240, 220, PI, TWO_PI);
    }




    if (smile==1) {
        fill(0); //smile
        arc(width/2, height/2+ faceWidth*.20, smileW, smileL, TWO_PI, PI);
    } if (smile==2) {
        fill(0); //frown
        arc(width/2, height/2+ faceHeight/2*.60, smileW, smileL, PI, TWO_PI);
    } if (smile==3) {
        fill(0); //neutral expression
        ellipse(width/2, height/2+ faceWidth*.20, rectMouthW, rectMouthH);
    }

   

    if (nose == 1) {
        fill(240, 157, 151);
        ellipse(width/2, height/2, 40, 20)
    }
     if (nose == 2) {
        fill(240, 157, 151);
        rect(width/2-noseWidth/2, height/2-noseHeight/2, noseWidth, noseHeight, 20, 20); 
    } 


     if(eye==1) {
        var eyeLX = width / 2 - faceWidth * 0.25; //black eyes
        var eyeRX = width / 2 + faceWidth * 0.25;
        fill(0);
        ellipse(eyeLX, height / 2, eyeSize, eyeSize);
        ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    }  if(eye==2) { //cresent eyes
        var eyeLX = width / 2 - faceWidth * 0.25;
        var eyeRX = width / 2 + faceWidth * 0.25;
        fill(0)
       arc(eyeLX, height/2, 40, 30, -PI, 0, CHORD);
       arc(eyeRX, height/2, 40, 30, -PI, 0, CHORD);

    } if (eye==3) { //black eyes with sparkles
         var eyeLX = width / 2 - faceWidth * 0.25; 
        var eyeRX = width / 2 + faceWidth * 0.25;
        fill(0); //black eye
        ellipse(eyeLX, height / 2, eyeSize, eyeSize);
        ellipse(eyeRX, height / 2, eyeSize, eyeSize);
        fill(255); // sparkle
        ellipse(eyeLX+4, height / 2, eyeSize/3, eyeSize/3);
        ellipse(eyeRX+4, height / 2, eyeSize/3, eyeSize/3); 
        
    }
///blush
    fill(240, 100, 100, 80);
    circle(eyeLX-20, height / 2 +30, 60);
    circle(eyeRX+20, height / 2+30, 60);
    

}

function mousePressed() {

    face= int(random(1,6))
    nose= int(random(1,3))
    eye = int(random(1,4))
    smile = int(random(1,4))
    haircut = int(random(1,4))

    smileW = random(40,50);
    smileL = random(30,40);

    rectMouthW = random(30,50);
    rectMouthH = random(10,15);

    noseWidth = random(20,35);
    noseHeight = random(40,50);

    r = random(100)
    g = random(100)
    b = random(100)

    nr = random(225, 255); // nose color
    ng = random(100, 250); 
    nb = random(100, 255); 

    faceWidth = random(150, 200);  
    faceHeight = random(150, 200);  
    faceCurve = random (20, 50); // curved chin of face
    eyeSize = random(25, 40); // size of eye

}

Looking Outwards 2

Lately, I’ve been interested in NFTs and how they’ve changed the art market through generative digital art. NFTs are non-fungible tokens that resemble a piece of digital art (motion graphics, 3D models, video, illustration, etc) and are sold and traded with crypto — with one generative piece that sold for $7 million. Successful artists such as CryptoPunks and Pudgy Penguins have an artistic style that unifies their collection, yet are able to create thousands of unique works. Their work is generated by the blockchain to randomize appearances such as color and clothes: “NFT creators within the artificial intelligence generative art community are using algorithms and blockchain-based provenance to address issues of mercurial valuation and fraud” (Forbes). I am curious to see how long NFTs will last (whether they will be a fad or well integrated into the digital art market).

https://www.forbes.com/sites/leeorshimron/2021/09/08/the-nft-generative-art-movement-is-challenging-how-we-think-about-value/?sh=10cdb71578ae

https://opensea.io/

Variable Face

I thought it would be interesting to make a face that would display a range of emotions principally through the eyebrows and mouth. I also included variability in the size of and distance between the eyes as a kind of variable cuteness metric.

proj-02



var eyeSize = 20;      // determines the size of the eyes
var faceWidth = 100;   // determines the height of the face
var faceHeight = 150;  // determines the width of the face
var eyeWidth = 0.25;   // determines spacing between eyes
var browRaise = 20;    // determines eyebrow height above eyes
var mood = 10;         // determines eyebrow slant as well as mouth curvature
var moodMod = 3;       // determines the intensity of the mouth curvature

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

function draw() {
    background(180);
    strokeWeight(2 * eyeSize);
    stroke(255);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight); // draws head
    strokeWeight(1);
    stroke(0);
    var eyeLX = width / 2 - faceWidth * eyeWidth - eyeSize / 2;
    var eyeRX = width / 2 + faceWidth * eyeWidth + eyeSize / 2;
    fill(0);
    arc(eyeLX, height / 2, eyeSize, eyeSize / 2, 0, 3); //left eye
    arc(eyeRX, height / 2, eyeSize, eyeSize / 2, 0, 3); //right eye
    fill(255);
    arc(eyeLX, height / 2, eyeSize, eyeSize / 2, .5, 1); //left eye highlight
    arc(eyeRX, height / 2, eyeSize, eyeSize / 2, .5, 1); //right eye highlight
    var browAngle = browRaise + mood;
    line(eyeLX - (eyeSize / 2), height / 2 - browRaise, eyeLX + (eyeSize / 2), height / 2 - browAngle); // Draws left eyebrow
    line(eyeRX + (eyeSize / 2), height / 2 - browRaise, eyeRX - (eyeSize / 2), height / 2 - browAngle); // Draws left eyebrow
    var mouthY = (height / 2) + (faceHeight / 4);
    var mouthShape = mouthY + moodMod * mood;
    curve(50, mouthShape, eyeLX, mouthY, eyeRX, mouthY,  width - 50, mouthShape); // draws mouth
    




}


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, 50);
    eyeWidth = random(.1, .4);
    browRaise = random(10, 30);
    mood = random(-browRaise, browRaise);
    moodMod = random(1, 4);

}

Looking Outwards 02 – Learning to see

“Learning to See” is an ongoing work by Memo Akten. The artist describes this work as using machine learning algorithms to reflect the way that human perception reconstructs the world around us based on our own beliefs and experiences rather than “accurately” representing the world around us. I think this is a really interesting idea for a project and that the “vision” of the machine learning algorithms makes for a powerful metaphor for the aritst to make his point. I also find the real time fluid interation between the image generated by the algorithm and the input objects inspiring. It is a really interesting hybridization of intuitive manual gestures and an algorithmic art making process. I don’t know a whole lot about Generative Adversarial Networks (GAN), which is the type of algorithm being used in this piece. However, I do know that it has to be trained on a database of imagery which determines the sort of images that it creates. We can also asume that there is somewhere within the process a video feed is being fed into the algorithm to allow for the output to be manipulated in real time.

Learning to See (2017-)