Category: Uncategorized

Looking Outwards 02: Generative Art

Transiterate
Holger Lippman
2022

Spring Storm
Holger Lippman
2020-2021

The projects I have chosen are Holger Lippmann’s “Transiterate” (2022) and “Spring Storm” (2020-2021). “Transiterate” is an animated looping NFT consisting of 100 individual unique frames. Lippmann’s site describes it as “a gradual, repeating subdivision (iteration) of rhythmically consecutive color tables”, which translates to a large circle with constantly shifting and transforming subdivisions whose coloring move up and down the color wheel.

Meanwhile, “Spring Storm” is a series of prints composed of red and white swirls on a wavy background. The compositions were generated via layered Perlin noise, resulting in a highly dynamic yet varied series of artworks. The integration of code and other digital means as a core part of a lucrative artistic workflow is highly admirable.

Spring Storm (2021) – Holger Lippmann

Lippmann’s work is described as falling “somewhere in between artistic disassociation and realistic reproduction, between old values and modern perspectives”. His abstract compositions are reminiscent of the atmosphere and sensorial experience of various natural phenomena. He incorporates various algorithms, particularly RNG, which allows him to instantly generate “an abundance of possibilities”, which he feels is missing in traditional forms of media.

Links:
https://holgerlippmann.io/
https://www.lumas.com/artist/holger_lippmann/
http://e-art.co/

LO 2: Casey Reas

I found this piece of generative art by Casey Reas, Untitled 5 to be rather inspirational. On a lesser point, the
presentation of this work is fantastic. It goes to show that the art itself is everything: the context in which you
view it (the appearance of the website is rather bare and calls back to older internet aesthetics), the title
(or in this case, the lack of one is unsettling), and the music that is shown with the work of art (the music is similarly
unpredictable).
I suppose that this work was generated by finding an average of domestic images and messing with the generation
of the average in order to distort the images.
Given that the piece’s emphasis is meant to be unsettling, the randomization of the distortions, with their
unpredictability, further adds to the creepiness of the work, making it a wonderful case study on as to how
generative art can make a work more potent. Some may be under the impression that generative art is
interesting, but not an entirely viable form of creating art when all art could be created entirely within the
autonomy of the artist, though the unpredictability of this work is aided by its generative nature.

Reas.com Is a Database for Casey Reas, http://reas.com/untitled_5/.

anabelle’s project 02

My project is based on a video game I like called “Omori.” Click on the upper left corner to control eyes, upper right to control eyebrows, lower left for accessories, and lower right for mouths. Click on the purple button to get a completely randomized face. @.@

sketch
// kayla anabelle lee <3
// section c
// kaylalee

let radiusHead = 125;
let shoulderWidth = 175;

let counterEye = 0;
let counterBrow = 0;
let counterMouth = 0;
let counterExtra = 0;


function happyMouth(x, y, w, h, color) {
    var r = (w / 8);

    //rectangle
    fill(50, 230);
    noStroke();
    rect(x-w/2+r, y-r, w-2*r, r);

    // bottom arc
    arc(x, y, w, h, 0, radians(180));

    // right quarter circle
    arc((x-(w/2)+r), y, 2*r, 2*r, radians(180), radians(270));

    // left quarter circle
    arc(x+(w/2)-r, y, 2*r, 2*r, radians(270), 0);
    line(x-(w/2)+r, y-r, x+(w/2)-r, y-r); 
}

function curvyStar(x, y, r) {
    noStroke();
    push();
    translate(x, y);
    angleMode(DEGREES);
    beginShape();
    for(var i = -90; i < 0; i += 1) {
        vertex( r*cos(i), 
                -r*sin(i) );
    } for(var i = 0; i < 90; i += 1) {
        vertex(r*cos(i), 
               2*r - r*sin(i));
    } for (var i = 90; i < 180; i += 1) {
        vertex(2*r + r*cos(i),
               2*r - r*sin(i));   
    } for(var i = 180; i < 270; i += 1) {
        vertex(2*r + r*cos(i), 
               0 - r*sin(i));
    } endShape();
    pop();

    angleMode(RADIANS);
}

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

