Category: SectionC

Project-02

Here is my changing face! I think I struggled the most with deciding what nostril shape I wanted, as well as whether I wanted the eyebrows to be downturned (making them angry) or flat. I decided on flat, so that the face could smile.

sketch

// Amanda Wen Section C

var eyeSizeW = 50
var eyeSizeH = 70
var pupilSizeW = 20
var pupilSizeH = 30
var faceWidth = 180
var faceHeight = 150
var noseWidth = 5
var noseHeight = 3
var eyebrowWidth = 30
var eyebrowHeight = 10

var skinR = 60
var skinG = 137
var skinB = 97

var eyeR = 144
var eyeG = 185
var eyeB = 147

var pupilR = 34
var pupilG = 83
var pupilB = 75

var eyebrowR = 22
var eyebrowG = 59
var eyebrowB = 34

var noseR = 22
var noseG = 59
var noseB = 34

var mouthR = 186
var mouthG = 202
var mouthB = 181


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

function draw() {
    background(58, 81, 78); // background color
    noStroke();
// face
    fill(skinR, skinG, skinB); // face color
    ellipse(width / 2, height / 2, faceWidth, faceHeight); // face shape

// eyeballs
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    fill(eyeR, eyeG, eyeB); // eye color
    ellipse(eyeLX, height / 2, eyeSizeW, eyeSizeH); // left eyeball
    ellipse(eyeRX, height / 2, eyeSizeW, eyeSizeH); // right eyeball

// pupils
    var pupilLX = width / 2 - faceWidth * 0.25;
    var pupilRX = width / 2 + faceWidth * 0.25;
    fill(pupilR, pupilG, pupilB); // pupil color
    ellipse(pupilLX, height / 2, pupilSizeW, pupilSizeH); // left pupil
    ellipse(pupilRX, height / 2, pupilSizeW, pupilSizeH); // right pupil

// eyebrows
    var eyebrowLX = width / 2 - faceWidth * 0.35;
    var eyebrowRX = width / 2 + faceWidth * 0.2;
    fill(eyebrowR, eyebrowG, eyebrowB); // eyebrow color
    rect(eyebrowLX, height / 2.5, eyebrowWidth, eyebrowHeight); // left eyebrow
    rect(eyebrowRX, height / 2.5, eyebrowWidth, eyebrowHeight); // right eyebrow

// nostrils
    var noseLX = width / 2 - faceWidth * 0.05;
    var noseRX = width / 2 + faceWidth* 0.03;
    fill(noseR, noseG, noseB); // nose color
    rect(noseLX, height / 1.8, noseWidth, noseHeight) // left nostril
    rect(noseRX, height / 1.8, noseWidth, noseHeight) // left nostril

// mouth
    var mouth = width / 2 + faceWidth * 0.01;
    fill(mouthR, mouthG, mouthB); // mouth color
    arc(mouth, height * 0.6, 40, 20, radians(0), radians(180)); // mouth shape
}

function mousePressed() {
    // face shape random
    faceWidth = random(180, 150)
    faceHeight = random(180, 150)
    // eye shape random
    eyeSizeW = random(50, 70);
    eyeSizeH = random(50, 70);
    // pupil shaperandom
    pupilSizeH = random(20, 30);
    pupilSizeW = random(20, 30);

    // skin color random
    skinR = random(180, 200);
    skinG = random(180, 200);
    skinB = random(180, 200);
    // eye color random
    eyeR = random(100, 160);
    eyeG = random(100, 160);
    eyeB = random(100, 160);
    // pupil color random
    pupilR = random(108, 90);
    pupilG = random(108, 90);
    pupilB = random(108, 90);
    // eyebrow color random
    eyebrowR = random(110, 103);
    eyebrowG = random(110, 103);
    eyebrowB = random(110, 103);
    // nose color random
    noseR = random(130, 200);
    noseG = random(130, 200);
    noseB = random(130, 200);
    // mouth color
    mouthR = random(120, 100);
    mouthG = random(120, 100);
    mouthB = random(120, 100);
}

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.

Variable Face project 02

For this project, I wanted to make something cuter than last week’s face, so I mapped everything out in illustrator and then translated the shapes to js. This workflow was much more efficient and allowed me to create cartoon facial expressions since I wasn’t focused on generating the coordinates or RGB codes for every shape. Unfortunately wordpress cuts a bit of the right side off 🙁

