Curran Zhang- Project 2- Variable Faces

sketch

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

var c1=0;
var c2=100;
var c3= 150;
var eyeSize = 20;
var faceWidth = 150;
var faceHeight = 150;
var faceWide= 100;
var faceHigh=100;
var bodyWidth=150;
var bodyHeight= 300;
var armLength= 150;
var bodyWide=100
var bodyHigh=200

function draw() {
    background(c1,c2,c3);

//Venom
    fill(0)
    ellipse(width / 4-40, height / 3, faceWidth,  faceHeight);
    var eyeL = width / 4 - faceWidth * 0.25;
    var eyeR = width / 4 + faceWidth * 0.25;
    //Face
    fill(250);
    arc(eyeL-40,height/3, 3*eyeSize,3*eyeSize,QUARTER_PI,PI+QUARTER_PI); 
    fill(250);
    arc(eyeR-40,height/3, 3*eyeSize,3*eyeSize,PI+QUARTER_PI+HALF_PI,HALF_PI+QUARTER_PI); 
    //Body
    fill(0);
    rect(width/4-bodyWidth/2-40,height/3+faceHeight/2,bodyWidth,bodyHeight,40)
    fill(250);
    quad(width/4-bodyWidth/2-40,height/3+faceHeight/2+40, 
         width/4-bodyWidth/2-40,height/3+faceHeight/2+bodyHeight/3+40,
         width/4+bodyWidth/2-40,height/3+faceHeight/2+40, 
         width/4+bodyWidth/2-40,height/3+faceHeight/2+bodyHeight/3+40)
    //Arm
    fill(0);
    rect(width/4+bodyWidth/2-40,height/3+faceHeight/2+30, armLength,50,40)


//Spidey
    fill('red');
    ellipse(3*width / 4, height / 2, faceWide,  faceHigh);
    noStroke();
    var eyeLL = 3*width / 4 - faceWide * 0.25;
    var eyeRR = 3*width / 4 + faceWide * 0.25;
    //Face
    fill(0);
    arc(eyeLL,height/2, 3*eyeSize+5,3*eyeSize+5,QUARTER_PI,PI+QUARTER_PI);
    fill(250);
    stroke('black');
    strokeWeight(1.5);
    arc(eyeLL,height/2, 3*eyeSize,3*eyeSize,QUARTER_PI,PI+QUARTER_PI); 
    fill(0);
    arc(eyeRR,height/2, 3*eyeSize+5,3*eyeSize+5,PI+QUARTER_PI+HALF_PI,HALF_PI+QUARTER_PI); 
    fill(250);
    stroke('black');
    strokeWeight(1.5);
    arc(eyeRR,height/2, 3*eyeSize,3*eyeSize,PI+QUARTER_PI+HALF_PI,HALF_PI+QUARTER_PI); 
    fill('red');
    rect(3*width/4 - bodyWide/2,height/2+faceHigh/2,bodyWide,bodyHigh,40);
    //Body
    fill('black');
    quad(3*width/4 - bodyWide/2, height/2+faceHeight/2+45, 
         3*width/4 - bodyWide/2, height/2+faceHeight/2+bodyHigh/3+45, 
         3*width/4 + bodyWide/2,  height/2+faceHeight/2+45,
         3*width/4 + bodyWide/2,  height/2+faceHeight/2+bodyHigh/3+45);

    ellipse(3*width/4, height/2+faceHeight/2+40+bodyHigh/6, 40 );
    fill('red');
    rect(width/4+bodyWidth/2-40,height/3+faceHeight/2+130,(3*width/4-bodyWide/2)-(width/4+bodyWidth/2-40),50,40);
}

function mousePressed() {
    faceWidth = random(100, 150);
    faceHeight = random(100, 150);
    eyeSize = random(10, 25);
    bodyWidth=random(150,200);
    bodyHeight=random(300,350);
    armLength=random(120,185);
    bodyWide=random(100,150);
    bodyHigh=random(200,250);
    c1= random(0,225);
    c2= random(0,222);
    c3= random(0,255);
    faceWide= random(100,150);
    faceHigh= random(100,150);
}

I was inspired to do a Spider-man vs Venom scene after seeing clips of them on YouTube. I wanted to use the variables to choreography some sort of fight scene. But due to the large amount of details, I simplified the designs of both characters and applied a changing variable on there arms to hint the “fight”.