Playing with sound - 7

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, currentLine = 0;

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

init();
animate();

function init() {

  scene = new THREE.Scene();
  scene.background = new THREE.Color(0xefd1b5);

  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.y = 500;
  camera.position.z = 200;

  geometry = new THREE.PlaneBufferGeometry(7500, 7500, worldWidth - 1, worldDepth - 1);
  geometry.rotateX(-Math.PI / 2);
  var material = new THREE.MeshPhongMaterial({
    color: 0x00FFDD,
    emissive: 0xCC00DD,
    specular: 0x111111,
    reflectivity: 30,
    shininess: 50,
    flatShading: true,
    wireframe: false
  });

  mesh = new THREE.Mesh(geometry, material);
  mesh.geometry.dynamic = true;
  scene.add(mesh);

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

  renderer = new THREE.WebGLRenderer();
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  window.addEventListener('resize', onWindowResize, false);

}

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}


function animate() {

  var vertices = mesh.geometry.attributes.position.array;

  for (var i = 0, j = worldWidth * currentLine * 3, l = vertices.length; i < worldWidth; i++, j += 3) {
    vertices[j + 1] = Math.random() * 130;
  }

  mesh.geometry.attributes.position.needsUpdate = true;

  render();
  currentLine++;
  currentLine = currentLine % worldDepth;

  requestAnimationFrame(animate);
}


function render() {
  renderer.render(scene, camera);
}