Playing with sound - 8

Make some 'art' using three js. The grid geometry will change with the frequency

by blackpolygon

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/addons/p5.sound.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.min.js"></script>
<html>

  <head>
    <title>Playing with sound in 3D</title>
  </head>

  <body>
  </body>

</html>

CSS

html {
  width: 100%;
  height: 100%;
}

body {
  margin: 0 auto;
  overflow: hidden;
  height: 100%;
}

JavaScript

var container, camera, scene, renderer;
var mesh, geometry;

var worldWidth = 256,
  worldDepth = 32,
  worldHalfWidth = worldWidth / 2,
  worldHalfDepth = worldDepth / 2;

var mic, fft, spectrum;
var energySlots = worldWidth;


function setup() {
  noCanvas();
  init();
}


function init() {

  mic = new p5.AudioIn()
  mic.start();
  fft = new p5.FFT(0.6);
  fft.setInput(mic);

  scene = new THREE.Scene();
  scene.background = new THREE.Color(0x0C102F);
  scene.fog = new THREE.FogExp2(0x0C102F, 0.0003);

  camera = new THREE.PerspectiveCamera(120, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.y = 2200;
  camera.position.z = 4000;

  geometry = new THREE.PlaneBufferGeometry(9000, 5000, worldWidth - 1, worldDepth);
  geometry.rotateX(-Math.PI / 2);
  var floorMaterial = new THREE.MeshPhongMaterial({
    color: 0x00FFDD,
    emissive: 0x00CCEE,
    specular: 0x232323,
    reflectivity: 80,
    shininess: 50,
    flatShading: true,
    wireframe: false,
    side: THREE.DoubleSide
  });

  mesh = new THREE.Mesh(geometry, floorMaterial);
  scene.add(mesh);

  var directionalLight = new THREE.DirectionalLight(0xffffff, 0.3);
  directionalLight.position.set(0, 500, 500).normalize();
  scene.add(directionalLight);

  var directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.5);
  directionalLight2.position.set(-2000, 500, 500).normalize();
  scene.add(directionalLight2);

  renderer = new THREE.WebGLRenderer();
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);

  document.body.appendChild(renderer.domElement);
  window.addEventListener('resize', onWindowResize, false);

  animate();
}


function animate() {

  // We need to call analyze before doing the next computations
  spectrum = fft.analyze();
  var seRatio = spectrum.length / energySlots; // Spectrum/energy ratio

  var vertices = mesh.geometry.attributes.position.array;
  var oneRowLength = worldWidth * 3; // x, y, z
  var...