function draw() {
    background(230);
    stroke(50, 255);
    strokeWeight(1);
    noFill();

    // head
    stroke(50, 230);
    strokeWeight(5);
    noFill();

    beginShape();
    curveVertex(width/2 - radiusHead, height/2 - 100);
    curveVertex(width/2 - radiusHead, height/2 - 100);
    curveVertex(width/2 - 100, height/2 + 20);
    curveVertex(width/2, height/2 + 80);
    curveVertex(width/2 + 100, height/2 + 20);
    curveVertex(width/2 + radiusHead, height/2 - 100);
    curveVertex(width/2 + radiusHead, height/2 - 100);
    endShape();

    // ears
    arc(width/2 - radiusHead, height/2 - 40, 50, 50, radians(60), radians(290));
    arc(width/2 + radiusHead, height/2 - 40, 50, 50, radians(250), radians(110));

    // neck and shoulders
    beginShape(); //left side
    curveVertex(width/2 - 35, height/2 + 75);
    curveVertex(width/2 - 35, height/2 + 75);
    curveVertex(width/2 - 35, height/2 + 150);
    curveVertex(width/2 - 85, height/2 + 175);
    curveVertex(width/2 - shoulderWidth, height/2 + 180);
    curveVertex(width/2 - shoulderWidth, height/2 + 180);
    endShape();  

    beginShape();
    curveVertex(width/2 - shoulderWidth, height/2 + 180);
    curveVertex(width/2 - shoulderWidth, height/2 + 180);
    curveVertex(width/2 - 210, height/2 + 200);
    curveVertex(width/2 - 225, height/2 + 250);
    curveVertex(width/2 - 230, height/2 + 350);     
    curveVertex(width/2 - 230, height/2 + 350); 
    endShape();   

    beginShape(); //right side
    curveVertex(width/2 + 35, height/2 + 75);
    curveVertex(width/2 + 35, height/2 + 75);
    curveVertex(width/2 + 35, height/2 + 150);
    curveVertex(width/2 + 85, height/2 + 175);
    curveVertex(width/2 + shoulderWidth, height/2 + 180);
    curveVertex(width/2 + shoulderWidth, height/2 + 180);
    endShape();

    beginShape();
    curveVertex(width/2 + shoulderWidth, height/2 + 180);
    curveVertex(width/2 + shoulderWidth, height/2 + 180);
    curveVertex(width/2 + 210, height/2 + 200);
    curveVertex(width/2 + 225, height/2 + 250);
    curveVertex(width/2 + 230, height/2 + 350);     
    curveVertex(width/2 + 230, height/2 + 350); 
    endShape();   

    //hair
    fill(50, 240);
    arc(width/2+90, height/2-140, 150, 200, radians(250), radians(70), OPEN);
    arc(width/2-20, height/2-95, 300, 310, radians(150), radians(300), OPEN);
    noStroke();
    triangle(300, 88, 140, 249, 318, 135);
    quad(318, 134, 350, 203, 268, 217, 266, 167);
    quad(212, 201, 207, 236, 270, 210, 266, 167);

    //bangs
    stroke(50, 230);
    beginShape();
    curveVertex(width/2-130, height/2-50);
    curveVertex(width/2-130, height/2-50);
    curveVertex(width/2-100, height/2-50);
    curveVertex(width/2-65, height/2-70);
    curveVertex(width/2-30, height/2-120);
    curveVertex(width/2-30, height/2-120);
    endShape();

    beginShape();
    curveVertex(width/2-30, height/2-120);
    curveVertex(width/2-30, height/2-120);
    curveVertex(width/2-30, height/2-100);
    curveVertex(width/2-40, height/2-75);
    curveVertex(width/2-60, height/2-55);
    curveVertex(width/2-60, height/2-55);
    endShape();

    beginShape();
    curveVertex(width/2-60, height/2-55);
    curveVertex(width/2-60, height/2-55);
    curveVertex(width/2-30, height/2-60);
    curveVertex(width/2-10, height/2-80);
    curveVertex(width/2+10, height/2-130);
    curveVertex(width/2+10, height/2-130);
    endShape();

    beginShape(); 
    curveVertex(width/2+10, height/2-130);
    curveVertex(width/2+10, height/2-130);
    curveVertex(width/2+10, height/2-100);
    curveVertex(width/2-10, height/2-60);
    curveVertex(width/2-25, height/2-45);
    curveVertex(width/2-25, height/2-45);
    endShape();

    beginShape();
    curveVertex(width/2-25, height/2-45);
    curveVertex(width/2-25, height/2-45);
    curveVertex(width/2+10, height/2-70);
    curveVertex(width/2+25, height/2-100);
    curveVertex(width/2+30, height/2-130);
    curveVertex(width/2+30, height/2-130);
    endShape();

    arc(width/2+125, height/2-120, 200, 150, radians(90), radians(170));

    // tank top
    noFill();
    line(width/2-150, height/2+180, width/2-150, height/2+350);
    line(width/2+150, height/2+180, width/2+150, height/2+350);
    arc(width/2, height/2+180, 200, 180, radians(0), radians(180));

    // collarbones
    strokeWeight(2);
    bezier(width/2-20, height/2+220, width/2-70, height/2+190, width/2-70, height/2+200, width/2-85, height/2+200);
    bezier(width/2+20, height/2+220, width/2+70, height/2+190, width/2+70, height/2+200, width/2+85, height/2+200);

    // nose
    line(width/2-1, height/2-1, width/2+1, height/2+1);

    //this section is to control eye-type from the first quadrant
    if (counterEye == 1) {
        fill(50, 230);
        circle(width/2 - 65, height/2 - 50, 35);
        circle(width/2 + 65, height/2 - 50, 35);

        strokeWeight(8);
        noFill();
        arc(width/2 - 65, height/2 - 15, 175, 105, radians(240), radians(300));
        arc(width/2 + 65, height/2 - 15, 175, 105, radians(240), radians(300));

    } if (counterEye == 2) {
        strokeWeight(4);
        fill(50, 230);
        circle(width/2 - 65, height/2 - 50, 35);
        circle(width/2 + 65, height/2 - 50, 35);

        fill(253, 253, 150, 200);
        curvyStar(165, 258, 10);
        curvyStar(295, 258, 10);

        noFill();
        strokeWeight(4);
        stroke(50, 230);
        bezier(width/2-100, height/2-55, width/2-90, height/2-70, width/2-65, height/2-85, width/2-50, height/2-70); 
        bezier(width/2+100, height/2-55, width/2+90, height/2-70, width/2+65, height/2-85, width/2+50, height/2-70);
   
    } if (counterEye == 3) {
        strokeWeight(4);
        noFill();
        bezier(width/2-100, height/2-63, width/2-90, height/2-65, width/2-65, height/2-65, width/2-45, height/2-65);
        arc(width/2 - 70, height/2 - 55, 50, 30, radians(10), radians(120));
        bezier(width/2+100, height/2-63, width/2+90, height/2-65, width/2+65, height/2-65, width/2+45, height/2-65);
        arc(width/2 + 70, height/2 - 55, 50, 30, radians(60), radians(170));

        arc(width/2 - 65, height/2 - 53, 30, 25, radians(120), radians(240));
        arc(width/2 - 60, height/2 - 55, 20, 20, radians(300), radians(60));
        arc(width/2 + 65, height/2 - 53, 30, 25, radians(240), radians(120));
        arc(width/2 + 60, height/2 - 55, 20, 20, radians(100), radians(220));

        strokeWeight(3);
        arc(width/2 - 65, height/2 - 50, 100, 50, radians(240), radians(300));
        arc(width/2 + 65, height/2 - 50, 100, 50, radians(240), radians(300));

        line(width/2 - 45, height/2 - 40, width/2 - 55, height/2 - 35);
        line(width/2 - 60, height/2 - 20, width/2 - 45, height/2 - 35);
        line(width/2 + 45, height/2 - 40, width/2 + 55, height/2 - 35);
        line(width/2 + 60, height/2 - 20, width/2 + 45, height/2 - 35);
    }

// this section is to control eyebrow type from quadrant 2
        noFill();
        strokeWeight(2);

        if (counterBrow == 1) {
            strokeWeight(3);
            arc(width/2 - 65, height/2 - 75, 80, 30, radians(210), radians(330));
            arc(width/2 + 65, height/2 - 75, 80, 30, radians(210), radians(330));

        } if (counterBrow == 2) {
            bezier(width/2-95, height/2-80, width/2-80, height/2-80, width/2-50, height/2-80, width/2-20, height/2-95);
            bezier(width/2+95, height/2-80, width/2+80, height/2-80, width/2+50, height/2-80, width/2+20, height/2-95);

        } if (counterBrow == 3) {
            line(width/2-80, height/2-100, width/2-30, height/2-80);
            line(width/2+80, height/2-100, width/2+30, height/2-80);    
        }

// this section is to control mouth type from quadrant 3
    noFill();
    strokeWeight(3);

    if (counterMouth == 1) {
        strokeWeight(2);
        arc(width/2, height/2 + 40, 40, 20, radians(210), radians(330));
    } if (counterMouth == 2) {
        bezier(width/2 - 20, height/2 + 25, width/2, height/2 + 40, width/2, height/2 + 40, width/2 + 20, height/2 + 25);
    } if (counterMouth == 3) {
        noStroke();
        happyMouth(width/2, height/2 + 20, 80, 60, 100); 
    }

// this section is to control accessories from quadrant 4

    if (counterExtra == 1) {
        fill(50, 255);
        noStroke();

        beginShape(); 
        curveVertex(width/2 - radiusHead, height/2 - 100);
        curveVertex(width/2 - radiusHead, height/2 - 100);
        curveVertex(width/2 - 115, height/2 - 50);
        curveVertex(width/2 - 100, height/2 + 10);
        curveVertex(width/2, height/2 - 20);
        curveVertex(width/2 + 100, height/2 + 10);
        curveVertex(width/2 + 115, height/2 - 50);
        curveVertex(width/2 + radiusHead, height/2 - 100);    
        curveVertex(width/2 + radiusHead, height/2 - 100); 
        endShape(); 

    } if (counterExtra == 2) {
        strokeWeight(2);
        line(width/2 - 70, height/2 - 10, width/2 - 60, height/2 - 20); 
        line(width/2 - 90, height/2 - 12, width/2 - 85, height/2 - 20);
        line(width/2 - 50, height/2 - 12, width/2 - 40, height/2 - 20);
        line(width/2 + 70, height/2 - 10, width/2 + 80, height/2 - 20); 
        line(width/2 + 90, height/2 - 12, width/2 + 95, height/2 - 20);
        line(width/2 + 50, height/2 - 12, width/2 + 60, height/2 - 20);
    }

    if (counterExtra == 3) {
        fill(50, 230);
        strokeWeight(3);
        arc(width/2+15, height/2-250, 100, 100, radians(240), radians(30), CHORD);
    }

// this section is to make a randomized button for all features
    fill(176, 156, 217);
    noStroke();
    circle(50, 50, 75);
}

