Category: SectionD

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

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.

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.

Project 5: Wallpaper

wallpaper karan

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

function draw() {
    for(x=75;x<=375;x+=150){ //loop for pink shaded eye pattern
        for(y=37.5;y<=412.5;y+=75){
            pattern(x,y);
        }
    }
    for(x=0;x<=width;x+=150){ //loop for yellow shaded eye pattern
        for(y=0;y<=height;y+=75){
            pattern2(x,y);
        }
    }
    noLoop()
}

function pattern(centerX,centerY){ //pattern for pink eye
    noStroke()
    fill(200,121,174); 
    quad(centerX-75,centerY,centerX,centerY-37.5,centerX+75,centerY,centerX,centerY+37.5); //rhombus
    fill(79,0,145);
    arc(centerX,centerY+18.75,75,75,PI+PI/6,2*PI-PI/6,CHORD) //outer eye top half
    arc(centerX,centerY-18.75,75,75,PI/6,PI-PI/6,CHORD) //outer eye lower half
    fill(189,151,177);
    ellipse(centerX,centerY,37.5,37.5);//outer pupil 
    fill(0);
    ellipse(centerX,centerY,18.75,18.75);//inner pupil
}

function pattern2(centerX,centerY){//same code, different colours
    noStroke()
    fill(254,199,73);
    quad(centerX-75,centerY,centerX,centerY-37.5,centerX+75,centerY,centerX,centerY+37.5);
    fill(251,254,46);
    arc(centerX,centerY+18.75,75,75,PI+PI/6,2*PI-PI/6,CHORD)
    arc(centerX,centerY-18.75,75,75,PI/6,PI-PI/6,CHORD)
    fill(254,183,116);
    ellipse(centerX,centerY,37.5,37.5);
    fill(0);
    ellipse(centerX,centerY,18.75,18.75);
}

This was an interesting project because I liked that I drew eyes. It was a little tricky figure where the arcs should be placed.

Dorfelt works on Grief

I found Matthais Dorfelt’s work interesting because of how real it looked compared to a human hand. Specifically in his computer-generated drawings of grief, which reminds me of art from the show Adventure Time. All the works kept the same style and crying aspect with an open mouth, but all were still different. I found it spooky that it looked human-made and not coded. I would assume that whatever algorithm was used had a lot of if-then statements because I would think they ran the same code multiple times to get all the images. Perhaps they had if the body is pink then the mouth has these measurements and colors, etc. I feel that the artists are present in the algorithm because all of his work is displayed with a certain art style that is very contemporary, none of it seems to stray too far from that path. I like the way he specifies spontaneity as a part of his process.

https://www.mokafolio.de/works/Grief

Project 1: My Self-Portrait

luca-portrait

function setup() {
    createCanvas(1000, 1000);
    background(180);
}

function draw() {
    background(171,130,130)
    text("Luca's portrait",15,20)

    //hoodie
    fill(61,64,91)
    ellipse(500,700,500,200)
    fill(229,229,229)
    ellipse(500,700,450,200)


    //body
    fill(244,241,222)
    rect(450,765,100,245)//shirt
    fill(61,64,91)
    rect(280,765,200,245)//bodyr
    fill(61,64,91)
    rect(550,765,200,245)//bodyl
    fill(61,64,91)
    ellipse(270,840,150,150)//shoulderr
    fill(61,64,91)
    ellipse(738,840,150,150)//shoulderl
    fill(61,64,91)
    rect(210,850,120,200)//armr
    fill(61,64,91)
    rect(730,780,190,120)//upperarm
    fill(61,64,91)
    rect(800,500,120,290)//arm
    fill(255,215,215)
    rect(800,400,100,100)//hand
    fill(34,19,17)
    rect(580,900,100,10)//pocket
    fill(224,122,95)
    rect(600,850,10,50)//pen

     //facefeatures
    fill(34,19,17)
    ellipse(500,420,500,400)//hair1
    fill(255,215,215)
    ellipse(500,520,450,470)//head
    fill(255,255,255)
    ellipse(400,525,100,50)//eyeright
    fill(34,19,17)
    ellipse(380,525,40,30)//pupilright
    fill(255,255,255)
    ellipse(600,525,100,50)//eyeleft    
    fill(34,19,17)
    ellipse(580,525,40,30)//pupilleft
    fill(34,19,17)
    rect(345,455,100,20)//browr
    fill(34,19,17)
    rect(550,440,100,20)//browl
    fill(255,210,218)
    rect(480,510,50,100)//noseb
    fill(255,210,218)
    ellipse(506,600,60,55)//nose

    fill(34,19,17)//hair
        ellipse(500,310,60,60)
        ellipse(480,330,60,60)
        ellipse(530,310,60,60)
        ellipse(560,320,60,60)
        ellipse(600,300,60,70)
        ellipse(460,300,60,60)
        ellipse(430,300,60,60)
        ellipse(400,310,60,60)
        ellipse(370,300,60,60)
        ellipse(320,360,60,60)
        ellipse(340,330,60,60)
        ellipse(600,330,60,60)
        ellipse(620,330,60,60)
        ellipse(630,340,60,60)
        ellipse(650,330,60,60)
        ellipse(680,350,60,60)
        ellipse(690,370,60,60)
        ellipse(700,400,60,60)
        ellipse(710,420,60,60)
        ellipse(300,400,60,60)

    fill(34,19,17)
    stroke(0)
    strokeWeight(5)
    line(450,700,550,700)
    noloop();

}

