September 2021 – Page 24 – [OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice

Project-02: Variable faces

Emilio Bustamante

Section D

Right-click, select all and copy then paste in p5js editor and erase the extra lines at the beginning and end. I apologize had some problems importing the html.

// Maintain pressing the mouse and then release to see the face movement

function setup() {
  createCanvas(425,500);
  strokeWeight(0);
  noLoop();
}

// Profile face  

function draw() {
  background(115,191,69);

// Hair  

       fill(120,100,100)
  
  rect(50,175,25,25)
  rect(50,225,25,25)
  rect(50,250,25,25)
  rect(50,275,25,25)
  
  rect(75,175,25,25)
  rect(75,200,25,25)
  rect(75,225,25,25)
  rect(75,250,25,25)
  rect(75,275,25,25)
  rect(75,300,25,25)
  rect(75,325,25,25)
  
  rect(100,150,25,25)
  rect(100,175,25,25)
  rect(100,200,25,25)
  rect(100,225,25,25)
  
  rect(125,75,25,25)
  rect(125,100,25,25)
  rect(125,125,25,25)
  rect(125,150,25,25)
  rect(125,175,25,25)
  rect(125,200,25,25)
  rect(125,225,25,25)
  
  rect(150,100,25,25)
  rect(150,125,25,25)
  rect(150,150,25,25)
  rect(150,175,25,25)
  rect(150,200,25,25)
  rect(150,225,25,25)
  rect(150,250,25,25)
  
  rect(175,125,25,25)
  rect(175,150,25,25)
  rect(175,175,25,25)
  rect(175,200,25,25)
  rect(175,225,25,25)
  rect(175,250,25,25)
  
  rect(200,100,25,25)
  rect(200,125,25,25)
  rect(200,150,25,25)
  rect(200,175,25,25)
  rect(200,200,25,25)
  
  rect(225,125,25,25)
  rect(225,150,25,25)
  rect(225,175,25,25)
  rect(225,200,25,25)
  
  rect(250,100,25,25)
  rect(250,125,25,25)
  rect(250,150,25,25)
  rect(250,175,25,25)
  
  rect(275,75,25,25)
  rect(275,100,25,25)
  rect(275,125,25,25)
  rect(275,150,25,25)
  rect(275,175,25,25)
  
  rect(300,100,25,25)
  rect(300,125,25,25)
  rect(300,150,25,25)
  rect(300,175,25,25)
  rect(300,175,25,25)
  rect(300,200,25,25)
  
  rect(325,125,25,25)
  rect(325,150,25,25)
  rect(325,175,25,25)
  
  rect(350,125,25,25)
  
// Shadows
    
       fill(23,19,20)

  rect(100,325,25,25)
  rect(100,350,25,25)
  rect(100,375,25,25)
 
  rect(125,275,25,25)
  rect(125,300,25,25)
  rect(125,325,25,25)
  rect(125,350,25,25)
  rect(125,375,25,25)
  rect(125,400,25,25)
  rect(125,425,25,25)
  rect(125,450,25,25)
  rect(125,475,25,25)

  rect(150,275,25,25)
  rect(150,300,25,25)
  rect(150,325,25,25)
  rect(150,350,25,25)
  rect(150,375,25,25)
  rect(150,400,25,25)
 
  rect(175,325,25,25)
  rect(175,350,25,25)
  rect(175,375,25,25)
  rect(175,400,25,25)
  rect(175,425,25,25)
  
  rect(200,250,25,25)
  rect(200,350,25,25)
  rect(200,375,25,25)
  rect(200,400,25,25)
  rect(200,425,25,25)

  rect(225,250,25,25)
  rect(225,375,25,25)
  rect(225,400,25,25)
  rect(225,425,25,25)
  rect(225,450,25,25)
  rect(225,475,25,25)
  
  rect(250,250,25,25)
  rect(250,375,25,25)
  rect(250,425,25,25)
  rect(250,450,25,25)
  
  rect(275,250,25,25)
  rect(275,275,25,25)
  rect(275,375,25,25)
  rect(275,425,25,25)
  
  rect(300,250,25,25)
  rect(300,275,25,25)
  rect(300,300,25,25)
  rect(300,375,25,25)
  
// Skin

      fill(135,62,43)
  
  rect(100,250,25,25)
  rect(100,275,25,25)
  rect(100,300,25,25)
  
  rect(125,250,25,25)
  
  rect(150,425,25,25)
  rect(150,450,25,25)
  rect(150,475,25,25)
  
  rect(175,275,25,25)
  rect(175,300,25,25)
  rect(175,450,25,25)
  rect(175,475,25,25)
  
  rect(200,225,25,25)
  rect(200,275,25,25)
  rect(200,300,25,25)
  rect(200,325,25,25)
  rect(200,450,25,25)
  rect(200,475,25,25)
 
  rect(225,225,25,25)
  rect(225,275,25,25)
  rect(225,300,25,25)
  rect(225,325,25,25)
  rect(225,350,25,25)

  rect(250,200,25,25)
  rect(250,225,25,25)
  rect(250,275,25,25)
  rect(250,300,25,25)
  rect(250,325,25,25)
  rect(250,350,25,25)
  rect(250,400,25,25)
  
  rect(275,200,25,25)
  rect(275,225,25,25)
  rect(275,300,25,25)
  rect(275,325,25,25)
  rect(275,350,25,25)  
  rect(275,400,25,25)

  rect(300,225,25,25)
  rect(300,325,25,25)
  rect(300,350,25,25)  
  
  rect(325,300,25,25)
  rect(325,325,25,25)
  
  rect(350,325,25,25)
}

// 3/4 face

function mousePressed() {
  background(115,191,69);
  
// Hair
  
      fill(120,100,100)

  rect(50,75,25,25)
  rect(50,150,25,25)
  rect(50,175,25,25)
  rect(50,225,25,25)
  rect(50,250,25,25)
  rect(50,275,25,25)
  
  rect(75,75,25,25)
  rect(75,100,25,25)
  rect(75,175,25,25)
  rect(75,200,25,25)
  rect(75,225,25,25)
  rect(75,250,25,25)
  
  rect(100,100,25,25)
  rect(100,125,25,25)
  rect(100,150,25,25)
  rect(100,175,25,25)
  rect(100,200,25,25)
  rect(100,225,25,25)
  rect(100,250,25,25)
  
  rect(125,75,25,25)
  rect(125,100,25,25)
  rect(125,125,25,25)
  rect(125,150,25,25)
  rect(125,175,25,25)
  rect(125,200,25,25)
  
  rect(150,100,25,25)
  rect(150,125,25,25)
  rect(150,150,25,25)
  rect(150,175,25,25)
  rect(150,200,25,25)
  
  rect(175,50,25,25)
  rect(175,125,25,25)
  rect(175,150,25,25)
  rect(175,175,25,25)
  
  rect(200,50,25,25)
  rect(200,75,25,25)
  rect(200,100,25,25)
  rect(200,125,25,25)
  rect(200,150,25,25)
  rect(200,175,25,25)
  
  rect(225,75,25,25)
  rect(225,100,25,25)
  rect(225,125,25,25)
  rect(225,150,25,25)
  rect(225,175,25,25)
  rect(225,200,25,25)
  
  rect(250,100,25,25)
  rect(250,125,25,25)
  rect(250,150,25,25)
  rect(250,175,25,25)
  
  rect(275,75,25,25)
  rect(275,100,25,25)
  rect(275,125,25,25)
  rect(275,150,25,25)
  rect(275,175,25,25)
  
  rect(300,100,25,25)
  rect(300,125,25,25)
  rect(300,150,25,25)
  rect(300,175,25,25)
  rect(300,175,25,25)
  rect(300,200,25,25)
  
  rect(325,75,25,25)
  rect(325,100,25,25)
  rect(325,125,25,25)
  rect(325,150,25,25)
  rect(325,175,25,25)
  
  rect(350,75,25,25)
  rect(350,150,25,25)
  rect(350,175,25,25)
  
// Shadows
  
       fill(23,19,20)
  
  rect(75,275,25,25)
  rect(75,300,25,25)
  
  rect(100,275,25,25)
  rect(100,300,25,25)
  rect(100,325,25,25)
  rect(100,350,25,25)
  rect(100,375,25,25)
  
  rect(125,250,25,25)
  rect(125,350,25,25)
  rect(125,375,25,25)
  rect(125,400,25,25)
  rect(125,425,25,25)
  rect(125,450,25,25)
  rect(125,475,25,25)
  
  rect(150,250,25,25)
  rect(150,275,25,25)
  rect(150,375,25,25)
  rect(150,400,25,25)
  rect(150,425,25,25)
  
  rect(175,250,25,25)
  rect(175,275,25,25)
  rect(175,300,25,25)
  rect(175,400,25,25)
  rect(175,425,25,25)
  rect(175,450,25,25)
  
  rect(200,250,25,25)
  rect(200,275,25,25)
  rect(200,400,25,25)
  rect(200,450,25,25)
  rect(200,475,25,25)
  
  rect(225,250,25,25)
  rect(225,350,25,25)
  rect(225,400,25,25)
  rect(225,450,25,25)
  rect(225,475,25,25)
  
  rect(250,250,25,25)
  rect(250,275,25,25)
  rect(250,350,25,25)
  rect(250,400,25,25)
  rect(250,425,25,25)
  rect(250,450,25,25)
  
  rect(275,250,25,25)
  rect(275,275,25,25)
  rect(275,300,25,25)
  rect(275,375,25,25)
  rect(275,400,25,25)
  rect(275,425,25,25)
  
  rect(300,225,25,25)
  rect(300,250,25,25)
  rect(300,275,25,25)
  rect(300,300,25,25)
  rect(300,325,25,25)
  rect(300,350,25,25)
  rect(300,375,25,25)
  
  rect(325,250,25,25)
  
// Skin
  
      fill(135,62,43)
  
  rect(125,225,25,25)
  rect(125,275,25,25)
  rect(125,300,25,25)
  rect(125,325,25,25)
  
  rect(150,225,25,25)
  rect(150,300,25,25)
  rect(150,325,25,25)
  rect(150,350,25,25)
  rect(150,450,25,25)
  rect(150,475,25,25)
  
  rect(175,200,25,25)
  rect(175,225,25,25)
  rect(175,325,25,25)
  rect(175,350,25,25)
  rect(175,375,25,25)
  rect(175,475,25,25)
  
  rect(200,200,25,25)
  rect(200,225,25,25)
  rect(200,300,25,25)
  rect(200,325,25,25)
  rect(200,350,25,25)
  rect(200,375,25,25)
  rect(200,425,25,25)
 
  rect(225,225,25,25)
  rect(225,275,25,25)
  rect(225,300,25,25)
  rect(225,325,25,25)
  rect(225,375,25,25)
  rect(225,425,25,25)
  
  rect(250,200,25,25)
  rect(250,225,25,25)
  rect(250,300,25,25)
  rect(250,325,25,25)
  rect(250,375,25,25)
  
  rect(275,200,25,25)
  rect(275,225,25,25)
  rect(275,325,25,25)
  rect(275,350,25,25)
 
}

// Front face

function mouseClicked() {
  background(115,191,69);
  
// Hair
  
      fill(120,100,100)

  rect(50,100,25,25)
  rect(50,150,25,25)
  rect(50,175,25,25)
  rect(50,225,25,25)
  rect(50,250,25,25)
  rect(50,275,25,25)
  
  rect(75,100,25,25)
  rect(75,125,25,25)
  rect(75,150,25,25)
  rect(75,175,25,25)
  rect(75,200,25,25)
  rect(75,225,25,25)
  
  rect(100,100,25,25)
  rect(100,125,25,25)
  rect(100,150,25,25)
  rect(100,175,25,25)
  rect(100,200,25,25)
  
  rect(125,75,25,25)
  rect(125,100,25,25)
  rect(125,125,25,25)
  rect(125,150,25,25)
  rect(125,175,25,25)
  
  rect(150,100,25,25)
  rect(150,125,25,25)
  rect(150,150,25,25)
  
  rect(175,50,25,25)
  rect(175,75,25,25)
  rect(175,100,25,25)
  rect(175,125,25,25)
  rect(175,150,25,25)
  
  rect(200,75,25,25)
  rect(200,100,25,25)
  rect(200,125,25,25)
  rect(200,150,25,25)
  rect(200,175,25,25)
  
  rect(225,100,25,25)
  rect(225,125,25,25)
  rect(225,150,25,25)
  rect(225,175,25,25)
  rect(225,200,25,25)
  
  rect(250,75,25,25)
  rect(250,100,25,25)
  rect(250,125,25,25)
  rect(250,150,25,25)
  rect(250,175,25,25)
  
  rect(275,50,25,25)
  rect(275,75,25,25)
  rect(275,100,25,25)
  rect(275,125,25,25)
  rect(275,150,25,25)
  rect(275,175,25,25)
  
  rect(300,100,25,25)
  rect(300,125,25,25)
  rect(300,150,25,25)
  rect(300,175,25,25)
  rect(300,175,25,25)
  rect(300,200,25,25)
  
  rect(325,100,25,25)
  rect(325,150,25,25)
  rect(325,175,25,25)
  rect(325,200,25,25)
  rect(325,225,25,25)

  rect(350,175,25,25)
  
// Shadows

       fill(23,19,20)
  
  
  rect(75,250,25,25)
  rect(75,300,25,25)
  rect(75,325,25,25)
  rect(75,350,25,25)
  
  rect(100,250,25,25)
  rect(100,275,25,25)
  rect(100,350,25,25)
  rect(100,375,25,25)
  
  rect(125,250,25,25)
  rect(125,275,25,25)
  rect(125,300,25,25)
  rect(125,375,25,25)
  rect(125,400,25,25)
  rect(125,425,25,25)
  rect(125,450,25,25)
  rect(125,475,25,25)
  
  rect(150,250,25,25)
  rect(150,275,25,25)
  rect(150,375,25,25)
  rect(150,400,25,25)
  rect(150,425,25,25)
  
  rect(175,250,25,25)
  rect(175,375,25,25)
  rect(175,425,25,25)
  rect(175,450,25,25)
  
  rect(200,250,25,25)
  rect(200,375,25,25)
  rect(200,425,25,25)
  rect(200,450,25,25)
  
  rect(225,250,25,25)
  rect(225,275,25,25)
  rect(225,375,25,25)
  rect(225,400,25,25)
  rect(225,425,25,25)
  
  rect(250,250,25,25)
  rect(250,275,25,25)
  rect(250,300,25,25)
  rect(250,375,25,25)
  rect(250,400,25,25)
  rect(250,425,25,25)
  rect(250,450,25,25)
  rect(250,475,25,25)
  
  rect(275,250,25,25)
  rect(275,275,25,25)
  rect(275,350,25,25)
  rect(275,375,25,25)

  rect(300,250,25,25)
  rect(300,300,25,25)
  rect(300,325,25,25)
  rect(300,350,25,25)
  
  
// Skin

      fill(135,62,43)
  
  rect(75,275,25,25)
  
  rect(100,225,25,25)
  rect(100,300,25,25)
  rect(100,325,25,25)
  
  rect(125,200,25,25)
  rect(125,225,25,25)
  rect(125,325,25,25)
  rect(125,350,25,25)
  
  rect(150,175,25,25)
  rect(150,200,25,25)
  rect(150,225,25,25)
  rect(150,300,25,25)
  rect(150,325,25,25)
  rect(150,350,25,25)
  rect(150,450,25,25)
  rect(150,475,25,25)
  
  rect(175,175,25,25)
  rect(175,200,25,25)
  rect(175,225,25,25)
  rect(175,275,25,25)
  rect(175,300,25,25)
  rect(175,325,25,25)
  rect(175,350,25,25)
  rect(175,400,25,25)
  rect(175,475,25,25)
  
  rect(200,200,25,25)
  rect(200,225,25,25)
  rect(200,275,25,25)
  rect(200,300,25,25)
  rect(200,325,25,25)
  rect(200,350,25,25)
  rect(200,400,25,25)
  rect(200,475,25,25)
 
  rect(225,225,25,25)
  rect(225,300,25,25)
  rect(225,325,25,25)
  rect(225,350,25,25)
  rect(225,450,25,25)
  rect(225,475,25,25)
  
  rect(250,200,25,25)
  rect(250,225,25,25)
  rect(250,325,25,25)
  rect(250,350,25,25)
  
  rect(275,200,25,25)
  rect(275,225,25,25)
  rect(275,325,25,25)
  rect(275,300,25,25)
  
  rect(300,225,25,25)
  rect(300,275,25,25)
}

Project-02-Variable-Face

Variable-Face

var eyeSpacing = 80;
var noseLength = 120;
var mouthWidth = 120;
var mouthHeight = 100;

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

function draw() {
    //head
    fill(255,255,255);
    ellipse(240,320,360,440);
    //eyes
    fill(0,0,0);
    ellipse(240+eyeSpacing, 300, 50, 80);
    ellipse(240-eyeSpacing, 300, 50, 80);
    //nose
    fill(255);
    triangle(240, 300, 200, 300+noseLength, 280, 300+noseLength);
    //mouth
    arc(240, 400, mouthWidth, mouthHeight, 0, PI, CHORD)

    //check for user input
    if(mouseIsPressed) {
      eyeSpacing = random(50,100);
      noseLength = random(40,80);
      mouthWidth = random(120,240);
      mouthHeight = random(100,200);
    }
}

Phew I think I uploaded this correctly! Honestly the hardest part of the assignment was figuring out how to do the HTML stuff. Although very simple, I like my final product since it’s always smiling at me 😀

LookingOutwards-02 Dave Bollinger

I really loved Dave Bollinger’s collection of glass like geometric pieces. The pieces look like abstract stained glass, with really natural looking curves and divisions that look like it was shattered. I really like this randomness as it is satisfying how different each work looks while still being part of the same collection, and demonstrates a robust algorithm for randomization with many possible ways the “shards” could have been created. Also, the use of color is really amazing, the way some of the colors fade out looks the same way worn stained glass fades over time. It feels as if the sun is behind the patterns shining through. I admire this use of color because it shows dedication to recreating the effect of real glass and it must have been a complex effect to code. Most of these pieces focus on one color but a few of them have many colors which demonstrates that the algorithm must have been versatile in the way it filled in the shards.

Dave Bollinger

LO: Generative Art

I’d like to talk about a video-game called “Little Computer People,” which is also known as “House on a Disc.” I’ve never played it myself, but I heard about it on the podcast “Wonderful!” — episode 95, around 38:35 — and for some reason I’ve never forgotten it. It’s basically like an early version of The Sims or Tamagotchi, released in 1985, and was credited as a source of inspiration for the making of The Sims (though The Sims came out 15 years later). As the player, you were a researcher observing the little person living in your computer. You entered your name, the date, and the time, so the game would address you in real time. You’d always have a male character assigned to you. And there were 256 possible different names that the character could have. The game play was basically typing in instructions for the person, like “take a shower,” “watch TV,” “play the piano,” etc. If you stopped feeding the character or making him sleep, his smiley face would turn into a frown, and then he’d turn green. The character could also send you, the player, correspondence with his little typewriter, like “Low on supplies,” “Would like to have a party,” “Would like to have a cat,” though there would be no result if you instructed him to have a party or get a cat. He could also initiate a game of poker, war, or anagrams with you. So although the gameplay may seem mundane or like it’s not much content, I myself am really impressed with all the different functions and variables working together to respond to the player’s input. And I imagine there are a lot of if/else if/else statements working together to produce those results as well.

Project 2: Variable Faces

wpf-variable-face

//Patrick Fisher, section B

var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var eyeColor = 2;
var mouthType = 1;
var noseType = 1;
var browLength = (1.15 * eyeSize);
var r = 0; //color value for eyebrows
var m = 1; //coefficent for for size of mouth and nose
var skinColor = 1;

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

function draw() {
    var midX = width / 2; //intermediate varriable for half the canvas length
    background(180);
    
    if(skinColor == 1){ //chooses a variety of skin colors from paper white to dark brown
        strokeWeight(1);
        fill(255);
        ellipse(midX, height / 2, faceWidth,  faceHeight); 
    
    } else if(skinColor == 2){
        strokeWeight(1);
        fill(254, 219, 117); 
        ellipse(midX, height / 2, faceWidth,  faceHeight); 
    
    } else if(skinColor == 3){ 
        strokeWeight(1);
        fill(241, 194, 125);
        ellipse(midX, height / 2, faceWidth,  faceHeight); 
    
    } else if(skinColor == 4){ 
        strokeWeight(1);
        fill(224, 172, 105); 
        ellipse(midX, height / 2, faceWidth,  faceHeight); 
    
    } else if(skinColor == 5){ 
        strokeWeight(1);
        fill(198, 134, 66); 
        ellipse(midX, height / 2, faceWidth,  faceHeight); 
    
    } else if(skinColor == 6){
        strokeWeight(1);
        fill(140, 85, 36); 
        ellipse(midX, height / 2, faceWidth,  faceHeight); 
    
    } else if(skinColor == 7){
        strokeWeight(1);
        fill(54, 30, 2);        
        ellipse(midX, height / 2, faceWidth,  faceHeight); 
    
    }

    var eyeLX = midX - faceWidth * 0.25; //variable for x position of left eye
    var eyeRX = midX + faceWidth * 0.25; //wariable for x position of left eye
    var eyeBrowL = (eyeLX - (.65 * eyeSize)); //variable for left eyebrow x position based off of left eye position
    var eyeBrowR = (eyeRX - (.5 * eyeSize)); //wariable for right eyebrow x position based off of the right eye position
    strokeWeight(1);
    fill(r);
    rect(eyeBrowL, ((height / 2) - eyeSize), browLength, (0.25 * eyeSize)); //left eyebrow
    
    strokeWeight(1);
    fill(r);
    rect(eyeBrowR, ((height / 2) - eyeSize), browLength, (0.25 * eyeSize)); //right eyebrow
    
    strokeWeight(1);
    fill(255);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize); //creates left eye
    
    strokeWeight(1);
    fill(255);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize); //creates right eye

    if(eyeColor == 1){ //makes brown irises       
            strokeWeight(1);
            fill(100,63,33);
            ellipse(eyeLX, height / 2, eyeSize * (2/3), eyeSize * (2/3));

            strokeWeight(1);
            fill(100,63,33);
            ellipse(eyeRX, height / 2, eyeSize * (2/3), eyeSize * (2/3));
    
    }    else if(eyeColor == 2){   //makes green irises     
            strokeWeight(1);
            fill(0,125,75);
            ellipse(eyeLX, height / 2, eyeSize * (2/3), eyeSize * (2/3));

            strokeWeight(1);
            fill(0,125,75);
            ellipse(eyeRX, height / 2, eyeSize * (2/3), eyeSize * (2/3));    
    
    }    else if(eyeColor == 3){   //makes blue irises     
            strokeWeight(1);
            fill(35,164,242);
            ellipse(eyeLX, height / 2, eyeSize * (2/3), eyeSize * (2/3));

            strokeWeight(1);
            fill(35,164,242);
            ellipse(eyeRX, height / 2, eyeSize * (2/3), eyeSize * (2/3));    
    
    }    else if(eyeColor == 4){   //makes heterochromia, brown right blue left     
            strokeWeight(1);
            fill(100,63,33);
            ellipse(eyeLX, height / 2, eyeSize * (2/3), eyeSize * (2/3));

            strokeWeight(1);
            fill(35,164,242);
            ellipse(eyeRX, height / 2, eyeSize * (2/3), eyeSize * (2/3));    
    
    }    else if(eyeColor == 5){   //makes heterochromia, blue right brown left     
            strokeWeight(1);
            fill(35,164,242);
            ellipse(eyeLX, height / 2, eyeSize * (2/3), eyeSize * (2/3));

            strokeWeight(1);
            fill(100,63,33);
            ellipse(eyeRX, height / 2, eyeSize * (2/3), eyeSize * (2/3));    
    
    }    else if(eyeColor == 6){   //makes heterochromia, blue right green left     
            strokeWeight(1);
            fill(0,125,75);
            ellipse(eyeLX, height / 2, eyeSize * (2/3), eyeSize * (2/3));

            strokeWeight(1);
            fill(35,164,242);
            ellipse(eyeRX, height / 2, eyeSize * (2/3), eyeSize * (2/3));    
    
    }   else if(eyeColor == 7){   //makes heterochromia, green right blue left     
            strokeWeight(1);
            fill(35,164,242);
            ellipse(eyeLX, height / 2, eyeSize * (2/3), eyeSize * (2/3));

            strokeWeight(1);
            fill(0,125,75);
            ellipse(eyeRX, height / 2, eyeSize * (2/3), eyeSize * (2/3));    
    
    }    else if(eyeColor == 8){   //makes heterochromia, brown right green left     
            strokeWeight(1);
            fill(0,125,75);
            ellipse(eyeLX, height / 2, eyeSize * (2/3), eyeSize * (2/3));

            strokeWeight(1);
            fill(100,63,33);
            ellipse(eyeRX, height / 2, eyeSize * (2/3), eyeSize * (2/3));    
    
    }    else if(eyeColor == 9){   //makes heterochromia, green right brown left     
            strokeWeight(1);
            fill(100,63,33);
            ellipse(eyeLX, height / 2, eyeSize * (2/3), eyeSize * (2/3));

            strokeWeight(1);
            fill(0,125,75);
            ellipse(eyeRX, height / 2, eyeSize * (2/3), eyeSize * (2/3));    
    
    }
    //variables for positioning and drawing the mouth
    var mouthWidth = (faceWidth * (1/3));
    var mouthHeight = (faceHeight * .25);
   //intermediate variables for the x,y coordiantes for the tirangle nose type
    var tx1 = midX;
    var ty1 = ((height / 2) - (faceHeight / 16));
    var tx2 = (midX - (faceWidth / 8));
    var ty2 = ((height / 2) + (faceHeight / 6))
    var tx3 = (midX + (faceWidth / 8));
    var ty3 = ((height / 2) + (faceHeight / 6));

    if(mouthType == 1){
        strokeWeight(1);
        fill(0);
        arc(midX , ((height / 2) + (faceHeight * .25)), mouthWidth, mouthHeight, m * TWO_PI, m * PI); //creates a smiling mouth

    } else if(mouthType == 2){ //creates a frowning mouth
        strokeWeight(1);
        fill(0);
        arc(midX , ((height / 2) + (faceHeight * .375)), mouthWidth, mouthHeight, m * PI, m * TWO_PI,);

    } else if(mouthType == 3) { //creates a neutral line mouth
        
        strokeWeight(3);
        line(m * (midX - (mouthWidth / 2)), ((height / 2) + (faceHeight * .25)), m * (midX + (mouthWidth / 2)), ((height / 2) + (faceHeight * .25)));
    }
    
    if(noseType == 1){ //creates a half circle nose
        strokeWeight(1);
        fill(255);
        arc(((width * (51/100))), (height * (51/100)), (faceWidth / 4), (faceHeight / 6), m * HALF_PI, m * PI + HALF_PI);
    }

    else if(noseType == 2){ //creates a triangle nose
        strokeWeight(1);
        fill(255);
        triangle(tx1, ty1, m * tx2, ty2, m * tx3, ty3);
    }

    else if(noseType == 3){ //creates a line nose
        
        strokeWeight(3);
        line(midX, m * ((height / 2) + (faceHeight / 8)),midX, ((height / 2) - (faceHeight / 8)));
    }

}

