/*https://editor.p5js.org/p5/sketches/Image:_Pointillism
 * @name Pointillism
 * @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('uploads/p5editor/1624215163.png');
}

function setup() {
  createCanvas(720, 400);
  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);
}