function mousePressed() {
    if (mouseX < width/2 & mouseY < height/2) {
        if (counterEye < 3) {
            counterEye += 1;
        } else {
            counterEye = 1;
        } 
    }  

    if (mouseX > width/2 & mouseY < width/2) {
        if (counterBrow < 3) {
            counterBrow += 1;
        } else {
            counterBrow = 1;
        }
    }

    if (mouseX > width/2 & mouseY > height/2) {
        if(counterMouth < 3) {
            counterMouth += 1;
        } else {
            counterMouth = 1;
        }
    }

    if (mouseX < width/2 & mouseY > height/2) {
        if(counterExtra < 3) {
            counterExtra += 1;
        } else {
            counterExtra = 1;
        }
    }

    if (25 < mouseX & mouseX < 125 && 25 < mouseY && mouseY < 125) {
        counterEye = round(random(1,3));
        print(counterEye);

        counterBrow = round(random(1,3));
        counterMouth = round(random(1,3));
        counterExtra = round(random(1,3));



    }
}

Project 02

Left Side = :|, Right Side = :), Middle = : , Click the Shirt to Change Colors/Scale, Click and Hold on Face = ???

sketch
//Brody Ploeger
//Section C


var faceWidth = 175;
var faceHeight = 200;
var backcolor1 = 2;
var backcolor2 = 10;
var backcolor3 = 20;
var backrectcolor1 = 215;
var backrectcolor2 = 210;
var backrectcolor3 = 240;
var backrectcolor2 = 200
var circlecolor1 = 110;
var circlecolor2 = 150;
var circlecolor3 = 190;
var shirtcolor1 = 250;
var shirtcolor2 = 200;
var shirtcolor3 = 215;



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

