Category: SectionC

Project 2- Variable Faces; Face Variables

var eyeSize = 25;
var faceWidth = 150;
var faceHeight = 180;
var mouthWidth = 40;
var mouthHeight = 15;
var browWidth = 10;
var browHeight = 3;
var noseColor = 230; 
 
function setup() {
    createCanvas(480, 640);
}
 
function draw() {
    background(173,216,230);
    fill(246,232,205);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    var eyeLX = width / 2 - faceWidth * 0.2;
    var eyeRX = width / 2 + faceWidth * 0.2;
    fill(0,100,0);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    fill(0,100,0);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    fill(199,54,59);
    ellipse(width/2, (height/2+35), mouthWidth, mouthHeight);
    var browY = height/2 - 30;
    fill(0);
    rect(eyeLX-5,browY,browWidth, browHeight);
    fill(0);
    rect(eyeRX-5,browY,browWidth, browHeight);
    fill(noseColor);
    triangle(width/2,height/2+5,width/2-8,height/2+20, width/2+8,height/2+20)
}
 
function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'faceWidth' gets a random value between 75 and 150.
    faceWidth = random(75, 150);
    faceHeight = random(100, 200);
    eyeSize = random(10, 30);
    mouthWidth = random(10,45);
    mouthHeight = random(10,20);
    browWidth = random (10,20);
    browHeight = random (3,7);
    noseColor = random (0,255);
}

The face that I created varies the mouth shape, eye size, and face shape, brow shape and nose shade on each click.

LO-02 Generative Art

This generative artwork is Probability Lattice by the artist Marius Watz. This artwork was created in 2012 using a 3D printer from a Makerbot replicator.

Probability Lattice by Marius Watz

I admire this artwork as it uses a repetition of geometric shapes on the surface, and the overall dynamics of the form of the piece is created using the geometric surface. Another reason I was interested in this artwork is because I have used 3D pens in the past to create a 3D form with triangles before, similar to the artist’s work. 

The algorithm that generated this work seems like it used the repetition of shapes (triangles) with lengths of the sides that are slightly different for each shape. Because the triangles are created with just the outlines and have no surface area, this results in an interesting combination of positive and negative space in the work. 

Link to artwork

Generative Art: Meet Your Creator (2012)

The project that caught my eye is Meet Your Creator, which was a live performance at the Cannes International Festival of Creativity in 2012. As a student in stage design, I found this project particularly interesting, and a little easier to understand from a programming perspective. 

When programming stage lights, we use certain softwares that already contain code for our specific needs, and program individual instructions for each light. These instructions are called cues, and during a live performance, there will be a person operating a console that runs the software, launching each cue throughout the performance.

Meet Your Creator is a little more complex from a design standpoint because this show involved the use of several drones which were programmed to execute aerial movements. I’m not familiar with how these would be programmed, however there is a screenshot from this project showing the software used for the drones, and you can see some ‘else if’ statements!

http://www.memo.tv/works/meet-your-creator/

Memo Akten: Show Director

LO: Generative Art

The art work that attracts my attention is a hypertext poems website called “Do You Want Love or Lust?”. This website presents decontextualized This or That questions from popular magazine. Instead of directly writing the poem, the creator let participants to focus on choosing their preferences, thus generating the poem based on the choices made earlier by the participants. This project then create a place, where people could interact with art individually, by applying algorithms. I suppose that the creator must have a basic structure for the poem that would be generated eventually, but there are parts in the structure that would be filled by choices participants made in the provided questions. Therefore, the content in the poem may be based on different people’s preferences, but the overall poem structure and style are dependent on the creator’s taste. It is just interesting that basic algorithms, which seem totally irrelevant to art, actually help people to create a new form of art that could let them easily manifest their personal bias and styles.

Artist: Claude Closky; Title: Do You Want Love or Lust?; Inception: 2001

https://webenact.rhizome.org/do-you-want-love-or-lust/http://archive.rhizome.org/artbase/1827/1375b.html
Do you want love or lust? Web Page

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

}

