​

function preload() {

    img = loadImage('ryuichi-80.jpg');

}

​

function setup() {

    createCanvas(600, 600);

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

}

​

function draw() {

    background(255);

    for (let gridY = 0; gridY < img.height; gridY++) {

        const tileHeight = height / img.height;

        const posY = tileHeight * gridY;

        stroke(0);

        strokeWeight(1);

        beginShape();

        vertex(0, posY);

​

​

        for (let gridX = 0; gridX < img.width; gridX++) {

            const tileWidth = width / img.width;

            const posX = tileWidth * gridX;

​

            img.loadPixels();

            const c = color(img.get(gridX, gridY));

            const greyscale = round(red(c) * 0.222 + green(c) * 0.707 + blue(c) * 0.071);

            let l3 = map(greyscale, 0, 255, 12, 0);

​

            const angle = map(posX, 0, img.width, 0, TWO_PI) * 10;

            const yWave = map(sin(angle), -1, 1, posY - l3, posY + l3);

​

            vertex(posX - tileWidth/2, posY);

            vertex(posX, yWave);

            vertex(posX + tileWidth/2, posY);

        }

        vertex(width, posY);

        endShape();

    }

}