​

var num = 10; //change this to create a diff number of squares in the grid of num x num

var Switch = false;

var x = 0;

var xspeed = .01;

​

function setup() {

  createCanvas(400, 400);

  background(220);

}

​

function draw() {

  noStroke();

​

  //for loops create the rows and columns of squares 

  for (var row = 0; row < num; row++) {

    for (var col = 0; col < num; col++) {

      var ver = row * height / num;

      var hor = col * width / num;

      if (Switch == true) {

        //turns the filling of squares into a switch

        if (row % 2 == 0 && col % 2 == 0) { //if row and column are even, fill black 

          fill('black')

          rect(hor, ver, width / num, height / num);

        } else if (row % 2 == 1 && col % 2 == 1) { //if row and column are odd, fill black 

          fill('black')

          rect(hor, ver, width / num, height / num);

        } else {

          fill('white')

          rect(hor, ver, width / num, height / num);

        }

​

      }

      //fills in squares differently if the switch is in a diff state

      if (Switch == false) {

        //bouncing ball

        fill('teal');

        rect(x, x, width / num, height / num);

        x += xspeed;

        if (x > width || x < 0) xspeed *= -1;

​

        //turns the filling of squares into a switch

        if (row % 2 == 0 && col % 2 == 0) { //if row and column are even, fill white 

          fill('white')

          rect(hor, ver, width / num, height / num);

        } else if (row % 2 == 1 && col % 2 == 1) { //if row and column are odd, fill white

          fill('white')

          rect(hor, ver, width / num, height / num);

        } else {

          fill('black')

          rect(hor, ver, width / num, height / num);

        }

      }

      //turns top left square into a mouse roll over (to indicate it's a button)

      if (mouseX < width / num && mouseY < height / num && row == 0 && col == 0) {

        fill(0, 128, 128);

        rect(hor, ver, width / num, height / num);

        noStroke();

      }

    }

​

  }

}

​

// turns the top left square into a button to toggle switching of the checkboard

function mousePressed() {

  if (mouseX < width / num && mouseY < height / num) {

    Switch = !Switch;

  }

​

}