xxxxxxxxxx
/******************
Code by Vamoss
Original code link:
https://www.openprocessing.org/sketch/392918
Author links:
http://vamoss.com.br
http://twitter.com/vamoss
http://github.com/vamoss
******************/
let img;
const vSpace = 20;
const hSpace = 15;
const amplitudeHeight = vSpace/2;
const precision = 1;
function preload(){
img = loadImage("photo_vertical.jpg");
}
function setup() {
createCanvas(img.width, img.height);
noFill();
stroke(0);
}
function draw() {
background(255);
let frequency = -frameCount;
for (let y = vSpace; y < height-vSpace*2; y+=vSpace) {
beginShape();
let x = 0;
let prevAmplitude = 0;
while (x < width) {
let colorIntensity = brightness(img.get(x, y));
let amplitude = 1-colorIntensity/255;
for(let i=0; i<hSpace; i+=precision){
let curAmpitude = lerp(prevAmplitude, amplitude, i/hSpace);
x+=precision;
frequency += curAmpitude;
vertex(x, y+sin(frequency)*curAmpitude*amplitudeHeight);
}
prevAmplitude = amplitude;
}
endShape();
}
}
> p5.js says: It looks like there was a problem loading your image. Try checking if the file path [https://deckard.openprocessing.org/user65884/visual392918/hfc864b9866b790ef8a14ed9f3e6f121c/photo_vertical.jpg] is correct, hosting the image online, or running a local server.[https://github.com/processing/p5.js/wiki/Local-server]