From: Ruben Beltran del Rio Date: Wed, 8 May 2024 15:58:05 +0000 (+0200) Subject: Add phase X-Git-Url: https://git.r.bdr.sh/rbdr/lissajous/commitdiff_plain/2b9badac1345c865c34097bc5d1699329b53fdc8?hp=3a88e11079e5e331a10ed35ffdd67d8f3a790d23 Add phase --- diff --git a/images/fast-pitch.svg b/images/fast-pitch.svg index 2b33b10..4fb7c4e 100644 --- a/images/fast-pitch.svg +++ b/images/fast-pitch.svg @@ -4,6 +4,6 @@ - + \ No newline at end of file diff --git a/images/fast-roll.svg b/images/fast-roll.svg index 5b31f82..9485605 100644 --- a/images/fast-roll.svg +++ b/images/fast-roll.svg @@ -3,8 +3,7 @@ Fast Roll - - - + + \ No newline at end of file diff --git a/images/fast-yaw.svg b/images/fast-yaw.svg index 08fb702..bc77ba0 100644 --- a/images/fast-yaw.svg +++ b/images/fast-yaw.svg @@ -4,6 +4,6 @@ - + \ No newline at end of file diff --git a/images/long.svg b/images/long.svg index 4f816b1..830f9be 100644 --- a/images/long.svg +++ b/images/long.svg @@ -4,6 +4,7 @@ + \ No newline at end of file diff --git a/images/near.svg b/images/near.svg index 7bd56b5..57a9883 100644 --- a/images/near.svg +++ b/images/near.svg @@ -2,7 +2,7 @@ Near - + \ No newline at end of file diff --git a/images/no-roll.svg b/images/no-roll.svg index ded155e..97b68dd 100644 --- a/images/no-roll.svg +++ b/images/no-roll.svg @@ -3,6 +3,6 @@ No Roll - + \ No newline at end of file diff --git a/images/phased.svg b/images/phased.svg new file mode 100644 index 0000000..240ac31 --- /dev/null +++ b/images/phased.svg @@ -0,0 +1,9 @@ + + + Phased + + + + + + \ No newline at end of file diff --git a/images/unphased.svg b/images/unphased.svg new file mode 100644 index 0000000..c2cded9 --- /dev/null +++ b/images/unphased.svg @@ -0,0 +1,8 @@ + + + Unphased + + + + + \ No newline at end of file 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(){} +}; diff --git a/style.css b/style.css index 6871f4c..2cda519 100644 --- a/style.css +++ b/style.css @@ -122,6 +122,11 @@ input[type="range"]:focus::-webkit-slider-thumb { display: inline-block; } +.slider::before { + position: relative; + left: 16px; +} + .slider { margin: 4px 0; position: relative; @@ -129,11 +134,10 @@ input[type="range"]:focus::-webkit-slider-thumb { label { display: inline-block; + width: 16px; position: relative; - width: 0; - height: 16px; - right: 32px; - top: -5px; + left: -16px; + top: -2px; } .slider.lineLength::before { @@ -191,3 +195,11 @@ label { .slider.amplitude::after { mask-image: url('/images/ha.svg'); } + +.slider.phase::before { + mask-image: url('/images/unphased.svg'); +} + +.slider.phase::after { + mask-image: url('/images/phased.svg'); +}