saral-variableface

//variables for face
var eyeSize = 35;
var pupilSize = 10;
var hairLength = 250;
var hairWidth = 100;
var browY = 120
var browLength = 25;
var browWidth = 50;

    //create the canvas
function setup() {
    createCanvas(640, 480);
}
	//build the basic face
function draw() {
    background(200, 50, 50);
    //hair
    rectMode(CORNER);
    noStroke();
    fill(240);
    rect(width / 4, height / 5, hairWidth,  hairLength);
    fill(5);
    rect(width / 4, height / 5, hairWidth / 2, hairLength);
    //mouth
    fill(10);
    strokeWeight(5);
    rectMode(CENTER);
    rect(width / 2, 275, 150, 35);
    //eyes
    var eyeLX = (width / 4) + hairWidth
    var eyeRX = eyeLX + hairWidth
    fill(5);
    ellipse(eyeLX, height / 3, eyeSize, eyeSize);
    ellipse(eyeRX, height / 3, eyeSize, eyeSize);
    //pupils
    fill(255);
    ellipse(eyeLX, height / 3, pupilSize, pupilSize);
    ellipse(eyeRX, height / 3, pupilSize, pupilSize);
    //brows
    stroke(5)
    strokeWeight(15)
    line(240, browY, 280, browY);
  	line(340, browY, 380, browY); 
  	}

    //create mouse functions: when the mouse is clicked, 
    //the size or position of these elements change value.
function mousePressed() {
     eyeSize = random(20, 70);
     browY = random(140, 90);
     pupilSize = random(3, 30);
}

I created a number of variables as I built this face, inspired by modular 1960s design styles. After building the face, I spent a while experimenting with randomizing the size and position of all the elements and chose the three (eye size, pupil size, and eyebrow position) that I found most strongly affected the expressive qualities of the face.

sara-selfportrait

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

function draw() {
	//skin
 fill(247,202,200);
 noStroke()
ellipse(375,400,800,800);
	//eyes
 strokeWeight(12);
 stroke(60,150,40);
 fill(20);
ellipse(150,250,50,50);
ellipse(450,150,50,50);
	//mouth
 strokeWeight(70);
 stroke(200,40,100);
 fill(20);
ellipse(500,500,600,400);
	//hair
 strokeWeight(220);
 stroke(144,68,180)
line(0,0,600,0);
 strokeWeight(240)
line(0,0,0,200);
 strokeWeight(120)
line(0,0,0,400)
	//curls
 strokeWeight(7);
 stroke(205,67,220);
 fill(144,68,180)
bezier(0,80,600,1,1,300,580,100);
bezier(0,70,480,10,8,200,590,85);
bezier(0,90,450,5,3,210,600,50);
}

I began this process with the close-up eyes and open mouth at an angle, as that was basically recognizable as a face, and reflects my personality. Using that image as a jumping off point, I added details including color, stroke weights, and the purple curves to represent my hair. I like that the image feels active and in motion.

Yesterday Tomorrow is an algorithmic theatre piece created and directed by Annie Dorsen. The center of the piece is a computer algorithm that, over the course of an hour, translates The Beatles’ “Yesterday” into “Tomorrow” from the musical Annie!. The transition is randomized by the algorithm note by note, projected live onstage as sheet music. In addition, computer algorithms are employed to randomize changes in lighting throughout the piece. Three actor/singers sightread the sheet music for the 1-hour+ duration of the piece, and also follow randomized cues to change their physical position onstage. The randomized algorithmic elements ensure that the piece is never the same twice.

Yesterday Tomorrow was developed over several years, initiated by Annie Dorsen, in collaboration with a full team of programmers, performers, designers, technicians, and managers. Her background is unique as a theatre artist who innovates in the field by incorporating programming and algorithms into an archaic art form. Her work exposes the ways our everyday lives are controlled by algorithms, even as those algorithms are largely invisible to us on a day-to-day level.