let pointcloud;

​

function preload() {

  // depthmaps via 

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

  img = loadImage('940afc19cd0eb01c78904d43c2a80a8a.jpg');

  impact=loadFont("Yapari-Variable-VF.ttf");

}

​

​

function mousePressed() {

  if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {

    let fs = fullscreen();

    fullscreen(!fs);

  }}

​

function setup() {

  createCanvas(windowWidth, windowHeight, WEBGL);

  pointcloud = prepPoints(img,9);

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

}

​

function draw() {

  background(0);

  push();

  fill(255);

  noStroke();

  rotateY(frameCount*0.01);

  translate(-256,-256);

  let scl = 1;

  fill(255,210);

  // lights();

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

    const x = v.x * scl;

    const y = v.y * scl;

    const t = frameCount*4 + i;

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

    const r = (frameCount*4+i)*0.001;

    push();

    translate(x,y,z);

    // rotateX(r);

    textFont(impact);

    textSize(random(10,15));

stroke(255,0,0);

    fill(0,255,0,200)

    text("me",100 + z * 0.2,10);

    pop();

  });

  pop();

  if(mouseIsPressed) {

    push();

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

    image(img,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;y+= theRes) {

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

      let br = brightness(px);

      if(br>20) {

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

      }

    }

  }

  return points;

}

​

​