function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'faceWidth' gets a random value between 75 and 150.
    faceWidth = random(75, 150);
    faceHeight = random(100, 200);
    eyeSize = random(10, 30);
    browLength = random((eyeSize * .95), (eyeSize * 1.35));
    eyeColor = floor(random(1,10)); //chooses one of the eye color combinations
    mouthType = floor(random(1,4)); //choose the mouth type
    noseType = floor(random(1,4));  //chooses the nose type
    r = random(255); //changes eyebrow color
    m = (random(.95,1.05));
    skinColor = floor(random(1,8)); //changes the skin color

}

I had a lot of fun with this project. It was interesting trying to come up with more and more ways to make the face different. One of my early troubles was a problem with my eye colors. I was using “if(eyeColor == x)…” and eyeColor = “random(1,10)” but most clicks would end with no irises at all. I then realized the problem was that random() gives a floating point number and I was asking for a specific integer, so the odds of getting one were super low, so I changed the line to “floor(random(1,10))” which thankfully fixed it.

Project 2: Variable Faces

var headWidth = 300
var headHeight = 400
var earWidth = 20
var earHeight = 20
var mouthWidth = 200
var mouthHeight = 100
var eyeWidth = 60
var eyeHeight = 60
var pupilWidth = 50
var pupilHeight = 60