function draw() {
    background(backcolor1, backcolor2, backcolor3)

    strokeWeight()

    //background rect
    fill(backrectcolor1, backrectcolor2, backrectcolor3, 75)
    rect(640/2,0,640/2,480)

    
    //shirt
    fill(shirtcolor1,shirtcolor2,shirtcolor3);
    circle(640/2, 480/2+faceHeight, faceHeight*1.5)
   

    //right side of face
    fill(circlecolor1, circlecolor2, circlecolor3)
    ellipse(640/2, 480/2, faceWidth, faceHeight)
    
    //left side of face
    fill(200, 75)
    beginShape();
    vertex(640/2-faceWidth/2, 480/2-faceHeight/2);
    vertex(640/2,480/2-faceHeight/2);
    vertex(640/2,480/2-faceHeight/10);
    vertex(640/2-faceWidth/10,480/2+faceHeight/6);
    vertex(640/2,480/2+faceHeight/2);
    vertex(640/2-faceWidth/2,480/2+faceHeight/2);
    endShape();

    //right eye
    fill(backcolor1, backcolor2, backcolor3);
    rect(640/2+faceWidth/8,480/2-faceHeight/10, faceWidth/5, faceHeight/5);

    //right pupil
    fill(backrectcolor1, backrectcolor2, backrectcolor3)
    ellipse(640/2+faceWidth/4.5,480/2, faceWidth/10, faceHeight/10)

    //left eye
    fill(backrectcolor1, backrectcolor2, backrectcolor3);
    ellipse(640/2-faceWidth/4,480/2, faceWidth/4, faceHeight/4);

    //left pupil
    stroke(backcolor1, backcolor2, backcolor3) ;  
    strokeWeight(faceWidth/40+faceHeight/40);
    line(640/2-faceWidth/3.25, 480/2, 640/2-faceWidth/5, 480/2);

if (mouseX<640/4){

    //straight mouth
    stroke(backcolor1, backcolor2, backcolor3);   
    strokeWeight(faceWidth/50+faceHeight/50);
    line(640/2-faceWidth/5, 480/2+faceHeight/3.5, 640/2+faceWidth/5, 480/2+faceHeight/3.5);  

    //left straight eyebrow 1
    stroke(backcolor1, backcolor2, backcolor3);   
    strokeWeight(faceWidth/50+faceHeight/50);
    line(640/2-faceWidth/2.8, 480/2-faceHeight/5, 640/2-faceWidth/7, 480/2-faceHeight/5);

    //right straight eyebrow 2
    stroke(backcolor1, backcolor2, backcolor3);  
    strokeWeight(faceWidth/50+faceHeight/50);
    line(640/2+faceWidth/2.8, 480/2-faceHeight/5, 640/2+faceWidth/7, 480/2-faceHeight/5);
} else if(mouseX>640*3/4){
    
    //mouth smile
    fill(backrectcolor1, backrectcolor2, backrectcolor3);
    strokeWeight(faceWidth/50+faceHeight/50);
    arc(640/2, 480/2+faceHeight/4, faceWidth/2, faceHeight/4,0,PI,PIE);
    
 // left tilt eyebrow 1
    stroke(backcolor1, backcolor2, backcolor3);   
    strokeWeight(faceWidth/50+faceHeight/50);
    line(640/2-faceWidth/2.8, 480/2-faceHeight/5, 640/2-faceWidth/7, 480/2-faceHeight/4);

    //right tilt eyebrow 2
    stroke(backcolor1, backcolor2, backcolor3);  
    strokeWeight(faceWidth/50+faceHeight/50);
    line(640/2+faceWidth/2.8, 480/2-faceHeight/5, 640/2+faceWidth/7, 480/2-faceHeight/4);
}

    if(mouseIsPressed){
    if (dist(mouseX, mouseY, 640/2,480/2)<faceHeight/3+faceWidth/5){
   
    faceWidth = random(100, 250);
    faceHeight = random(150,400); 
    backcolor = random(0,75);
    backcolor2 = random(0,75);
    backcolor3 = random(0,75);
    backrectcolor1 = random(210,255);
    backrectcolor2 = random(210,255);
    backrectcolor3 = random(210,255);
    circlecolor = random(100,200);
    circlecolor2 = random(100,200);
    circlecolor3 = random(100,200);
    shirtcolor1 = random (200,255);
    shirtcolor2 = random (200,255);
    shirtcolor3 = random (200,255);
    


    strokeWeight(faceWidth/50+faceHeight/50)
    noFill();
    beginShape();
    vertex(640/2-faceWidth/5, 480/2+faceHeight/4);
    vertex(640/2-faceWidth/5.5, 480/2+faceHeight/3.5)
    vertex(640/2-faceWidth/10, 480/2+faceHeight/4)
    vertex(640/2-faceWidth/15, 480/2+faceHeight/3.5)
    vertex(640/2+faceWidth/15, 480/2+faceHeight/4)
    vertex(640/2+faceWidth/10, 480/2+faceHeight/3.5)
    vertex(640/2+faceWidth/5.5, 480/2+faceHeight/4)
    vertex(640/2+faceWidth/5, 480/2+faceHeight/3.5);
    endShape();

    // other left tilt eyebrow 1
    stroke(backcolor1, backcolor2, backcolor3);   
    strokeWeight(faceWidth/50+faceHeight/50);
    line(640/2-faceWidth/2.8, 480/2-faceHeight/4, 640/2-faceWidth/7, 480/2-faceHeight/5);

    //other right tilt eyebrow 2
    stroke(backcolor1, backcolor2, backcolor3);  
    strokeWeight(faceWidth/50+faceHeight/50);
    line(640/2+faceWidth/2.8, 480/2-faceHeight/4, 640/2+faceWidth/7, 480/2-faceHeight/5);

    faceWidth += 10;
    faceHeight += 10;

}
}

print(faceHeight)


}


