const MOUSE_TILE_RADIUS = 16;

const TINT_COLOR = [255, 255, 255];

​

let tile_size;

let img_tile_size;

​

let img;

​

function preload() {

  img = loadImage("morbius.png");

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  tile_size = { 

    x : windowWidth / NUM_TILES.X,

    y : windowHeight / NUM_TILES.Y

  };

  img_tile_size = {

    x : img.width / NUM_TILES.X,

    y : img.height / NUM_TILES.Y

  }

}

​

function draw() {

  background(0);

  drawTiles();

}

​

function drawTiles() {

  for (let i = -MOUSE_TILE_RADIUS; i <= MOUSE_TILE_RADIUS; i++) {

    for (let j = -MOUSE_TILE_RADIUS; j <= MOUSE_TILE_RADIUS; j++) {

      let x = Math.floor((mouseX / windowWidth) * NUM_TILES.X);

      let y = Math.floor((mouseY / windowHeight) * NUM_TILES.Y);

      let d = dist(x, y, x + i, y + j);

      if (d < MOUSE_TILE_RADIUS) {

        image(img, 

              (x + i) * tile_size.x, 

              (y + j) * tile_size.y, 

              tile_size.x, 

              tile_size.y,

              (x + i) * img_tile_size.x,

              (y + j) * img_tile_size.y,

              img_tile_size.x,

              img_tile_size.y

        );

        let alpha = map(d, 0, MOUSE_TILE_RADIUS, 0, 255);

        stroke(0, 0, 0, alpha);

        fill(0, 0, 0, alpha);

        rect((x + i) * tile_size.x, (y + j) * tile_size.y, tile_size.x, tile_size.y);

      }

    }

  }

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}