Playing with sound - 9

Make some 'art' using three js. Use a cylinder to make the tunnel

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 = 9,
  worldDepth = 26;

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

var radiusTop = 4000;
var radiusBottom = 4000;
var cylinderHeight = 15000;
var radialSegments = worldWidth;
var heightSegments = worldDepth;
var openEnded = true


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(75, window.innerWidth / window.innerHeight, 1, 25000);
  camera.position.y = 500;
  camera.position.z = 12000;

  geometry = new THREE.CylinderBufferGeometry(radiusTop, radiusBottom, cylinderHeight, radialSegments - 1, heightSegments - 1, openEnded);
  geometry.rotateX(-Math.PI / 2);
  
  var floorMaterial = new THREE.MeshPhongMaterial({
    color: 0x00FFDD,
    emissive: 0x00CCEE,
    specular: 0x232323,
    reflectivity: 80,
    shininess: 50,
    flatShading: true,
    wireframe: true,
    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 /...