var label="";

var blacks=[2,11,30,34,48,59,63];

let can;

function setup() {

  my_setup();

  setInterval(next,1000);

}

​

function my_setup(){

  c=-1;

  label="";

  can=createCanvas(400, 500);

  background(255,255,255);

  for (var i=0;i<=400;i+=50){

    stroke(0,0,0);

    line(0,i,width,i);

    line(i,0,i,width);

  }

  for(var k=0;k<blacks.length;k++){

     fill(0,0,0);

     rect((blacks[k]%8)*50,floor(blacks[k]/8)*50,50,50);

  }

  fill(255,255,255);

  rect(0,400,400,100);

  textSize(15);

  noStroke();

  fill(255,0,0);

  //text("How many white square cells are there?",0,430);

​

}

​

function draw() {

}

​

function next(){

  if (c== -1){

    fill(255,255,255);

    rect(0,400,400,100);

    textSize(15);

    noStroke();

    fill(255,0,0);

    text("How many white cells are there in the grid?",0,430);

    c+=1;

  }

  else if(c<blacks.length){

    fill(255,255,255);

    rect(0,400,400,100);

    textSize(15);

    noStroke();

    fill(255,0,0);

    text("How many white cells are there in the grid?",0,430);

    fill(color(77,86,86));

    rect((blacks[c]%8)*50,floor(blacks[c]/8)*50,50,50);

    c=c+1;

    label="#Black cells:"+c;

    fill(0,0,0);

    text(label,280,480);

  }

  else if(c==(blacks.length)){

     fill(0,0,255);

     text("#Total cells:"+64,150,480);

    c+=1;

  }

  else if(c==(blacks.length+3)) {

     fill(0,170,0);

     text("#White cells:"+(64-blacks.length)+"=",30,480);

     fill(0,0,0);

     textSize(30);

     text("-",260,485);

    c+=1;

  }

  else if (c>(blacks.length+8)){

     can.remove();

     my_setup();

  }

  else{

  c+=1;

  }

​

}

​

function array_has(a,n){

   for(let k=0;k<a.length;k++){

       if (a[k]===n){

        return true;

       }

   }

  return false;

}