ssontag – Project 02 – Variable Faces

sketch

//box1 Variables
var box1W = 120;
var box1H = 170;
var box1X = 160;
var box1Y = 200;

//box2 Variables
var box2W = 60;
var box2H = 300;
var box2X = 110;
var box2Y = 35;

//box3 Variables
var box3W = 250;
var box3H = 90;
var box3X = 50;
var box3Y = 50;

//box4 Variables
var box4W = 200;
var box4H = 200;

//box5 Variables
var box5W = 40;
var box5H = 90;
var box5X = 200;
var box5Y = 60;

//box6 Variables

var box6W = 100;
var box6H = 10;
var box6X = 160;
var box6Y = 200;

//box7 Variables
var box7W = 30;
var box7H = 60;
var box7X = 57;
var box7Y = 150;

//box8 Variables
var box8W = 30;
var box8H = 60;
var box8X = 290;
var box8Y = 57;


//box9 Variables
var box9W = 60;
var box9H = 10;
var box9X = 40;
var box9Y = 100;


//box10 Variables
var box10W = 15;
var box10H = 15;
var box10X = 130;
var box10Y = 190;


//eye1 Variables
var eye1W = 50;
var eye1H = 80;

//eye2 Variables
var eye2W = 30;
var eye2H = 24;



function setup() {
    createCanvas(400, 400);
    
}

function draw() {
    background(210);

//box1
    strokeWeight(0);
    fill(213, 180, 118);
    rect(box1X, box1Y, box1W, box1H);

//box2
    strokeWeight(0);
    fill(222, 184, 135);
    rect(box2X, box2Y, box2W, box2H);

//box3
    strokeWeight(0);
    fill(139, 69, 19);
    rect(box3X, box3Y, box3W, box3H);
    
//box4 
    strokeWeight(0);
    fill(210, 180, 140);
    rect(width / 6, height / 6, box4W, box4H);

//box5
    strokeWeight(0);
    fill(205, 133, 63);
    rect(box5X, box5Y, box5W, box5H);

//box6
    strokeWeight(0);
    fill(139, 69, 19);
    rect(box6X, box6Y, box6W, box6H);

//box7
    strokeWeight(0);
    fill(255, 222, 173);
    rect(box7X, box7Y, box7W, box7H);

//box8
    strokeWeight(0);
    fill(255, 222, 173);
    rect(box8X, box8Y, box8W, box8H);

//eye1
    strokeWeight(0);
    fill(0);
    ellipse(160, 55, eye1W, eye1H);

//eye2
    strokeWeight(0);
    fill(0);
    ellipse(260, 90, eye2W, eye2H);

//box9
    strokeWeight(0);
    fill(218, 165, 32);
    rect(box9X, box9Y, box9W, box9H);

//box10
    strokeWeight(0);
    fill(222, 184, 135);
    rect(box10X, box10Y, box10W, box10H);

}

function mousePressed() {
//when mouse is 
//box1 Variables
    box1W = random(110, 130);
    box1H = random(160, 180);
    box1X = random(155, 165);
    box1Y = random(195, 205);

//box2 Variables
    box2W = random(50, 70);
    box2H = random(290, 310);
    box2X = random(105, 115);
    box2Y = random(30, 40);

//box3 Variables
    box3W = random(240, 260);
    box3H = random(80, 100);
    box3X = random(45, 55);
    box3Y = random(45, 55);

//box4 Variables
    box4W = random(190, 210);
    box4H = random(190, 210);

//box5 Variables
    box5W = random(30, 50);
    box5H = random(80, 100);
    box5X = random(195, 205);
    box5Y = random(55, 65);


//box6 Variables
    box6W = random(90, 110);
    box6H = random(1, 20);
    box6X = random(155, 165);
    box6Y = random(195, 205);

//box7 Variables
    box7W = random(20, 40);
    box7H = random(50, 70);
    box7X = random(52, 63);
    box7Y = random(145, 155);

//box8 Variables
    box8W = random(20, 40);
    box8H = random(50, 70);
    box8X = random(285, 295);
    box8Y = random(52, 63);


//box9 Variables
    box9W = random(50, 70);
    box9H = random(1, 20);
    box9X = random(35, 45);
    box9Y = random(95, 105);

//box10 Variables
    box10W = random(5, 25);
    box10H = random(5, 25);
    box10X = random(125, 135);
    box10Y = random(185, 195);

//eye1 Variables
    eye1W = random(45, 55);
    eye1H = random(75, 85);

//eye2 Variables
    eye2W = random(25, 35);
    eye2H = random(19, 29);
}

When we were assigned with the task to make our faces from last week variable I continued with the theme of the cubist style. Cubism typically abstracts motion into simple geometric shapes. By the click of the mouse the face comes alive and the geometries jitter within their respective areas. My goal was to make the viewer uncomfortable while clicking the screen.