Skip to content
Snippets Groups Projects
Unverified Commit da60f695 authored by Jamie Temple's avatar Jamie Temple
Browse files

change: clean up of CurveHelpers'

parent a24dfe1a
Branches
No related tags found
1 merge request!1feat: base project
......@@ -25,13 +25,15 @@ class CurveHelper implements PipelineObserver, PipelineRenderable, PipelineGUI {
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,20 +103,42 @@ 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;
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)));
}
}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment