Make 3D

3 files changed, 63 insertions, 0 deletions

diff --git a/lib/factories/curves.js b/lib/factories/curves.js
index d9f0f47..99bc588 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 TripleAmplitude from '../components/triple_amplitude';
 import Color from '../components/color';
 
 export function lissajousCurve() {
@@ -8,6 +9,7 @@ export function lissajousCurve() {
   const entity = new Entity();
   entity.addComponent(new Position());
   entity.addComponent(new TripleFrequency());
+  entity.addComponent(new TripleAmplitude());
   entity.addComponent(new Color());
 
   return entity;
diff --git a/lib/factories/global.js b/lib/factories/global.js
new file mode 100644
index 0000000..c601bdb
--- /dev/null
+++ b/lib/factories/global.js
@@ -0,0 +1,33 @@
+import { Entity } from '@serpentity/serpentity';
+import Position from '@serpentity/components.position';
+import EulerAngle from '@serpentity/components.euler_angle';
+import Velocity from '@serpentity/components.velocity';
+import Radius from '../components/radius';
+import Up from '../components/up';
+import Configuration from '../components/configuration';
+
+export function configuration() {
+
+  const entity = new Entity();
+  entity.addComponent(new Configuration());
+
+  return entity;
+}
+
+export function camera() {
+
+  const entity = new Entity();
+  entity.addComponent(new Position());
+  entity.addComponent(new EulerAngle());
+  entity.addComponent(new Velocity({
+    x: 0,
+    y: Math.PI / 180,
+    z: 0,
+  }));
+  entity.addComponent(new Radius({
+    radius: 5
+  }));
+  entity.addComponent(new Up());
+
+  return entity;
+}
diff --git a/lib/factories/ui.js b/lib/factories/ui.js
new file mode 100644
index 0000000..27ff6eb
--- /dev/null
+++ b/lib/factories/ui.js
@@ -0,0 +1,28 @@
+export function settingsContainer({id, label, level=2}) {
+
+  const container = document.createElement('div');
+  container.id = id;
+  container.innerHTML = `<h${level}>${label}</h${level}>`;
+  return container;
+};
+
+export function slider({min, max, step, get, set, label = '', className}) {
+
+  const sliderContainer = document.createElement('div');
+  sliderContainer.classList.add('slider');
+  sliderContainer.classList.add(className);
+  const labelElement = document.createElement('label');
+  labelElement.innerHTML = label;
+  const slider = document.createElement('input');
+  slider.type = 'range';
+  slider.min = min;
+  slider.max = max;
+  slider.step = step;
+  slider.value = get().toString();
+
+  slider.addEventListener('input', () => set(slider.value));
+
+  sliderContainer.appendChild(labelElement);
+  sliderContainer.appendChild(slider);
+  return sliderContainer;
+}