let superheroPow=[]

sceneNum=0

​

​

function preload(){

​

  for (var i=1; i<200;i++){

    //appearance api

    var apiKey1 = 'https://www.superheroapi.com/api.php/2696695837249564/'+i+'/powerstats'

    sph1i=loadJSON(apiKey1,gotData)

    superheroPow.push(sph1i)

   //power api

    var apiKey2 = 'https://www.superheroapi.com/api.php/2696695837249564/'+i+'/appearance'

    sph2i=loadJSON(apiKey2,gotData)

    superheroApp.push(sph2i)

   }

}

​

​

function gotData(data){

   console.log(data);

}

​

​

function setup() {

   createCanvas(600, 600);

      button1=createButton('female')

      button1.mousePressed(female)

      button1.position(150,300)

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

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

      button2=createButton(' male ')

      button2.mousePressed(male)

      button2.position(350,300)

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

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

     // button2.style('padding', '5px');

      button3=createButton('home')

      button3.mousePressed(home)

      button3.position(50,550)

      button3.style('background', 'transparent');

      button3.style('color', 'salmon');

  }

  function home(){

    print(0)

    sceneNum=0

  }

​

​

​

  function male(){

     print(1)

     sceneNum=1

   }

   function female(){

     print(2)

     sceneNum=2

   }

​

