Month: September 2019

Katrina Hu – Project 02 – Variable Face

sketch_project2

/*Katrina Hu
15104 C
kfh@andrew.cmu.edu
Project - 02 - Face*/


var eyeSize = 22;
var cheekWidth = 30;
var mouthWidth = 45;
var backgroundColor = 205
 
function setup() {
    createCanvas(640, 480);
    background(252, backgroundColor, 186);
    noStroke();
}
 
function draw() {
    background(252, backgroundColor, 186);
    //chopstick 1
    fill(158, 106, 68);
    rect(100, 270, 540, 7, 20, 0, 0, 20);
    triangle(640, 265, 100, 270, 640, 278);
    //bun shape
    fill(252, 232, 220);
    ellipse(220, 295, 200, 185);
    fill(255, 249, 242);
    ellipse(220, 275, 185, 165);
    triangle(222, 158, 134, 241, 305, 241);
    strokeWeight(2);
    line(250, 200, 250, 220);
    fill(252, 232, 220);
    ellipse(220, 195, 7, 20);
    ellipse(207, 190, 7, 20);
    ellipse(232, 190, 7, 20);
    //chopstick 2
    noStroke(0)
    fill(158, 106, 68);
    rect(100, 320, 540, 7, 20, 0, 0, 20);
    triangle(640, 315, 100, 320, 640, 328);
    //bun eyes
    fill(0, 0, 0)
    ellipse(180, 250, eyeSize);
    ellipse(270, 250, eyeSize);
    fill(255, 255, 255);
    ellipse(180, 245, eyeSize / 3);
    ellipse(270, 245, eyeSize / 3);
    //bun cheeks
    fill(255, 181, 176);
    ellipse(165, 275, cheekWidth, 10);
    ellipse(280, 275, cheekWidth, 10);
    //bun mouth
    fill(189, 100, 87);
    arc(220, 290, mouthWidth, 30, 0, PI, CHORD);
}
 
function mousePressed() {
    cheekWidth = random(25, 40);
    eyeSize = random(20, 30);
    mouthWidth = random(40, 55);
    backgroundColor = random(190, 210)
}

This was a very fun project to do, as I was able to play around with all the different variables and shapes.

Jina Lee – Project – 02

sketch

//Jina Lee
//Section E
//jinal2@andrew.cmu.edu
//Project-02

//variables
var headW = 290;
var headH = 290;
var LeftBrow = 250;
var RightBrow = 250;
var noseW = 50;
var noseH = 50;
var mouth = 80

function setup() {
    createCanvas(480, 640);
//Random Colors
    r = random(255);
    g = random(255);
    b = random(255);
}

function draw() {
    background(80, 182, 226);
    noStroke();
//body
    noStroke();
    fill(255, 153, 153);
    ellipse(100, 600, headW * 1.5, headH * 1.5);
//head
    fill("beige");
    ellipse(240, 320, headW, headH);
//nose
    fill(190, 90, 90);
    ellipse(240, 320, noseW, noseH);
//eye whites
    fill("white");
    circle(170, 280, 60);
    circle(310, 280, 60);
//pupils
    fill(r, g, b, 127);
    circle(170, 280, 40);
    circle(310, 280, 40);
//eyebrows
    strokeWeight(20);
    stroke(180, 90, 90);
    line(140, LeftBrow, 200, RightBrow);
    line(340, LeftBrow, 280, RightBrow);
//mouth
    noFill();
    strokeWeight(10);
    arc(230, 380, mouth, mouth, PI / 7, PI);
//ear
    noStroke();
    fill("beige");
    ellipse(100, 300, 30, 40);
    noStroke();
    fill("beige");
    ellipse(380, 340, 30, 40);
}

function mousePressed() {
    var d = dist(mouseX, mouseY, 400, 400);
    if (d < 400) {
        r = random(255);
        g = random(255);
        b = random(255);
        noseW = random(20, 80);
        noseH = random(70, 100);
        headW = random(260, 300);
        headH = random(260, 300);
        LeftBrow = random(200, 250);
        RightBrow = random(200, 250);
        mouth = random(80, 100);
    }
}

