Month: September 2021

LO: Generative Art

Turbulence by Jon McCormack, 1994

Turbulence by Jon McCormack is an installation piece that combines computer algorithms and human creativity. The installation consists of a screen and a projector that outputs images and videos of the artist’s work. McCormack used genetic algorithms to create “lifeforms,” such as flowers, trees, and animals. I admire this generative art project because I was thrilled by the idea of creating “life” with a computer. I also found it interesting that, although the creation of artificial lifeforms in this artwork is autonomous, the algorithm mimics the process of natural selection, which is a significant phenomenon in biological ecosystems. Ideas of natural selection are present when the algorithm automatically selects the most beautiful and visually exciting “lifeforms.” Also, I find it interesting that the codes function like DNA, in which McCormack categorized the imagery of different “lifeforms” by the similarity in their code. Even though McCormack’s “lifeforms” were fictional and virtual, they made me reflect on our relationship with machines and with the natural world.

Some examples of McCormack’s “lifeforms.”

Sources:

website

image

lmattson-02-project

lmattson-02-project
//Luke Mattson
//section A

var w= 600
var h= 480
var headradius= w/3
var eyeRadius= headradius/4
var smileSize=.5
var skinR=255
var skinG=255
var skinB=255
var skin=1



function setup() {
    createCanvas(w, h);

}



function draw() {

    background(128,206,225);    // background
    fill(167,199,231);
    strokeWeight(1);
    stroke(140,170,220);
    triangle(0,0,600,600,0,600);

    //hair based on size of face
    stroke(0);                
    fill(223,180,130);      
    ellipse(w/2,h/2-50,headradius,headradius*1.4);


    //ears attached to face with 3 color possibilities
    if (skin==1) {
        fill(255,219,172)
    } else if (skin==2) {
        fill(224,172,105)
    } else {
        fill(241,194,125)
    }        
    ellipse(w/2-headradius/2,230,30,60);
    ellipse(w/2+headradius/2,230,30,60);


   //random size face with 3 color possibilities
   if (skin==1) {
       fill(255,219,172)
   } else if (skin==2) {
       fill(224,172,105)
   } else {
       fill(241,194,125)
   }
    ellipse(w/2,h/2,headradius,headradius*1.4);

    
    //random size eyes
    fill(245,245,245);          
    stroke(0);
    strokeWeight(1.5);
    circle(w/2-headradius/5,h/2-headradius/5,eyeRadius)
    circle(w/2+headradius/5,h/2-headradius/5,eyeRadius)
    fill(0,0,200,30);
    circle(w/2-headradius/5,h/2-headradius/5,eyeRadius/3)
    circle(w/2+headradius/5,h/2-headradius/5,eyeRadius/3)


    //random size mouth
    stroke(249,21,21)
    strokeWeight(1)
    fill(255,127,127) 
    arc(w/2,headradius/5+h/2,150,80, smileSize, PI, OPEN)

    //nose
    stroke(0)
    strokeWeight(.5)
    line(300,240,290,275);      
    line(310, 280,290, 275);
    //body attached to bottom of face
    var bodyx = w/2     
    var bodyy = h/2 + .5*(headradius*1.4)
    stroke(255,255,255);        
    strokeWeight(1.5)
    line(bodyx,bodyy, bodyx, bodyy+40);
    line(bodyx,bodyy+40,bodyx+10,bodyy+50)
    line(bodyx,bodyy+40,bodyx-10,bodyy+50);
    line(bodyx,bodyy+20,bodyx+10,bodyy+10)
    line(bodyx,bodyy+20,bodyx-10,bodyy+10)
   
}

    //assign random variables
function mousePressed() {       
    headradius= random(.4,.7)*h
    eyeRadius= random(headradius/8,headradius/4)
    skin = int(random(0,3))
    smileSize=random(0,1)
       
}

LookingOutwards-02

In high school, I would always have discussions about whether artificial intelligence can create original art in my Theory of Knowledge class. And as a design student, I still wonder where the line lies between human created art and soft-ware generated. I think the term “generative” is also very interesting, because it contrasts the “creative” nature of art. 

While exploring through the websites of different generative artists, I was intrigued by Marius Watz’ “Wall Exploder A”, because at a glance it just seemed like a regular mural. When I realized that it was a traced piece, I thought it was very interesting that it is a hybrid artwork that utilizes both software and manual work. 

Marius Watz | Wall Exploder A
Marius Watz, Wall Explore A, 2011

Project-02: Variable Faces; Face Variables.

sketch
// Simple beginning template for variable face.
var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var noseWidth = 20
var noseHeight = 50;
var earSize = 20;
var hairStyle = 2;
var hairSize = 20;
var browSize = 10;

//colors
var faceR = 100;
var faceG = 150;
var faceB = 200;
var noseR = 100;
var noseG = 100;
var noseB = 100;

