ASSIGNMENT 5: AVATAR GENERATOR

// Please incorporate the following programming concepts in your Avatar Generator:
// 2 or more separate parts (example: Head and Body; Face and Hair; Arms, Legs, Body, Head; etc…)
// Creating illustrations you draw outside of p5 and importing them in will look great but is not required.
// Use functions to generate each avatar
// Arrays and matrix transformations may be helpful but are not required.

/*
1) head with eyes, torso, arms and fingers
2) buttons for head, eyes, torso, arms
3) buttons can change width/shape
4) buttons on left to change colors
5) clicking on torso will import random logo (team aesthetics)
*/

let buttons = [];
let button1,button2,button3,button4,button5;
let w =20;
let h =20;

let c1;
let c2;
let c3;
let c4;

let logo =[];
let logo1,logo2;
let index =-1;
let toggle = false;

function preload() {
logo1 = loadImage('cursed.png')
logo2 = loadImage('meme.png')
}

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

  button1 = createButton('randomize head');
  button2 = createButton('randomize eyes');
  button3 = createButton('randomize torso');
  button4 = createButton('randomize arms');
  button5 = createButton('randomize logo/team');
buttons = [button1,button2,button3,button4,button5];  
 
  button1.position(500,80);
  button2.position(500,130);
  button3.position(500,200);
  button4.position(500,250);
  button5.position(500,300);
  
//buttonpressed randomizes width, height, color  
  button1.mousePressed(randomizeHead);
  button2.mousePressed(randomizeEyes);
  // button3.mousePressed(randomizeTorso);
  // button4.mousePressed(randomizeArms);
  button5.mousePressed(randomizeLogo);
  
  for(let i = 0; i< 5 ; i++){
    buttons[i].style('width','150px');
    buttons[i].style('height','30px');
  }
  
c1 = color(255,255,255);
c2 = color(43, 124, 255);
  
logo = [logo1, logo2]
}


function draw() {
  background(66, 135, 245);
  
  //head
  fill(c1);
  ellipse(250, 125, 100);
  
  //Leye
  fill(c2);
  ellipse(225, 125, 30);
  
  //Reye
  fill(c2);
  ellipse(275, 125, 30);
  
  //body
  fill(255);
  ellipse(250, 300, 100, 200);
  
  //L arm
  ellipse(170, 300, 50, 150);
  
  //R arm
  ellipse(330, 300, 50, 150);
  
  if(toggle){
    if (index <2){
      image(logo[index], 200,255, 100,100);
    }else{
      toggle = false
      index = -1
    }
    console.log(index)
}

}
  
function randomizeHead(){
  c1 = color(random(1,200), random(1,200), random(1,200));
}
function randomizeEyes(){
  c2 = color(random(50,255), random(50,255), random(50,255));
}
function randomizeLogo(){
  toggle = true;
  index ++;
}

/* BUTTONS */
  
  //head
  
  //eyes
  //arms + fingers
  //body
  //logo/team
  
/*
  w = random(100, 300); 
  //generates random new value every frame
  // background(0);
  
  //is our mouse inside of our rect?
  if(mouseX > (xPos- w/2) && mouseX < (xPos+w/2) &&
     mouseY > (yPos - h/2) && mouseY < (yPos + h/2)){
     console.log("mouse is in x square"); 
    fill(0);
  }else{
    fill(255);
  }
  
  //if button clicked --> turn background white
  if(buttonIsClicked){
   background(255); 
  }else{
    background(0);
  }
  rect(xPos, yPos, w, h);
  console.log(buttonIsClicked);
}

function mousePressed(){
  if(mouseX > (xPos - w/2) && mouseX < (xPos+w/2) &&
     mouseY > (yPos - h/2) && mouseY < (yPos + h/2)){
   buttonIsClicked = !buttonIsClicked;
  }
*/