When I first started this project, I wasn’t sure where to start. At first, I had a hard time understanding the codes that were used to change the drawing when your mouse clicked on it. I made multiple different iterations, because I was unable to understand the formula correctly for a while. Later, I was finally able to grasp the concept and make my face. I used primitive shapes for the face so that I could focus more on the variabilities. I tried making all the parts of the face have variability. Afterwards, I tried having variability in the eye color which I went to the p5.JS reference page to understand better.

Erin Lim – Looking Outwards – 02

I was inspired by Manolo Gamboa Naon who is a generative artist from Argentina. What I admire from his work is that it appears to be a work of the 20th century, even though it was all generated by code. Manolo defies the common misconception of digital art as cold and mechanical, with his vibrant pieces and extensive attention to color coordination.

mantel – Manolo Gamboa Naon, 2018

MMGGK2 – Manolo Gamboa Naon, 2018

He pieces each geometric figure into algorithms and code to produce his art. Manolo uses Processing. Manolo’s appreciation for geometry in his work is evident in his code, centered as his main focus alongside color.  He states he is not very interested in AI or deep learning, as he is content with generative art and geometric figures. I admire how we sees failures in code as beautiful mistakes in his art. It is evident that Manolo is not concerned over accuracy, but rather the coordination of shapes and color. 

Manolo’s work: https://www.behance.net/manoloide 

Margot Gersing-Looking Outwards-02

The generative artist I was inspired by was Austrian artist LIA. I was most interested in her Mechanical Plotter Drawings. What I really like about this project is that she incorporates code, mechanical machinery and traditional mediums (mark makers) to create these generative pieces. I am really inspired by the intersection of mediums and platforms LIA utilizes to make really unique art.

No. 005- Indian ink on Hahnemühle paper 30cm x 30cm, printed area: ~18cm x ~18cm
No. 042 – Indian ink on Hahnemühle paper, 30cm x 30cm, printed area: ~20cm x ~20cm
No. 041- Indian ink on Hahnemühle paper, 30cm x 30cm, printed area: ~20cm x ~20cm

The project’s simple code is written in processing. Each piece uses the same code and then she changes the variable x each time just a bit to create the variation. She then uses the axiDraw plotter to manifest the code. To make the pieces even more variable she draws with different tools. Some use paint brushes and india ink and others use various pens and markers to which all have varying line weights and textures.

Video of the code running and a piece being made.

LIA’s website

Joanne Chui – Project 02 – Variable Face

variableface_jchui1

/*
Joanne Chui 
Section C
Project 2
*/
var chin = 2
var forehead = 2
var nose = 245
var nosetip = 250
var eyeWidth = 12
var eyeHeight = 2
var r = 10
var g = 10
var b = 10
var mood = 270
var glasses = 2

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

function draw(){
    background(213, 219, 227);
    var xpt3 = width / 2;
    var ypt3 = height / 2;
    var xpt2 = xpt3 - 60
    var xpt4 = xpt3 + 60

    //face
    noFill();
    strokeWeight(1);
    stroke(r, g, b);
    beginShape();
    curveVertex(xpt2 + forehead, 150); //pt1 
    curveVertex(xpt2, ypt3 + chin);//pt2
    curveVertex(xpt3, ypt3);//pt3
    curveVertex(xpt4, ypt3 + chin);//pt4
    curveVertex(xpt4 - forehead, 150);//pt5
    curveVertex(xpt2 + forehead, 150);//pt6
    curveVertex(xpt2, ypt3 + chin);//pt7
    curveVertex(xpt2, ypt3 + chin);//pt7
    endShape();

    //nose
    strokeWeight(2);
    beginShape();
    curveVertex(200,190);
    curveVertex(200,190);//1
    curveVertex(235, 200);//2
    curveVertex(245, nose);//3
    curveVertex(nosetip, nose + 10);//4
    curveVertex(245, nose + 20);//5
    curveVertex(245, nose + 20);
    endShape();

    //eyes
    strokeWeight(1.5);
    fill("white");
    arc(210, 220, eyeWidth, eyeHeight, PI, 0);//left
    arc(210, 220, eyeWidth, eyeHeight / 2, 0, PI);
    arc(270, 220, eyeWidth, eyeHeight, PI, 0);//right
    arc(270, 220, eyeWidth, eyeHeight / 2, 0, PI);

    //pupil
    fill(r, g, b);
    ellipse(210, 220, eyeHeight / 4, eyeHeight / 4);
    ellipse(270, 220, eyeHeight / 4, eyeHeight / 4);

    //mouth
    triangle(220, 275, 230, 285, 270, mood);
    //hair
    beginShape();
    curveVertex(xpt4 - forehead, 150);
    curveVertex(xpt2 + forehead, 150); 
    curveVertex(xpt2, ypt3 + chin);
    curveVertex(xpt2 - 10, ypt3 + chin + 10);
    curveVertex(xpt2 - 10, ypt3 + chin);
    curveVertex(xpt2 + forehead - 10, 130);
    curveVertex(xpt4 - forehead, 142);
    curveVertex(xpt4 - forehead, 150);
    endShape();

}


