From da60f6956d8ff5110f188f34c99d0f53e896d8c2 Mon Sep 17 00:00:00 2001
From: Jamie Temple <jamie-temple@live.de>
Date: Wed, 6 Jul 2022 01:24:09 +0200
Subject: [PATCH] change: clean up of CurveHelpers'

---
 src/01-bezierCurves/CurveHelper.ts | 69 ++++++++++++++++--------------
 1 file changed, 38 insertions(+), 31 deletions(-)

diff --git a/src/01-bezierCurves/CurveHelper.ts b/src/01-bezierCurves/CurveHelper.ts
index 1e4496e..b826c5b 100644
--- a/src/01-bezierCurves/CurveHelper.ts
+++ b/src/01-bezierCurves/CurveHelper.ts
@@ -20,18 +20,20 @@ class CurveHelper implements PipelineObserver, PipelineRenderable, PipelineGUI {
     constructor(curve: Curve, offset: number = 0) {
         this.curve = curve;
         this._offset = offset;
-        this._lines = new Array<Line1d>();        
+        this._lines = new Array<Line1d>();
         this.group = new THREE.Group();
 
         this._point = new Point2d(.03, 32, new THREE.Color(0xff00ff));
         this._point.material = new THREE.MeshBasicMaterial({
-            color: new THREE.Color(0xff00ff)});
+            color: new THREE.Color(0xff00ff)
+        });
         this._point._object3d.position.z = this._offset;
 
         this._lines.push(new Line1d([new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3()], new THREE.Color(0xffff00)));
         this._lines.push(new Line1d([new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3()], new THREE.Color(0x00ffff)));
         this._lines.push(new Line1d([new THREE.Vector3(), new THREE.Vector3()], new THREE.Color(0xff00ff)));
 
