From: Ruben Beltran del Rio Date: Wed, 8 May 2024 12:41:03 +0000 (+0200) Subject: Add keyboard markers, shiftable sliders X-Git-Url: https://git.r.bdr.sh/rbdr/lissajous/commitdiff_plain/6a87c2530865b5e18f70b71b456f43e72702c1c6?ds=sidebyside Add keyboard markers, shiftable sliders --- diff --git a/lib/components/configuration.js b/lib/components/configuration.js index ddb4a27..78065c3 100644 --- a/lib/components/configuration.js +++ b/lib/components/configuration.js @@ -4,6 +4,6 @@ export default class Configuration extends Component { constructor(config) { super(config); - this.lineLength = this.lineLength || 1000; + this.lineLength = this.lineLength || 500; } }; diff --git a/lib/factories/global.js b/lib/factories/global.js index c601bdb..bf0360d 100644 --- a/lib/factories/global.js +++ b/lib/factories/global.js @@ -21,7 +21,7 @@ export function camera() { entity.addComponent(new EulerAngle()); entity.addComponent(new Velocity({ x: 0, - y: Math.PI / 180, + y: Math.PI / 30, z: 0, })); entity.addComponent(new Radius({ diff --git a/lib/factories/ui.js b/lib/factories/ui.js index 27ff6eb..c220f67 100644 --- a/lib/factories/ui.js +++ b/lib/factories/ui.js @@ -1,25 +1,53 @@ export function settingsContainer({id, label, level=2}) { - const container = document.createElement('div'); + const container = document.createElement('section'); container.id = id; container.innerHTML = `${label}`; return container; }; -export function slider({min, max, step, get, set, label = '', className}) { +export function slider({ + id, + min, + max, + step, + shiftStep, + get, + set, + label = '', + className +}) { - const sliderContainer = document.createElement('div'); + const sliderContainer = document.createElement('section'); sliderContainer.classList.add('slider'); sliderContainer.classList.add(className); const labelElement = document.createElement('label'); + labelElement.setAttribute('for', id); labelElement.innerHTML = label; const slider = document.createElement('input'); + slider.id = id; slider.type = 'range'; slider.min = min; slider.max = max; slider.step = step; slider.value = get().toString(); + if (shiftStep) { + document.addEventListener('keydown', function(event) { + if (event.shiftKey) { + slider.classList.add('shifted'); + slider.step = shiftStep; + } + }); + + document.addEventListener('keyup', function(event) { + if (event.key === 'Shift') { + slider.classList.remove('shifted'); + slider.step = step; + } + }); + } + slider.addEventListener('input', () => set(slider.value)); sliderContainer.appendChild(labelElement); diff --git a/lib/systems/amplitude_adjuster.js b/lib/systems/amplitude_adjuster.js index 71f7277..04f271a 100644 --- a/lib/systems/amplitude_adjuster.js +++ b/lib/systems/amplitude_adjuster.js @@ -36,6 +36,7 @@ export default class AmplitudeAdjuster extends System { ['a', 'b', 'c'].forEach(key => { nodeElement.appendChild(slider({ + id: `amplitude-adjuster-${i}-slider-${key}`, min: '0', max: '1', step: '0.01', diff --git a/lib/systems/camera_adjuster.js b/lib/systems/camera_adjuster.js index 3b6ea41..9182343 100644 --- a/lib/systems/camera_adjuster.js +++ b/lib/systems/camera_adjuster.js @@ -35,6 +35,7 @@ export default class CameraAdjuster extends System { }); nodeElement.appendChild(slider({ + id: `camera-adjuster-${i}-slider-radius`, min: '2', max: '10', step: '0.1', @@ -46,6 +47,7 @@ export default class CameraAdjuster extends System { ['x', 'y', 'z'].forEach(key => { nodeElement.appendChild(slider({ + id: `camera-adjuster-${i}-slider-${key}`, min: '0', max: '0.5', step: '0.001', diff --git a/lib/systems/camera_rotator.js b/lib/systems/camera_rotator.js index 3520f71..eccef0d 100644 --- a/lib/systems/camera_rotator.js +++ b/lib/systems/camera_rotator.js @@ -41,9 +41,9 @@ export default class CameraRotator extends System { camera.up.y = up[1]; camera.up.z = up[2]; - camera.angle.pitch = (camera.angle.pitch + camera.velocity.x * dt / 100 + 2 * Math.PI) % (2 * Math.PI); - camera.angle.yaw = (camera.angle.yaw + camera.velocity.y * dt / 100 + 2 * Math.PI) % (2 * Math.PI); - camera.angle.roll = (camera.angle.roll + camera.velocity.z * dt / 100 + 2 * Math.PI) % (2 * Math.PI); + camera.angle.pitch = (camera.angle.pitch + camera.velocity.x * dt / 500 + 2 * Math.PI) % (2 * Math.PI); + camera.angle.yaw = (camera.angle.yaw + camera.velocity.y * dt / 500 + 2 * Math.PI) % (2 * Math.PI); + camera.angle.roll = (camera.angle.roll + camera.velocity.z * dt / 500 + 2 * Math.PI) % (2 * Math.PI); } } }; diff --git a/lib/systems/frequency_adjuster.js b/lib/systems/frequency_adjuster.js index 6aa11d4..a3582bb 100644 --- a/lib/systems/frequency_adjuster.js +++ b/lib/systems/frequency_adjuster.js @@ -36,9 +36,11 @@ export default class FrequencyAdjuster extends System { ['a', 'b', 'c'].forEach(key => { nodeElement.appendChild(slider({ + id: `frequency-adjuster-${i}-slider-${key}`, min: '0', - max: '1', - step: '0.01', + max: (2 * Math.PI).toString(), + step: '0.05', + shiftStep: (Math.PI / 8).toString(), label: internals.symbols[key], className: `frequency`, get: () => node.frequency[key].toString(), diff --git a/lib/systems/global_adjuster.js b/lib/systems/global_adjuster.js index 7f6df91..f7433ca 100644 --- a/lib/systems/global_adjuster.js +++ b/lib/systems/global_adjuster.js @@ -28,9 +28,10 @@ export default class GlobalAdjuster extends System { }); nodeElement.appendChild(slider({ + id: `global-adjuster-${i}-slider`, min: '5', - max: '2000', - step: '1', + max: '1000', + step: '5', label: '𝜆', className: 'lineLength', get: () => node.configuration.lineLength.toString(), diff --git a/lib/systems/lissajous_position_updater.js b/lib/systems/lissajous_position_updater.js index 202ddc7..39b151a 100644 --- a/lib/systems/lissajous_position_updater.js +++ b/lib/systems/lissajous_position_updater.js @@ -27,7 +27,7 @@ export default class WebGLRenderer extends System { update(dt){ - this.time = (this.time + dt / 100) % internals.kPeriod; + this.time = (this.time + dt / 500) % internals.kPeriod; for (const curve of this.curves) { curve.position.x = this._getPosition(curve.amplitude.a, curve.frequency.a, this.time, 0); diff --git a/package.json b/package.json index 13fdaa8..9cba4a7 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ "@serpentity/components.euler_angle": "^4.0.0", "@serpentity/components.position": "^4.0.1", "@serpentity/components.velocity": "^4.0.3", - "@serpentity/serpentity": "^4.0.0", + "@serpentity/serpentity": "^4.1.0", "gl-matrix": "3.4.0" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5cbcf02..84997cc 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -7,16 +7,16 @@ settings: dependencies: '@serpentity/components.euler_angle': specifier: ^4.0.0 - version: 4.0.0(@serpentity/serpentity@4.0.0) + version: 4.0.0(@serpentity/serpentity@4.1.0) '@serpentity/components.position': specifier: ^4.0.1 - version: 4.0.1(@serpentity/serpentity@4.0.0) + version: 4.0.1(@serpentity/serpentity@4.1.0) '@serpentity/components.velocity': specifier: ^4.0.3 - version: 4.0.3(@serpentity/serpentity@4.0.0) + version: 4.0.3(@serpentity/serpentity@4.1.0) '@serpentity/serpentity': - specifier: ^4.0.0 - version: 4.0.0 + specifier: ^4.1.0 + version: 4.1.0 gl-matrix: specifier: 3.4.0 version: 3.4.0 @@ -464,32 +464,32 @@ packages: dev: true optional: true - /@serpentity/components.euler_angle@4.0.0(@serpentity/serpentity@4.0.0): + /@serpentity/components.euler_angle@4.0.0(@serpentity/serpentity@4.1.0): resolution: {integrity: sha512-DoWghww9eEBanuHAPlVtBGeGyIS2wQu/M90iChdMTHUWR9uITAWbFT1aFQmRyY++7lxUbAdrusizeQ6XlQIw8Q==} peerDependencies: '@serpentity/serpentity': ^4.0.0 dependencies: - '@serpentity/serpentity': 4.0.0 + '@serpentity/serpentity': 4.1.0 dev: false - /@serpentity/components.position@4.0.1(@serpentity/serpentity@4.0.0): + /@serpentity/components.position@4.0.1(@serpentity/serpentity@4.1.0): resolution: {integrity: sha512-G2Q9huGgf7R61Lxx6ly+fYMfHBO5O+AvcDAJM0dENM3vmJl6lj8KZHNcIEOk+Vre+fTjWNX/aiNDphK9sDnAYA==} peerDependencies: '@serpentity/serpentity': ^4.0.0 dependencies: - '@serpentity/serpentity': 4.0.0 + '@serpentity/serpentity': 4.1.0 dev: false - /@serpentity/components.velocity@4.0.3(@serpentity/serpentity@4.0.0): + /@serpentity/components.velocity@4.0.3(@serpentity/serpentity@4.1.0): resolution: {integrity: sha512-bPQf6Yz8gjraS2SNQquqsfopPnl1QtHjVz52om4CZ7gRqrFQzawsxs98I74/MtGjW3LAK4LSQyrPujy85j188g==} peerDependencies: '@serpentity/serpentity': ^4.0.0 dependencies: - '@serpentity/serpentity': 4.0.0 + '@serpentity/serpentity': 4.1.0 dev: false - /@serpentity/serpentity@4.0.0: - resolution: {integrity: sha512-RlsG5lMFvho/15LW9SJ5uFcb8WjAH7uZaToTJPRJEzAUntMnyQxZpPl7ensAHjbuBasBkgg7IDipl5GBuf6S0Q==} + /@serpentity/serpentity@4.1.0: + resolution: {integrity: sha512-1G2hLUSeCMLqIebm/GCJAj+xJRerrSSBRU7cbdOrYRl3gDqpTcfz6ndhBQlQpLdn+8nyC3enRKWdcZPWj4OZfA==} engines: {node: '>= 20.0.0'} dev: false diff --git a/style.css b/style.css index d961e98..17fa12e 100644 --- a/style.css +++ b/style.css @@ -66,6 +66,7 @@ input[type="range"]::-webkit-slider-thumb { } input[type="range"]::-moz-range-thumb { + -webkit-appearance: none; height: 16px; width: 16px; background-color: #80FFCC; @@ -73,6 +74,21 @@ input[type="range"]::-moz-range-thumb { border-radius: 50%; } +input.shifted[type="range"]::-moz-range-thumb { + background-color: #FFB4F0; +} + +input.shifted[type="range"]::-webkit-slider-thumb { + background-color: #FFB4F0; +} + +input[type="range"]:focus::-moz-range-thumb { + background-color: #FF616B; +} + +input[type="range"]:focus::-webkit-slider-thumb { + background-color: #FF616B; +} .slider::before, .slider::after {