let tileSize = 20;

let tiles = [];

let brushSize = 40;

​

function setup() {

  createCanvas(640, 480);

  capture = createCapture(VIDEO);

  capture.size(640, 480);

  capture.hide();

​

  createTiles();

​

  let sizeSlider = createSlider(5, 40, 20, 5);

  sizeSlider.position(10, height + 10);

  sizeSlider.input(() => {

    tileSize = sizeSlider.value();

    createTiles();

  });

​

  let brushSlider = createSlider(10, 100, 40, 5);

  brushSlider.position(10, height + 40);

  brushSlider.input(() => {

    brushSize = brushSlider.value();

  });

}

​

function createTiles() {

  tiles = [];

  for (let y = 0; y < height; y += tileSize) {

    for (let x = 0; x < width; x += tileSize) {

      tiles.push(new Tile(x, y));

    }

  }

}

​

function draw() {

  background(0);

  capture.loadPixels();

​

  for (let tile of tiles) {

    tile.update();

    tile.display();

  }

​

  noFill();

  stroke(255);

  ellipse(mouseX, mouseY, brushSize, brushSize);

}

​

function mouseDragged() {

  for (let tile of tiles) {

    if (dist(mouseX, mouseY, tile.x + tileSize/2, tile.y + tileSize/2) < brushSize/2) {

      tile.reveal();

    }

  }

}

​

class Tile {

  constructor(x, y) {

    this.x = x;

    this.y = y;

    this.revealed = false;

    this.color = color(0);

  }

​

  update() {

    if (this.revealed) {

      let c = capture.get(this.x, this.y);

      this.color = color(c[0], c[1], c[2]);

    }

  }

​

  display() {

    noStroke();

    fill(this.revealed ? this.color : 0);

    rect(this.x, this.y, tileSize - 1, tileSize - 1);

  }

​

  reveal() {

    this.revealed = true;

  }

}