rnayyar Project 02 variable faces


// Rhea Nayyar
// rnayyar@andrew.cmu.edu
// Section C
// Variable Face (02-C)

// W -> Width
// H -> Height
// Vert -> Vertical/Height
// Acr -> Across/Width

var headVert = 200;
var headAcr = 165;
var noseW = 28;
var noseH = 55;
var eyesW = 40;
var eyesH = 25;
var toplipW = 25;
var bottomlipW = 40;
var toplipH = 15;
var bottomlipH = 20;
var pupil = 6;
var iris = 20;
var eyebrowH = 8;
var eyebrowW = 45;

function setup() {
    createCanvas(500, 500);

//original face
function draw() {
  background(0, 178, 191);
  fill( 116, 89, 71); //face color
  ellipse( 225, 250, headAcr, headVert); //head
  fill(145, 110, 89);
  rect(210,230,noseW,noseH); //nose
  ellipse(180,220,eyesW,eyesH); //eye
  ellipse(265,220,eyesW,eyesH); //eye
  rect(160,190,eyebrowW,eyebrowH); //eyebrow
  rect(245,190,eyebrowW,eyebrowH); //eyebrow
  ellipse(225,316,bottomlipW,bottomlipH); //bottom lip
  fill(121, 74, 94);
  ellipse(215,310,toplipW,toplipH); //top lip
  ellipse(235,310,toplipW,toplipH); //top lip

//randomized faces
function mousePressed() {
  headAcr = random(120, 230);
  headVert = random(180,265);
  noseH = random(45,67);
  noseW = random(25,35);
  eyesW = random(25,52);
  pupil = random(6,20);
  eyebrowH = random(5,20);
  toplipW = random(20,40);
  toplipH = random(12,20);
  bottomlipH = random(15,23);
  bottomlipW = random(33,45);
  iris = random(20,26);

A lot of experimenting with features had to go into this. Despite having previous knowledge from the self-portrait assignment on how to make a simple face with p5, I had to tweak things a lot for the ‘randomize’ process. Nevertheless, I’m starting to get the hang of correlating coordinates on the text editor to where the object I’m making would appear when I run the code. The faces look a little foolish but I like them 🙂

William Latham (rnayyar looking outwards 2)

William Latham has a rich history in computer-facilitated arts. With experience from working with IBM’s Advanced Computer Graphics and Visualisation Division, Latham moved onto being the CEO of the computer games developer “Computer Artworks Ltd.” and managing/closing contracts with Microsoft, Nokia, Atari, and Virgin Interactive. Nowadays, he is a computing professor and the CEO of “Games Audit”. Nevertheless, these achievements hardly scratch the surface of Latham’s career in the digital realm.


Latham creates these organic, molecular, and somewhat digitally-genetic graphics that portray these fantastical mutated quasi-organisms. He and mathematician Stephen Todd co-created a “Mutation” code which allows these virtual life forms to breed and evolve into hybrids. Latham calls himself a “gardener” driven by aesthetic evolution.

source 1
source 2

rnayyar-looking outwards 01



This is Gisle Frøyland, a Norwegian woman proficient in computer science and visual arts. While I was browsing for “cool female contemporary artists”, I stumbled upon her work. Weirdly enough, I was actually in Norway over the summer and I saw an installation of hers in the KODEBERGEN museum of contemporary and Norwegian art. On the side of the installation was a table where there was an assortment of hats. Each hat had a specific design pasted on top of it and the viewer was to select a hat and put it on. Once the viewer had the hat on, they were instructed to stand in the middle of a black carpet above which there was a downward facing camera. The camera would detect the specific design on the hat and put on a personalized light show in front of the viewer. I actually fell in love with that installation and bonded with some strangers over it which was really enjoyable. Frøyland’s simple but interactive piece was engaging, curious, and quite entertaining. Other viewers and I were excitedly trading hats and laughing with each other despite the language barrier. Ideally, the only complaints I really had with the piece were that the hats were a little clumsy looking but I was blown away by the recognition and reaction of the camera and lights. It’s as if an “if/else” statement could be implemented in real life. I actually aspire to make art that involves viewer interaction as I think curiosity and play are key to exploring one’s creative nature. People like to think that they are separate from animals in that they’re sophisticated and knowledgable and communicate differently but when it comes down to flashing lights and shiny things, we all get roped in. There was something very primal about how this installation “trapped” us viewers through its dazzling and light-hearted appeal.

rnayyar self-portrait

click on me and I blink!

rhea portraitSimple p5.js Template

//Rhea Nayyar
//Section C (Tuesdays 1:30)

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


function draw(){
  background(193, 85, 174);
  quad(160,155,350,170,395,470,145,470); //hair foundation
  fill(178, 138, 123); //neck color
  rect(190,350,120,150); //neck
  fill(202, 144, 104); //skin color
  ellipse(150,150,350,450); //face
  fill(202, 144, 104);
  quad(180,400,324,400,265,465,235,465); //chin and jaw line
  fill(217, 161, 113); //nose color
  ellipse(233,295,270,380); //nose bridge
  ellipse(230,350,273,374); //nostrils
  fill(172, 119, 115); //bottom lip color
  quad(223,415,285,415,265,430,245,430); //bottom lip
  fill(144, 83, 79); //top lip color
  quad(223,415,256,415,250,402,247,402); //top lips and cupid's bow
  fill('black'); //regular eyes eyelashes
  ellipse(179,295,227,310); //eyelash
  ellipse(273,295,322,310); //eyelash
  fill(176, 136, 100); //eyelid color
  ellipse(235,258,270,275); //lid 1
  ellipse(245,263,267,271); //lid 2
  if (mouseIsPressed) { //blinking
    ellipse(233,270,272,257); //third eye upper lashes
    ellipse(235,258,270,275); //third eye
    fill(144, 106, 45);
    ellipse(245,260,260,272); //third eye iris

  } else {
    fill(0); //lower lash line 3rd eye
    fill(176, 136, 100);
    ellipse(235,258,270,275); //third eye lid


  fill(0); //hair color
  ellipse(179,295,227,310); //eyelash
  ellipse(273,295,322,310); //eyelash
  quad(190,190,344,235,328,175,195,145); //quads are hair and eyebrows
  fill(176, 136, 100); //eyelid color
  ellipse(180,290,225,308); //eyelids