feat: interpolation

Main.cpp

+#include <iostream>
+
+int main(void)
+{
+    for (double i{0}; i < 1; i += 0.1)
+    {
+        std::cout << i << ", " << i * i << std::endl;
+    }
+}
\ No newline at end of file

src/main.ts

 import * as CG from "./uitls/rendering";
 import * as THREE from "three";
 import { UI } from "./uitls/ui";
-import { Vector3 } from "three";
 import * as Interpolation from "./uitls/bezierCurve";
 
 const render = new CG.RenderManager('#canvas', { near: 0.1, far: 1000, fov: 45, height: 1 });
 const ui = new UI();
 
-// create a cube
-let geometry = new THREE.BoxGeometry(1, 1, 1);
-let material = new THREE.MeshBasicMaterial({ color: 0xfffffff });
-let cube = new THREE.Mesh(geometry, material);
-// render.add(cube);
-
 const startPoint = new THREE.Vector2(-1, -1);
 const endPoint = new THREE.Vector2(1, 1);
 const startControlPoint = new THREE.Vector2(-1, 1);
 const endControlPoint = new THREE.Vector2(1, -1);
 
-const curve = new Interpolation.BezierCurveTest(
+// const curve = new Interpolation.BezierCurveTest(
+//   startPoint,
+//   startControlPoint,
+//   endControlPoint,
+//   endPoint
+// )
+const curve = new Interpolation.BezierCurve(
   startPoint,
   endPoint,
   startControlPoint,
   endControlPoint
 )
+
 const line = curve.createLine();
 
 render.add(line);

src/uitls/bezierCurve.ts

@@ -9,13 +9,17 @@ import {
 } from "three";
 import { GUI } from "dat.gui";
 
+function lerp(a: Vector2, b: Vector2, t: number): Vector2 {
+    return new Vector2(a.x + (b.x - a.x) * t, a.y + (b.y - a.y) * t);
+}
+
 
 export abstract class AbstractBezierCurve implements Modifiable, Updatable {
     constructor(startPoint: Vector2, endPoint: Vector2, startControlPoint: Vector2, endControlPoint: Vector2) {
-        this._startPoint = startPoint;
-        this._endPoint = endPoint;
-        this._startControlPoint = startControlPoint;
-        this._endControlPoint = endControlPoint;
+        this.startPoint = startPoint;
+        this.endPoint = endPoint;
+        this.startControlPoint = startControlPoint;
+        this.endControlPoint = endControlPoint;
 
         this._geomBuffer = new BufferGeometry();
     }
@@ -44,22 +48,24 @@ export abstract class AbstractBezierCurve implements Modifiable, Updatable {
 
     createElement(gui: GUI): void {
         const folder = gui.addFolder('Bezier Curve');
-        UI.addVector(folder, this, this._startPoint, 'Start Point');
-        UI.addVector(folder, this, this._endPoint, 'End Point');
-        UI.addVector(folder, this, this._startControlPoint, 'Start Control Point');
-        UI.addVector(folder, this, this._endControlPoint, 'End Control Point');
+        UI.addVector(folder, this, this.startPoint, 'Start Point');
+        UI.addVector(folder, this, this.endPoint, 'End Point');
+        UI.addVector(folder, this, this.startControlPoint, 'Start Control Point');
+        UI.addVector(folder, this, this.endControlPoint, 'End Control Point');
         folder.add(this, "_numPoints", 10, 100).step(1).name("Points").onChange(() => { this.update(); });
 
     }
 
-    public _startPoint: Vector2;
-    public _endPoint: Vector2;
-    public _startControlPoint: Vector2;
-    public _endControlPoint: Vector2;
-    public _numPoints: number = 100;
-    public _line?: Line;
-    public _curvePoints: Vector2[] = [];
-    public _geomBuffer: BufferGeometry;
+    public startPoint: Vector2;
+    public endPoint: Vector2;
+    public startControlPoint: Vector2;
+    public endControlPoint: Vector2;
+
+    protected _numPoints: number = 100;
+
+    private _line?: Line;
+    private _curvePoints: Vector2[] = [];
+    private _geomBuffer: BufferGeometry;
 }
 
 // TODO: Handles for the control points
@@ -81,10 +87,10 @@ export class BezierCurveTest extends AbstractBezierCurve {
 
     generateCurvePoints(): Vector2[] {
         const curve = new CubicBezierCurve3(
-          new Vector3(this._startPoint.x, this._startPoint.y, 0),
-          new Vector3(this._startControlPoint.x, this._startControlPoint.y, 0),
-          new Vector3(this._endPoint.x, this._endPoint.y, 0),
-          new Vector3(this._endControlPoint.x, this._endControlPoint.y, 0)
+            new Vector3(this.startPoint.x, this.startPoint.y, 0),
+            new Vector3(this.startControlPoint.x, this.startControlPoint.y, 0),
+            new Vector3(this.endPoint.x, this.endPoint.y, 0),
+            new Vector3(this.endControlPoint.x, this.endControlPoint.y, 0)
         );
 
         let curvePoints: Vector2[] = [];
@@ -100,10 +106,77 @@ export class BezierCurveTest extends AbstractBezierCurve {
 
 export class BezierCurve extends AbstractBezierCurve {
 
+
+    bernstain(s: number): [Vector2, number[]] {
+
+        // p(t) = (1-t)³ * p0 + 3 * (1-t)² * t * p1 + 
+        //        3 * (1-t) * t² * p2 + t³ * p3
+        // => subtitute: 1 - t = s
+        // p(t) = k³ * p0 + 3 * k² * t * p1 + 
+        //        3 * k * t² * p2 + t³ * p3
+
+        const p0 = this.startPoint;
+        const p1 = this.startControlPoint;
+        const p2 = this.endControlPoint;
+        const p3 = this.endPoint;
+
+        // set k = 1 - s => substitution
+        const t = s;
+        const k = 1 - s;
+
+        // calculate the coefficients
+        const u0 = 1 * Math.pow(k, 3) * Math.pow(t, 0);
+        const u1 = 3 * Math.pow(k, 2) * Math.pow(t, 1);
+        const u2 = 3 * Math.pow(k, 1) * Math.pow(t, 2);
+        const u3 = 1 * Math.pow(k, 0) * Math.pow(t, 3);
+
+        // calculate the point
+        const p = new Vector2(
+            u0 * p0.x + u1 * p1.x + u2 * p2.x + u3 * p3.x,
+            u0 * p0.y + u1 * p1.y + u2 * p2.y + u3 * p3.y
+        );
+
+        return [p, [u0, u1, u2, u3]];
+    }
+
+
+    deCasteljau(t: number): Vector2 {
+
+        const p0 = this.startPoint;
+        const p1 = this.startControlPoint;
+        const p2 = this.endControlPoint;
+        const p3 = this.endPoint;
+
+        // iterative implementation of deCasteljau
+        let points: Vector2[] = [p0, p1, p2, p3];
+        let temporary: Vector2[] = [];
+        while (points.length > 1) {
+            temporary = [];
+            for (let i = 0; i < points.length - 1; i++)
+                temporary.push(lerp(points[i], points[i + 1], t));
+            points = temporary;
+        }
+
+        return points[0];
+    }
+
+
     generateCurvePoints(): Vector2[] {
-            let curvePoints: Vector2[] = [];
+        const curvePoints: Vector2[] = [];
+        const sampleSize = 1 / this._numPoints;
+
+        if (true)
+            for (let t = 0; t < 1; t += sampleSize) {
+                t = Math.round(t * 10000) / 10000;
+                curvePoints.push(this.deCasteljau(t));
+            }
+        else
+            for (let s = 0; s < 1; s += sampleSize) {
+                s = Math.round(s * 10000) / 10000;
+                const [point, coefficient] = this.bernstain(s);
+                curvePoints.push(point);
+            }
 
-            // TODO: implement bezier curves
 
         return curvePoints;
     }