function draw() {

  background(255)

  //noLoop()

  switch (sceneNum) {

    case 0:

      button1.show()

      button2.show()

     fill(0)

   text('This device will exam characters in comics, and see if there is any stereotype.', 90,200)

      console.log('scene 0');

      //fill(255)

      break;

    case 1:

      button1.hide()

      button2.hide()

      button3.show()

      console.log('scene 1');

      //fill(200,0,0)

      stroke(0,200,200,100)

      line(0,100,600,100)

      line(0,200,600,200)

      line(0,300,600,300)

      line(0,400,600,400)

      line(0,500,600,500)

      line(100,0,100,600)

      line(200,0,200,600)

      line(300,0,300,600)

      line(400,0,400,600)

      line(500,0,500,600)

      for (var a=0;a<100;a++){  

    //black hair

    if(superheroApp[a]["hair-color"]=='Black'&&superheroApp[a]["gender"]=='Male'){

      x=superheroPow[a]["intelligence"]

      y=superheroPow[a]["strength"]

      noStroke()

      fill(0,0,0,100)

      circle(x*5,y*5,10)

      text(superheroApp[a]["name"],x*5-15,y*5-5)

    }

    //blond hair

    if(superheroApp[a]["hair-color"]=='Blond'&&superheroApp[a]["gender"]=='Male'){

      x=superheroPow[a]["intelligence"]

      y=superheroPow[a]["strength"]

      noStroke()

      fill(245,224,119,200)

      circle(x*5,y*5,10)

      text(superheroApp[a]["name"],x*5-15,y*5-5)

    }

    //auburn hair

     if(superheroApp[a]["hair-color"]=='Auburn'&&superheroApp[a]["gender"]=='Male'){

      x=superheroPow[a]["intelligence"]

      y=superheroPow[a]["strength"]

      noStroke()

      fill(165,42,42,100)

      circle(x*5,y*5,10)

      text(superheroApp[a]["name"],x*5-15,y*5-5)

    }

    //red hair

    if(superheroApp[a]["hair-color"]=='Red'&&superheroApp[a]["gender"]=='Male'){

      x=superheroPow[a]["intelligence"]

      y=superheroPow[a]["strength"]

      noStroke()

      fill(118, 65, 42,100)

      circle(x*5,y*5,10)

      text(superheroApp[a]["name"],x*5-15,y*5-5)

    }

    //brown hair

    if(superheroApp[a]["hair-color"]=='Brown'&&superheroApp[a]["gender"]=='Male'){

      x=superheroPow[a]["intelligence"]

      y=superheroPow[a]["strength"]

      noStroke()

      fill(35,18,11,100)

      circle(x*5,y*5,10)

      text(superheroApp[a]["name"],x*5-15,y*5-5)

    }

    //green hair

    if(superheroApp[a]["hair-color"]=='Green'&&superheroApp[a]["gender"]=='Male'){

      x=superheroPow[a]["intelligence"]

      y=superheroPow[a]["strength"]

      noStroke()

      fill(0,100,0,100)

      circle(x*5,y*5,10)

      text(superheroApp[a]["name"],x*5-15,y*5-5)

    }

    //orange hair

     if(superheroApp[a]["hair-color"]=='Orange'&&superheroApp[a]["gender"]=='Male'){

      x=superheroPow[a]["intelligence"]

      y=superheroPow[a]["strength"]

      noStroke()

      fill(200,100,0,100)

      circle(x*5,y*5,10)

      text(superheroApp[a]["name"],x*5-15,y*5-5)

    }

    //purple hair 

     if(superheroApp[a]["hair-color"]=='Purple'&&superheroApp[a]["gender"]=='Male'){

      x=superheroPow[a]["intelligence"]

      y=superheroPow[a]["strength"]

      noStroke()

      fill(200,0,200,100)

      circle(x*5,y*5,10)

      text(superheroApp[a]["name"],x*5-15,y*5-5)

    }

    }

    break;

    //female characters

    case 2:

    background(255)

    button1.hide()

    button2.hide()

    button3.show()

    console.log('scene 2');

      stroke(0,200,200,100)

      line(0,100,600,100)

      line(0,200,600,200)

      line(0,300,600,300)

      line(0,400,600,400)

      line(0,500,600,500)

      line(100,0,100,600)

      line(200,0,200,600)

      line(300,0,300,600)

      line(400,0,400,600)

      line(500,0,500,600)

   for (var a=0;a<100;a++){  

    //black hair

    if(superheroApp[a]["hair-color"]=='Black'&&superheroApp[a]["gender"]=='Female'){

      x=superheroPow[a]["intelligence"]

      y=superheroPow[a]["strength"]

      noStroke()

      fill(0,0,0,100)

      circle(x*5,y*5,10)

      text(superheroApp[a]["name"],x*5-15,y*5-5)

    }

    //blond hair

    if(superheroApp[a]["hair-color"]=='Blond'&&superheroApp[a]["gender"]=='Female'){

      x=superheroPow[a]["intelligence"]

      y=superheroPow[a]["strength"]

      noStroke()

      fill(245,224,119,200)

      circle(x*5,y*5,10)

      text(superheroApp[a]["name"],x*5-15,y*5-5)

    }

    //auburn hair

     if(superheroApp[a]["hair-color"]=='Auburn'&&superheroApp[a]["gender"]=='Female'){

      x=superheroPow[a]["intelligence"]

      y=superheroPow[a]["strength"]

      noStroke()

      fill(165,42,42,100)

      circle(x*5,y*5,10)

      text(superheroApp[a]["name"],x*5-15,y*5-5)

    }

    //red hair

    if(superheroApp[a]["hair-color"]=='Red'&&superheroApp[a]["gender"]=='Female'){

      x=superheroPow[a]["intelligence"]

      y=superheroPow[a]["strength"]

      noStroke()

      fill(118, 65, 42,100)

      circle(x*5,y*5,10)

      text(superheroApp[a]["name"],x*5-15,y*5-5)

    }

     //brown hair

    if(superheroApp[a]["hair-color"]=='Brown'&& superheroApp[a]["gender"]=='Female'){

      x=superheroPow[a]["intelligence"]

      y=superheroPow[a]["strength"]

      noStroke()

      fill(35,18,11,100)

      circle(x*5,y*5,10)

      text(superheroApp[a]["name"],x*5-15,y*5-5)

    }

    //green hair

    if(superheroApp[a]["hair-color"]=='Green' && superheroApp[a]["gender"]=='Female'){

      x=superheroPow[a]["intelligence"]

      y=superheroPow[a]["strength"]

      noStroke()

      fill(0,100,0,100)

      circle(x*5,y*5,10)

      text(superheroApp[a]["name"],x*5-15,y*5-5)

    }

    //orange hair

     if(superheroApp[a]["hair-color"]=='Orange'&&superheroApp[a]["gender"]=='Female'){

      x=superheroPow[a]["intelligence"]

      y=superheroPow[a]["strength"]

      noStroke()

      fill(200,100,0,100)

      circle(x*5,y*5,10)

      text(superheroApp[a]["name"],x*5-15,y*5-5)

    }

    //purple hair 

     if(superheroApp[a]["hair-color"]=='Purple'&&superheroApp[a]["gender"]=='Female'){

      x=superheroPow[a]["intelligence"]

      y=superheroPow[a]["strength"]

      noStroke()

      fill(200,0,200,100)

      circle(x*5,y*5,10)

      text(superheroApp[a]["name"],x*5-15,y*5-5)

    }

   }

  } 

}