Add phase

7 files changed, 94 insertions, 3 deletions

diff --git a/lib/components/triple_phase.js b/lib/components/triple_phase.js
new file mode 100644
index 0000000..66b874b
--- /dev/null
+++ b/lib/components/triple_phase.js
@@ -0,0 +1,12 @@
+import { Component } from '@serpentity/serpentity';
+
+export default class TriplePhase extends Component {
+  constructor(config) {
+
+    super(config);
+
+    this.a = this.a || Math.PI * Math.random();
+    this.b = this.b || Math.PI * Math.random();
+    this.c = this.c || Math.PI * Math.random();
+  }
+};
diff --git a/lib/factories/curves.js b/lib/factories/curves.js
index 99bc588..f6db460 100644
--- a/lib/factories/curves.js
+++ b/lib/factories/curves.js
@@ -1,6 +1,7 @@
 import { Entity } from '@serpentity/serpentity';
 import Position from '@serpentity/components.position';
 import TripleFrequency from '../components/triple_frequency';
+import TriplePhase from '../components/triple_phase';
 import TripleAmplitude from '../components/triple_amplitude';
 import Color from '../components/color';
 
@@ -9,6 +10,7 @@ export function lissajousCurve() {
   const entity = new Entity();
   entity.addComponent(new Position());
   entity.addComponent(new TripleFrequency());
+  entity.addComponent(new TriplePhase());
   entity.addComponent(new TripleAmplitude());
   entity.addComponent(new Color());
 
diff --git a/lib/main.js b/lib/main.js
index 6018957..cc4392a 100644
--- a/lib/main.js
+++ b/lib/main.js
@@ -7,6 +7,7 @@ import WebGLRenderer from './systems/webgl_renderer';
 import LissajousPositionUpdater from './systems/lissajous_position_updater';
 import CameraAdjuster from './systems/camera_adjuster';
 import FrequencyAdjuster from './systems/frequency_adjuster';
+import PhaseAdjuster from './systems/phase_adjuster';
 import AmplitudeAdjuster from './systems/amplitude_adjuster';
 import GlobalAdjuster from './systems/global_adjuster';
 
@@ -45,6 +46,7 @@ const internals = {
     engine.addSystem(new GlobalAdjuster(settings));
     engine.addSystem(new CameraAdjuster(settings));
     engine.addSystem(new FrequencyAdjuster(settings));
+    engine.addSystem(new PhaseAdjuster(settings));
     engine.addSystem(new AmplitudeAdjuster(settings));
 
     internals.engine = engine;
diff --git a/lib/nodes/lissajous_curve.js b/lib/nodes/lissajous_curve.js
index 55179e8..470bf97 100644
--- a/lib/nodes/lissajous_curve.js
+++ b/lib/nodes/lissajous_curve.js
@@ -1,11 +1,13 @@
 import Position from '@serpentity/components.position';
 import TripleFrequency from '../components/triple_frequency';
+import TriplePhase from '../components/triple_phase';
 import TripleAmplitude from '../components/triple_amplitude';
 import { Node } from '@serpentity/serpentity';
 
 export default class LissajousCurve extends Node {};
 LissajousCurve.types = {
   position: Position,
+  phase: TriplePhase,
   frequency: TripleFrequency,
   amplitude: TripleAmplitude
 }
diff --git a/lib/nodes/phased.js b/lib/nodes/phased.js
new file mode 100644
index 0000000..050425d
--- /dev/null
+++ b/lib/nodes/phased.js
@@ -0,0 +1,7 @@
+import TriplePhase from '../components/triple_phase';
+import { Node } from '@serpentity/serpentity';
+
+export default class Phased extends Node {};
+Phased.types = {
+  phase: TriplePhase
+}
diff --git a/lib/systems/lissajous_position_updater.js b/lib/systems/lissajous_position_updater.js
index 39b151a..da90fb2 100644
--- a/lib/systems/lissajous_position_updater.js
+++ b/lib/systems/lissajous_position_updater.js
@@ -30,9 +30,9 @@ export default class WebGLRenderer extends System {
     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);
-      curve.position.y = this._getPosition(curve.amplitude.b, curve.frequency.b, this.time, 0);
-      curve.position.z = this._getPosition(curve.amplitude.c, curve.frequency.c, this.time, 0);
+      curve.position.x = this._getPosition(curve.amplitude.a, curve.frequency.a, this.time, curve.phase.a);
+      curve.position.y = this._getPosition(curve.amplitude.b, curve.frequency.b, this.time, curve.phase.b);
+      curve.position.z = this._getPosition(curve.amplitude.c, curve.frequency.c, this.time, curve.phase.c);
     }
   }
 
diff --git a/lib/systems/phase_adjuster.js b/lib/systems/phase_adjuster.js
new file mode 100644
index 0000000..120b05d
--- /dev/null
+++ b/lib/systems/phase_adjuster.js
@@ -0,0 +1,66 @@
+import { System } from '@serpentity/serpentity';
+import Phased from '../nodes/phased';
+import { settingsContainer, slider } from '../factories/ui';
+
+const internals = {
+  symbols: {
+    a: '𝛿',
+    b: '𝜀',
+    c: '𝜂'
+  }
+};
+
+export default class PhaseAdjuster extends System {
+
+  constructor(container) {
+
+    super();
+    this.container = container;
+  }
+
+  added(engine){
+
+    this.nodes = engine.getNodes(Phased);
+    this.adjusterContainer = settingsContainer({
+      id: 'phase-adjuster',
+      label: 'Phase'
+    })
+
+    let i = 0;
+    for (const node of this.nodes) {
+      const nodeElement = settingsContainer({
+        id: `phase-adjuster-${i}`,
+        label: `ɣ${i + 1}`,
+        level: 3
+      });
+
+      ['a', 'b', 'c'].forEach(key => {
+        nodeElement.appendChild(slider({
+          id: `phase-adjuster-${i}-slider-${key}`,
+          min: '0',
+          max: Math.PI.toString(),
+          step: '0.01',
+          shiftStep: (Math.PI / 8).toString(),
+          label: internals.symbols[key],
+          className: `phase`,
+          get: () => node.phase[key].toString(),
+          set: (value) => (node.phase[key] = parseFloat(value))
+        }));
+      });
+
+      this.adjusterContainer.appendChild(nodeElement);
+      ++i;
+    }
+
+    this.container.appendChild(this.adjusterContainer);
+  }
+
+  removed(){
+
+    this.container.removeChild(this.adjusterContainer);
+    delete this.adjusterContainer;
+    delete this.nodes;
+  }
+
+  update(){}
+};