Project 02: Variable Face

With each click, the eyes are changed randomly. If the mouse is pressed, the facial expression changes, the arms move up and down, and the character switches between wearing different hats. When the pink button, blue button, or yellow sun button are clicked, either blushing circles, tear tracks, or yellow polka dots will appear.

sketch

//Alana Wu
//Section C


 var faceWidth = 120;
 var eyeLength = 20;
 var x = 200;
 var y = 250;
 var eyeThickness = 5; //for changing eye thickness
 var randomEars = 1; //for changing hat/ears
 var randomSun = 10; //for changing yellow polka dot locations

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

//if mouse is pressed on yellow sun, yellow polka dots appear
    if (mouseIsPressed & mouseX > .7 * width && mouseX < .9 * width
        && mouseY > .1*height && mouseY < .3*height) 
    {
        fill (255, 255, 0)
        strokeWeight(0);
        ellipse (randomSun, randomSun*10, faceWidth/2, faceWidth/2);
        ellipse (x + randomSun*4, randomSun*2, faceWidth/4, faceWidth/4);
        ellipse (randomSun*20, randomSun*6, faceWidth/5, faceWidth/5);
        ellipse (randomSun*7, y + randomSun*4, faceWidth/3, faceWidth/3);
        ellipse (randomSun*12, y +randomSun*6, faceWidth/4, faceWidth/4);
        ellipse (x + randomSun*3, randomSun*2.7, faceWidth/6, faceWidth/6);
        ellipse (randomSun*2.2, y +randomSun*5.7, faceWidth/7, faceWidth/7);
        ellipse (randomSun*6, y +randomSun*10, faceWidth/2, faceWidth/2);
        ellipse (randomSun*12, y +randomSun*12, faceWidth/3, faceWidth/3);
        ellipse (randomSun*20, y - randomSun*8, faceWidth/4, faceWidth/4);
        ellipse (randomSun*32, y +randomSun*11, faceWidth/4, faceWidth/4);
        ellipse (randomSun*28, y -randomSun*6, faceWidth/3, faceWidth/3);
        ellipse (randomSun*38, y +randomSun*5, faceWidth/2, faceWidth/2);
        ellipse (randomSun*35, y -randomSun*3, faceWidth/4, faceWidth/4);
    }

//blush button
    strokeWeight (0);
    fill (255, 0, 127);
    rect (15, 15, 70, 40);

//draws blue tear shape button
    fill (0, 0, 255);
    beginShape();
    curveVertex(50, 100);
    curveVertex(50, 100);
    curveVertex(25, 150);
    curveVertex(50, 175);
    curveVertex(75, 150);
    curveVertex(50, 100);
    curveVertex(75, 150);
    curveVertex(50, 100);
    endShape();

//draws sun
    fill (255, 255, 0);
    ellipse (.8*width, .2*height, width/5, width/5);
    strokeWeight(8);
    stroke(255, 255, 0);
    line ( .8*width, .2*height, .8*width + width/6, .2*height);
    line ( .8*width, .2*height, .8*width, .2*height + width/6);
    line ( .8*width, .2*height, .8*width, .2*height - width/6);
    line ( .8*width, .2*height, .8*width - width/6, .2*height);
    line ( .8*width, .2*height, .8*width + width/8, .2*height - width/8);
    line ( .8*width, .2*height, .8*width - width/8, .2*height - width/8);
    line ( .8*width, .2*height, .8*width + width/8, .2*height + width/8);
    line ( .8*width, .2*height, .8*width - width/8, .2*height + width/8);
    fill (255);
    strokeWeight (0);
    ellipse (x, y, faceWidth, faceWidth); //draws head shape

    strokeWeight (eyeThickness); //thickness of eye line
    stroke(0);
    line (x - faceWidth/5, y - faceWidth/5,
    x - faceWidth/5, y - faceWidth/4 + eyeLength); //draws left eye line
    line (x + faceWidth/5, y - faceWidth/5,
    x + faceWidth/5, y - faceWidth/4 + eyeLength); //draws right eye line


