let width = 500;

let height = 500;

​

let rows = 4;

let columns = 4;

​

// 5w x 7h for bitmap font

// let rows = 7;

// let columns = 5;

​

let _x = 0;

let _y = 0;

let x_pos = 0;

let y_pos = 0;

​

const upbtn = document.getElementById('up');

upbtn.addEventListener('click', function handleClick() {

  document.getElementById('cnsl').value += 'up();\n';

});

​

const downbtn = document.getElementById('down');

downbtn.addEventListener('click', function handleClick() {

  document.getElementById('cnsl').value += 'down();\n';

});

​

const leftbtn = document.getElementById('left');

leftbtn.addEventListener('click', function handleClick() {

  document.getElementById('cnsl').value += 'left();\n';

});

​

const rightbtn = document.getElementById('right');

rightbtn.addEventListener('click', function handleClick() {

  document.getElementById('cnsl').value += 'right();\n';

});

​

const fillinbtn = document.getElementById('fillin');

fillinbtn.addEventListener('click', function handleClick() {

  document.getElementById('cnsl').value += 'fill_in();\n';

});

​

function run() {

  var el = document.getElementById('cnsl');

  el && eval(el.value);

​

  document.getElementById('program').innerHTML += document.getElementById('cnsl').value

  document.getElementById('cnsl').value = ""

}

​

class Square {

  constructor(x, y) {

    this.x = x;

    this.y = y;

    this.width = width/columns;

    this.height = height/rows;

    this.fill = false;

  }

​

  display() {

    if (this.fill == true){   fill(color("black"));

    } else {

        fill(color("white"));

      }

    rect(this.x, this.y, this.width, this.height);

  }

  stand(){

    fill(color("orange"))

    ellipse(this.x+this.width/2, this.y+this.height/2,

             this.width/2, this.height/2);

  }

}

​

function drawBlankSquares(){

  background(220);

  for (let y = 0; y < squares.length; y++) {

    for (let x = 0; x < squares[y].length; x++) {

      squares[y][x].display();

    }

  }

}

​

function fill_in(){

  if (x_pos < squares.length &&

      y_pos < squares[0].length &&

      x_pos >= 0 &&

      y_pos >= 0){

    squares[x_pos][y_pos].fill = true;

  }

}

function f(){ fill_in(); }

​

function left(){ if (x_pos > 0){ x_pos -= 1;} }

function l(){ left(); }

​

function right(){ if (x_pos < columns-1){ x_pos += 1;} }

function r(){ right(); }

​

function up(){ if (y_pos > 0){ y_pos -= 1;} }

function u(){ up(); }

​

function down(){ if (y_pos < rows-1){ y_pos += 1;} }

function d(){ down(); }

​

function reset(){

  document.getElementById('cnsl').value = "";

  location.reload();

}

​

function setup() {

  createCanvas(width, height);

  for (let x=0; x<=width; x+=width/columns){

    _y = 0;

    squares[_x] = [];

    for (let y=0; y<=height; y+=height/rows){

      squares[_x][_y] = (new Square(x, y));

      _y++;

    }

    _x++;

  }

  follow_directions();

  drawBlankSquares();

​

  squares[x_pos][y_pos].stand();

}

​

function draw() {

  drawBlankSquares();

  squares[x_pos][y_pos].stand();

}

​

/*

function sleep(millisecondsDuration){

  return new Promise((resolve) => {

    setTimeout(resolve, millisecondsDuration);

  })

}

*/

​

function write_A(){ // need a 5w x 7h grid

  right(); right(); fill_in(); down(); left(); fill_in(); down(); left(); fill_in(); down(); fill_in(); down(); fill_in(); down(); fill_in(); down(); fill_in(); up(); up(); right(); fill_in(); right(); fill_in(); right(); fill_in(); right(); fill_in(); up(); fill_in(); up(); fill_in(); up(); left(); fill_in(); right(); down(); down(); down(); down(); fill_in(); down(); fill_in(); 

}

​

function write_B(){ // need a 5w x 7h grid

  fill_in(); down(); fill_in(); down(); fill_in(); down(); fill_in(); down(); fill_in(); down(); fill_in(); down(); fill_in(); right(); fill_in(); right(); fill_in(); right(); fill_in(); up(); right(); fill_in(); up(); fill_in(); up(); left(); fill_in(); left(); fill_in(); left(); fill_in(); left(); up(); up(); up(); right(); fill_in(); right(); fill_in(); right(); fill_in(); down(); right(); fill_in(); down(); fill_in(); 

}

​

function write_C(){ // need a 5w x 7h grid

  down(); fill_in(); down(); fill_in(); down(); fill_in(); down(); fill_in(); down(); fill_in(); right(); down(); fill_in(); right(); fill_in(); right(); fill_in(); up(); right(); fill_in(); up(); up(); up(); up(); fill_in(); up(); left(); fill_in(); left(); fill_in(); left(); fill_in(); 

}

​

// ---------------------------------------------------

//           Write your code here ↓

// ---------------------------------------------------

​

function follow_directions(){

  //write_A();

  // write_B();

  //write_C();

  /*

  down()

  fill_in()

  right()

  right()

  down()

  fill_in()

  right()

  fill_in()

  down()

  down()

  fill_in()

  */

}

​