function mousePressed() {

//if circle clicked, shape of head changes
if (dist(mouseX, mouseY, 640/2, 480/2+faceHeight)<faceHeight/2+faceWidth/2){
    faceWidth = random(100, 250);
    faceHeight = random(150,400); 
    backcolor = random(0,75);
    backcolor2 = random(0,75);
    backcolor3 = random(0,75);
    backrectcolor1 = random(210,255);
    backrectcolor2 = random(210,255);
    backrectcolor3 = random(210,255);
    circlecolor = random(100,200);
    circlecolor2 = random(100,200);
    circlecolor3 = random(100,200);
    shirtcolor1 = random (200,255);
    shirtcolor2 = random (200,255);
    shirtcolor3 = random (200,255);

 
}
 
}

Variable Face

I liked uncovering the associations across each variable and being able to articulate those connections in writing to make illustrations. I learned the value of arranging my code and adding required comments for specific lines to help me remember important information when I was making two figures on one canvas.

Ideation
sketch
var eyeSize = 40;
var faceWidth = 100;
var faceHeight = 150;
var diam = 40;
var lipw = 40;
var liph = 25;
var lipr = 50;
var on = false;
var r = 102;  // values of gray
var g = 102;  
var b = 102;
var eyeType = 2

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

}

function draw() {
    background(204, 229, 255);

    fill(0, 0, 0);
    stroke(0, 0, 0);
    ellipse((width/2), (height/2), 200, 250); // hair 

    fill(0, 0, 0);
    stroke(0, 0, 0);
    rect((width/2.9), (height/2.6), 150, 200); // hair
    
    if (on == true) { // stating the color change in the hair
    fill(r, g, b );
    stroke(r, g, b);
    ellipse((width/2), (height/2), 200, 250);
    rect((width/2.9), (height/2.6), 150, 210); 
  } else {
    fill(255-r, 255-g, 255-b);
    stroke(255-r, 255-g, 255-b);
    ellipse((width/2), (height/2), 200, 250);
    rect((width/2.9), (height/2.6), 150, 210);
  }

    fill (215, 180, 146);
    stroke(215, 180, 146);
    ellipse(width/2, height/2, faceWidth, faceHeight); // variable faces


    stroke (195, 43, 79);
    strokeWeight(1);
    fill(195, 43, 79);
    arc((width/2) - 5, (height/2)+40, lipw, liph, lipr, PI + QUARTER_PI); // different mouth expressions

    stroke(0, 0, 0);
    line((width/2)-35, (height/2)-35, (width/2)-10, (height/2)-35);
    line((width/2) + 35, (height/2)-35, (width/2)+ 10, (height/2)-35);// static eyebrows

    
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    
    fill (0,0,0);
    stroke (0, 0, 0);
    ellipse(eyeLX, height / 2, diam, diam);
    ellipse(eyeRX, height / 2, diam, diam);

    if(eyeType > 1 & eyeType < 2) { //altering between two eye types 
        fill(0, 0, 0);

    } else {
        fill(255, 255, 255);
    }
    ellipse((width/2)-(faceWidth/4), height/2, 40, 30);
    ellipse((width/2)+(faceWidth/4), height/2, 40, 30);
     
    if(eyeType > 1 & eyeType < 2) { 
     fill(255, 255, 255);
    } else {
        fill(0, 0, 0);
    }
    ellipse((width/2)-(faceWidth/4), (height/2)+7, 20, 10);
    ellipse((width/2)+(faceWidth/4), (height/2)+7, 20, 10);

}

