Add keyboard markers, shiftable sliders

diff --git a/lib/components/configuration.js b/lib/components/configuration.js
index ddb4a27583ecf0e5c5637220c5fbb6a05cd77e34..78065c3a82343f03e979f5981d3bace73973d3d5 100644 (file)
--- 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 c601bdbfdd2c1f399980df2b241b3616fe535709..bf0360df980e7e604f3b3936f723290f63c6edfc 100644 (file)
--- 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 27ff6eb96b76acecc26b65f951bf0043ea4d1091..c220f67b208e8a23d3d2f6e6b2587e7bb81782f5 100644 (file)
--- 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 = `<h${level}>${label}</h${level}>`;
   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 71f72779b13fec0fd7497c39ca7dfdec8e82575d..04f271a17275ce288a755e3b0454f6a3455359f7 100644 (file)
--- 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 3b6ea41afe194e7d825426da1a3805f5601f24ab..9182343c54122348c451597717300d1f5e3a741d 100644 (file)
--- 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 3520f716e4f5cad0451a6d11e6ff615bd1062f80..eccef0dd4006b32d07c0ec5f8031eac0232246dc 100644 (file)
--- 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 6aa11d4f98343918fb770e5da9f21fc5bf83c72f..a3582bb2822e953db413a379747006d95a2a90ab 100644 (file)
--- 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 7f6df91f8f4dbfb6d96584180b300f37c69c3c65..f7433ca1e3c58e2867452ad990ea019dcaf05f20 100644 (file)
--- 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 202ddc75917a7e89489a1ceef8bd3c623fdb3d22..39b151ac85d250ead87eaf6356f6b6869944b71a 100644 (file)
--- 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 13fdaa8316a544ddd52d148c6d687db7b0b20c06..9cba4a73d48038eefb313fb1528ea358d16efa77 100644 (file)
--- 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 5cbcf02151c396fff648e5e5f0c087dc4cb49da7..84997cc6e7f9da05b0f950ba712b1da8e3068275 100644 (file)
--- 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 d961e981fec36dfea4426a09f9c1d2c3b56a9782..17fa12e314b0c2f399c75dfb566ca09fac9d0497 100644 (file)
--- 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 {