Locating and finding the right coordinates on the canvas was quite challenging for me. I also spent a lot of time trying to find the right lines of code when I was making changes. However, I made things easier when I used “//” to label each graphic element.

Also, I checked my HTML code used to embed p5.js, and the data-width and data-height match with my canvas size, but I don’t know why my self-portrait shows up like this in WordPress.

Project 1: My Self Portrait

camel_self_portrait

function setup() {
    createCanvas(670, 750);
    background(232,228,130);
}

function draw() {
    noStroke();

    fill(0,0,0);
    rect(70,50,450,480,200); //back hair

    fill(255,160,122);
    rect(140,150,310,350,150); //head

    fill(188,143,143);
    rect(0,550,600,800,150); //body

    fill(255,160,122);
    rect(255,450,90,150,80); // neck

    fill(0,0,0);
    rect(110,65,200,200,100); //left bang

    rect(280,65,200,200,100); //right bang

    rect(120,230,40,300,30); //left stroke

    rect(430,230,40,300,30); //right stroke

    rect(480,200,100,200,70); //clip

    ellipse(520,170,80); //clip piece

    ellipse(237,330,30); // left eye

    ellipse(355,328,30); // right eye

    fill(255,127,80);
    rect(280,330,30,70,30); //nose

    fill(220,20,60);
    ellipse(300,430,50); //mouth

    fill(255,160,122);
    rect(250,400,120,20);

    fill(240,128,128,100);
    ellipse(200,400,100); // left blush
    ellipse(395,400,100); // right blush

    fill(255,160,122);
    rect(500,510,150,160,50); //palm
    rect(542,600,80,210); //wrist
    //rect(450,590,80,40,50); //thumb
    rect(510,420,32,130,50); //index finger
    rect(550,410,32,130,50); //middle finger
    //rect(580,410,32,130,50); //ring finger
    //rect(615,450,32,100,50); //little finger


    strokeWeight(5);
    stroke(218,165,32);
    fill(255,255,255,50);
    ellipse(230,330,100); // left frame
    ellipse(365,328,100); // right frame
    line(280,330,310,330); // frame connector

    noLoop();
}

Project 1: My Self Portrait

Self-Portrait Code

function setup() {
    createCanvas(600, 700);
    background(245);
}
function draw() {
//hair
     strokeWeight(0);
    fill(226, 194, 121);
    ellipse(300, 230, 310, 285);
    rect(145, 230, 310, 500);    
//head
    fill(245, 224, 204);
    ellipse(300, 290, 290, 340);
//cheeks
    fill(238, 158, 158);
    ellipse(225, 300, 80, 43);
    ellipse(375, 300, 80, 43);
//nose
   fill(245, 189, 173);
   circle(300, 310, 30);
   fill(245, 224, 204);
   rect(270, 280, 60, 30);
//eyes
    noFill();
    strokeWeight(5);
    stroke(100)
    arc(230, 255, 55, 30, PI, 0);
    arc(370, 255, 55, 30, PI, 0);
//mouth
    arc(300, 370, 45, 30, 0, PI);
    strokeWeight(0);
//shirt
    //(how the cords of quad ordered) top left, top right, bottom right, bottom left
    fill(187, 209, 153);
    quad(90, 540, 250, 510, 250, height, 90, height);
    rect(250, 510, 100, 240);
    quad(350, 510, 510, 540, 510, height, 350, height);
//neck
    fill(245, 224, 204);
    rect(250, 440, 100, 70);
    circle(300, 500, 100);
}

What was most challenging was just planning out the drawing and deciding what coordinates I wanted and how I wanted to approach the code.

Project-01-My Self Portrait

handin-01_heejins-01-project_sketch