sketch
// hfroling Hazel Froling Section C *\

    
    var r=170;
    var g=204;
    var b=170;
    var x= 300;
    var dir= 1;
    var speed= 5;
    var mouth= 1;
    

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

function mousePressed() {
    mouth += 1;
    if ( mouth > 3) {
        mouth = 1;        
    }
}

function draw() {

    if (mouth == 1) {
        background(r, g, b);
        fill(107,77,38); //hair color
        strokeWeight(0);
        rect(111,168,374,329,45); //hair back
        fill(57,91,63); //green shirt
        rect(94,509,411,168,100); //shirt rect
        fill(244,212,189); //skin color
        stroke(168,125,80) // neck line color
        strokeWeight(2); //neck stroke
        rect(244,422,120,127,50); //neck
        ellipse(478,286,60); //right ear
        ellipse(120,286,60);  //left ear
        rect(130,130,340,340,150); //face
        fill(182,95,65); //mouth fill
        ellipse(300,394,104,85); //mouth
        strokeWeight(0);
        fill(244,212,189); //skin color
        rect(220,334,160,52) //above mouth cover
        stroke(168,125,80) //skin line color
        strokeWeight(2); //2pt stroke
        fill(255); //white
        rect(248,386,104,11); //teeth
        fill(244,212,189); //skin color
        ellipse(303,335,41,26); //nose
        strokeWeight(0);
        rect(254,307,52,63); //nose cover
        fill(96,57,19); //eye liner brown
        ellipse(218,279,91,83); //eye liner shape left
        ellipse(381,279,91,83); //eye liner shape right
        fill(255); //white
        ellipse(222,280,88,83); //left eye white 
        fill(119,119,75); // green iris
        ellipse(222,280,52,49); //left eye iris
        fill(0); //black pupil
        ellipse(222,280,31,29); //left eye pupil
        fill(255); //white glint
        ellipse(232,272,10,17); //left glint
        fill(255); //white
        ellipse(377,280,88,83); //right eye white 
        fill(119,119,75); // green iris
        ellipse(377,280,52,49); //right eye iris
        fill(0); //black pupil
        ellipse(377,280,31,29); //right eye pupil
        fill(255); //white glint
        ellipse(387,272,10,17); //right glint
        fill(244,212,189); //skin color
        ellipse(201,324,133,83); // left cheek cover
        ellipse(402,324,133,83); // right cheek cover
        fill(242,200,189); //cheek color
        ellipse(203,338,107,83); //left cheek
        ellipse(396,338,107,83); //right cheek
        fill(96,57,19); //eye liner brown
        triangle(165,280,174,279,173,286); //left lower lash
        triangle(168,273,175,273,174,278); //left upper lash
        triangle(435,280,426,279,426,285); //right lower lash
        triangle(425,273,425,278,431,273); //right upper lash
        fill(107,77,38); //hair color
        ellipse(300,140,300,83); //top of hair
        ellipse(139,202,57,115); //left of hair
        ellipse(459,202,57,115); //right of hair
        ellipse(213,165,180,105); //left bangs
        ellipse(385,165,180,105); //right bangs
    }
    if (mouth == 2) {
        background(221,168,181);
        fill(107,77,38); //hair color
        strokeWeight(0);
        rect(111,168,374,329,45); //hair back
        fill(57,91,63); //green shirt
        rect(94,509,411,168,100); //shirt rect
        fill(244,212,189); //skin color
        stroke(168,125,80) // neck line color
        strokeWeight(2); //neck stroke
        rect(244,422,120,127,50); //neck
        ellipse(478,286,60); //right ear
        ellipse(120,286,60);  //left ear
        rect(130,130,340,340,150); //face
        fill(182,95,65); //mouth fill
        ellipse(300,394,104,85); //mouth
        strokeWeight(0);
        fill(244,212,189); //skin color
        rect(220,344,160,57); //above mouth cover
        stroke(168,125,80); //skin line color
        strokeWeight(2); //2pt stroke
        line(249,400,351,400); //top lip
        fill(244,212,189); //skin color
        ellipse(303,335,41,26); //nose
        strokeWeight(0);
        rect(254,307,52,63); //nose cover
        fill(96,57,19); //eye liner brown
        ellipse(218,279,91,83); //eye liner shape left
        ellipse(381,279,91,83); //eye liner shape right
        fill(255); //white
        ellipse(224,280,82,83); //left eye white 
        fill(119,119,75); // green iris
        ellipse(222,275,52,49); //left eye iris
        fill(0); //black pupil
        ellipse(222,275,31,29); //left eye pupil
        fill(255); //white glint
        ellipse(232,272,10,17); //left glint
        fill(255); //white
        ellipse(375,280,82,83); //right eye white 
        fill(119,119,75); // green iris
        ellipse(377,275,52,49); //right eye iris
        fill(0); //black pupil
        ellipse(377,275,31,29); //right eye pupil
        fill(255); //white glint
        ellipse(387,272,10,17); //right glint
        fill(244,212,189); //skin color
        ellipse(210,320,133,83); // left cheek cover
        ellipse(393,320,133,83); // right cheek cover
        fill(250,200,189); //cheek color
        ellipse(203,338,107,83); //left cheek
        ellipse(396,338,107,83); //right cheek
        fill(96,57,19); //eye liner brown
        triangle(165,280,174,279,173,286); //left lower lash
        triangle(168,273,175,273,174,278); //left upper lash
        triangle(435,280,426,279,426,285); //right lower lash
        triangle(425,273,425,278,431,273); //right upper lash
        fill(107,77,38); //hair color
        ellipse(300,140,300,83); //top of hair
        ellipse(139,202,57,115); //left of hair
        ellipse(459,202,57,115); //right of hair
        ellipse(213,165,180,105); //left bangs
        ellipse(385,165,180,105); //right bangs
        fill(221,168,181); // tounge color
        ellipse(300,450,44,39); //tounge shape
        fill(182,95,65); // mouth fill
        ellipse(300,418,63,33); //tounge cover
        strokeWeight(0);
        fill(124,54,36); //tonsil color
        ellipse(306,431,12,24) //right tonsil
        ellipse(294,431,12,24) //left tonsil
        fill(221,168,181); // tounge color
        rect(287,433,26,14); // tonsil cover
        strokeWeight(3);
        stroke(182,95,65); //tounge line color
        line(300,434,300,458) //tounge groove
        } else if (mouth == 3){ 
                background(200,200,255); //light blue
                fill(107,77,38); //hair color
                strokeWeight(0);
                rect(111,168,374,329,45); //hair back
                fill(57,91,63); //green shirt
                rect(94,509,411,168,100); //shirt rect
                fill(244,212,189); //skin color
                stroke(168,125,80) // neck line color
                strokeWeight(2); //neck stroke
                rect(244,422,120,127,50); //neck
                ellipse(478,286,60); //right ear
                ellipse(120,286,60);  //left ear
                rect(130,130,340,340,150); //face
                fill(244,212,189); //skin color
                ellipse(303,335,41,26); //nose
                strokeWeight(0);
                rect(254,307,52,63); //nose cover
                fill(96,57,19); //eye liner brown
                ellipse(218,279,91,83); //eye liner shape left
                ellipse(381,279,91,83); //eye liner shape right
                fill(255); //white
                ellipse(222,280,92,87); //left eye white 
                fill(119,119,75); // green iris
                ellipse(222,280,52,49); //left eye iris
                fill(0); //black pupil
                ellipse(222,280,31,29); //left eye pupil
                fill(255); //white glint
                ellipse(232,272,10,17); //left glint
                fill(255); //white
                ellipse(377,280,92,87); //right eye white 
                fill(119,119,75); // green iris
                ellipse(377,280,52,49); //right eye iris
                fill(0); //black pupil
                ellipse(377,280,31,29); //right eye pupil
                fill(255); //white glint
                ellipse(387,272,10,17); //right glint
                fill(244,212,189); //skin color
                ellipse(201,330,133,83); // left cheek cover
                ellipse(402,330,133,83); // right cheek cover
                fill(242,200,189); //cheek color
                ellipse(203,338,107,83); //left cheek
                ellipse(396,338,107,83); //right cheek
                fill(96,57,19); //eye liner brown
                triangle(165,280,174,279,173,286); //left lower lash
                triangle(168,273,175,273,174,278); //left upper lash
                triangle(435,280,426,279,426,285); //right lower lash
                triangle(425,273,425,278,431,273); //right upper lash
                fill(107,77,38); //hair color
                ellipse(300,140,300,83); //top of hair
                ellipse(139,202,57,115); //left of hair
                ellipse(459,202,57,115); //right of hair
                ellipse(213,165,180,105); //left bangs
                ellipse(385,165,180,105); //right bangs
                stroke(168,125,80); // neck line color
                strokeWeight(2);
                fill(182,95,65); //mouth fill
                ellipse(300,412,40,53); //round mouth
        }

    if (mouseX > width/2 & mouseY > height/2){
        strokeWeight(4);
        stroke(119,119,75); //stem green
        line(583,300,583,350); //stem
        fill(57,91,63); //dark green
        strokeWeight(0);
        rect(548,411,69,138,20); //arm
        fill(244,212,189); //skin color
        stroke(168,125,80); // skin line color
        strokeWeight(2); //neck stroke
        rect(584,335,21,60,20); //thumb
        rect(552,349,60,21,20); //top finger
        rect(552,369,60,21,20); //middle finger
        rect(552,390,60,21,20); //bottom finger
        strokeWeight(0);
        rect(583,350,21,60,20); //knuckle cover
        fill('white'); //petal color
        rect(583,292,19,19,19); //petal
        rect(564,292,19,19,19); //petal
        rect(559,275,19,19,19); //petal
        rect(573,266,19,19,19); //petal
        rect(588,275,19,19,19); //petal
        fill(255,206,0); //yellow color
        rect(573,281,19,19,19); //center petal
    }
    if( mouseX > width/2 & mouseY < height/2){
            strokeWeight(4);
            stroke(119,119,75); //stem green
            line(583,300,583,350); //stem
            fill(57,91,63); //dark green
            strokeWeight(0);
            rect(548,411,69,138,20); //arm
            fill(244,212,189); //skin color
            stroke(168,125,80); // skin line color
            strokeWeight(2); //neck stroke
            rect(584,335,21,60,20); //thumb
            rect(552,349,60,21,20); //top finger
            rect(552,369,60,21,20); //middle finger
            rect(552,390,60,21,20); //bottom finger
            strokeWeight(0);
            rect(583,350,21,60,20); //knuckle cover
            fill(240,230,255); //petal color
            rect(583,292,19,19,19); //petal
            rect(564,292,19,19,19); //petal
            rect(559,275,19,19,19); //petal
            rect(573,266,19,19,19); //petal
            rect(588,275,19,19,19); //petal
            fill('white'); //white
            rect(573,281,19,19,19); //center petal
        }
        if( mouseX < width/2 & mouseY > height/2){
            fill(57,91,63); //dark green
            strokeWeight(0);
            rect(548,411,69,138,20); //arm
            fill(244,212,189); //skin color
            stroke(168,125,80); // skin line color
            strokeWeight(2); //neck stroke
            rect(584,315,21,60,20); //thumb
            rect(552,349,60,21,20); //top finger
            rect(552,369,60,21,20); //middle finger
            rect(552,390,60,21,20); //bottom finger
            strokeWeight(0);
            rect(583,350,21,60,20); //knuckle cover

        }
            else if (mouseX < width/2 & mouseY < height/2){
            strokeWeight(0);
            fill(57,91,63); //dark green
            rect(548,411,69,138,20); //arm
            fill(244,212,189); //skin color
            stroke(168,125,80); // skin line color
            strokeWeight(2); //neck stroke
            rect(584,335,21,60,20); //thumb
            rect(552,349,60,21,20); //top finger
            rect(552,369,60,21,20); //middle finger
            rect(552,390,60,21,20); //bottom finger
            strokeWeight(0);
            rect(583,350,21,60,20); //knuckle cover
            fill('white'); //petal color
            rect(547,259,63,90,30); //bunny body
            rect(556,217,12,58,30); //bunny ear L
            rect(588,217,12,58,30); //buny ear r
            strokeWeight(4);
            stroke(0);
            fill(0);
            point(563,282); //bunny eyes
            point(592,282); //bunny eyes
            triangle(577,290,580,299,574,299); //bunny nose
            strokeWeight(2);
            line(577,299,577,308); //bun mouth
            line(577,308,583,312); //bun mouth
            line(577,308,569,312); //bun mouth
        }
}

