script.js

var noise = new SimplexNoise();
var vizInit = function () {
  var file = document.getElementById("thefile");
  var audio = document.getElementById("audio");
  var fileLabel = document.querySelector("label.file");

  document.onload = function (e) {
    console.log(e);
    audio.play();
    play();
  };

  file.onchange = function () {
    fileLabel.classList.add("normal");
    audio.classList.add("active");
    var files = this.files;

    audio.src = URL.createObjectURL(files[0]);
    audio.load();
    audio.play();
    play();
  };

  function play() {
    var context = new AudioContext();
    var src = context.createMediaElementSource(audio);
    var analyser = context.createAnalyser();
    src.connect(analyser);
    analyser.connect(context.destination);
    analyser.fftSize = 512;
    var bufferLength = analyser.frequencyBinCount;
    var dataArray = new Uint8Array(bufferLength);
    var scene = new THREE.Scene();
    var group = new THREE.Group();
    var bgroup = new THREE.Group();
    var camera = new THREE.PerspectiveCamera(
      45,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    );
    camera.position.set(0, 0, 100);
    camera.lookAt(scene.position);
    scene.add(camera);

    var renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    var planeGeometry = new THREE.PlaneGeometry(800, 800, 50, 50);
    var planeMaterial = new THREE.MeshLambertMaterial({
      color: 0x00ff77, // Neon Sunset Color
      side: THREE.DoubleSide,
      wireframe: true,
    });

    const loader = new THREE.GLTFLoader();

    loader.load(
      "./stars/scene.gltf", // Replace with the actual path
      function (gltf) {
        const starrySky = gltf.scene;
        starrySky.scale.setScalar(5); // Make the sky really large
        bgroup.add(starrySky); // Add the loaded starry sky to the scene
      },
      undefined,
      function (error) {
        console.error(
          "An error occurred while loading the starry sky model:",
          error
        );
      }
    );

    var plane = new THREE.Mesh(planeGeometry, planeMaterial);
    plane.rotation.x = -0.5 * Math.PI;
    plane.position.set(0, 30, 0);
    group.add(plane);

    var plane2 = new THREE.Mesh(planeGeometry, planeMaterial);
    plane2.rotation.x = -0.5 * Math.PI;
    plane2.position.set(0, -30, 0);
    group.add(plane2);

    var icosahedronGeometry = new THREE.IcosahedronGeometry(10, 10);
    var lambertMaterial = new THREE.MeshLambertMaterial({
      color: 0xff00ee, // Neon Pink
      wireframe: true,
    });

    var ball = new THREE.Mesh(icosahedronGeometry, lambertMaterial);
    ball.position.set(0, 0, 0);
    group.add(ball);

    var ambientLight = new THREE.AmbientLight(0xaaaaaa);
    scene.add(ambientLight);

    var spotLight = new THREE.SpotLight(0xffffff);
    spotLight.intensity = 0.9;
    spotLight.position.set(-10, 40, 20);
    spotLight.lookAt(ball);
    spotLight.castShadow = true;
    scene.add(spotLight);

    scene.add(group);
    scene.add(bgroup);

    document.getElementById("out").appendChild(renderer.domElement);

    window.addEventListener("resize", onWindowResize, false);

    render();

    function render() {

      analyser.getByteFrequencyData(dataArray);

      var lowerHalfArray = dataArray.slice(0, dataArray.length / 2 - 1);
      var upperHalfArray = dataArray.slice(
        dataArray.length / 2 - 1,
        dataArray.length - 1
      );

      var overallAvg = avg(dataArray);
      var lowerMax = max(lowerHalfArray);
      var lowerAvg = avg(lowerHalfArray);
      var upperMax = max(upperHalfArray);
      var upperAvg = avg(upperHalfArray);

      var lowerMaxFr = lowerMax / lowerHalfArray.length;
      var lowerAvgFr = lowerAvg / lowerHalfArray.length;
      var upperMaxFr = upperMax / upperHalfArray.length;
      var upperAvgFr = upperAvg / upperHalfArray.length;

      makeRoughGround(plane, modulate(upperAvgFr, 0, 1, 0.5, 4));
      makeRoughGround(plane2, modulate(lowerMaxFr, 0, 1, 0.5, 4));

      makeRoughBall(
        ball,
        modulate(Math.pow(lowerMaxFr, 0.8), 0, 1, 0, 1), // Frequency modulation
        modulate(upperAvgFr, 0, 1, 0, 5) // Amplitude modulation
      );

      group.rotation.y += 0.005;
      bgroup.rotation.y -= 0.004;
      renderer.render(scene, camera);
      requestAnimationFrame(render);
    }

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

    function makeRoughBall(mesh, bassFr, treFr) {
      const position = mesh.geometry.attributes.position; // Access the position attribute
      const count = position.count; // Get the number of vertices
      var offset = mesh.geometry.parameters.radius;
      var amp = 7;
      var time = window.performance.now();
      var rf = 0.00001;
      for (let i = 0; i < count; i++) {
        const vertex = new THREE.Vector3().fromBufferAttribute(position, i); // Retrieve vertex
        vertex.normalize(); // Normalize to keep spherical shape

        // Calculate the distance for vertex distortion
        const distance =
          offset +
          bassFr +
          noise.noise3D(
            vertex.x + time * rf * 5,
            vertex.y + time * rf * 5,
            vertex.z + time * rf * 5
          ) *
            amp *
            treFr;

        vertex.multiplyScalar(distance); // Apply the distortion
        position.setXYZ(i, vertex.x, vertex.y, vertex.z); // Update vertex position
      }

      // Notify Three.js that the position attribute has changed
      position.needsUpdate = true;

      // Recalculate normals for proper lighting and shading
      mesh.geometry.computeVertexNormals();
    }

    function makeRoughGround(mesh, distortionFr) {
      const position = mesh.geometry.attributes.position; // Access position attribute
      const count = position.count;

      for (let i = 0; i < count; i++) {
        const vertex = new THREE.Vector3().fromBufferAttribute(position, i);
        const amp = 2;
        const time = Date.now();
        const distance =
          (noise.noise2D(vertex.x + time * 0.0003, vertex.y + time * 0.0001) +
            0) *
          distortionFr *
          amp;
        vertex.z = distance; // Modify vertex position
        position.setXYZ(i, vertex.x, vertex.y, vertex.z); // Update position
      }
      position.needsUpdate = true; // Ensure changes are reflected
      mesh.geometry.computeVertexNormals(); // Recalculate normals for proper shading
    }

    audio.play();
  }
};

window.onload = vizInit();

document.body.addEventListener("touchend", function (ev) {
  context.resume();
});

function fractionate(val, minVal, maxVal) {
  return (val - minVal) / (maxVal - minVal);
}

function modulate(val, minVal, maxVal, outMin, outMax) {
  var fr = fractionate(val, minVal, maxVal);
  var delta = outMax - outMin;
  return outMin + fr * delta;
}

function avg(arr) {
  var total = arr.reduce(function (sum, b) {
    return sum + b;
  });
  return total / arr.length;
}

function max(arr) {
  return arr.reduce(function (a, b) {
    return Math.max(a, b);
  });
}