let faceH = 180;

let faceW = faceH * 0.62;

let eyeWidth = faceW / 5;

let eyeHeight = eyeWidth / 2;

​

function setup() {

  // create canvas

  createCanvas(700, 400);

​

  button1 = createButton('Designer');

  button1.position(100, height-122);

  button1.style('background', 'none');

  button1.style('color', 'white');

  button1.mousePressed(designer);

  button2 = createButton('Programmer');

  button2.position(width-180, height-122);

  button2.style('background', 'none');

  button2.style('color', 'white');

  button2.mousePressed(programmer);

​

  textAlign(CENTER);

  noLoop();

}

​

function draw() {

  background(255);

  person();

  if(DesignerBg){

    designer();

  }else{

    programmer();

  }

}

​

function designer() {

  bgFlag = true;

  background(255);

  const name = "Fady";

  textSize(50);

​

  for (let i = 0; i < 180; i++) {

    push();

    fill(random(255), random(255), 255);

    translate(random(width), random(height));

    rotate(random(2 * PI));

    text(name, 0, 0);

    pop();

  }

  person();

  text("Designer", width/2, height-50);

  //glasses

    fill("rgba(157,237,241,0.7)");

    stroke("#012A21");

    strokeWeight(3);

    line(width/2-5, height/2-30, width/2+10, height/2-30);

    rect(width/2-52, height/2-40, 45, 30, 10);

    rect(width/2+8, height/2-40, 45, 30, 10);

}

​

function programmer() {

  bgFlag = false;

  background(0);

  textSize(40);

  const name = "01101";

​

  for (let i = 0; i < 150; i++) {

    push();

    fill(0, random(255), 0);

    translate(random(width), random(height));

    rotate(random(2 * PI));

    text(name, 0, 0);

    pop();

  }

  person();

  text("Programmer", width/2, height-50);

  //glasses

    fill("rgba(197,241,157,0.7)");

    stroke("#012A21");

    strokeWeight(3);

    line(width/2-5, height/2-30, width/2+10, height/2-30);

    rect(width/2-52, height/2-40, 45, 30, 10);

    rect(width/2+8, height/2-40, 45, 30, 10);

}

​

function person(){

  //lower bg

  fill("#222");

  rect(0, height/2+50, width, height/2-50);

  fill("rgb(201,82,82)");

  ellipse(width/2, height-60, 130, 200);

  //neck

  fill("rgb(231,205,161)");

  quad(width/2-25, height/2+30, width/2+25, height/2+30, width/2+40,     height/2+120, width/2-40, height/2+120);

  strokeWeight(1);

  //face

  ellipse(width/2-2, height/2-30, faceW, faceH);

  //Ears

  ellipse(width/2-62, height/2-27, 20, 40);

  ellipse(width/2+62, height/2-27, 20, 40);

  noStroke();

  //lips

  fill("#D86E6E");

  noStroke();

  arc(width/2-5,height/2+30,20,7,PI,0);

  arc(width/2+5,height/2+30,20,7,PI,0);

  fill("#AA4E4E");

  arc(width/2,height/2+30,30,12,0,PI);

  //Nose 

  fill("#D4BB91")

  ellipse(width/2, height/2, 12, 24);

  //eyes

  fill(255);

  ellipse (width/2-25, height/2-25, eyeWidth, eyeHeight);

  ellipse(width/2+25, height/2-25, eyeWidth, eyeHeight);

  fill(0);

  ellipse(width/2-25, height/2-25, 10, 10);

  ellipse(width/2+25, height/2-25, 10, 10);

  //Eyebrows

  noFill();

  stroke(0);

  strokeWeight(3);

  arc(width/2-25, height/2-32, 40, 20, 3 + PI/5, TWO_PI-0.5);

  arc(width/2+25, height/2-32, 40, 20, 3 + PI/5, TWO_PI-0.5);

  //hair

  fill(0);

  noStroke();

  quad(width/2-45, height/2-95, width/2-42, height/2-70, width/2-55, height/2-40, width/2-60, height/2-45);

  quad(width/2+45, height/2-95, width/2+42, height/2-70, width/2+55, height/2-40, width/2+60, height/2-45);

  quad(width/2-47, height/2-120, width/2-45, height/2-80, width/2+45, height/2-80, width/2+47, height/2-120);

  //t-shirt

  fill("rgb(201,82,82)");

  rect(width/2-60, height/2+90, 120, 100);

  ellipse(width/2-50, height-15, 100, 200);

  ellipse(width/2+50, height-15, 100, 200);

  stroke(70);

​

  textSize(18);  

​

}