Project 02 Variable Face

In my process, I wanted to figure out how to play with color and how that could change through pressing the mouse. I also was interested in and had a lot of fun figuring out how simple shape changes could affect expression.

project2
//Rachel Legg Class Section C

var eyeSize = 50;
var eyeHeight = 25;
var faceWidth = 300;
var bodyWidth = 400;
var faceHeight = 300;
var eyebrowHeight = 200;

var r;         // making rgb variable
var g;
var b;
var on = false;

var x = 0;
var y = 0;

function setup() {
    createCanvas(640, 480);
    background(220);
}
 
function draw() {
    noStroke();
    if(on){                                  //alternate background color on click
        background(252, 169, 133);    //orange
    }else{
        background(204, 236, 239);    //blue
    }

    //shirt
    fill(r, g, b);                                    
    ellipse(width / 2, height, bodyWidth, height);             
    fill(r + 10, g + 10, b +10);  
    ellipse(width / 4, height, bodyWidth / 4, height / 2);         
    ellipse(width * 3/4, height, bodyWidth / 4, height / 2); 

    //head
    if(on){                                //alternate head color on click
        fill(253, 222, 238);  //pink
    }else{
        fill(224, 243, 176);  //green
    }
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);  

    //eyes
    fill(r, g, b, 200);                                          
    var eyeLX = width / 2 - faceWidth * 0.25;                   
    var eyeRX = width / 2 + faceWidth * 0.25; 
    if(mouseX < width / 2){
        ellipse(eyeLX, height / 2, eyeSize, eyeHeight);               
        ellipse(eyeRX, height / 2, eyeSize, eyeHeight);
        fill(0);                                                                //pupils
        ellipse(eyeLX, height / 2, 1/2 * eyeSize, 3/4 * eyeHeight);
        ellipse(eyeRX, height / 2, 1/2 * eyeSize, 3/4 * eyeHeight);
        fill(255, 255, 255, 200);
        ellipse(eyeLX + 4, (height / 2) - 4, 1/8 * eyeSize, 1/8 * eyeHeight);    //glare
        ellipse(eyeRX + 4, (height / 2) - 4, 1/8 * eyeSize, 1/8 * eyeHeight);
    }else{
        if(on){                                //alternate nose color on click
            stroke(251, 182, 209);    //darker pink
        }else{
            stroke(145, 210, 144);    //darker green
    }
        strokeWeight(2);
        line(eyeLX - 10, height / 2, eyeLX + 10, height / 2);         //closing eyes when mouse is on right side
        line(eyeRX + 10, height / 2, eyeRX - 10, height / 2);
    }               

    //mouth
    if(mouseY > height / 2){
        fill(0);
        noStroke();
        circle(width / 2, 2/3 * height, 20, 20);                     //open mouth when below half
    }else{
        if(on){                       //alternate nose color on click
            stroke(251, 182, 209);    //darker pink
        }else{
            stroke(145, 210, 144);    //darker green
    }
        strokeWeight(2);
        line(2/5 * width, 2/3 * height, 3/5 * width, 2/3 * height);  
    }

    //nose
    noStroke();
    if(on){                           //alternate nose color on click
        fill(251, 182, 209);          //darker pink
    }else{
        fill(145, 210, 144);          //darker green
    }
    beginShape();
    curveVertex(1/5 * width, 4/5 * height); 
    curveVertex(1/2 * width, 5/9 * height);
    curveVertex(1/2 * width, 5/9 * height);
    curveVertex(4/5 * width, 4/5 * height);
    endShape();

    //eyebrow
    if(on){                       //alternate eyebrow color on click
        stroke(251, 182, 209);    //darker pink
    }else{
        stroke(145, 210, 144);    //darker green
    }
    strokeWeight(3);
    if(mouseX < width/ 2){
        line(eyeLX - 10, eyebrowHeight - 10, eyeLX + 15, eyebrowHeight - 15);               
        line(eyeRX + 10, eyebrowHeight - 5, eyeRX - 15, eyebrowHeight - 15);
    }else{
        line(eyeLX - 10, eyebrowHeight - 30, eyeLX + 15, eyebrowHeight - 20);               
        line(eyeRX + 10, eyebrowHeight - 30, eyeRX - 15, eyebrowHeight - 20);
    }

}
 
