John Legelis Project 02 Variable Face

Face

//John Legelis
//Section D 3:00-4:30
//jlegelis@andrew.cmu.edu
//Project-02 Variable Faces; Face Variables

function setup() {
    createCanvas(480, 640);
    background(0);
  
}
var centerX
centerX = 480/2

var centerY
centerY = 640/2


function mousePressed() {
    loop();
    noLoop();
}

function draw() {
    
    var BcolorR
    BcolorR = random(126,240)
    var BcolorG
    BcolorG = random(126,240)
    var BcolorB
    BcolorB = random(126,240)

    background(BcolorR,BcolorG,BcolorB);
    
    
    // randomize face dimensions
    var faceW;
    faceW = random(0+100,480-100);

    var faceH;
    faceH = random(0+50,640-50);

    var max_nose_gap
    max_nose_gap = faceW/7
    var max_eye_size
    max_eye_size = faceW/2 - (max_nose_gap)

    ellipseMode(CENTER);
    var FcolorR
    FcolorR = random(126,240)
    var FcolorG
    FcolorG = random(126,240)
    var FcolorB
    FcolorB = random(126,240)
    fill(FcolorR,FcolorG,FcolorB);
   
    //Draw Face
    ellipse(centerX, centerY, faceW, faceH);


    // randomize eye width in relation to face dimensions and not larger than largest possible
    var eyeW;
    eyeW = min((random(faceW / 6, faceW/2)),(max_eye_size));

    // randomize eye height in relation to face dimensions
    var eyeH;
    eyeH = random(faceH/5, faceH/9);

    // randomize eye placement within left side of place and not overlapping eye width with nose or edge of face
    var pY;
    pY = centerY;
    
    //calculate leftmost left pupil X value   
    var lpXmin
    lpXmin = centerX - faceW/2 + eyeW/2

    //calulate rightmost left pupil X value
    var lpXmax
    lpXmax = centerX - eyeW/2 - (max_nose_gap/2)

    var lpX;
    lpX = random(lpXmin, lpXmax)

    // draw left eye
    fill(255)
    ellipse(lpX, pY, eyeW, eyeH)

    // draw left pupil
    ellipseMode(CENTER);
    fill(0);
    ellipse(lpX, pY, eyeW/3, eyeH);

    //figure out coordinate of right pupil
    
    var centerX_to_lpX
    centerX_to_lpX = centerX - lpX

    var rpX
    rpX = centerX + centerX_to_lpX

    //draw right eye
    fill(255)
    ellipse(rpX, pY, eyeW, eyeH)

    //draw right pupil
    fill(0)
    ellipse(rpX, pY, eyeW/3, eyeH)





    //NOSE----------------------------------------------------------------------

    //nose bridge -----------

    // nose bridge top y
    var nbtY
    nbtY = centerY

    // random nose bottom y
    var nbY
    nbY = random(centerY+faceH/6, centerY+faceH/3)

    //random nose bridge width 
    var nbW
    nbW = min(max_nose_gap, faceW/10)
    print("noseWidth =" + nbW)

    //nose bridge left x
    var nblX
    nblX = centerX - nbW/2

    //nose bridge right x
    var nbrX
    nbrX = nblX + nbW

    //draw nose bridge rectangle
    fill(FcolorR,FcolorG,FcolorB)
    rectMode(CORNERS)
    rect(nblX,nbtY, nbrX,nbY)

    //nose bulb------------
    var bulbW
    bulbW = random(faceW/6,faceW/8)

    var bulbH
    bulbH = random(faceH/10, faceH/15)

    var bulbtX
    bulbtX = centerX - bulbW/2

    var bulbtY
    bulbtY = nbY - bulbH

    var bulbbX
    bulbbX = centerX + bulbW/2

    var bulbbY
    bulbbY = nbY

    rect(bulbtX, bulbtY, bulbbX, bulbbY)



//MOUTH------------------------------------------------------------------
    var mW
    mW = random(faceW/3, faceW/4)

    var mH
    mH = random(faceH/7, faceH/10)

    var mcX
    mcX = centerX

    var mcY
    mcY = ((nbY+ (centerY+faceH/2))/2)

    rectMode(CENTER)
    fill(FcolorR+40, FcolorG+40, FcolorB+40)
    rect(mcX, mcY, mW, mH)

    line(mcX-mW/2, mcY, mcX+mW/2, mcY)


    noLoop();

}

Drafting and Calculations in Sketchbook

This project demanded the use of variables because all of the facial variants were based on ratios involving the facial dimensions. These dimensions change with every click so the values for many dimensions of the face are derived from there.

JohnLegelis – Looking Outwards – 2

