let sizeSlider;

var dotSize;

var space;

var c;

​

​

function preload() {

  img = loadImage('https://picsum.photos/800/800'); // Load the image

}

​

function setup() {

  createCanvas(1024, 768);

​

  noStroke();

  colorMode(RGB);

  ellipseMode(CORNER);

  img.resize(400,400);

  sizeSlider = createSlider(4, 20, 6);

  sizeSlider.position(10, 10);

  sizeSlider.style('width', '200');

}

​

function draw() {

  background(255);

  dotSize = sizeSlider.value();

  space = dotSize /2;

​

  for (var x = 1; x < img.width; x = x + (dotSize+space)) {

    for (var y = 1; y < img.height; y = y + (dotSize+space)) {

      c = img.get(x, y);

      fill(c);

      circle(x, y, dotSize);

    } // end for y

  } // end for x

}

​

​