/**
** Draai de kleuren om, en kun je ook een vertikale grens maken?
**/

let k1, k2, groottePixel, helftScherm;

function setup() {
  // de kleur van de pen
  k1 = color(0, 0, 0);
  k2 = color(255, 0, 0);
  // de afmetingen van het blokje
  groottePixel = 10;
  
  // De helft van het scherm
  helftScherm = 200;
  
  createCanvas(400, 400);
  background(color(200, 200, 200));
}

function draw() {
  // als het muis pijltje op de rechterhelft is
  if (mouseX > helftScherm) {
    // teken een zwart blokje
    tekenPixel(mouseX, mouseY, k1, groottePixel);
    print('muis horizontaal is ' + mouseX + ', en groter dan 200');
  } 
  
  // als het muis pijltje op de linkerhelft is
  if (mouseX < helftScherm) {
    // teken een rood blokje
    tekenPixel(mouseX, mouseY, k2, groottePixel);
    print('muis horizontaal is ' + mouseX + ', en kleiner dan 200');
  } 
}

function tekenPixel(x, y, kleur, grootte) {
  fill(kleur);
  strokeWeight(0);
  rect(x - grootte/2, y - grootte/2, grootte, grootte);
}