function mousePressed() {
    if(on){                               //change background on click
        on = false;
    }else{
        on =true;
    }
    faceWidth = random(300, 500);         //with click, face width changes
    bodyWidth = random(375, 415);         //with click, shirt width changes along with arms
    faceHeight = random(200, 400);        //face height changes
    eyeSize = random(20, 80);             //eye size changes
    eyeHeight = random (20, 60);
    r = random(0, 255);                   //eye and shirt color change
    g = random (0, 255);
    b = random (0, 255);
    eyebrowHeight = random(180, 200);     //eyebrow position changes
}

Looking Outwards – 02

When exploring generative art and different artists, I discovered Georg Nees and had fun looking through his work. Nees has a background in math and physics and started working in the field of computer graphics in 1964. He was one of the first artists to use algorithms on a computer to create his artwork. He first publicly displayed his work in 1965. The artwork was first coded on punched paper tape before being created by a drawing machine (Zuse Graphomat Z64). I think it is pretty cool to hear about an older system of coding like punching paper and translating to a drawing machine, and I admire the want to make art with a different system like computers. I enjoy looking at Nees’s artwork as it holds both a simplicity and complexity. The black line on a white background seems simple, but the patterns and images become so complicated. There is a sense of order and chaos. Pretty amazing that they are all created with code!