//Heejin Son Section D
function setup() {
    angleMode(DEGREES); //set up the code to work in degrees
    createCanvas(910, 717);
    background(96, 96, 96);
}

function draw() {
    strokeWeight(1);
    fill(173, 195, 232); //murky blue
    rect(245, 293, 466, 426); //smaller background rectangle
    ellipse(280, 506, 405, 323); //background ellipse left
    ellipse(667, 506, 405, 323); //background ellpise right
    ellipse(457, 538, 252, 161); //ellipse for the face
    fill(36, 26, 26); //brown
    ellipse(419, 524, 11, 25); //left eye
    ellipse(485, 524, 11, 25); // ight eye
    fill(150, 22, 22); //red
    ellipse(451, 539, 10, 10); // nose
    ellipse(416, 626, 35, 46); //left hand
    ellipse(502, 624, 35, 46); //right hand
    ellipse(389, 640, 12, 12); //paws for left hand
    ellipse(410, 660, 13, 13); //paws for left hand
    ellipse(440, 650, 12, 12); //paws for left hand
    ellipse(476, 641, 12, 12); //paws for right hand
    ellipse(499, 660, 14, 14); //paws for right hand
    ellipse(526, 652, 10, 10); //paws for right hand
    line(292, 506, 376, 536); //left whiskers
    line(299, 582, 379,554); //left whiskers
    line(520, 537, 627, 478); //right whiskers
    line(518, 554, 629, 575); //right whiskers
    rect(414, 401, 44, 56); //rectangle for the hat
    fill(24, 159, 10); //green
    triangle(458, 401, 489, 354, 512, 406); //triangle for the hat
    fill(150, 22, 22); //red
    triangle(512, 406, 552, 409, 535, 445); //end triangle for the hat
    ellipse(343, 489, 42, 42); //circle for the bubbles
    fill(196, 177, 50); //yellow
    ellipse(347, 447, 20, 20); //circle for the bubbles
    fill(31, 50, 85); //navy
    ellipse(319, 418, 24, 24); //circle for the bubbles
    fill(181, 85, 21); //orange
    ellipse(106, 350, 40, 40); //outer bubbles
    fill(31, 85, 48); //green
    ellipse(79, 266, 70, 70); // outer bubbles
    fill(196, 177, 50);
    ellipse(139, 192, 40, 40); // outer bubbles
    fill(31, 85, 48);
    ellipse(627, 116, 50, 40); //butterfly
    fill(31, 50, 85);
    ellipse(645, 172, 70, 60); //butterfly
    fill(150, 22, 22);
    ellipse(682, 105, 30, 20); //butterfly
    fill(181, 85, 21);
    ellipse(717, 147, 70, 60); //butterflys
    line(653, 95, 635, 72); //butterfly
    line(660, 95, 667, 58); //butterfly
    fill(31, 85, 48);
    fill(31, 50, 85);
    rect(350, 208, 160, 102); //house
    fill(150, 22, 22); //red
    triangle(325, 210, 530, 210, 432, 140); //house
    rect(0,700, 910, 20); //bottom rectangle




    
}

Project 1: Self Portrait

project-01

project-01

function setup() {
    createCanvas(600, 900);
    background(255);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(2, 3, 200);
    fill(255);
    triangle(400, 650, 475, 850, 325, 850);
    rect(50, 50, 500, 600);
    stroke(0);
    strokeWeight(5);
    noFill();
    triangle(400, 850, 450, 900, 350, 900);
    curve(70, 220, 100, 170, 250, 165,  280, 222);
    curve(270, 222, 300, 165, 450, 170,  480, 220);
    fill(0);
    arc(150, 170, 60, 40, 0, 3);
    arc(350, 170, 60, 40, 0, 3);
    fill(255);
    arc(150, 170, 60, 40, .5, 1);
    arc(350, 170, 60, 40, .5, 1);
    fill(255, 173, 226);
    noStroke();
    ellipse(175, 300, 50, 100);
    ellipse(375, 300, 50, 100);
    fill(250, 160, 210);
    ellipse(175, 300, 40, 40);
    ellipse(375, 300, 40, 40);
    stroke(0);
    strokeWeight(5);
    fill(0);
    curve(200, mouseY/2, 225, 400, 325, 400,  350, mouseY/2);
    noFill();
    curve(70, 100-(mouseY/2), 120, 100, 220, 100,  280, 100+(mouseY/2));
    curve(270, 100+(mouseY/2), 320, 100, 420, 100,  480, 100-(mouseY/2));

}

Tweaking the numbers to get object into the right place on the canvas was pretty tedious and unintuitive at first, but once I had a couple shapes down for reference it got much easier.