let pointcloud;

​

function preload() {

  // depthmaps via 

  // https://huggingface.co/sd-concepts-library/depthmap/

  img = loadImage('fishh.jpeg');

}

function setup() {

  createCanvas(windowWidth, windowHeight, WEBGL);

  pointcloud = prepPoints(img,15);

  console.log("num-of-points:", pointcloud.length);

}

​

function draw() {

  background(0);

  push();

  fill(0);

  noStroke();

  // stroke(0,0,102)

  // rotateZ(frameCount*0.01);

  translate(-256,-440);

  let scl = 1;

  fill(51,(frameCount%70)*3,255);

  blendMode(SCREEN)

  lights();

  pointcloud.forEach((v,i)=> {

    const x = v.x * scl;

    const y = v.y * scl;

    const t = (frameCount*0.05) + i;

    const z =sin(t*0.002)*20 - v.z;

    const r = cos(frameCount+1.5-i)*0.5;

    push();

    translate(x,y,z);

    rotateY(r);

    ellipse(1,1,1 + z * 0.25);

    pop();

  });

  pop();

  if(mouseIsPressed) {

    push();

    blendMode(MULTIPLY)

    translate(-img.width/2, -img.height/2);

    image(img,0,0,0)

    pop();

  }

}

​

function prepPoints(theImg, theRes) {

  let points = [];

  for(let x=0;x<theImg.width;x+= theRes) {

    for(let y=0;y<theImg.height-20;y+= theRes) {

      let px = theImg.get(x,y);

      let br = brightness(px);

      if(br>20) {

        points.push({x,y,z:br});

      }

    }

  }

  return points;

}

​

function keyPressed() {

  if (key === 's' || key === 'S') {

    saveCanvas('fish', 'jpg');

  }

}

​