//draws body
    strokeWeight(5);
    stroke(255);
    fill (255);
    line (x - faceWidth/5, y + faceWidth/2, x - faceWidth/3, y + faceWidth);
    line (x + faceWidth/5, y + faceWidth/2, x + faceWidth/3, y + faceWidth);
    line (x - faceWidth/3, y + faceWidth, x + faceWidth/3, y + faceWidth);
//draw legs 
    line (x - faceWidth/5, y + faceWidth, x - faceWidth/5, y + 1.3*faceWidth);
    line (x + faceWidth/5, y + faceWidth, x + faceWidth/5, y + 1.3*faceWidth);
//draw feet 
    line (x - faceWidth/5, y + 1.3*faceWidth, x - faceWidth/3, y + 1.3*faceWidth);
    line (x + faceWidth/5, y + 1.3*faceWidth, x + faceWidth/3, y + 1.3*faceWidth);

//when mouseispressed, arms are lowered
    if (mouseIsPressed)
    {
        line (x - faceWidth/4, y + .6*faceWidth, x - faceWidth/2, y + faceWidth);
        line (x + faceWidth/4, y + .6*faceWidth, x + faceWidth/2, y + faceWidth);
        stroke(0);
        ellipse (x, y + faceWidth/7, faceWidth/4, faceWidth/4);
    }
//when mouse isn't pressed, arms are raised 
   else
    {
        line (x - faceWidth/4, y + .6*faceWidth, x - faceWidth, y - faceWidth/4);
        line (x + faceWidth/4, y + .6*faceWidth, x + faceWidth, y - faceWidth/4);
        stroke (0);
        line (x + faceWidth/5, y + faceWidth/7, x - faceWidth/5, y + faceWidth/7);
    }


//blush spots appear when you click "blush" button
    if (mouseIsPressed & mouseX > 15 && mouseX < 85 && mouseY > 15 && mouseY < 55)
    {
        strokeWeight (0);
        fill (255, 0, 127);
        ellipse (x + faceWidth/3, y + faceWidth/10, faceWidth/6, faceWidth/6);
        ellipse (x - faceWidth/3, y + faceWidth/10, faceWidth/6, faceWidth/6);
    }

// draws blue tear lines under eyes when blue teardrop is clicked
    if (mouseIsPressed & mouseX > 25 && mouseX < 75 && mouseY > 100 && mouseY < 175)
    {
        stroke (0, 0, 255);
        strokeWeight(8);
        line (x - faceWidth/5, 1.02*y, x - faceWidth/5, y + faceWidth/2);
        line (x + faceWidth/5, 1.02*y, x + faceWidth/5, y + faceWidth/2);
        strokeWeight (0);

    }

//depending on random number generated, either panda ears, a cone hat, or a top hat appears
    if (randomEars <= 1) //draws panda ears
    {
        fill (0);
        ellipse (x - faceWidth/2, y - faceWidth/2, faceWidth/2, faceWidth/2);
        ellipse (x + faceWidth/2, y - faceWidth/2, faceWidth/2, faceWidth/2);
        fill (255);
        ellipse (x - faceWidth/2, y - faceWidth/2, faceWidth/4, faceWidth/4);
        ellipse (x + faceWidth/2, y - faceWidth/2, faceWidth/4, faceWidth/4);
    }
    else if (randomEars <= 2) //draws red top hat w/ black and white buckle
    {
        strokeWeight (0);
        fill (255, 0, 0);
        rect (x - faceWidth/2, y - .6*faceWidth, faceWidth, faceWidth/4);
        rect (x - faceWidth/4, y - faceWidth, faceWidth/2, faceWidth/2);
        fill (0);
        rect (x - faceWidth/5, y - .58*faceWidth, faceWidth/2.5, faceWidth/5.5);
        fill (255);
        rect (x - faceWidth/9.5, y - .55*faceWidth, faceWidth/5, faceWidth/8);
    }
    else if (randomEars <= 3) //draws pink cone hat
    {
        strokeWeight(0);
        fill (255, 0, 127);
        triangle (x, y - 1.2*faceWidth, x - faceWidth/2.5, y - faceWidth/3, x + faceWidth/2.5, y - faceWidth/3);
        fill (255);
        ellipse (x, y - 1.2*faceWidth, faceWidth/4, faceWidth/4);
    }   
}