+        // TODO: Extract controls to seperate class
         document.addEventListener('keydown', (event: KeyboardEvent) => {
             if (event.key === 'a') {
                 this.t = Math.max(0, Math.min(1, this.t - 0.01 * this._speed));
@@ -56,7 +58,7 @@ class CurveHelper implements PipelineObserver, PipelineRenderable, PipelineGUI {
     gui(gui: dat.GUI): void {
         const folder = gui.addFolder('CurveHelper');
         folder.add(this, 't', 0, 1, 0.01).listen();
-        folder.add(this, '_speed', 1, 2, 0.1).name("speed");
+        folder.add(this, '_speed', 1, 2, 0.1).listen().name("speed");
         folder.closed = false;
     }
 
@@ -91,6 +93,7 @@ class CurveHelperBernstein implements PipelineObserver, PipelineRenderable, Pipe
 
     private _helperReference: CurveHelper;
 
+    private _scale: number = 1;
     private _xAxis: Line1d;
     private _yAxis: Line1d;
     private _graphs: Array<Line1d>;
@@ -100,21 +103,43 @@ class CurveHelperBernstein implements PipelineObserver, PipelineRenderable, Pipe
 
     constructor(helper: CurveHelper, offset: number = 0) {
         this._helperReference = helper;
+
+        const halfScale = (this._scale * .5);
+
         this._xAxis = new Line1d(
-            [new THREE.Vector3(-.5, -.5, 0), new THREE.Vector3(.5, -.5, 0)], 
+            [new THREE.Vector3(-halfScale, -halfScale, 0), new THREE.Vector3(halfScale, -halfScale, 0)],
             new THREE.Color(0xff0000));
         this._yAxis = new Line1d(
-            [new THREE.Vector3(-.5, -.5, 0), new THREE.Vector3(-.5, .5, 0)], 
+            [new THREE.Vector3(-halfScale, -halfScale, 0), new THREE.Vector3(-halfScale, halfScale, 0)],
             new THREE.Color(0x00ff00));
         this._graphs = new Array<Line1d>();
         this._point = new Array<Point2d>();
 
+        // this will also be the collider/ hitbox for dragging
         this._background = new THREE.Mesh(
-            new THREE.PlaneGeometry(1, 1),
+            new THREE.PlaneGeometry(this._scale, this._scale),
             new THREE.MeshBasicMaterial({ color: 0xffffff, opacity: 0.5, transparent: true }));
         this._background.position.z = offset;
 
-        const points: Array< Array<THREE.Vector3>> = new Array< Array<THREE.Vector3>>();
+        this._group = new THREE.Group();
+        this._group.add(this._background);
+        this._group.add(this._xAxis.object());
+        this._group.add(this._yAxis.object());
+        this._graphs.forEach((graph) => { this._group.add(graph.object()); });
+        this._point.forEach((point) => { this._group.add(point.object()); });
+
+        // to make the translation easier all object are parented to the background
+        this._xAxis._object3d.parent = this._background;
+        this._yAxis._object3d.parent = this._background;
+        this._graphs.forEach((graph) => { graph._object3d.parent = this._background; });
+        this._point.forEach((point) => { point._object3d.parent = this._background; });
+
+        this.initGraphs();
+        this.initPoints();
+    }
+
+    private initGraphs(): void {
+        const points: Array<Array<THREE.Vector3>> = new Array<Array<THREE.Vector3>>();
         for (let i = 0; i < 4; i++) {
             points.push(new Array<THREE.Vector3>());
         }
@@ -124,14 +149,17 @@ class CurveHelperBernstein implements PipelineObserver, PipelineRenderable, Pipe
             let t = i / resolution;
             let coefficients = BernsteinAlgorithm.calculateCoefficients(t);
             coefficients.forEach((c, index) => {
-                points[index].push(new THREE.Vector3(t, c, 0.001).sub(new THREE.Vector3(0.5, 0.5, 0)));
+                points[index].push(new THREE.Vector3(t, c, 0.001)
+                    .sub(new THREE.Vector3((this._scale * .5), (this._scale * .5), 0)));
             });
         }
 
         for (let i = 0; i < 4; i++) {
             this._graphs.push(new Line1d(points[i], new THREE.Color(0x0000ff)));
         }
+    }
 
+    private initPoints(): void {
         const material = new THREE.MeshBasicMaterial({ color: 0x0000ff });
         const coefficient = BernsteinAlgorithm.calculateCoefficients(this._helperReference.t);
         for (let i = 0; i < 4; i++) {
@@ -139,27 +167,6 @@ class CurveHelperBernstein implements PipelineObserver, PipelineRenderable, Pipe
             this._point[i].material = material;
             this._point[i].position().copy(new THREE.Vector3(this._helperReference.t, coefficient[i], 0.001));
         }
-
-        this._group = new THREE.Group();
-        this._group.add(this._xAxis.object());
-        this._group.add(this._yAxis.object());
-        this._graphs.forEach((graph) => {
-            this._group.add(graph.object());
-        });
-        this._point.forEach((point) => {
-            this._group.add(point.object());
-        });
-        this._group.add(this._background);
-
-        this._xAxis._object3d.parent = this._background;
-        this._yAxis._object3d.parent = this._background;
-        this._graphs.forEach((graph) => {
-            graph._object3d.parent = this._background;
-        });
-        this._point.forEach((point) => {
-            point._object3d.parent = this._background;
-        });
-
     }
 
     hitbox(): THREE.Object3D {
@@ -177,8 +184,8 @@ class CurveHelperBernstein implements PipelineObserver, PipelineRenderable, Pipe
     update(_deltaTime: number): void {
         const coefficient = BernsteinAlgorithm.calculateCoefficients(this._helperReference.t);
         for (let i = 0; i < 4; i++) {
-            this._point.push(new Point2d(.02, 32, new THREE.Color(0x0000ff)));
-            this._point[i].position().copy(new THREE.Vector3(this._helperReference.t, coefficient[i], 0.001).sub(new THREE.Vector3(0.5, 0.5, 0)));
+            this._point[i].position().copy(new THREE.Vector3(this._helperReference.t, coefficient[i], 0.001)
+                .sub(new THREE.Vector3((this._scale * .5), (this._scale * .5), 0)));
         }
     }
 
-- 
GitLab