Add keyboard markers, shiftable sliders

12 files changed, 77 insertions, 27 deletions

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 = `<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 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 {