/*
 * @name Pointillism
 * @arialabel Dots generate on the screen. As the user’s mouse moves left the dots become smaller and as the user’s mouse moves right, the dots become bigger. The colors of the dots are dependent on an image of choice
 * @description By Dan Shiffman. Mouse horizontal location controls size of
 * dots. Creates a simple pointillist effect using ellipses colored according
 * to pixels in an image.
 * <p><em><span class="small"> To run this example locally, you will need an
 * image file, and a running <a href="https://github.com/processing/p5.js/wiki/Local-server">
 * local server</a>.</span></em></p>
 */
let img;
let smallPoint, largePoint;

function preload() {
  // img = loadImage('assets/moonwalk.jpg');
  img = loadImage('../../../../p5js-website-legacy-examples/assets/moonwalk.jpg');
}

function setup() {
  // createCanvas(720, 400);
  createCanvas(windowWidth, windowHeight);
  smallPoint = 4;
  largePoint = 40;
  imageMode(CENTER);
  noStroke();
  background(255);
  img.loadPixels();
}

function draw() {
  let pointillize = map(mouseX, 0, width, smallPoint, largePoint);
  let x = floor(random(img.width));
  let y = floor(random(img.height));
  let pix = img.get(x, y);
  fill(pix, 128);
  ellipse(x, y, pointillize, pointillize);
}