function mousePressed(){
    chin = random(-80, 0);
    forehead = random(-30, 30);
    nose = random(225, 240);
    nosetip = random(250, 260);
    eyeWidth = random(15, 25);
    eyeHeight = random(5, 25);
    r = random(0, 225);
    g = random(0, 225);
    b = random(0, 225);
    mood = random(260, 300);
   glasses = random(1, 3);

}

I was inspired to do more of an abstract face in order to generate more unique results, and wanted as many elements as possible to vary to create interesting combinations. I experimented with the head shape especially because I thought it would impact the way the face would appear the most.

Claire Lee – Looking Outwards 02

I was really inspired by the work of artist and programmer Jessica Rosencrantz, which explores and mimics the relationships in natural processes with computer-generated visuals. Although I couldn’t find much about the algorithm that she uses to generate her pieces, I think that nature does follow a general pattern with a bit of randomness to it, and her algorithms probably do something similar to that. Her current pieces, which she produces under a company she co-founded with Jesse-Louis Rosenberg, are pieces of jewelry or household items that simulate nature-made patterns like leaf skeletons, fingerprints, or coral.

Floraform, 2013, Jessica Rosencrantz

I really liked that she took her knowledge of biology and programming and turned it into art. Not only is her work a very interesting juxtaposition of subjects, but it is also quite beautiful.

Sammie Kim- Project – 02 – Variable Faces

sketch

// global variables
var faceWidth=225
var faceHeight=210
var earW=70
var earH=230
var innerW=30
var innerH=100
var eyeW=20
var eyeH=20
var mouthW=40
var mouthH=50

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

function draw() {
  background(253, 255, 172);
  //ear
  stroke(255);
  fill(254,170,221);
  ellipse(210,200,earW,earH);
  ellipse(285,200,earW,earH);
  fill(255);
  ellipse(210,200,innerW,innerH);
  ellipse(285,200,innerW,innerH);
  //face
  noStroke();
  fill(254,170,221);
  ellipse(width/2, height/2, faceWidth, faceHeight);
  //eyebrow
  fill(0);
  triangle(190,270,180,280,230,300);
  rect(260,290,25,10);
  //nose
  fill(0);
  ellipse(245,355,25,20);
  //eyes
  stroke(0);
  strokeWeight(4);
  fill("black");
  ellipse(210,320,eyeW,eyeH);
  ellipse(270,320,eyeW,eyeH);
  //mouth
  fill(0);
  arc(245,385,mouthW,mouthH,0,PI,CHORD);
 }

function mousePressed() {
    faceWidth=random(225,290);
    faceHeight=random(210,280);
    eyeW=random(20,40);
    eyeH=random(20,40);
    mouthW=random(40,70);
    mouthH=random(30,50);
}

I struggled initially figuring out how to correctly utilize the variables in order to differ the facial expressions. Still, this assignment was helpful for understanding the mousePressed and random function.

Claire Lee – Project – 02 – Variable Faces

variable_faces

/*Claire Lee
  15-104 Section B
  seoyounl@andrew.cmu.edu
  Project - 02 */

var backgroundRed = 195;
var backgroundGreen = 227;
var backgroundBlue = 255;
//background color variables

var drinkColorRed = 215;
var drinkColorGreen = 159;
var drinkColorBlue = 117;
var drinkColorInt = 0;
//drink color variables

var strawColorRed = 255;
var strawColorGreen = 166;
var strawColorBlue = 255;
//straw color variables

var bubbleRadius = 25;
//bubble size

var expressionControl = 400;
//mouth

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

