​

// // Frequency of the waves multiplier

const sineIncr = 0.1;

// // Height of the waves

const sineHeight = 10;

// // The space between the curve rows

const spaceBetweenRows = 2;

​

​

function preload() {

  portrait = loadImage('queens-gambit-500.jpg');

}

​

function setup() {

  createCanvas(500, 500);

  print(portrait.width + ' • ' + portrait.height);

}

​

function draw() {

  background(255);

​

  // Modify the stroke to have larger lines

  strokeWeight(1);

​

  portrait.loadPixels();

​

  // For every rows multiple of sineHeight

  for (let y = 0; y < portrait.height; y += sineHeight) {

    beginShape();

    // We start with a position of 0 for the sine function

    // Think of it as the x on the graphs

    let sinePos = 0;

​

    // Go until it fills the width

    while (sinePos < width) {

      // We have multiple points per pixel

      // So we have to pick the closest point for a x coordinate by rounding it

      const closestPixelLoc = round(sinePos) + y * portrait.width;

​

      // Compute the brightness of that pixel in [0, 1]

      const c = color(portrait.pixels[closestPixelLoc]);

      const br = brightness(c) / 255;

​

      // The sine wave is oscillating above and under the pixel height

      curveVertex(sinePos, y + sin(sinePos) * (sineHeight / 2 - spaceBetweenRows));

​

      // We increase the x position of the sine wave

      // We use an exponential function to vary faster when the pixel is brighter

      sinePos += exp(br * 4) * sineIncr;

    }

    endShape();

  }

​

  // Break the loop

  noLoop();

}