/**
Hier word het scherm gemaakt nu 100 pixels breed en 100 pixels hoog
**/
function setup(){
  createCanvas(200, 200);
}

// verplaatsings afstand horizontaal
let verplaatsingHorizontaal = 10;
let horizontalePositie = 20;


// verplaatsings afstand vertikaal
let verplaatsingVertikaal = 10;
let vertikalePositie = 20;

/**
alles binnen dit stukje wordt iedere seconde gedaan 
**/
function draw() {
  // maak de achtergrond zwart
  // !! nu wordt de achtegrond niet meer zwart gemaakt elke seconde
  // teken een blokje 50 pixels naar rechts en 50 pixels naar beneden
  tekenPixel(horizontalePositie,vertikalePositie)
}

function keyPressed() {
  if (keyCode === LEFT_ARROW) {
    horizontalePositie = horizontalePositie + verplaatsingHorizontaal * -1;
  } else if (keyCode === RIGHT_ARROW) {
    horizontalePositie = horizontalePositie + verplaatsingHorizontaal;
  } else if (keyCode === UP_ARROW) {
    vertikalePositie = vertikalePositie + verplaatsingVertikaal * -1;
  } else if (keyCode === DOWN_ARROW) {
    vertikalePositie = vertikalePositie + verplaatsingVertikaal;
  }
}

function tekenPixel(x, y){
  noStroke();
  fill(color(0, 0, 0));
  rect(x,y,10,10);
}