Playing with sound - 11

Make some 'art' using three js. Green tunnel 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 = 16, worldDepth = 30;

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

var radiusTop = 4000;
var radiusBottom = 4000;
var cylinderHeight = 40000;
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.00005);

  camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 1, 50000);
  camera.position.y = 500;
  camera.position.z = 20000;

  geometry = new THREE.CylinderBufferGeometry(radiusTop, radiusBottom, cylinderHeight, radialSegments - 1, heightSegments - 1, openEnded);
  geometry.rotateX(-Math.PI / 2);
  
  var material = new THREE.MeshPhongMaterial({
    color: 0x00CCFF,
    emissive: 0x33DD00,
    specular: 0x111111,
    reflectivity: 80,
    shininess: 100,
    flatShading: true,
    wireframe: false,
    side: THREE.DoubleSide
  });


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

  var directionalLight = new THREE.DirectionalLight(0xffffff, 1);
  directionalLight.position.set(0, 500, -12000).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);

  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 upperLimit =...