simultaneous contrast illusion (p5js)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>simultaneous contrast illusion</title>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.13/p5.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.13/addons/p5.dom.min.js"></script>

<script>
  
  function setup() {
    var myCanvas = createCanvas(800, 400);
    myCanvas.parent('p5js');
    fondo = document.getElementById("fondo");
    pos = document.getElementById("pos");
    noStroke();
  }
  
  function draw() {
    rectMode(CORNER);
    
    fill( 1*fondo.value );
    rect(0,0,400,400)

fill(255 - fondo.value);
    rect(400,0,400,400)

rectMode(CENTER);
    fill(128);
    rect(pos.value,200,100,100);
    rect(800-pos.value,200,100,100);
  }

</script>

</head>

</html>

https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.13/p5.min.js

https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.13/addons/p5.dom.min.js

https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.13/addons/p5.sound.min.js