Kevin Thies – Variable Face

sketch

//Kevin Thies
//Section C
//kthies@andrew.cmu.edu
//Project-02

// Core Variables
var headHeight = 200; // head height and width
var headWidth = 200;
var noseHeight = headHeight * 2.5; // relates proportion of head to  nose
var noseAngle = -4;

var skinR = 221; // color values for skin and background
var skinG = 203;
var skinB = 161;

var backR = 25; // background color offset from skin color values
var backG = 25; // additionally used to offset eye color
var backB = 25; // so the colors all harmonize

var eyeOffset = 50; // setback from head width
var eyeWidth = headWidth/2 - eyeOffset; // eye position
var eyeHeight = eyeWidth * headHeight / headWidth; // use head proportions for eyes
var eyeTop = 3;
var eyeBottom = 3.5;
var pupilRatio = .8; // ratio of eye white to black
var irisRatio = 1.4; // ratio of eye black to color


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

function draw() {

    // Background that
    background(skinR + backR, skinG + backG, skinB + backB);

    // Head Shape
        // Nose, sometimes it looks more like a nose and that's ok
        noStroke();
        fill(skinR, skinG, skinB);
        arc(width/2, height/3, headWidth, noseHeight, noseAngle, 0, CHORD);

        // Hide the top half of nose generated
        fill(skinR + backR, skinG + backG, skinB + backB);
        rect(0,0, width, height/3);

        // Head's main ellipse
        fill(skinR, skinG, skinB);
        ellipse(width/2, height/3, headWidth, headHeight);

    // Nose

    // Eyes
        // Pupil
        fill(0);
        arc(width/2 - headWidth/2 + eyeOffset, height/3, eyeWidth,
            eyeHeight, eyeTop, eyeBottom, PIE);
        // Iris
        fill(skinR - backR, skinG - backG, skinB - backB);
        arc(width/2 - headWidth/2 + eyeOffset, height/3, eyeWidth * pupilRatio * irisRatio,
            eyeHeight * pupilRatio * irisRatio, eyeTop, eyeBottom, PIE);
        // White
        fill(255);
        arc(width/2 - headWidth/2 + eyeOffset, height/3, eyeWidth * pupilRatio,
            eyeHeight * pupilRatio, eyeTop, eyeBottom, PIE);


}

function mousePressed() {

    //Reshuffle the head dimensions
    headWidth = random(120, 200);
    headHeight = random(100, 160);
    noseHeight = headHeight * random(2, 3);
    noseAngle = -random(3.66, 4); //radian angle of  arc

    //Change eye color and Shape
    eyeOffset = random(45, 60);
    eyeTop = random(2.61, 3.14); // 5/6 Pi to Pi
    eyeBottom = random(3.14, 3.66); //Pi to 7/6 pi
    pupilRatio = random(.75, .5);
    irisRatio = random(1.2, 1.3);

    // Constrain face color to less saturated, darker values
    skinR = random(140, 225);
    skinG = random(143, 225);
    skinB = random(140, 184);

    // Reshuffle background color offset
    backR = random(-50, 25);
    backG = random(-50, 25);
    backB = random(-50, 25);
}

There was a lot of math involved in this one. If I could go back in time, I think bezier curves would’ve been a better fit than arcs simply based on the parameters they use. At the same time, since I used arcs, the end product morphed into what it is now instead of more ‘realistic’ shapes.

Grasshopper and Generative Art

John Locke’s emoticon-constructed skull

If you look closely, this skull is made up of little faces. Some are happy, exposing the reds of their mouths. Others are unhappy, pursing their lips to be mostly yellow circles. What I admire is that each of these faces has individual parameters for their mouth and eyes based on how happy they are. Take a greyscale image and remap value to happiness and you get.. a skull made up of faces.

Parametric controls for each face

These were generated in Grasshopper, a plugin for the CAD and Surface Modeling program Rhinoceros, and that short summary above was the workflow. Since Grasshopper is a visual programming language, like parts of the Unreal Engine, you just plug actors into actors.

The Grasshopper program

This specific project was made by architect  John Locke March 2013, and his blog post was titled “=)”. What I admire is that the faces are very expressive with very little, and what’s there is well-articulated. The eyes and mouth aren’t pinned in place, they shift. It also shows a less serious side of the artist. A lot of his work relates to architecture, and this is a fun side project.

Kevin Thies’s Project 1 Face

Kevin’s Face

// Kevin Thies
// Section C
// kthies@andrew.cmu.edu
// Project-01
function setup() {
  // put setup code here
  createCanvas(500,500);
}

function draw() {
  // put drawing code here
  background (102,140,93);
  // hat
    // all white back part
  stroke(255);
  fill(255);
  ellipse(250,100,300,150);
    // little bit of center grey
  fill(75);
  ellipse(250,100,250,150);
    //hiding the bottom half of the previous ones
  fill(102,140,93);
  noStroke();
  rect(10,100,490,300);
    //rounding out the bottom
  stroke(255);
  fill(255);
  ellipse(250,100,300,10);
    // hat lip
      // Underside
  stroke(255);
  fill(255);
  ellipse(250,110,280,50);
      // Lines
  stroke(75);
  strokeWeight(6);
  fill(0);
  quad(200,90,150,125);
  quad(175,90,125,122);
      // outline
  stroke(255);
  strokeWeight(6);
  fill(0,0,0,0);
  ellipse(250,110,280,50);

  // glasses
  stroke(120);
  strokeWeight(6);
  fill(0,0,0,0);
  rect(135,160,100,50,10,10);
  rect(265,160,100,50,10,10);
  rect(235,180,30,1);
  //beard
  noStroke();
  fill(130,103,64);
      // sideburns
  rect(95,180,15,100);
  rect(390,180,15,100);
      // chin bit
  quad(95,260,95,295,180,315,180,280);
  quad(405,260,405,295,320,315,320,280);
  quad(250,315,250,330,180,315,180,290);
  quad(250,315,250,330,320,315,320,290);
      // mustache
  quad(250,260,250,275,200,290,200,275);
  quad(250,260,250,275,300,290,300,275);

}

When I think of myself, I usually think about my glasses, my hair, and my hat. I really wanted to capture those as much as I could, giving attention to the fillet of the frames and the way the beard and mustache don’t quite connect. The hat’s weird but I wasn’t sure of a better way to do it. All in all, I like this stylized me.

Kevin Thies – Looking Outwards – 01

A demonstration showcasing varying positions

Around early April, I was browsing Imgur when  I saw a really cool project. This user had posted a work-in-progress project geared towards players of Dungeons & Dragons, or other tabletop games. The creators were two guys, Quentin and Dan, from Elderwood Academy. The project itself utilizes tags or tokens that an app would be able to recognize and determine its orientation, and be able to overlay a digital model over the camera output, similar to Pokemon Go.

The project is a pretty straightforward machine vision example, and there are a few premade augmented reality toolkits. A very similar project used ARToolkit for Unity, although that had more built-in functionality, acting more as a game than just a viewer. The project was partially inspired by the Microsoft Holodeck, as well as the common use of figurines for tabletop D&D gameplay and the buzz around machine vision and AR games.

Personally, I admire it as a hobby project. Before going to Kickstarter, the creators put two months of work into it as a hobby, and while the thing isn’t the most polished, it demonstrates a concept product and use. One cool possibility I could see coming out of this is that it costs money to buy tokens, and if there were some sort of open-source AR model app developed, it could be used to really enhance a simple tabletop game without having to spend a lot of money on figures.

A dragon rotating with the card

They have an old Imgur link here, as well as an unsuccessful Kickstarter page here.