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