Author: atraylor

atraylor – Looking Outwards 02 – Section B

I spent a long time looking through different creative coding pieces and settled on Hydra a generative shadow maker, by Nicolas Barradeau. This piece takes silhouettes of animals, people, and objects and splices them together based on cuts the user makes. This results in blob-like hydra creatures and very satisfying sounds that accompany the creature creation.

I admire that this project is simple and yet is still fascinating. Taking pieces of objects that are recognizable, simplifying them and allowing the user to make decisions, makes this piece accessible, and yet it’s frustrating and exciting when you don’t get the result you expected. This piece allows the viewer to use their imagination similar to looking for shapes in the clouds or watching shadow puppets on the wall.

Atraylor – Project 02 – Variable Faces

When making this project, I was thinking of all the proportional measurements I use to make human faces, especially the relationship between the eyes and the rest of the face. Starting out, I noticed that my random faces were just scaling up and down because the ratios were all established on one variable: the eye size. The end result is more interesting and resembles some of the steps I would make to draw a face.

sketch


//Allison Traylor, atraylor,
//section B, Project 02


var eyeSize = 30; //eye size
var eyeSpaceL = 0.25; //eye space left
var eyeSpaceR = 0.25; //eye space right
var faceWidth = (eyeSize * 5); //face oval width (relative to eye size)
var faceHeight = 210; // face oval height
var craniumWidth = 150;
var craniumHeight = 150;
var mouthWidth = 25; // corner locations for mouth

var colorL = (200,200,200,200); // color of left eye
var colorR = (200,200,200,200); // color of right eye
var mColor = (200,200,200,200); // color of mouth


function setup() {
    createCanvas(480, 640);
    background(220);

}


function draw() {

    background(222);
    var noiseVal = random(0.001, .6); // flickering lines
    //chin height is proportional to faceHeight, tring to make it right below the mouth
    var chinHeight =  height/2 + faceHeight/4 + faceHeight/8 + faceHeight/16;

    // Cranium
    noFill();
    ellipse(width/2, height/2 - eyeSize, craniumWidth, craniumHeight);

    //bounding box
    push();
    noFill();
    stroke(noiseVal * 255); // lines flicker
    rect(width/2 - craniumWidth/2, height/2 - eyeSize - craniumHeight/2, craniumWidth, craniumHeight);
    pop();

    //face ellipse
    noFill();
    ellipse(width/2, height/2, faceWidth, faceHeight);


    // nose line proportional to eyes
    line(width/2 - eyeSize/2, height/2 + faceHeight/4,
         width/2 + eyeSize/2, height/2 + faceHeight/4);

    //eyes
    fill(colorL);
    ellipse((width/2) - faceWidth*eyeSpaceL, height/2, eyeSize, eyeSize); // Left eye (to viewer)
    fill(colorR);
    ellipse((width/2) + faceWidth*eyeSpaceR, height/2, eyeSize, eyeSize); // right eye

    //eye line
    line(width/2 - faceWidth/2, height/2, width/2 + faceWidth/2, height/2);


    // mouth
    fill(mColor);
    //I'm trying to isolate the mouth in a certain area between nose and chin
    triangle((width/2) - mouthWidth, height/2 + faceHeight/4 + faceHeight/8,
        width/2, height/2 + faceHeight/4 + faceHeight/12,
        (width/2) + mouthWidth,  height/2 + faceHeight/4 + faceHeight/8);

    //chin
    push();
    noFill();
    stroke(noiseVal * 255);
    ellipse(width/2, chinHeight, mouthWidth, mouthWidth);
    pop();

    // plumbline
    line(width/2, height/4, width/2, (height - height/4));


}

function mousePressed(){

    // generating random values
    eyeSize = random(20, 50);
    eyeSpaceR = random(0.20, 0.30);
    eyeSpaceL = random(0.20, 0.30);
    faceHeight = random(190, 250);
    craniumWidth = random(150, 200);
    craniumHeight = random(150, 200);
    mouthWidth = random(10, 30);

    var from = color(200,200,200,200); //interpolate from this color
    var to = color(0,0,0,200); // to this color

    // random numbers to be used in lerpColor
    var lerpNumber = random(0,1);
    var lerpNumber2 = random(0,1);
    var lerpNumber3 = random(0,1);

    mColor = lerpColor(from, to, lerpNumber); // random shade for mouth

    colorR = lerpColor(from, to, lerpNumber2); //random shade for right eye
    colorL = lerpColor(from, to, lerpNumber3); // random shade for left eye
}

atraylor – Project 01 – Face

I really enjoyed this project. Changing primitives to recognizable forms is nothing new to me, but the removal of a dimension and the disjunction between transforms, functions, and immediate results through a line of code, was a curve ball.  I just kept the reference material close by, mocked up a sketch in Photoshop, and did my best not to nitpick.

I was having trouble with the rotate function particularly. You can see in my code that in the beginning I had no idea how it worked and just took what it gave me and tweaked the location with a translate function. Later (with the spinning things) I finally found a detailed reference on rotation.

(Oh, and next time I’ll make it a size that fits so it won’t get occluded by the side menu)

AOT01

