let sphereData = []; Math.HALF_PI = Math.PI / 2; Math.TWO_PI = Math.PI * 2; let sphereObject = { rotationRaw: [0, 0, 0], // degrees rotation: [0, 0, 0], //radians rotateInc: [0.0, 0.0, 0.0], //degreesInc rotateByBeat: true, translate: [1, 1, 1], total: 50, radius: 500, color: {r: 0, g: 0, b: 0}, colorByBeat: true, drawMode: 0, sphereMode: 0, lightPos: [0, 0, 0], pointSize: 2, steps: 512, dirtyMode: false } function readData() { let items = sphereObject.steps; let dataArray = new Uint8Array(items); analyser.getByteFrequencyData(dataArray); let arr = []; let sum = 0; for (let i = 0; i < items; i++) { let data = dataArray[i] / 255; arr.push(data * .5); sum += dataArray[i]; } return [arr, (sum / items) / 255]; } let sphereDataVectors = [], lastTotal = 0; function prepareData() { let total = sphereObject.total; if (lastTotal !== total) { sphereDataVectors = []; for (let i = 0; i <= total; i++) { sphereDataVectors[i] = []; for (let j = 0; j <= total; j++) { sphereDataVectors[i][j] = new VTVector(); } } lastTotal = total; } } function setupSphere() { sphereData = []; let data = readData(), radData = data[0], map = VTUtils.map, total = sphereObject.total, cTotal = (total + 1) * (total + 1), radius = sphereObject.radius, rx = radius / c.width, ry = radius / c.height, counter = 0; prepareData(); for (let i = 0; i <= total; i++) { let lat = map(i, 0, total, 0, Math.PI, false); for (let j = 0; j <= total; j++) { let lon = map(j, 0, total, 0, Math.TWO_PI, false); let rAdd = getAddRad(counter, radData, cTotal); let realRX = rx + rAdd; let realRY = ry + rAdd; let {x, y, z} = sphereMode(lat, lon, i, counter, realRX, realRY); if (sphereObject.drawMode < 2 || sphereObject.dirtyMode) { sphereData.push(x, y, z); } else { sphereDataVectors[i][j].setXYZ(x, y, z); } counter++; } } if (sphereObject.drawMode > 1 && !sphereObject.dirtyMode) { for (let i = 0; i < total; i++) { for (let j = 0; j <= total; j++) { let cur = sphereDataVectors[i][j]; sphereData.push(cur.x, cur.y, cur.z); cur = sphereDataVectors[i + 1][j]; sphereData.push(cur.x, cur.y, cur.z); } } } return [VTUtils.peakRGB(data[1] * 2), data[1]]; } function getAddRad(counter, data, total) { let mapping, rAdd, map = VTUtils.map; if (sphereObject.sphereMode === 3) { let h = total / 2; if (counter > h) { mapping = map(counter, h, total, data.length - 1, 0); } else { mapping = map(counter, 0, h, 0, data.length - 1); } rAdd = data[Math.round(mapping)] || 0; } else { mapping = map(counter, 0, total, 0, data.length - 1); rAdd = data[Math.round(mapping)] || 0; } return rAdd; } let position, world, color, rotate, light, lightPos, lightAngle = 90; function prepare(program) { position = gl.getAttribLocation(program, "a_position"); world = gl.getUniformLocation(program, 'u_world'); color = gl.getUniformLocation(program, "u_color"); light = gl.getUniformLocation(program, "u_light"); rotate = gl.getUniformLocation(program, "u_matrix"); lightPos = gl.getUniformLocation(program, "u_lightPos"); let pointSize = gl.getUniformLocation(program, "u_pointSize"); gl.uniformMatrix4fv(world, false, TDUtils.yRotation(TDUtils.degToRad(lightAngle))); gl.uniform3fv(light, [0.95, 0.62, 0.094]); gl.uniform3fv(lightPos, sphereObject.lightPos); gl.uniform1f(pointSize, sphereObject.pointSize); } function draw() { c.width = window.innerWidth; c.height = window.innerHeight; let aspect = c.height / c.width; let d = setupSphere(); let newColor = d[0]; let program = shaderHandler.getProgram("sphere"); gl.useProgram(program); prepare(program); let matrix = [ sphereObject.translate[0] / aspect, 0, 0, 0, 0, sphereObject.translate[1], 0, 0, 0, 0, sphereObject.translate[2], 0, 0, 0, 0, 1 ] matrix = TDUtils.multiply(matrix, TDUtils.xRotation(sphereObject.rotation[0])); matrix = TDUtils.multiply(matrix, TDUtils.yRotation(sphereObject.rotation[1])); matrix = TDUtils.multiply(matrix, TDUtils.zRotation(sphereObject.rotation[2])); gl.uniformMatrix4fv(rotate, false, matrix); let positionBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(sphereData), gl.DYNAMIC_DRAW); let vao = gl.createVertexArray(); gl.bindVertexArray(vao); gl.enableVertexAttribArray(position); gl.vertexAttribPointer(position, 3, gl.FLOAT, true, 0, 0); gl.clearColor(0, 0, 0, 1); gl.enable(gl.DEPTH_TEST); gl.depthFunc(gl.LEQUAL); gl.clearDepth(2.0) gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); gl.viewport(0, 0, gl.canvas.width, gl.canvas.height); if (sphereObject.colorByBeat) { gl.uniform4f(color, newColor.r, newColor.g, 0, 1); } else { let cx = sphereObject.color; gl.uniform4f(color, cx.r, cx.g, cx.b, 1); } gl.drawArrays(sphereObject.drawMode || gl.POINTS, 0, sphereData.length / 3); if (sphereObject.rotateByBeat) { sphereObject.rotationRaw[1] += d[1]; sphereObject.rotationRaw[0] += newColor.r; } else { for (let i = 0; i < 3; i++) { sphereObject.rotationRaw[i] += sphereObject.rotateInc[i]; } } for (let i = 0; i < 3; i++) { sphereObject.rotation[i] = TDUtils.degToRad(sphereObject.rotationRaw[i]) } requestAnimationFrame(draw); } function sphereMode(lat, lon, i, counter, rx, ry) { let x, y, z, sin = Math.sin, cos = Math.cos; switch (sphereObject.sphereMode) { case 0: case 3: x = rx * sin(lat) * cos(lon); y = ry * sin(lat) * sin(lon); z = ry * cos(lat); break; case 1: x = rx * sin(lon) * cos(lat); y = ry * sin(lon) * sin(lat); z = ry * cos(lat); break; case 2: x = rx * sin(lat) * cos(lat); y = ry * sin(lat) * sin(lat); z = ry * cos(lon); break; } return {x: x, y: y, z: z}; }