function setup() {
createCanvas(480, 600);
background(255, 255, 255);

}

function draw() {
fill (‘#fae’);
ellipse(width/2,height/2,headWidth,headHeight);
fill (255, 255, 255);
ellipse(width/2-60,height/2-20,eyeWidth,eyeHeight);
ellipse(width/2+60,height/2-20,eyeWidth,eyeHeight);
fill (255, 255, 255);
ellipse(width/2,height/2+90,mouthWidth-120,mouthHeight-30);
fill (50, 135, 200);
ellipse(width/2-40,height/2-20,pupilWidth-30,pupilHeight-20);
ellipse(width/2+80,height/2-20,pupilWidth-30,pupilHeight-20);
fill (‘#fae’);
circle(width/2-100,height/2-160,earWidth-80,earHeight-40);
circle(width/2+100,height/2-160,earWidth-80,earHeight-40);

}

function mousePressed() {
mouthWidth = random (40, 60);
mouthHeight = random (60, 30);

}

Face Randomizer

sketch

var eyeSize = 20;
var pupilSize = 10;
var faceWidth = 100;
var faceHeight = 150;
var mouth = 1;

function setup() {
    createCanvas(300, 300);
    faceShape = 1;
}


function mousePressed() {
    faceShape = -faceShape;
    faceWidth = random(75, 200);
    faceHeight = random(100, 200);
    eyeSize = random(10, 50);
    pupilSize = random(1,4)
    mouth = random(1,4);

}

function draw() {
    background(180);
    //head shapes
    if (faceShape>0) {
        ellipse(width/2,height/2,faceWidth,faceHeight);

    }
    else if (faceShape<0){
        rect((width - faceWidth)/2,(height - faceHeight)/2,faceWidth,faceHeight);
    }

    //eyes and pupils
    var LeftEye = width / 2 - faceWidth / 4;
    var Righteye = width / 2 + faceWidth / 4;
    ellipse(LeftEye, 5*height / 12, eyeSize);
    ellipse(Righteye, 5*height / 12, eyeSize);
    fill(0);
    ellipse(LeftEye, 5*height / 12, eyeSize/pupilSize);
    ellipse(Righteye, 5*height / 12, eyeSize/pupilSize);
    fill(255);

    //mouths

    if (mouth<2) {
        //smile
    ellipse(width/2,height/2+25,50,25);
    stroke(255);
    rect(width/2-30,height/2+10,60,15);
    stroke(0);
    }
    else if (mouth<3) {
        //sad
    ellipse(width/2,height/2+35,50,25);
    stroke(255);
    rect(width/2-30,height/2+35,60,15);
    stroke(0);
    }
    else if (mouth<4) {
        line((width/2)-faceWidth/4, (height/2)+faceHeight/5, (width/2)+faceWidth/4, (height/2)+faceHeight/5);
    }
    
}

One of the difficulties I had with this project was creating a uniform smile. In order to do so, I used certain blocks to cover the ellipses and removed the stroke color. I had a lot of trouble with the random() function because I had also forgotten that it outputted float point numbers.

Project 2- Variable Faces; Face Variables

var eyeSize = 25;
var faceWidth = 150;
var faceHeight = 180;
var mouthWidth = 40;
var mouthHeight = 15;
var browWidth = 10;
var browHeight = 3;
var noseColor = 230; 
 
function setup() {
    createCanvas(480, 640);
}
 
function draw() {
    background(173,216,230);
    fill(246,232,205);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    var eyeLX = width / 2 - faceWidth * 0.2;
    var eyeRX = width / 2 + faceWidth * 0.2;
    fill(0,100,0);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    fill(0,100,0);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    fill(199,54,59);
    ellipse(width/2, (height/2+35), mouthWidth, mouthHeight);
    var browY = height/2 - 30;
    fill(0);
    rect(eyeLX-5,browY,browWidth, browHeight);
    fill(0);
    rect(eyeRX-5,browY,browWidth, browHeight);
    fill(noseColor);
    triangle(width/2,height/2+5,width/2-8,height/2+20, width/2+8,height/2+20)
}
 
function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'faceWidth' gets a random value between 75 and 150.
    faceWidth = random(75, 150);
    faceHeight = random(100, 200);
    eyeSize = random(10, 30);
    mouthWidth = random(10,45);
    mouthHeight = random(10,20);
    browWidth = random (10,20);
    browHeight = random (3,7);
    noseColor = random (0,255);
}

The face that I created varies the mouth shape, eye size, and face shape, brow shape and nose shade on each click.

LookingOutwards-02

The australian artist LIA caught my attention. Her works are interesting in that she describes her process of creating art pieces as having a conversation with the program. One project that I liked was called ProximityOfNeeds (2021).

I admire the constant use of a similar motif throughout the video and also that she was able to find a solution through coding of the problem: not being able to get what you want. I suppose that she created a code that stopped looping after each sequence of black material enveloping the red dot. The shapes were random, but all started and ended similarly. It would start at one point in space and then find its way to a red dot. I think that a lot of her works have organic shapes, and that manifested itself in this recent work too.

Project 2: Variable Faces

bob project 2

var faceWidth = 250;
var faceHeight = 250;
var faceColorR = 30;
var faceColorG = 20;
var faceColorB = 80;
var randomEars = 0;
var randomEyes = 0;
var randomNose = 0;
var eyeWidth = 28;
var eyeHeight = 35;
var eyeColorR = 252;
var eyeColorG = 230;
var eyeColorB = 33;


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

function draw() {
    //face
    background(206, 219, 240); //light blue for background
    fill(faceColorR, faceColorG, faceColorB); //color of face
    ellipse(width / 2, height / 2, faceWidth, faceHeight); //face

    //ears (randomly pick ears)
    if (randomEars <= 1){ //round ears
        circle(width/3, height/3, 60); //left round ears
        circle(width - (width/3), height/3, 60); //right round ears

    } else if (randomEars <= 2) { //triangle ears
        triangle(190, 130, 260, 152 , 220, 200); //left triangle ears
        triangle(450, 130, 380, 152, 420, 200); //right triangle ears

    } else { //curved down ears
        beginShape(); //left curved down ears
        curveVertex(200, 210);
        curveVertex(210, 230);
        curveVertex(170, 180);
        curveVertex(270, 137);
        curveVertex(290, 240);
        endShape();

        beginShape(); //right curved down ears
        curveVertex(440, 210);
        curveVertex(430, 230);
        curveVertex(470, 180);
        curveVertex(370, 137);
        curveVertex(350, 240);
        endShape();
    }
    

    //eyes (randomly pick eyes)
    if (randomEyes <= 1){ //round eyes
    fill(eyeColorR, eyeColorG, eyeColorB); //changing eye color
    ellipse(280, 230, eyeWidth, eyeHeight); //left black part of round eyes 
    fill(255, 255, 255);
    ellipse(280, 236, 15, 17); //left white part of round eyes
    fill(eyeColorR, eyeColorG, eyeColorB);
    ellipse(360, 230, eyeWidth, eyeHeight); //right black part of round eyes 
    fill(255, 255, 255);
    ellipse(360, 236, 15, 17); //right white part of round eyes
    
    } else if (randomEyes <= 2){ //line eyes
    fill(0, 0, 0); //black
    rect(260, 230, 30, 5); //left line eyes
    rect(350, 230, 30, 5); //right line eyes
    
    } else { //reptile eyes
    fill(0, 0, 0); //black 
    circle(275, 230, 50); //left black part of reptile eyes
    fill(eyeColorR, eyeColorG, eyeColorB); //changing eye color
    ellipse(275, 230, 5, 50); //left inside part of reptile eyes
    fill(0, 0, 0); //black 
    circle(365, 230, 50); //right black part of reptile eyes
    fill(eyeColorR, eyeColorG, eyeColorB); //changing eye color
    ellipse(365, 230, 5, 50); //right inside part of reptile eyes
    }
    

    //nose (randomly pick nose)
    fill(faceColorR + 50, faceColorG + 35, faceColorB + 10); //nose color slightly darker than face color
    
    if (randomNose <= 1) { //pig snout
    ellipse(width/2, height/2 + 30, 70, 40); //pig snout outside
    ellipse(width/2 -10, height/2 +30, 8, 15); //pig snout left nostril
    ellipse(width/2 +10, height/2 +30, 8, 15); //pig snout right nostril
    
    } else if (randomNose <= 2) { //triangle nose
    triangle(width/2 - 10, height/2 + 30, width/2 + 10, height/2 + 30, width/2, height/2 + 45); //triangle nose
    
    } else { //curvy mouth + whiskers
    fill(faceColorR, faceColorG, faceColorB);
    arc(width/2 - 10, height/2 + 50, 20, 20, 0, radians(200)); //curvy mouth left
    arc(width/2 + 10, height/2 + 50, 20, 20, radians(-20), PI); //curvy mouth right
    fill(0, 0, 0); //black 
    line(240, 270, 180, 240); //left top whisker
    line(400, 270, 460, 240); //right top whisker
    line(240, 275, 175, 275); //left middle whisker
    line(400, 275, 465, 275); //right middle whisker
    line(240, 280, 180, 310); //left bottom whisker
    line(400, 280, 460, 310); //right bottom whisker
    }
  
}

function mousePressed(){
    faceWidth = random(200, 250);
    faceHeight = random(200, 250);
    faceColorR = random(80, 170);
    faceColorG = random(50, 150);
    faceColorB = random(60, 200);
    randomEars = random(0, 3);
    randomEyes = random(0, 3);
    randomNose = random(0, 3);
    eyeWidth = random(20, 35);
    eyeHeight = random(30, 38);
    eyeColorR = random(185, 220);
    eyeColorG = random (190, 235);
    eyeColorB = random (130, 250);
}

The most interesting part of the project was testing out the code and seeing how the facial features change and create unique combinations. However, I did find it a bit challenging and time-consuming to design each of the variations.