//

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

function draw() {
    //face
    background(180);
    noStroke();
    fill(faceR, faceG, faceB);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight); 

    //ears
    ellipse(((width / 2) - (faceWidth / 2)), (height / 2), earSize, earSize + 10);
    ellipse(((width / 2) + (faceWidth / 2)), (height / 2), earSize, earSize + 10);


    //eyes
    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);

    //nose
    fill(noseR, noseG, noseB);
    triangle((width / 2), (height / 2), (width / 2 - 10) , (height / 2 + 10), (width / 2 + 10), (height / 2 + 10));

    //hair
    ellipse(width / 2, ((height / 2) - (faceHeight / 2) + 10), 60, 30);
    if (hairStyle > 1){
         ellipse((width / 2), ((height / 2) - (faceHeight / 2)), hairSize, hairSize);
       
    } else {
        ellipse((width / 2 - 30), ((height / 2) - (faceHeight / 2)), hairSize, hairSize);
        ellipse((width / 2 + 30), ((height / 2) - (faceHeight / 2)), hairSize, hairSize);
    }

    //brow
    rect(eyeLX - 15, height / 2 - 30, 30, browSize);
    rect(eyeRX - 15, height / 2 - 30, 30, browSize);


}

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.
    //color
    faceR = random(0, 256);
    faceG = random(0, 256);
    faceB = random(0, 256);

    noseR = random(0, 256);
    noseG = random(0, 256);
    noseB = random(0, 256);

    faceWidth = random(75, 150);
    faceHeight = random(100, 200);
    eyeSize = random(10, 20);
    earSize = random(20, 40);
    noseWidth = random(10, 20);
    noseHeight = random(40, 60);
    hairSize = random(30, 70);
    hairStyle = random(0, 2);
    console.log(hairStyle);
    browSize = random(10, 20);


}

Project-02: Variable Faces; Face Variables

sketch
var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var facecolorR = 30;
var facecolorG = 60;
var facecolorB = 120;
var noseA = 30;
var noseB= 20;
var mouth = 40;
var mouthWidth= 20
var mouthHeight= 60
var eyebrowWidth = 50
var eyebrowHeight = 30
var eyecolorR = 70
var eyecolorG = 90
var eyecolorB = 240
function setup() {
    createCanvas(300, 300);
}
 
function draw() {
    background(180);
    fill (facecolorR,facecolorG,facecolorB);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    fill (eyecolorR, eyecolorG, eyecolorB);
    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);
    triangle(width/2,height/2,140,170,160,170); 
    //i could not get the nose to change without making it pinocchio 
    ellipse(width/2,190,mouthWidth,mouthHeight);
    rect(115,120,eyebrowWidth, eyebrowHeight);
    rect(170,120,eyebrowWidth, eyebrowHeight);

}

 
function mousePressed() {
    faceWidth = random(75, 150);
    faceHeight = random(100, 200);
    eyeSize = random(10, 30);
    facecolorR = random(5,10,40);
    facecolorG = random(300,10,2);
    facecolorB = random(50,250,20);
    mouthWidth = random (12,20);
    mouthHeight = random (0,20);
    noseA = random(140,180);
    NoseB = random(140,170);
    eyebrowWidth = random(10,20);
    eyebrowHeight = random(2,8);
    eyecolorR= random(0,300);
    eyecolorG= random(20,300);
    eyecolorB= random(4,200);

}

LO: Generative Art

3D rendering of a Meander map

Meander, Robert Hodgin, May 2020

While looking through the generative artwork, I was very drawn to Meander by Robert Hodgin. This is a project about generating “historical maps of rivers that never existed”. The work is very aesthetically pleasing as well as interesting from a generation perspective. The rivers are generated, but so are the historical remnants of the river, the “local” geography, the roads, settlements, and even the names on the top of the maps. Hodgin does not talk in depth about the techniques he uses to produce the river maps, but does mention a potential spline technique moving forward with this project. He does, however, show the results of different potential generation patterns and the process of creating the current generational code. The final result has beautiful colors and intriguing patterns, an artwork in every right.

Project 1: My Self Portrait

self portraitDownload
function setup() {
    createCanvas(600, 600);
    background(123, 151, 180);
}

