let x_step, y_step, y_max;

function preload() {

  sample_image = loadImage("seurat.png");

}

function setup() {

  createCanvas(500, 336);

  select('#x_step').changed(xChanged);

  select('#y_step').changed(yChanged);

  select('#y_max').changed(maxChanged);

  x_step = select('#x_step').value();

  y_step = select('#y_step').value();

  y_max = select('#y_max').value();

  noLoop();

}

function draw() {

  background(255);

  stroke(0);

  for (let i = 0; i < sample_image.height; i += y_step) {

    beginShape();

    for (let j = 0; j < sample_image.width; j += x_step) {

      let c = sample_image.get(j, i);

      let b = brightness(c);

      b = map(b, 0, 255, 0, y_max);

      vertex(j, i - b);

    }

    endShape();

  }

}

function xChanged() {

  x_step = this.value();

  draw();

}

function yChanged() {

  y_step = this.value();

  draw();

}

function maxChanged() {

  y_max = this.value();

  draw();

}