Looking Outwards 02: Generative Art

MECHANICAL PLOTTER DRAWINGS  MACHINE ZEN

BY LIA

Machine Zen by LIA is a generative art project that implements the precision a robotic arm, and the infinite variability a paint brush. This project beautifully combines the deterministic nature of computer generated art and the individual personality of a brushstroke to create art that looks human, a rarity amongst computer generated art. The algorithm that created this series of works likely involved a simple program that instructs the robotic arm (in this case an AxiDraw mechanical plotter) to move in a circle while slowly raising the brush upwards. Many of LIA’s works, similar to this one, are not inherently complex in their synthesis. Instead the mark of her work comes from the highly polished final product whose elegance is derived from the simplicity of the design. I believe LIA could build upon the minimal style she’s already perfected to create more complex pieces that extend beyond “proof of concept” or first-word art.

Demonstration of Mechanical Zen Created by Robotic Arm Holding Brush

John Legelis p5.js Self Portrait

JJ-Face-Project

function setup() {
    createCanvas(600, 600);
    background(70,150,0);
}


function draw() {   
    ellipseMode(CENTER);
    noStroke();
    //face ellipse
    fill(198,156,109);
    ellipse(300,300,360,480);

    //cover bottom half of face in green
    fill(70,150,0);
    quad(120,400, 120,600, 480,600, 480,400);

    //jaw trapazoid
    fill(198,156,109);
    quad(136,400, 464,400, 360,520, 240,520);

    //ears left the right
    ellipse(110,300, 40,120);
    ellipse(490,300, 40,120);

    //eye whites left then right
    fill(255,255,255);
    arc(210,300, 70,50, PI, 0, OPEN);
    arc(390,300, 70,50, PI, 0, OPEN);

    //irises left then right
    fill(0,118,163);
    ellipse(210,288,24,24);
    ellipse(390,288,24,24);

    //pupils left then rigt
    fill(0,0,0);
    ellipse(210,288,12,12);
    ellipse(390,288,12,12);

    //lips
    fill(212,62,92)
    beginShape();
    vertex(290,450);
    vertex(300,455);
    vertex(310,450);
    vertex(345,460);
    vertex(315,470);
    vertex(285,470);
    vertex(255,460);


    endShape(CLOSE);

    //nosebridge lines left then right
    stroke(0);
    strokeWeight(1)
    line(290,300,288,400);
    line(310,300,312,400);
    //nose bubbles
    noFill()
    ellipse(285,412,24,24);
    ellipse(315,412,24,24);
    ellipse(300,416,15,15);
    //blockthecircles
    fill(198,156,109);
    noStroke();
    beginShape();
    vertex(288,400);
    vertex(312,400);
    vertex(312,420);
    vertex(288,420);
    endShape(CLOSE);

    //eyebrows left then right
    fill(208,181,55);
    rectMode(CORNERS);
    rect(245,270,175,255);
    rect(355,270,425,255);

    //hair
    beginShape()
    vertex(120,200);
    vertex(130,100);
    vertex(160,60);
    vertex(400,60);
    vertex(420,120);
    vertex(430,70);
    vertex(440,120);
    vertex(455,80);
    vertex(454,120);
    vertex(470,200);
    endShape(CLOSE);
}

As I created this portrait, I felt my intuition increasing with p5.js.  The p5.js.org website was very helpful for discovering new tools that would help with novel shapes. The hair was especially difficult to create.

 

John Legelis Looking Outwards 1

Topic: Some Technological Art or Design that has Inspired You

Google Earth is one of the most powerful tools made possible by modern technology and with the internet has been made accessible to all. In order to complete this process an enormous amount of data needed to be processed and organized which required a team of nearly 500 people to implement at the scale it functions today. Because Google Earth is a relatively small part of the enormous Google enterprise, the organizational structure for this project was corporate and hierarchical. The Google Earth project was the first of its kind/scale and required novel software ideas to implement effectively. The idea for this project likely developed as an extension of one of the oldest visual data systems, physical maps. Google Earth is the current state of the art in cartography especially when it comes to coverage, as nearly nowhere is left unmapped. This project has been the foundation for many offshoots such as 3D photo spheres, street view, virtual reality voyages, and artists who use the natural beauty of the earth captured by satellites as part of their work.

Google Earth: Representation of the globe viewed from the north pole

I admire this project because it is a wonderfully useful and powerful tool that capitalizes on opportunities only made possible with computers. I admire Google Earth because it is an example of a seamless transfer from paper maps to technology without a barrier of entry and it creates the epitome of what maps can be.

Video demonstrating Google Earth being used in conjunction with virtual reality

 

Written by: JJ Legelis