function draw() {
    background(backgroundRed, backgroundGreen, backgroundBlue);

    noStroke();
    fill(backgroundRed - 30, backgroundGreen - 30, backgroundBlue - 30);
    rect(0, 460, 600, 140);
    //surface

    noStroke();
    fill(backgroundRed - 75, backgroundGreen - 75, backgroundBlue - 75);
    quad(200, 500, 400, 500, 425, 600, 175, 600);
    //shadow

    stroke(255);
    strokeWeight(4); 
    fill(drinkColorRed - drinkColorInt, drinkColorGreen - drinkColorInt, drinkColorBlue - drinkColorInt); 
    arc(300, 500, 200, 50, 0, PI, OPEN);
    //cup base

    noStroke();
    fill(drinkColorRed - drinkColorInt, drinkColorGreen - drinkColorInt, drinkColorBlue - drinkColorInt);
    quad(200, 500, 185, 320, 415, 320, 400, 500); 
    //drink "body"

    noStroke();
    fill(drinkColorRed - drinkColorInt - 30, drinkColorGreen - drinkColorInt - 30, drinkColorBlue - drinkColorInt - 30);
    ellipse(300, 320, 230, 50);
    //drink "top"

    stroke(255);
    strokeWeight(4);
    noFill();
    arc(300, 200, 250, 50, PI, 0, OPEN);
    //top border of cup rim

    noStroke();
    fill(strawColorRed, strawColorGreen, strawColorBlue);
    rect(285, 150, 30, 170); 
    //straw

    noStroke();
    fill(strawColorRed, strawColorGreen, strawColorBlue);
    arc(300, 320, 30, 10, 0, PI, OPEN);
    //straw base 

    noStroke();
    fill(strawColorRed - 30, strawColorGreen - 30, strawColorBlue - 30);
    ellipse(300, 150, 30, 10);
    //straw hole 

    stroke(255);
    strokeWeight(4);
    line(200, 500, 175, 200); 
    //left border of cup

    stroke(255);
    strokeWeight(4);
    line(400, 500, 425, 200);
    //right border of cup

    stroke(255);
    strokeWeight(4);
    noFill();
    arc(300, 200, 250, 50, 0, PI, OPEN);
    //bottom border of cup rim

    noStroke();
    fill(0);
    ellipse(250, 380, 15);
    //left eye

    noStroke();
    fill(0);
    ellipse(350, 380, 15);
    //right eye

    stroke(0);
    strokeWeight(2);
    point(285, 390);
    point(300, expressionControl); 
    point(315, 390);
    strokeWeight(2);

    noFill();
    beginShape();
    curveVertex(285, 390);
    curveVertex(285, 390);
    curveVertex(300, expressionControl);
    curveVertex(315, 390);
    curveVertex(315, 390);
    endShape();
    //mouth

    noStroke();
    fill(0);
    ellipse(225, 493, bubbleRadius);
    ellipse(255, 501, bubbleRadius);
    ellipse(285, 505, bubbleRadius);
    ellipse(315, 505, bubbleRadius);
    ellipse(345, 501, bubbleRadius);
    ellipse(375, 493, bubbleRadius);
    ellipse(218, 465, bubbleRadius);
    ellipse(250, 473, bubbleRadius);
    ellipse(283, 477, bubbleRadius);
    ellipse(317, 477, bubbleRadius);
    ellipse(350, 473, bubbleRadius);
    ellipse(380, 465, bubbleRadius);
    //bubbles

}


function mousePressed() {
    backgroundRed = random(150, 255);
    backgroundGreen = random(150, 255);
    backgroundBlue = random(150, 255);
    //background color variations

    drinkColorInt = random(0,100);
    //drink color intensity

    strawColorBlue = random(0,255);
    //straw color variations

    bubbleRadius = random(17,27);
    //bubble size variations

    expressionControl = random(380,400);
    //mouth variations

}

This project was a really fun way to experiment with changing shapes. I enjoyed testing some new functions as well. I struggled a bit with not compromising the aesthetic integrity of the piece while still allowing there to be perceptible variations in color and size, but I’m happy with how it turned out.

Sean Meng – Looking Outwards – 2

Chang Liu’s “Central Park, face to a tree.”