function draw() {
    stroke(0);
    strokeWeight(4);
    fill(247, 205, 174); //skin color
    ellipse(300, 300, 340, 380); //face
    line(200, 270, 270, 270); //left eyebrow
    line(330, 270, 400, 270); //right eyebrow
    stroke(0);
    strokeWeight(3);
    fill(127, 62, 41); //brown left eye
    ellipse(235, 300, 30, 50);
    ellipse(365, 300, 30, 50); //right eye
    fill(236, 121, 67); //nose orange
    triangle(300, 330, 290, 350, 310, 350);
    fill(236, 121, 134); //mouth pink
    arc(300, 390, 80, 50, -radians(5),radians(185),CHORD);
    fill(246, 190, 185); //left cheek pink 
    ellipse(170, 360, 80, 30);
    fill(246, 190, 185); //right cheek pink 
    ellipse(430, 360, 80, 30);
    fill(248, 157, 54); //hat yellow
    rect(180, 110, 240, 33);
    triangle(210, 70, 180, 110, 240, 110);
    triangle(270, 70, 240, 110, 300, 110);
    triangle(330, 70, 300, 110, 360, 110);
    triangle(390, 70, 360, 110, 420, 110);
    fill(48, 0, 0); //hair brown
    circle(120, 180, 80, 80);
    circle(480, 180, 80, 80);
    fill(243, 75, 44); //jewel red
    square(204, 60, 12);
    square(264, 60, 12);
    square(324, 60, 12);
    square(384, 60, 12);
    noLoop();
}

The most interesting part of the project is figuring out which shapes work best for each facial feature and how a slight angle change can change the entire expression.

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

function draw() {
	background(204);
	ellipse(50, 50, 80, 80);
}
sketchDownload
function setup() {
    createCanvas(300, 300);
    background(220);
//    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	if (mouseX < width / 2) {    // left side
		if (mouseY < height / 2) {     // top half
			background(255, 0, 0);
		}
		else {   // bottom half
			background(0, 255, 0);
		}
	}
	else {   // right side
		if (mouseY < height / 2) {  // top half
			background(0, 0, 255);
		}
		else {	// bottom half
			background(0, 0, 0);
		}
	}
}

Variable Faces

sketchfile

var eyeSize = 20;
var pupilSize = 10;
var faceWidth = 100;
var faceHeight = 150;
var earSize = 30;
var eyeColor = 0;
var hairHeight = 300;
var hairWidth = 200;
var mouth = 1;

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

function draw() {
    background(150,50,25);
    fill(100);
    ellipse (width / 2, height / 2, hairWidth, hairHeight);
    fill(255,200,162);
    var earRX = (width / 2.1) + (faceWidth * .625);
    var earLX = (width / 1.9) - (faceWidth * .625);
    ellipse(earRX, height/2, earSize, earSize);
    ellipse(earLX, height /2, earSize, earSize);
    ellipse(width / 2, height / 2, faceWidth, faceHeight);
    fill(100)
    arc(width / 2, height / 2.1, hairWidth, hairHeight, PI, 0); //bangs
    fill(eyeColor);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    noFill();
    strokeWeight(2);
    arc(width / 2, height / 1.9, faceWidth / 4, faceHeight / 4, 0, PI); //nose
    if (faceHeight <= 150){ // mouth 1
        arc(width / 2, height / 1.8 , faceWidth /3.5 * 2, faceHeight / 5 , 0, PI);
    } else if (faceHeight <= 170){ //mouth 2
        arc(width / 2, height / 1.7, faceWidth /3.5 * 2.2, faceHeight / 5 , PI, 0);
    } else { //mouth 3
        line(220, height / 1.7, 240, height / 1.7);
     }
    fill(eyeColor);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    fill(0);
    ellipse(eyeLX, height / 2, pupilSize, pupilSize);
    ellipse(eyeRX, height / 2, pupilSize, pupilSize);
     if(hairHeight <faceHeight){ //for no bald head
    hairHeight = 250};
}

function mousePressed() {
    faceWidth = random(75, 150);
    faceHeight = random(100, 200);
    eyeSize = random(10, 30);
    pupilSize = random(5, 15);
    earSize = random(20, 30);
    eyeColor = random(0, 255, 0, 255, 0, 255);
    hairWidth = random(150, 225);
    hairHeight = random(125, 225);
    mouth = random(0.1);
}

This project was a lot easier for me than the last. I however, spent a lot of time stuck on my if else statements due to a }. Regardless, I made a changing face with eyes that turn different shades of grey and has different smiles. My person kinda looks like an old lady to me.

Looking Outwards 02: Generative Art

“Animal Imagination” is an artwork consisting of 50 iterations created by software artist LIA in 2018. The piece was created through an algorithmic system in which each iteration used different parameters for them to flow from one to another, evolving into a series of digital paintings. The artist used various shapes and colors to express elements from nature and animals. For instance, one piece involved a yellow and brown color scheme with overlapping circles of various transparencies, resembling the wildlife of the safari. I admire this project for how each individual iteration is unique and involves different elements, but they still transition very smoothly to each other. This provides a sense of harmony to the entire artwork, and I think that’s quite impressive. Another part of the project that I admire is how it’s very abstract with only lines, shapes, and patterns, yet it successfully captures the image of the sea, forest, and animals. From “Animal Imagination” as well as her other works, one can truly see how LIA emphasizes and works beautifully with abstract forms and fluidity.