Schotter by Georg Nees

Artist: Georg Nees
Source: http://dada.compart-bremen.de/item/agent/15

Looking Outwards-02

Music has always been a large aspect of my life, as my daily routine essentially revolves around it. Whether I’m getting ready in the morning, studying, or cooking, there’s always some kind of playlist being played. After perusing through a variety of generative art creators, I discovered an artist that also shared a love for music.

Toni Mitjanit is well known for their ‘Spaghetti Coder’, a project that has a complex and tangled control structure that creates rhythm through motion and sound. I admire the blend Mitjanit created between art and mathematics, and their goal of modeling nature’s appearance, motion, and sound. The interesting variations of Mitjanit’s coded designs give off a sensual and “vibey” feel when you watch them on top of music, and I can definitely see them being played at festivals or concerts.

AAAC (An Autonomous Agent Coder) from Spaghetti Coder on Vimeo

Mitjanit uses a combination of different mathematical tools (i.e. trigonometry, calculus, matrices, etc.) with programming languages like C++, Java, Processing, and openFrameworks in order to generate these unique visuals. If Mitjanit wants to include an user interaction aspect to their artwork, they also utilize communication hardware like MIDI, OSC, or DMX protocols. I think my favorite usage of programming and media that Mitjanit used was using fractal brownian noise as texture a piece involving for geometric lines and patterns.