function mousePressed() {
    faceWidth = random(50, 150);
    faceHeight = random(150, 250);
    lipw = random (20, 50);
    liph = random (10, 30);
    lipr = random (40, 60);
    eyeType = random(0,2);

 
 if (on == false) { // color flip using boolean 
    on = true;
  } else {
    on = false;
  }
  
}

Project-02: Variable Faces

My variable faces are all completely computer generated and unique. Every feature is drawn from a set of randomly generated variables. I like the variation in emotions they can express.

sketch
// Evan Stuhlfire
// estuhlfi, Section B
// Project-02: Variable Faces; Face Variables

// Declare global variables


// variable controling head dimensions and shape
var headX = 0; // x value of head center
var headY = 0; // y value of head center
var minHead = 100;
var maxHeadW = 500; //max head width
var maxHeadH = 420; // max head height
var headHeight = 300;
var headWidth = 350;

// variables controling face dimensions and attributes
var eyeSize = 25;
var percentEyeW = 1; // value to adjust eye shape and position
var percentEyeH = 1; // value to adjust eye shape and position
var eyeVert = 2;
var lookAdjustLeft = .25; // Controls eye placement for look direction
var lookAdjustRight = .25;
var lookMax = .45;

// variable to control nose
var nose1 = 1;
var nose2 = 1.1;
var nose3 = 1.1;
var nose4 = 1;
var noseEnd = 1;
var noseLeft1 = 1;
var noseLeft2 = .9;
var noseLeft2 = 1;

// mouth variables
var noseMouthGap = 10;
var mouthStart = 1;
var mouth1 = 1.05;
var mouth2 = 1;
var mouthIncrease = 1.02;

//  color variables
var color1 = 0;
var color2 = 0;
var color3 = 0;

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

    // set head center
    centerX = width/2;
    centerY = height/2;

    // get initial colors
    getRandomColors();
}

