pos: {

    x: 0,

    y: 0

  },

  vel: {

    x: 0,

    y: 0

  },

  radius: 48,

  speed: 4

}

​

let world = []

​

function setup() {

  createCanvas(400, 400);

  world = [

    [1,1,1,1,1,1,1,1,1,1],

    [1,0,0,0,0,0,0,0,0,1],

    [1,0,0,0,0,0,0,0,0,1],

    [1,1,1,1,1,1,1,1,1,1],

    [1,1,1,1,1,1,1,1,1,1],

    [1,1,1,1,1,1,1,1,1,1],

    [1,1,1,1,1,1,1,1,1,1],

    [1,1,1,1,1,1,1,1,1,1],

    [1,1,1,1,1,1,1,1,1,1],

    [1,1,1,1,1,1,1,1,1,1],

  ]

}

​

function drawTile(cell_size, pos) {

  noStroke()

  fill(12)

  const x = pos.x * cell_size

  const y = pos.y * cell_size

  rect(x, y, cell_size, cell_size)

}

​

function draw() {

  background(220);

​

  // Reset velocity

  player.vel.x = 0

  player.vel.y = 0

​

​

  // Move player

  if (keyIsDown(UP_ARROW)) {

    player.vel.y = -1

  }

​

  if (keyIsDown(DOWN_ARROW)) {

    player.vel.y = 1

  }

​

  if (keyIsDown(LEFT_ARROW)) {

    player.vel.x = -1

  }

​

  if (keyIsDown(RIGHT_ARROW)) {

    player.vel.x = 1

  }

​

  // Draw world

  const grid_size = 10

  const cell_size = width / grid_size

  for (let row = 0; row < grid_size; row++) {

    for (let col = 0; col < grid_size; col++) {

      let index = row * grid_size + col

      if (world[row][col] === 1) {

        drawTile(cell_size, {x: col, y: row})

      }

    }

  }

  let player_vel = createVector(player.vel.x, player.vel.y)

  player_vel.normalize()

  player.pos.x += player_vel.x * player.speed

  player.pos.y += player_vel.y * player.speed

​

​

  stroke(12)

  noFill()

  ellipse(player.pos.x, player.pos.y, player.radius, player.radius)

​

  let center = createVector(player.pos.x, player.pos.y)

​

  if (player_vel.mag() > 0) {

    drawArrow(center, player_vel.mult(player.radius / 2), 'blue')

  }

}

​

// draw an arrow for a vector at a given base position

function drawArrow(base, vec, myColor) {

  push();

  stroke(myColor);

  strokeWeight(3);

  fill(myColor);

  translate(base.x, base.y);

  line(0, 0, vec.x, vec.y);

  rotate(vec.heading());

  let arrowSize = 7;

  translate(vec.mag() - arrowSize, 0);

  triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);

  pop();

}