function mousePressed ()
{
    //when user clicks, these variables are reassigned to random values w/n specific ranges
    eyeLength = random (8, 25);
    eyeThickness = random (5, 12);
    randomEars = random (0, 3);
    randomSun = random (5, width/10);

}

Looking Outwards 02: Generative Art

https://www.dataisnature.com/

I have always found the idea of math and data present in nature and art very fascinating. In my previous design courses there was always a mention of how the forms of nature can be an inspiration to art. A specific example would be the classic Apple logo. The logo follows the golden ratio: a ratio of a line segment cut into two pieces of different lengths where the ratio of the whole segment to that of the longer is equal to the ratio of the longer to the shorter. The golden ratio is found in everyday applications/programs along with natural elements we see. Apart from the technological incidences, the golden ratio is present all around campus: leaves, flowers, ants, bees, cicadas, etc. After reading the article “Data is Nature” I found a more profound interest in finding these mathematical elements in daily life.

Project 2: Variable Face

sketch
//Anthony Pan
//Section C
//Simple beginning template for variable face.
var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var nose1 = 140;
var nose2 = 180;
var nose3 = 150;
var nose4 = 165;
var nose5 = 155;
var nose6 = 170;
var mouth = 1;
var hair = 1;
var color = 1;

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

function draw() {
    background(180);
    if (hair < 0.33){
        //hair middle
        line(width/2, height/2, width/2, height/2 - 2/3*faceHeight);
    }if (hair < 0.66){
        //hair right
        curve(width/2, height/2, width/2 + 25, height/2 - 1/3*faceHeight,
         width/2 + 50, height/2 - 1/2*faceHeight, width/2 + 75, height/2 - 3/4*faceHeight);
    }if (hair < 1){
        //hair left
        curve(width/2, height/2, width/2 - 25, height/2 - 1/3*faceHeight, 
        width/2 - 50, height/2 - 1/2*faceHeight, width/2 - 75, height/2 - 3/4*faceHeight);
    }
    if (color < 0.25){
        //pastel red face
        fill(235,136,129);
    }else if(color < 0.5){
        //pastel blue face
        fill(129, 219, 235);
    }else if (color < 0.75){
        //pastel green face
        fill(181, 245, 176);
    }else{
        //white face
        fill(255,255,255);
    }
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    fill(255,255,255); //keeps features white
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    if (mouth < 0.33){ 
        //happy mouth
        arc(150, 180, 20, 20, 0, PI + QUARTER_PI, CHORD);
    }else if (mouth < 0.66) {
        //sad mouth
        noFill(); //keeps mouth white
        curve(130, 200, 145, 185, 160, 185, 175, 200);
    }else {
        //neutral mouth
        line(140, 190, 170, 190);
    }
    fill(255,255,255); // keeps nose white
    triangle(nose1, nose2, nose3, nose4, nose5, nose6); //triangular nose with random coordinates

    

}

function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'faceWidth' gets a random value between 75 and 150.
    faceWidth = random(75, 150);
    faceHeight = random(100, 200);
    eyeSize = random(10, 30);
    nose1 = random(145, 150);
    nose2 = random(180, 190);
    nose3 = random(150, 155);
    nose4 = random(165, 170);
    nose5 = random(155, 160);
    nose6 = random(170, 180);
    mouth = random(0,1);
    hair = random(0,1);
    color = random(0,1);
    console.log(mouth);




}