//Code by Yin Yu

​

​

let img; // creates image variable

let size = 7; // element size

let startx = 0; // starting x coordinate

let starty = 0; // starting y coordinate

let stepSize;

​

function preload() {

  img = loadImage('storke-tower.jpg'); // preloads Virginia picture!

}

​

function setup() {

  createCanvas(600, 400); // creates canvas

  img.loadPixels(); // loads image

  img.resize(600, 0); // resizes image to window size

  img.updatePixels(); // updates image

  stepSize=createSlider(0,600,600);

  stepSize.position(10,380);

  stepSize.style('width', '580px');

}

​

function draw() {

  clear();

  background(0);

  text('Size of Quanta', 15, 375);

  let size = floor(map(stepSize.value(), 0, width, 2, 40)); // maps mouseX value to element size

  for (var starty = 0; starty < img.height; starty++) { // creates pixel index

    for (var startx = 0; startx < img.width; startx++) {

      var index = (startx + starty * img.width) * 4;

      var r = img.pixels[index + 0];

      var g = img.pixels[index + 1];

      var b = img.pixels[index + 2];

​

      var bright = ((0.3 * r) + (0.59 * g) + (0.11 * b)) // sets pixel value to adjusted grayscale

​

      noStroke(); // disables element stroke

      fill(r,g,b);     

      triangle(startx, starty, startx + (size / 2), starty + size, startx + size, starty) // upside down triangle

​

      startx = startx + size -1 // set new startx value

    }

    starty = starty + size -1 // set new starty value

  }

}