Mitjanit’s artistic sensibilities can be clearly seen throughout their algorithm, the play between mathematics and physics coupled with their creative nature-centered concepts are a work of art, and a step forward in the mix between modernization and appreciation for our environment.

LookingOutwards – 02

Looking at Cytoplasmic Playgrounds (2012) by Markos Kay I admire how abstract the images of his collection are while still conveying the motion of the idea he’s trying to show, which is protein interactions. The movement within this collection of drawings brings life to abstracted molecular chemistry and the complexities of detail, depth, and fullness in the images are exciting to explore. The consistently, simple beige backgrounds throughout the collection also prevent the series from becoming too unrecognizable and random. While this image is computer generated, the artist, Kay, adds his own creativity in putting in the way chemical reactions are represented: what colors are used, what items to prioritize, and what movements to convey. The algorithm that Kay used to generate these looks very complicated. I think he does use the random function within bounds to generate the positions of items, especially the points in the clusters. The ‘movement’ in the drawings tends to appear to have a center, indicating that the algorithm might use vectors attracted to centers to give the appearance of centripetal movement.

Multiprotien Complexes: A set of similar proteins that allow for a simpler and more efficient pathway for protein (ie. enzyme) movement.

anabelle’s blog 02

Although I think I’m defining “generative art” a little loosely, some inspiring works to me include any type of character customization feature in video games. This goes ranges from dress-up games, Nintendo Mii creation, or the Sims. I admire how these games allow the players to have more freedom in how they approach gameplay — some may focus entirely on aesthetics, and thus spend hours creating the perfect avatar, whereas some focus on the game’s actual main goals and minimize on character building. Either way, customization always serves as an enjoyable interlude between long bouts of repetitive gameplay. I think the creator’s artistic sensibilities manifest in the algorithm by how it reveals their style and “instincts. For example, if a creator has to create 100 different options for “eyes,” their habits and preferences will eventually become pretty obvious once the reach the 90th eye design. Similarly, you can feel how they prefer to build their worlds — do they prefer to use arcs or ellipses? How do they approach drawing small, ambiguous details with code? Ultimately, even though the purpose of these games is to give the player a larger creative realm, the artist most definitely imprints their own style in every part of them.

