Add keyboard markers, shiftable sliders

9 files changed, 47 insertions, 13 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);