​

//click for sound!

//press F for fullscreem

​

let img;

let pointcloud;

​

function preload() {

  // depthmaps via 

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

  img = loadImage('ttt2.jpg');

  sound = loadSound("harmonic.mp3");

}

function setup() {

  createCanvas(windowWidth, windowHeight, WEBGL);

  pointcloud = prepPoints(img,10);

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

      initSound(0.5);

}

​

function draw() {

  background(0,100,0);

  push();

  scale(0.5)

 fill(255,0,0); 

  noStroke();

//rotate(frameCount*0.01);

  translate(-500,-1100);

  let scl = 2;

  fill(255);

    let frequencyValues = readFrequencies();

  // 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.00)*20 - v.z;

    const r = cos(frameCount*4+i)*0.02;

    push();

     let len = frequencyValues.length; // total frequencies available

    let frequencyAtIndex = frequencyValues[i % len];

    let frequencyAmplified = frequencyAtIndex * 400;

    let w = 30 + frequencyAmplified;

  //normalMaterial()

    translate(x,y,z);

    rotateX(r+w);

    fill(255,105,180);

cylinder(w/1000+tan(frameCount*0.002)*2, z/5);

    pop();

  });

  pop();

  if(mouseIsPressed) {

    push();

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

    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;

}

function readFrequencies(theRes=10) {

  let fftResolution = theRes;// take every nth frequency

  let fftValues = analyzeAudioInput(fftResolution)

  return fftValues;

}

​

function readSoundLevel(theMin = 0.5, theMax = 0.9) {

  let spectrum = fft.analyze();

  const nyquist = 22050;

​

  // get the centroid

  let spectralCentroid = fft.getCentroid();

​

  // the mean_freq_index calculation is for the display.

  let mean_freq_index = spectralCentroid / (nyquist / spectrum.length);

  let centroidplot = map(log(mean_freq_index), 0, log(spectrum.length), 0, 1);

  // extract preferred centroid bands

  let vmin = theMin;

  let vmax = theMax;

  let v0 = map(max(vmin, min(centroidplot, vmax)), vmin, vmax, 0, 1);

​

  // returns centroid

  return v0;

}

​

​

// call function initSound in setup()

// to setup mic input and fft analysis.

function initSound(theSmoothing=2) {

  // make the microphone available

  mic = new p5.AudioIn();

  mic.start();

  // create a new FFT analyzer with

  // the microphone as input.

  fft = new p5.FFT(theSmoothing);

  fft.setInput(mic);

  // have a look at the documentation at

  // https://p5js.org/reference/#/p5.FFT

  // for a more comprehensive overview of

  // methods to analyse sound with p5js.

}

​

// call function analyzeAudioInput in dra()

// to continuously read audio in and apply 

// the fft. this function will return an 

// array ofthe fft-analysis results.

function analyzeAudioInput(theSteps=100) {

  // fft returns an array of values

  // between 0 and 255, however we are 

  // normalising these values below. 

  let spectrum = fft.analyze(); 

  let fftValues = [];

  let steps = theSteps;

  let start = 0;

  let end = spectrum.length;

  for (let i = start; i < end; i = i + steps) {

    // we could do some calculations here if needed

    // we can reduce the resolution of values by 

    // increasing the value for variable steps 

    // eg. from 4 to 10 which will only add every 

    // 10th spectrum-value to array value (in case 

    // we want to work with a lower resolution 

    // of numbers)

    fftValues.push(map(spectrum[i],0,255,0,1));

  }

  return fftValues;

}

​

​

​

​

​

///////////////////////////////////////////////////////////////

// 

// BoundingBox

// 

// calculates the boundingbox for a letter

function getBoundingBoxFrom(thePoints, theScale) {

  let x0 = 10000;

  let y0 = 10000;

  let x1 = -10000;

  let y1 = -10000;

  thePoints.forEach((el) => {

    x0 = x0 > el.x * theScale ? el.x * theScale : x0;

    y0 = y0 > el.y * theScale ? el.y * theScale : y0;

    x1 = x1 < el.x * theScale ? el.x * theScale : x1;

    y1 = y1 < el.y * theScale ? el.y * theScale : y1;

  });

  w = x1 - x0;

  h = y1 - y0;

  cx = x0 + w / 2;

  cy = y0 + h / 2;

  return { x: x0, y: y0, x0, y0, x1, y1, w, h, cx, cy };

}

​

///////////////////////////////////////////////////////////////

// 

// Grid

// 

// overlays the canvas with a grid (by default 10x10)

// the grid can be (de)activated with setting isShowGrid

// or using key g

function showGrid(isShow, theNumOfGridCellsPerAxis = 10) {

  if (isShow) {

    noStroke();

    fill(0, 40);

    for (let i = 0; i <= theNumOfGridCellsPerAxis; i++) {

      let x = int(map(i, 0, theNumOfGridCellsPerAxis, 0, width - 1));

      ellipse(x, 0, 1, height);

    }

    for (let i = 0; i <= theNumOfGridCellsPerAxis; i++) {

      let y = int(map(i, 0, theNumOfGridCellsPerAxis, 0, height - 1));

      rect(0, y, width, 1);

    }

  }

}

let isShowGrid = false;

​

// enter fullscreen

​

function mousePressed() {

  // Play the sound when the mouse is pressed

  sound.play();}

​

function keyPressed() {

  if (key === "s") {

    if (this._renderer.elt.svg !== undefined) {

      saveSVG(label + ".svg");

    } else {

      saveCanvas(label + ".png");

    }

  }

    if (key === 'f' || key === 'F') {

    enterFullscreen();

  }

}

​

​

function enterFullscreen() {

  var fs = fullscreen();

  if (!fs) {

    fullscreen(true);

  }

}

​

/* full screening will change the size of the canvas */

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}

​