From 6d9fbd596fb2843742b846a60707bb82c823a4d1 Mon Sep 17 00:00:00 2001 From: Callum Hay Date: Wed, 10 Jun 2020 20:35:40 -0400 Subject: [PATCH] Added the chroma.js library to do all the heavy lifting for colour mixing / interpolation, format calculation, etc. Yeah, it's another library, yeah, I don't want to spend my time writing this shit myself. Started integrating chroma with a bunch of the older colour code, replacing my poorly functioning crap. --- package-lock.json | 57 ++++++++++++++++++- package.json | 1 + src/Animation/FireAnimator.js | 7 ++- src/Animation/Randomizers.js | 45 ++------------- src/Animation/ShootingStarAnimator.js | 3 +- src/Animation/VoxelColourAnimator.js | 28 ++++----- .../Scenes/Audio/BasicBarsAudioVisScene.js | 8 +-- .../Scenes/Audio/FireAudioVisScene.js | 24 ++++---- .../Scenes/Audio/HistoryBarsAudioVisScene.js | 20 ++++--- src/WebClientViewer/ControlPanel.js | 19 ++++++- 10 files changed, 126 insertions(+), 86 deletions(-) diff --git a/package-lock.json b/package-lock.json index 43af841..c807bdb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1034,6 +1034,14 @@ "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz", "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==" }, + "chroma-js": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.1.0.tgz", + "integrity": "sha512-uiRdh4ZZy+UTPSrAdp8hqEdVb1EllLtTHOt5TMaOjJUvi+O54/83Fc5K2ld1P+TJX+dw5B+8/sCgzI6eaur/lg==", + "requires": { + "cross-env": "6.0.3" + } + }, "chrome-trace-event": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.2.tgz", @@ -1297,6 +1305,52 @@ "sha.js": "2.4.11" } }, + "cross-env": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-6.0.3.tgz", + "integrity": "sha512-+KqxF6LCvfhWvADcDPqo64yVIB31gv/jQulX2NGzKS/g3GEVz6/pt4wjHFtFWsHMddebWD/sDthJemzM4MaAag==", + "requires": { + "cross-spawn": "7.0.3" + }, + "dependencies": { + "cross-spawn": { + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", + "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", + "requires": { + "path-key": "3.1.1", + "shebang-command": "2.0.0", + "which": "2.0.2" + } + }, + "path-key": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", + "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==" + }, + "shebang-command": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", + "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", + "requires": { + "shebang-regex": "3.0.0" + } + }, + "shebang-regex": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", + "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==" + }, + "which": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", + "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", + "requires": { + "isexe": "2.0.0" + } + } + } + }, "cross-spawn": { "version": "6.0.5", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz", @@ -3332,8 +3386,7 @@ "isexe": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", - "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=", - "dev": true + "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=" }, "isobject": { "version": "3.0.1", diff --git a/package.json b/package.json index e0c9050..8a3cf8e 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "@serialport/bindings": "^8.0.8", "bufferutil": "^4.0.1", "canvas": "^2.6.1", + "chroma-js": "^2.1.0", "cobs": "^0.2.1", "dat.gui": "^0.7.7", "express": "^4.17.1", diff --git a/src/Animation/FireAnimator.js b/src/Animation/FireAnimator.js index c488dd9..78a3e2d 100644 --- a/src/Animation/FireAnimator.js +++ b/src/Animation/FireAnimator.js @@ -15,6 +15,7 @@ export const fireAnimatorDefaultConfig = { viscosity: 0.000, buoyancy: 5.4, cooling: 1.3, + initialIntensityMultiplier: 8, vorticityConfinement: 8.0, spectrumTempMin: 700, spectrumTempMax: 1700, @@ -47,6 +48,8 @@ class FireAnimator extends VoxelAnimator { render(dt) { super.render(dt); + const {speed, initialIntensityMultiplier} = this.config; + const startX = 1; const endX = this.voxelModel.xSize()-startX; const startZ = 1; @@ -57,10 +60,10 @@ class FireAnimator extends VoxelAnimator { for (let z = startZ; z < endZ; z++) { let f = this.genFunc(x-startX, z-startZ, endX-startX, endY, this.t, this.randomArray); this.fluidModel.sd[this.fluidModel._I(x, 1, z)] = 1.0; - this.fluidModel.sT[this.fluidModel._I(x, 1, z)] = 1.0 + f*8.0; + this.fluidModel.sT[this.fluidModel._I(x, 1, z)] = 1.0 + f*initialIntensityMultiplier; } } - const speedDt = dt*this.config.speed; + const speedDt = dt*speed; this.fluidModel.step(speedDt); this.t += speedDt; diff --git a/src/Animation/Randomizers.js b/src/Animation/Randomizers.js index b0300ee..252609d 100644 --- a/src/Animation/Randomizers.js +++ b/src/Animation/Randomizers.js @@ -1,4 +1,5 @@ import * as THREE from 'three'; +import chroma from 'chroma-js' import { VOXEL_EPSILON } from '../MathUtils'; export class Randomizer { @@ -138,49 +139,13 @@ export class Vector3DirectionRandomizer extends Randomizer { export class ColourRandomizer extends Randomizer { constructor(min = new THREE.Color(0,0,0), max = new THREE.Color(1,1,1)) { super(); - - let _min = min.clone(); - let _max = max.clone(); - - this.getMin = () => (_min); - this.setMin = (m) => { _min.setRGB(m.r, m.g, m.b); }; - this.getMax = () => (_max); - this.setMax = (m) => { _max.setRGB(m.r, m.g, m.b); }; - - this.setMin(min); - this.setMax(max); - - this.setRandomizers = (min, max) => { - this._randomizers = [ - new UniformIntRandomizer(Math.floor(255*min.r), Math.floor(255*max.r), false), - new UniformIntRandomizer(Math.floor(255*min.g), Math.floor(255*max.g), false), - new UniformIntRandomizer(Math.floor(255*min.b), Math.floor(255*max.b), false) - ]; - } - this.setRandomizers(_min, _max); - } - - get min() { return this.getMin(); } - get max() { return this.getMax(); } - - set min(min) { - this.setMin(new THREE.Color(min.r, min.g, min.b)); - this.setRandomizers(this.getMin(), this.getMax()) - } - set max(max) { - this.setMax(new THREE.Color(max.r, max.g, max.b)); - this.setRandomizers(this.getMin(), this.getMax()); + this.min = min; + this.max = max; } generate() { - const colour = new THREE.Color(); - colour.setRGB( - this._randomizers[0].generate() / 255.0, - this._randomizers[1].generate() / 255.0, - this._randomizers[2].generate() / 255.0 - ); - - return colour; + const temp = chroma.mix(chroma.gl(this.min), chroma.gl(this.max), Randomizer.getRandomIntInclusive(0,1000)/1000).gl(); + return new THREE.Color(temp[0], temp[1], temp[2]); } toJSON() { diff --git a/src/Animation/ShootingStarAnimator.js b/src/Animation/ShootingStarAnimator.js index c5b06c9..e5bb08d 100644 --- a/src/Animation/ShootingStarAnimator.js +++ b/src/Animation/ShootingStarAnimator.js @@ -1,7 +1,7 @@ import * as THREE from 'three'; import VoxelAnimator, {REPEAT_INFINITE_TIMES} from './VoxelAnimator'; -import VoxelColourAnimator, {INTERPOLATION_SMOOTHER} from './VoxelColourAnimator'; +import VoxelColourAnimator, {INTERPOLATION_SMOOTHER, COLOUR_INTERPOLATION_LRGB} from './VoxelColourAnimator'; import {VOXEL_EPSILON, VOXEL_ERR_UNITS} from '../MathUtils'; @@ -61,6 +61,7 @@ class ShootingStarAnimator extends VoxelAnimator { startTimeSecs: 0.0, endTimeSecs: fadeTimeSecs, interpolation: INTERPOLATION_SMOOTHER, + colourInterpolationType: COLOUR_INTERPOLATION_LRGB, }), }; this.currAnimatorMap.push(animatorObj); diff --git a/src/Animation/VoxelColourAnimator.js b/src/Animation/VoxelColourAnimator.js index 30e24f2..06d6160 100644 --- a/src/Animation/VoxelColourAnimator.js +++ b/src/Animation/VoxelColourAnimator.js @@ -1,11 +1,20 @@ import * as THREE from 'three'; +import chroma from 'chroma-js'; + import VoxelAnimator, {REPEAT_INFINITE_TIMES} from './VoxelAnimator'; -export const COLOUR_INTERPOLATION_HSL = 'hsl'; -export const COLOUR_INTERPOLATION_RGB = 'rgb'; + +export const COLOUR_INTERPOLATION_RGB = 'rgb'; +export const COLOUR_INTERPOLATION_HSL = 'hsl'; +export const COLOUR_INTERPOLATION_LAB = 'lab'; +export const COLOUR_INTERPOLATION_LCH = 'lch'; +export const COLOUR_INTERPOLATION_LRGB = 'lrgb'; export const COLOUR_INTERPOLATION_TYPES = [ - COLOUR_INTERPOLATION_HSL, COLOUR_INTERPOLATION_RGB, + COLOUR_INTERPOLATION_HSL, + COLOUR_INTERPOLATION_LAB, + COLOUR_INTERPOLATION_LCH, + COLOUR_INTERPOLATION_LRGB, ]; export const INTERPOLATION_LERP = 'lerp'; @@ -73,17 +82,8 @@ class VoxelColourAnimator extends VoxelAnimator { break; } - const currColour = this.colourStart.clone(); - - switch (colourInterpolationType) { - default: - case COLOUR_INTERPOLATION_HSL: - currColour.lerpHSL(this.colourEnd, interpolateAlpha); - break; - case COLOUR_INTERPOLATION_RGB: - currColour.lerp(this.colourEnd, interpolateAlpha); - break; - } + const temp = chroma.mix(chroma.gl(this.colourStart), chroma.gl(this.colourEnd), interpolateAlpha, colourInterpolationType).gl(); + const currColour = new THREE.Color(temp[0], temp[1], temp[2]); this.voxelPositions.forEach(voxelPos => { this.voxelModel.setVoxel(voxelPos, currColour); diff --git a/src/VoxelTracer/Scenes/Audio/BasicBarsAudioVisScene.js b/src/VoxelTracer/Scenes/Audio/BasicBarsAudioVisScene.js index dd80aa7..8a6d92a 100644 --- a/src/VoxelTracer/Scenes/Audio/BasicBarsAudioVisScene.js +++ b/src/VoxelTracer/Scenes/Audio/BasicBarsAudioVisScene.js @@ -1,5 +1,6 @@ import * as THREE from 'three'; +import chroma from 'chroma-js'; import AudioVisUtils from './AudioVisUtils'; @@ -66,9 +67,8 @@ class BasicBarsAudioVisScene extends SceneRenderer { const levelColours = []; for (let y = Y_START; y < ySize; y++) { const t = THREE.MathUtils.smootherstep(y, Y_START, ySize-1); - const colour = new THREE.Color(lowColour.r, lowColour.g, lowColour.b); - colour.lerp(highColour, t); - levelColours.push(colour); + const temp = chroma.mix(chroma.gl(lowColour), chroma.gl(highColour), t, 'lrgb').gl(); + levelColours.push(new THREE.Color(temp[0], temp[1], temp[2])); } const voxelOptions = {receivesShadow: false}; @@ -217,7 +217,7 @@ class BasicBarsAudioVisScene extends SceneRenderer { if (centerSorted) { // First sort all of the frequency bins by their descending amplitudes // (after we add all of the indices in the collective bin index lookup) - const collectedFFTs = Object.keys(binIndexLookup).map(idx => AudioVisUtils.calcFFTBinLevelSum(this.binIndexLookup[idx], fft)); + const collectedFFTs = Object.keys(this.binIndexLookup).map(idx => AudioVisUtils.calcFFTBinLevelSum(this.binIndexLookup[idx], fft)); collectedFFTs.sort((a,b) => b-a); // The spiral index list and the sorted fft list should be the same length. diff --git a/src/VoxelTracer/Scenes/Audio/FireAudioVisScene.js b/src/VoxelTracer/Scenes/Audio/FireAudioVisScene.js index cff3ce0..856a6e2 100644 --- a/src/VoxelTracer/Scenes/Audio/FireAudioVisScene.js +++ b/src/VoxelTracer/Scenes/Audio/FireAudioVisScene.js @@ -14,6 +14,7 @@ import {Randomizer} from '../../../Animation/Randomizers'; const SPECTRUM_WIDTH = 256; export const fireAudioVisDefaultConfig = { + initialIntensityMultiplier: 8, speedMultiplier: 1, coolingMultiplier: 1, boyancyMultiplier: 1, @@ -91,6 +92,8 @@ class FireAudioVisScene extends SceneRenderer { return; } + const {speedMultiplier, initialIntensityMultiplier} = this._options.sceneConfig; + const xSize = this.voxelModel.xSize(); const ySize = this.voxelModel.ySize(); const zSize = this.voxelModel.zSize(); @@ -105,14 +108,11 @@ class FireAudioVisScene extends SceneRenderer { for (let z = startZ; z < endZ; z++) { let f = this._genFunc(x-startX, z-startZ, endX-startX, endY, this.t, this.initArray); this.fluidModel.sd[this.fluidModel._I(x, 1, z)] = 1.0; - this.fluidModel.sT[this.fluidModel._I(x, 1, z)] = 0.25*this.fluidModel.sT[this.fluidModel._I(x, 1, z)] + 0.75*(1.0 + f*8.0); + this.fluidModel.sT[this.fluidModel._I(x, 1, z)] = 0.25*this.fluidModel.sT[this.fluidModel._I(x, 1, z)] + 0.75*(1.0 + f*initialIntensityMultiplier); } } - const {speedMultiplier} = this._options.sceneConfig; - const currSpeed = speedMultiplier * (2 + clamp(THREE.MathUtils.smootherstep(this.avgBeatsPerSec, 0, 80), 0, 0.5)); - //console.log(currSpeed); - + const currSpeed = speedMultiplier * (2 + clamp(THREE.MathUtils.smootherstep(this.avgBeatsPerSec, 0, 80), 0, 1)); const speedDt = dt*currSpeed; this.fluidModel.step(speedDt); this.t += speedDt; @@ -157,7 +157,7 @@ class FireAudioVisScene extends SceneRenderer { for (let i = 0; i < this.initArray.length; i++) { const fftIndices = this.binIndexLookup[i]; const binLevel = AudioVisUtils.calcFFTBinLevelMax(fftIndices, fft); - this.initArray[i] = THREE.MathUtils.smootherstep(binLevel/levelMax, 0, 1); + this.initArray[i] = clamp(binLevel/levelMax, 0, 1); } //console.log(this.initArray); @@ -185,13 +185,13 @@ class FireAudioVisScene extends SceneRenderer { this.dRMSAvg = (this.dRMSAvg + (denoisedRMS - this.lastRMS) / dt) / 2.0; if (this.timeSinceLastBeat > 0.001 && (this.dRMSAvg < 0 && this.lastdRMS > 0) || (this.dRMSAvg > 0 && this.lastdRMS < 0)) { // We crossed zero, count the beat - this.avgBeatsPerSec = 1.0 / this.timeSinceLastBeat; + this.avgBeatsPerSec = clamp((this.avgBeatsPerSec + 1.0 / this.timeSinceLastBeat) / 2.0, 0, 80); this.timeSinceLastBeat = 0; } else { this.timeSinceLastBeat += dt; if (this.timeSinceLastBeat > 1) { - this.avgBeatsPerSec = 0.01; + this.avgBeatsPerSec = clamp((this.avgBeatsPerSec + 0.01) / 2.0, 0, 80); } } @@ -223,9 +223,7 @@ class FireAudioVisScene extends SceneRenderer { const MAX_FIRE_ALPHA = 1.0; const FULL_ON_FIRE = 100; - const {sceneConfig} = options; - const lowTempColour = sceneConfig.lowTempColour; //instanceof THREE.Color ? sceneConfig.lowTempColour : new THREE.Color(sceneConfig.lowTempColour[0]/255, sceneConfig.lowTempColour[1]/255, sceneConfig.lowTempColour[2]/255); - const highTempColour = sceneConfig.highTempColour;// instanceof THREE.Color ? sceneConfig.highTempColour : new THREE.Color(sceneConfig.highTempColour[0]/255, sceneConfig.highTempColour[1]/255, sceneConfig.highTempColour[2]/255); + const {lowTempColour, highTempColour} = options.sceneConfig; const spectrum = this._genCustomColourSpectrum(lowTempColour, highTempColour, SPECTRUM_WIDTH); this.fireTexture = []; @@ -267,11 +265,13 @@ class FireAudioVisScene extends SceneRenderer { let i = 0; let avgP = 0; + let maxP = 0; for (let j = 0; j < p.length; j++) { avgP += p[j]; + maxP = Math.max(maxP, p[j]); } avgP /= p.length; - const multiplier = avgP < 0.01 ? 0.0 : 0.25; + const multiplier = maxP < 0.1 ? 0.0 : Math.min(avgP, 0.25); for (; i < 12; i++) { f += (1.0 + diff --git a/src/VoxelTracer/Scenes/Audio/HistoryBarsAudioVisScene.js b/src/VoxelTracer/Scenes/Audio/HistoryBarsAudioVisScene.js index 297e39c..1fef80a 100644 --- a/src/VoxelTracer/Scenes/Audio/HistoryBarsAudioVisScene.js +++ b/src/VoxelTracer/Scenes/Audio/HistoryBarsAudioVisScene.js @@ -1,7 +1,8 @@ import * as THREE from 'three'; +import chroma from 'chroma-js'; -import {DEFAULT_LEVEL_MAX, DEFAULT_LOW_COLOUR, DEFAULT_HIGH_COLOUR, DEFAULT_GAMMA, DEFAULT_FADE_FACTOR, DEFAULT_CENTER_SORTED} from './BasicBarsAudioVisScene'; +import {DEFAULT_LOW_COLOUR, DEFAULT_HIGH_COLOUR, DEFAULT_GAMMA, DEFAULT_FADE_FACTOR} from './BasicBarsAudioVisScene'; import SceneRenderer from '../SceneRenderer'; @@ -31,6 +32,7 @@ export const historyBarsAudioVisDefaultConfig = { lowColour: DEFAULT_LOW_COLOUR, highColour: DEFAULT_HIGH_COLOUR, speed: DEFAULT_SPEED, + tempoMultiplier: 15.0, direction: DEFAULT_DIR, }; @@ -108,9 +110,8 @@ class HistoryBarsAudioVisScene extends SceneRenderer { const levelColours = []; for (let y = Y_START; y < ySize; y++) { const t = THREE.MathUtils.smootherstep(y, Y_START, ySize-1); - const colour = new THREE.Color(lowColour.r, lowColour.g, lowColour.b); - colour.lerp(highColour, t); - levelColours.push(colour); + const temp = chroma.mix(chroma.gl(lowColour), chroma.gl(highColour), t, 'lrgb').gl(); + levelColours.push(new THREE.Color(temp[0], temp[1], temp[2])); } const voxelOptions = {receivesShadow: false}; @@ -163,6 +164,7 @@ class HistoryBarsAudioVisScene extends SceneRenderer { const gamma = this._options.gamma ? this._options.gamma : DEFAULT_GAMMA; const fadeFactor = this._options.fadeFactor ? this._options.fadeFactor : DEFAULT_FADE_FACTOR; const speed = sceneConfig.speed ? sceneConfig.speed : DEFAULT_SPEED; + const tempoMultiplier = sceneConfig.tempoMultiplier ? sceneConfig.tempoMultiplier : 1; const direction = sceneConfig.direction ? sceneConfig.direction : DEFAULT_DIR; const {fft, rms, spectralCentroid} = audioInfo; @@ -173,16 +175,16 @@ class HistoryBarsAudioVisScene extends SceneRenderer { this.dRMSAvg = (this.dRMSAvg + (denoisedRMS - this.lastRMS) / dt) / 2.0; if (this.timeSinceLastBeat > 0.0001 && (this.dRMSAvg < 0 && this.lastdRMS > 0) || (this.dRMSAvg > 0 && this.lastdRMS < 0)) { // We crossed zero, count the beat - this.avgBeatsPerSec = 1.0 / this.timeSinceLastBeat; + this.avgBeatsPerSec = clamp((this.avgBeatsPerSec + 1.0 / this.timeSinceLastBeat) / 2.0, 0, 80); this.timeSinceLastBeat = 0; } else { this.timeSinceLastBeat += dt; if (this.timeSinceLastBeat > 1) { - this.avgBeatsPerSec = 0.01; + this.avgBeatsPerSec = clamp((this.avgBeatsPerSec + 0.01) / 2.0, 0, 80); } } - + this.lastRMS = denoisedRMS; this.lastdRMS = this.dRMSAvg; @@ -230,7 +232,6 @@ class HistoryBarsAudioVisScene extends SceneRenderer { this.spectralPtLight.colour.setRGB(colourRMS, colourRMS, colourRMS); this.spectralPtLight.attenuation.quadratic = (this.spectralPtLight.attenuation.quadratic + 1.0 / (Math.max(0.01, ptLightDistFromFront*ptLightDistFromFront*10*denoisedRMS))) / 2.0; - // Build a distribution of what bins (i.e., meshes) to throw each frequency in if (!this.binIndexLookup || numFreqs !== this.binIndexLookup.length) { this.binIndexLookup = AudioVisUtils.buildBinIndexLookup(numFreqs, loopSize, gamma); @@ -244,7 +245,8 @@ class HistoryBarsAudioVisScene extends SceneRenderer { } const fadeFactorAdjusted = Math.pow(fadeFactor, dt); - const tempoBeat = this.dRMSAvg > 0 ? this.avgBeatsPerSec : 0; + const tempoBeat = clamp(THREE.MathUtils.smootherstep(this.avgBeatsPerSec, 0, 80), 0, 1)*tempoMultiplier; + const oneOverSpeed = 1.0 / Math.max(1, speed + tempoBeat); if (this.timeCounter >= oneOverSpeed) { diff --git a/src/WebClientViewer/ControlPanel.js b/src/WebClientViewer/ControlPanel.js index 414413d..913dbf2 100644 --- a/src/WebClientViewer/ControlPanel.js +++ b/src/WebClientViewer/ControlPanel.js @@ -718,12 +718,17 @@ class ControlPanel { this.voxelClient.sendAnimatorChangeCommand(VoxelAnimator.VOXEL_ANIM_FIRE, this.fireAnimatorConfig); }).setValue(fireSettings.vorticityConfinement); + folder.add(fireSettings, 'initialIntensityMultiplier', 0.1, 10, 0.1).onChange((value) => { + this.fireAnimatorConfig.initialIntensityMultiplier = value; + this.voxelClient.sendAnimatorChangeCommand(VoxelAnimator.VOXEL_ANIM_FIRE, this.fireAnimatorConfig); + }).setValue(fireSettings.initialIntensityMultiplier); + folder.add(fireSettings, 'spectrumTempMin', 0, 5000, 100).onChange((value) => { this.fireAnimatorConfig.spectrumTempMin = value; this.voxelClient.sendAnimatorChangeCommand(VoxelAnimator.VOXEL_ANIM_FIRE, this.fireAnimatorConfig); }).setValue(fireSettings.spectrumTempMin); - folder.add(fireSettings, 'spectrumTempMax', 0, 5000, 100).onChange((value) => { + folder.add(fireSettings, 'spectrumTempMax', 0, 30000, 100).onChange((value) => { this.fireAnimatorConfig.spectrumTempMax = value; this.voxelClient.sendAnimatorChangeCommand(VoxelAnimator.VOXEL_ANIM_FIRE, this.fireAnimatorConfig); }).setValue(fireSettings.spectrumTempMax); @@ -1015,10 +1020,14 @@ class ControlPanel { this.voxelClient.sendAnimatorChangeCommand(VoxelAnimator.VOXEL_ANIM_SOUND_VIZ, this.soundVizAnimatorConfig); }).setValue(vizTypeOptions.highColour); - this.audioVizSettingsFolder.add(vizTypeOptions, 'speed', 1, 100, 1).onChange((value) => { + this.audioVizSettingsFolder.add(vizTypeOptions, 'speed', 1, 20, 0.1).onChange((value) => { this.soundVizAnimatorConfig.sceneConfig.speed = value; this.voxelClient.sendAnimatorChangeCommand(VoxelAnimator.VOXEL_ANIM_SOUND_VIZ, this.soundVizAnimatorConfig); }).setValue(vizTypeOptions.speed); + this.audioVizSettingsFolder.add(vizTypeOptions, 'tempoMultiplier', 1, 100, 1).onChange((value) => { + this.soundVizAnimatorConfig.sceneConfig.tempoMultiplier = value; + this.voxelClient.sendAnimatorChangeCommand(VoxelAnimator.VOXEL_ANIM_SOUND_VIZ, this.soundVizAnimatorConfig); + }).setValue(vizTypeOptions.tempoMultiplier); this.audioVizSettingsFolder.add(vizTypeOptions, 'direction', DIRECTION_TYPES).onChange((value) => { this.soundVizAnimatorConfig.sceneConfig.direction = value; @@ -1031,6 +1040,12 @@ class ControlPanel { vizTypeOptions = soundVizSettings.fireSettings; this.soundVizAnimatorConfig.sceneConfig = {...vizTypeOptions}; + + this.audioVizSettingsFolder.add(vizTypeOptions, 'initialIntensityMultiplier', 0.1, 10, 0.1).onChange((value) => { + this.soundVizAnimatorConfig.sceneConfig.initialIntensityMultiplier = value; + this.voxelClient.sendAnimatorChangeCommand(VoxelAnimator.VOXEL_ANIM_SOUND_VIZ, this.soundVizAnimatorConfig); + }).setValue(vizTypeOptions.initialIntensityMultiplier); + this.audioVizSettingsFolder.add(vizTypeOptions, 'speedMultiplier', 0.1, 3, 0.01).onChange((value) => { this.soundVizAnimatorConfig.sceneConfig.speedMultiplier = value; this.voxelClient.sendAnimatorChangeCommand(VoxelAnimator.VOXEL_ANIM_SOUND_VIZ, this.soundVizAnimatorConfig);