function draw() {
    var colorChange = .4; // factor to modify color

    background(color1, color2, color3); // draw background from color variables

    // calculate eyes
    var eyeLeftX = centerX - headWidth * lookAdjustLeft; // x coordingate of left eye
    // x coordinate of right eye, can look different directions
    var eyeRightX = centerX + headWidth * lookAdjustRight; 
    var eyeHeight = min(eyeSize * percentEyeH, headHeight * .90);
    var eyeWidth = eyeSize * percentEyeW;
    var eyePositionY = height / eyeVert; // calculate vertical position of eyes 

    
    // calculate pupils
    var pupilSize = .2;
    var pupilLook = 4;
    var pupilX = eyeLeftX;
    var pupilY = eyeRightX;

    if (lookAdjustLeft > lookAdjustRight){ // looking left move pupils left
        pupilX -= pupilLook;
        pupilY -= pupilLook;
    } else { // looking right move pupils right
        pupilX += pupilLook;
        pupilY += pupilLook;
    }

    // variables for nose
    var maxNose = .90;

    var nose1X = (eyeLeftX + eyeRightX)/2;
    var nose1Y = eyePositionY; 
    if (lookAdjustLeft > lookAdjustRight) { 
        // looking left point nose left
        var nose2X = nose1X * noseLeft1;
        var nose2Y= min(nose1Y * nose2, (centerY + headHeight/2) * maxNose);
        var nose3X = nose2X * noseLeft2;
        var nose3Y= min(nose2Y * nose3, (centerY + headHeight/2) * maxNose);
        var nose4X= nose1X * noseLeft3;
        var nose4Y= min(nose3Y * nose4, (centerY + headHeight/2) * maxNose + noseMouthGap);
    } else { 
        // looking right point nose right 
        var nose2X = nose1X * nose1;
        var nose2Y= min(nose1Y * nose2, (centerY + headHeight/2) * maxNose);
        var nose3X = nose2X * nose3;
        var nose3Y= min(nose2Y * nose3, (centerY + headHeight/2) * maxNose);
        var nose4X= nose1X * noseEnd;
        var nose4Y= min(nose3Y * nose4, (centerY + headHeight/2) * maxNose + noseMouthGap);   
    }

    // calculate mouth
    var maxMouth = .98;
    var mouth1X = centerX * mouthStart;
    var mouth1Y = min(nose4Y * mouth1, (centerY + headHeight/2) - noseMouthGap);
    // keep mouth on face
    if (headHeight > headWidth){
        mouth1X = centerX - noseMouthGap;
    }
    var mouth2X = mouth1X * mouthIncrease;
    var mouth2Y = mouth1Y * mouth2;
    var mouth3X = mouth2X * mouthIncrease;
    var mouth3Y = mouth2Y;
    var mouth4X = mouth3X * mouthIncrease;
    var mouth4Y = mouth1Y;



    // draw head
    fill(color1 * colorChange, color2, color3);
    ellipse(centerX, centerY, headWidth,  headHeight);

    // draw eyes
    fill(color1, color2 * colorChange, color3);
    ellipse(eyeLeftX, eyePositionY, eyeWidth, eyeHeight);
    ellipse(eyeRightX, eyePositionY, eyeWidth, eyeHeight);

    // draw pupils
    fill(10);
    ellipse(pupilX, eyePositionY, eyeWidth * pupilSize, eyeHeight * pupilSize);
    ellipse(pupilY, eyePositionY, eyeWidth * pupilSize, eyeHeight * pupilSize);

    // draw mouth
    beginShape();
    curveVertex(mouth1X, mouth1Y);
    curveVertex(mouth1X, mouth1Y);
    curveVertex(mouth2X, mouth2Y);
    curveVertex(mouth3X, mouth3Y);
    curveVertex(mouth4X, mouth4Y);
    curveVertex(mouth4X, mouth4Y);
    endShape();

    // draw nose 
    fill(color1 * colorChange, color2, color3);
    beginShape();
    curveVertex(nose1X, nose1Y);
    curveVertex(nose1X, nose1Y);
    curveVertex(nose2X, nose2Y);
    curveVertex(nose3X, nose3Y);
    curveVertex(nose4X, nose4Y);
    curveVertex(nose4X, nose4Y);
    endShape();
}

function mousePressed() {
    // When the mouse is clicked random values are generated to control the 
    // dimensions, position, and color of a face

    // randomly generate head value
    headWidth = random(minHead, maxHeadW);
    headHeight = random(minHead, maxHeadH);

    // randomly generate eye values
    eyeSize = headWidth * random(.1, .3);
    percentEyeW = random(.5, 1); 
    percentEyeH = random(.5, 1);
    eyeVert = random(2, 2.25); // vertical position of eyes
    lookAdjustLeft = random(.01, lookMax);
    lookAdjustRight = lookMax - lookAdjustLeft;

    // generate nose values
    nose1 = random(1, 1.1);
    nose2 = random(1, 1.2);
    nose3 = random(1.1, 1.15);
    nose4 = random(.98, 1.05);
    noseEnd = random(.95, 1.05);
    noseLeft1 = random(.95, 1);
    noseLeft2 = random(.85, 1);
    noseLeft3 = random(1, 1.12);

    // generate mouth values
    mouthStart = random(.95, 1.05);
    mouth1 = random(1.05, 1.2);
    mouth2 = random(.98, 1.02);
    mouthIncrease = random(1.02, 1.03);

    // randomly generate a new color combination
    getRandomColors();
}