Even Genshin Impact, a game that has nothing to do with building your own characters, has options (albeit limited ones) for customization:

Link to Official Website: https://genshin.hoyoverse.com/en/home

Created and released by Hoyoverse, 2020.

Project – 02 Variable Faces

emily-variableface
//Emily Brunner, Section C
 
var eyeSize = 60;  //size of eye
var faceWidth = 300;  //face width
var faceHeight = 300;  //face height
var faceColorR = 255; //face color red space
var faceColorB = 155;  //face color blue space
var pupilSize = 5;   //pupil width and height
var mouth = 190;  //mouth width
var mouthColorR = 255; //mouth color red space
var mouthColorG = 25;  //mouth color green space
var mouthOpen = 95;  //mouth height
var nose = 20; //nose width


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

function draw() {
    strokeWeight(0);
    background(180);

    fill(faceColorR, 150, faceColorB); //head color
    ellipse(width / 2, height / 2, faceWidth,  faceHeight); //head
    
    var eyeLX = width / 2 - faceWidth * 0.2; //left eye width
    var eyeRX = width / 2 + faceWidth * 0.2; //right eye width
    fill(255, 255, 0); //color of eyes
    ellipse(eyeLX, height / 3, eyeSize, eyeSize); //height of left eye
    ellipse(eyeRX, height / 3, eyeSize, eyeSize); //height of right eye
    
    var pupilLX = width / 2 - faceWidth * 0.2; //width of left pupil
    var pupilRX = width / 2 + faceWidth * 0.2  //width of right pupil
    fill(0, 0, 0); //color of pupils
    ellipse(pupilLX, height / 3, pupilSize, pupilSize);  //height of left pupil
    ellipse(pupilRX, height / 3, pupilSize, pupilSize);  //height of right pupil
    
    fill (mouthColorR, mouthColorG, 156); //color of mouth
    ellipse(width / 2, height / 2 + faceHeight / 4, mouth, mouthOpen); //position of mouth relative to head
    
    fill(255, 100, 97); //color of nose
    ellipse(width / 2, height / 2, nose, nose / 2) //position of nose

}

function mousePressed() {
    faceWidth = random(300, 650);
    faceHeight = random (300, 600);
    eyeSize = random(10, 30);
    mouth = random(100, 200);
    nose = random(20, 70);
    mouthOpen = random (0, 100);
    faceColorR = random (0, 255);
    faceColorB = random (0,255);
    mouthColorR = random (0, 255);
    mouthColorG = random (0, 255);
}

This project was interesting. I had a lot of fun getting the colors to change. I am struggling with how to get objects to be relative to each other in space and change relative to each other when the mouse is pressed, so there are fewer attributes/physical features than I would like. If I were to do this again, I would probably spend more time on more facial features than the changes the face has.

Tina Franks “20160815” Project (2016)

A project that I find inspirational, is Tina Franks’s “20160815” created in 2016 with Peter Rehberg on sound.

What I admire about his project is the way combines electronic with a natural phenomenon that humans experience. The project wonders if androids would see phosphenes, which are luminous floating shapes that humans see when we close our eyes tightly and stimulate our retinas (aka rub our eyeballs). She thought that android’s would interpret these as raw liquid crystals, similar to those that are in LCD screens and electronic devices, just more raw and less crystal clear. She combined that with Peter Rehberg’s electronic music, and its a very interesting and cool project to see/hear! I admire the combination of electronics and humans, as our world is very much trying to blur the line between the two and bring us closer to our devices. Thus, Tina Frank’s project is not only relevant and inspiring to other artist during our time, but it is also very beautiful to see.

I am not sure how the algorithm works in this generated work, but I think that the work is based on randomly changing between created pictures of lines. Tina Frank also uses pixels from old video test strips from televisions to create some of these pixel images. The pixel lines are probably also similarly created by random generation of color pixels within a strip of space. Beyond that, I am not sure how this art was made.

The algorithm supports the artists vision as the different generated images are randomly spliced and cut together one after another that is similar to how phosphenes happen naturally. It is also similar to how an old TV would glitch with static or the colorized testing strip. The world she created is coarse, jarring and unfamiliar, something that she wanted to happen, as the thought of a future with HD implants in the brain or with android’s, is something very foreign and remote to many of us today.

A 1-minute preview of the audio-visual project “20160815” created by Tina Frank (video) and Peter Rehberg (audio).