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,0,0,100);

//  noStroke();

  noFill();

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

    beginShape();

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

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

      let b = brightness(c);

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

  //  stroke(c);

  //    fill(c, 100);

//      strokeWeight(random(1, 2*b));

      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();

}

​

function keyPressed() {

  if (key == 's') {

    save('output.png');

  }

}