Artist Chang Liu’s Wild Growth, is a Processing application that generates abstract artworks from data gathered from live videos. She employs a live camera feed that “sees” colors when positioned toward natural environments, pictures, or human subjects. In turn, her software “paints” the colors into quick-generated portraits that blossom out of paint drips, splatters, and brush strokes. What I admire about this project is it embraces the uncertainty of robotic generated image and give it the control over the the painting or artwork that is produced. And by capturing the characteristics of these drawings, the artist give new meanings to the computation generated images and transfer them into the actual substance such as “the trees in Central park” or “snares”. 

Sean Meng – Project 02 – Variable face

hmeng-project 2

//Sean(Han) Meng
//Section C
//hmeng@andrew.cmu.edu
//Project-02-Variables-Face

var hairColor = 20;
var hairShape = 10;
var glassThickness = 3; 
var mouthSize = 2

function setup() {
    createCanvas(480, 480);
    background(240);
 
}

function draw() {   
    background(240);

 //Left Ear
    stroke(240,224,179);
    fill(240,224,179);
    strokeWeight(1);
    strokeJoin(ROUND);
    beginShape();
    vertex(180, 240);
    vertex(167, 240);
    vertex(160, 260);
    vertex(180, 290);
    vertex(195, 300);
    vertex(195, 260);
    endShape();

//Right Ear
    stroke(240,224,179);
    fill(240,224,179);
    strokeWeight(1);
    strokeJoin(ROUND);
    beginShape();
    vertex(340, 240);
    vertex(344, 240);
    vertex(350, 260);
    vertex(330, 290);
    vertex(325, 300);
    vertex(195, 260);
    endShape();

 //Face
    stroke(255,244,189);
    fill(255,244,189);
    strokeWeight(3);
    strokeJoin(ROUND);
    beginShape();
    vertex(195, 270); 
    vertex(195, 310);  
    vertex(230, 335);  
    vertex(247, 342); 
    vertex(270, 345);
    vertex(317, 298); 
    vertex(317, 225);   
    vertex(195, 225); 
    endShape();

 //The color of hair changes in different shades of blue randomly everytime mouse clicks
    stroke(hairColor, hairColor * 2, hairColor * 3);
    fill(hairColor, hairColor * 2, hairColor * 3);
    strokeWeight(4);
    strokeJoin(ROUND);
    beginShape();
    vertex(182.5, 262.5);
    vertex(167.5, 220);

//The silhouette of hair expands randomly everytime mouse clicks
    vertex(180 - hairShape * 2, 150 + hairShape);
    vertex(250, 127.5 - hairShape * 2);
    vertex(317.5 + hairShape / 2, 150 - hairShape / 2);
    vertex(340 + hairShape * 2, 202.5 - hairShape * 2);
    vertex(328, 263.25);
    vertex(322, 265.25);
    vertex(317.5, 225);
    vertex(198, 231);
    vertex(280, 225);
    vertex(255, 235);
    vertex(240, 230);
    vertex(230, 235);
    vertex(197, 230);
    vertex(195, 270);
    vertex(182.5, 262.5);
    endShape();

//The thickness of the glasses frame varies everytime mouse clicks
    stroke(0);
    strokeWeight(3);
    fill(255);
    strokeWeight(glassThickness);
    arc(225, 265, 42, 37, 0, PI + PI);
    fill(255);
    arc(285, 265, 42, 37, 0, PI + PI);
    stroke(150);
    strokeWeight(3);
    curve(246, 263, 246, 260, 260, 260, 282, 263);
    stroke(0);
    strokeWeight(3);
    line(195, 260, 205, 260);
    line(305, 260, 319, 260);

//Nose
    strokeWeight(2);
    line(255, 270, 250, 300);
    line(250, 300, 255, 300);

//The size of the mouth increases when mouse clicks
    noStroke();
    fill(240,214,159);
    triangle(240 - mouthSize, 325, 273 + mouthSize, 325, 250, 320 - mouthSize);
}


function mousePressed(){
    hairColor = random(0, 80);
    hairShape = random(5, 30);
    glassThickness = random(3, 7);
    mouthSize = random(2, 10);
}

In this project, I explored with interactive component “mousePressed” to assign random variables such as color or shape to my drawings. In this drawing, I was inspired by the character in Rick and Morty, so the hair varies in shades of blue and expand outwards.