function getRandomColors(){
    // function generates a random number for color variables
    color1 = random(80, 255); 
    color2 = random(80, 255);
    color3 = random(80, 255);
}

Looking Alp-wards

Leander Herzog’s “Alp” (2021) is a browser-based program that presents an “alpine” landscape of (presumably) randomly generated shapes. It layers 6-7 coordinated colors in a random yet recognizable landscape form, which is simple yet beautiful to me. The colors are especially eye-catching, and I wonder if they are determined by the same code used by color swatch-generating sites like Coolors and Adobe Color.

my favorite variation of Herzog’s “Alp”

Both the colors and the shapes of the “rocks” seem to be generated concurrently and randomly. Perhaps the shapes are polygons with constrained coordinates that change whenever the function repeats itself. The ellipse in the top left “sky” area doesn’t change in placement or diameter, but its color changes to fit the palette.

Herzog’s other work generally seems to share the “less is more” ideology. Many of his other algorithms use only 2 colors and simple geometry that reacts to mouse clicks and movement. The graphics are so mesmerizing, I could play around with them for hours, and I think you all should too!

Project 02: Variable Face

This one was a struggle, not gonna lie, so I chose to make this one simpler: cross-eyed monochrome faces.

// Kailani Small
// Section A

// cross-eyed monochrome faces
var eyeSize;
var pupilSize;
var faceWidth;
var faceHeight;
var r;
var g;
var b;

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

function draw() {
background(225);
// face shape
ellipse(width / 2, height / 2, faceWidth, faceHeight);

// eyes
var lefteye = width / 2 - faceWidth * 0.25;
var righteye = width / 2 + faceWidth * 0.25;
ellipse(lefteye, height / 2, eyeSize, eyeSize);
ellipse(righteye, height / 2, eyeSize, eyeSize);
var leftpupil = width / 2 - faceWidth * 0.2;
var rightpupil = width / 2 + faceWidth * 0.2;
ellipse(leftpupil, height / 2, pupilSize, pupilSize);
ellipse(rightpupil, height / 2, pupilSize, pupilSize);

// mouth
ellipse(width / 2, height * .6, faceWidth * 0.25, faceHeight * 0.25);

}

function mousePressed() {
// when the user clicks, these variables are reassigned
// to random values within specified ranges
faceWidth = random(75, 150);
faceHeight = random(100, 200);
eyeSize = random(10, 30);
faceColor = fill(random(140, 255));
pupilSize = random(5, 8);
}

Looking Outwards 02

https://n-e-r-v-o-u-s.com/index.php

The project and business “Nervous System” is created by cofounders Jessica Rosenkrantz and Jesse Louis-Rosenberg, who were studying at Harvard, and MIT, respectively when they began their generative design company, which designs puzzles, jewelry, and lampshades using computer-generated designs. I was specifically drawn to this project because of how they approached it in a very architectural manner, and coincidentally Jessica was studying for her Masters’s in Architecture at Harvard’s GSD when she created Nervous System. I’m very drawn to the organic and biological quality of the computer-generated forms which they use in all their works, specifically the jewelry. Additionally, the fact that their art is for sale at relatively reasonable prices (for handmade wooden puzzles and silver jewelry) is really inspiring, because not only did they choose a super exploratory and playful field (as opposed to architecture), they are actually making a living off of it. This lively exploration of biomimicry as a precedent for shape and form in relation to computer science is, to me, clearly her chosen artistic style, seeing as Jessica is the lead artist and also studied biology as an undergrad.  The algorithm that is used to create these forms is undoubtedly designed to prioritize and create these natural forms, and while the shapes are all seemingly random, it is clear that a lot of technical effort has been put into making the forms cohesive.

Blog-02

I admire Mieke Marple’s personal connection to her generative art. She made a set of 2,500 NFTs called the “Medusa Collection”. The works are colorful sketch-like portraits of Medusa with rough brush layering. 25% of all the sales go to Steven Van Zandt’s national eduction profit, TeachRock.org. With a background in art school, acrylic, and colored metal leaf, Mieke had an existing style to bring to generative art. Mieke writes that watching data turn into beautiful hallucinations is reflective of what it is to be a human in the 21st century and the question of where the line is between human and computer brains.


Mieke created 6 Photoshop files for each head type, each with approximately 70 layers. Her algorithm then randomly chose a layer from each category to make the Medusa. The collection is selected out of 5.8 billion possible outputs.
Because of troubleshooting and permutations, Mieke had to leave the algorithm to do its thing and trust her intuition. Mieke considers that, “every one of the 2,500 Medusa NFTs was a very real extension of my physical body.”

https://www.artsy.net/article/artsy-editorial-making-generative-art-changed-understanding