Playing with sound - 5

Make some 'art' using three js

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 mic, fft, spectrum, waveform, frame = 0;
var cubes = [];
var energySlots = 30;
var camera, scene, renderer;
var cubeSide = 3;
var cubeHeight = 5;
var margin = 2;

var sphere;

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

function init() {

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


  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.z = 400;
  camera.position.y = 150;

  scene = new THREE.Scene();
  scene.background = new THREE.Color( 0x253353 );
	scene.fog = new THREE.FogExp2( 0x253353, 0.0025 );

  var cubeGeometry = new THREE.BoxBufferGeometry(cubeSide, cubeHeight, cubeSide);

  var pmaterial = new THREE.MeshPhongMaterial({
    color: 0xFFCC00,
    specular: 0xffffff,
    reflectivity: 0.5,
    shininess: 0.5
  });


  var startingXPosition = -1 * ((energySlots / 2) * (cubeSide + margin));
  for (var i = 0; i < energySlots; i++) {
    var mesh = new THREE.Mesh(cubeGeometry, pmaterial);
    var x = startingXPosition + (cubeSide + margin) * i;
    var y = 0;
    mesh.position.set(x, y, 0);
    cubes.push(mesh);
    scene.add(mesh);
  }

  // Sphere
  var sphereGeometry = new THREE.SphereGeometry(30, 5, 4);
  var sphereMaterial = new THREE.MeshPhongMaterial({
    color: 0x00FFCC,
    specular: 0xffffff,
    reflectivity: 0.9,
    shininess: 0.2,
    wireframe: true
  });
  sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
  sphere.position.set(0, 100, 0);

  scene.add(sphere);
  
  
  var grid = new THREE.GridHelper( 500, 50, 0x5F7899, 0x5F7899 );
scene.add( grid );

  scene.add(new THREE.AmbientLight(0x555555));

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

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