// atraylor Section B



function setup() {

    createCanvas(600,600);
    background(255, 255, 255, );
    frameRate(60);
  }



function draw() {

  background(245);

translate(-25,0);

//hair
  fill(0, 255, 0, 200);
  noStroke();
  ellipse(179, 277, 255, 255);

  fill(0, 255, 0, 150);
  noStroke();
  ellipse(107, 161, 109, 99);

//neck

  push();
  fill(255, 0, 0, 200);
  noStroke();
  translate(220,-20);
  rotate(radians(28.16));
  rect(119, 382, 103, 107);
  pop();

//shoulder

  fill(255, 0, 0, 230);
  noStroke();
  triangle(80, 464, 181, 484, 206, 593);


//face

  fill(255, 0, 0, 200);
  noStroke();
  triangle(105, 334, 318, 247, 265, 486);


//nose
  fill(128, 128, 255, 225);
  noStroke();
  translate(-1,0);
  triangle(281,414, 298, 351, 312, 395);

//eye

  fill(0, 0, 255, 200);
  noStroke();
  triangle(251, 349, 284, 338, 278, 360);

//glasses

  stroke(0, 0, 255, 230);
  strokeWeight(10);
  line(307, 326, 293, 387);

  stroke(0, 0, 255, 200);
  strokeWeight(5);
  line(117, 316, 302, 348);

  //ear
  fill(128, 128, 255, 230);
  noStroke();
  triangle(120, 321, 148, 314, 136, 370);


  //Arm

    stroke(255, 0, 0, 255);
    strokeWeight(45);
    line(371, 605, 429, 509);

    fill(255,0,0,255);
    noStroke();
    translate(8,0);
    triangle(426, 544, 405, 600, 374, 600);

//

    push(); //square
    translate(442, 347);
    rotate(radians(frameCount));
    fill(255, 0, 0, 200);
    noStroke();
    rect(0, 0, 50, 50);
    pop();


    push(); //triangle
    translate(483, 378);
    rotate(radians( -(frameCount * 1.5)));
    fill(0, 0, 255, 200);
    noStroke();
    triangle(0, 0, 53, 17, 31, 53);
    pop();


    push(); //ellipse
    translate(533, 360);
    rotate(radians(frameCount * 1.2));
    fill(0, 255, 0, 200);
    noStroke();
    ellipse(0, 0, 43, 83);
    pop();


    fill(0, 128, 255, 80); //glow
    noStroke();
    ellipse(483, 378, 250, 250);

//

    push();
    translate(-3, 0); //translate whole hand

    push(); //palm
    fill(255,0,0,255);
    noStroke();
    rotate(radians(-16.22));
    translate(-150, 100)
    rect(404, 479, 91, 60);
    pop();

    stroke(255, 0, 0, 255); //thumb
    strokeWeight(25);
    line(466, 491, 504, 441);

    stroke(255, 0, 0, 255); //index
    strokeWeight(25);
    line(478, 509, 545, 496);

    fill(255,0,0,255);
    noStroke();
    translate(8,0);
    triangle(489, 485, 478, 509, 545, 498);

    stroke(255, 0, 0, 255);
    strokeWeight(20);
    line(545, 495, 562, 460);

    stroke(255, 0, 0, 255);
    strokeWeight(20);
    line(562, 460, 571, 429);

    stroke(255, 0, 0, 100); //middle
    strokeWeight(20);
    line(488, 496, 533, 480);

    stroke(255, 0, 0, 100);
    strokeWeight(20);
    line(533, 480, 555, 462);

    stroke(255, 0, 0, 100);
    strokeWeight(20);
    line(555, 462, 548, 430);

    stroke(255, 0, 0, 100);
    strokeWeight(20);
    line(538, 476, 536, 452);
    pop();



}

 

 

atraylor – Looking Outwards – 01

If you like games you’ve probably heard of Firewatch, an award winning narrative exploration game (a walking simulator to some) made by Campo Santo. It is heavily narrative based; the player plays as a Henry, a fire lookout in the Shoshone national forest. The game highlights feelings of isolation and human emotional connection through Henry’s/your conversations with his/your supervisor Delilah. These conversations happen as you traverse the open world, and are facilitated by a hand held radio. Other than disembodied chatting, you are completely alone.

An example of the environment and the first person character, Henry.

Firewatch was made by ten people using Unity 4.5 as a game engine. There were several challenges that they faced being a relatively large team for the functions unity provided at the time.  Two challenges they faced were making a contiguous open world and having multiple people work on the scene at the same time. They implemented door and portal scene streaming using trigger volumes to load and unload assets when the player enters a certain area and used plugins that allowed the separation and compilation of the scene based on different disciplines (for instance, one person could make a scene of trees and the other could edit post processing, and the plugin would combine the two without destroying the changes of the other person’s section.)  This, on top of custom tree shaders, custom atmospheric fog that changes color over distance, and their custom made skybox generator, challenges the functional and artistic capabilities of Unity in its generic form.

An example of Firewatch’s stylized fog.

Artistically, Firewatch focuses on strong colors and silhouettes, realism and style, to convince the player and immerse them in the narrative.