diff --git a/bezier-1.html b/bezier-1.html
new file mode 100644
index 0000000..715b424
--- /dev/null
+++ b/bezier-1.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+ Document
+
+
+
+
+
+
diff --git a/bezier-1.js b/bezier-1.js
new file mode 100644
index 0000000..f441038
--- /dev/null
+++ b/bezier-1.js
@@ -0,0 +1,74 @@
+import { lerp, drawCircle, drawLine, drawDashedLine, resizeCanvas } from "./common.js"
+
+let ctx = undefined;
+let points = [];
+
+function update(time) {
+ ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+
+ const p = (Math.sin(0.001 * time) + 1.0) * 0.5;
+ if (points.length == 2) {
+ const [start, end] = points;
+ drawCircle(ctx, lerp(start, end, p), 1, 0xFF0000);
+ } else if (points.length === 3) {
+ const [a, b, c] = points;
+ const ab = lerp(a, b, p);
+ const bc = lerp(b, c, p);
+ const abc = lerp(ab, bc, p);
+ drawDashedLine(ctx, ab, bc, 0xFF0000);
+ drawCircle(ctx, ab, 1, 0xFF0000);
+ drawCircle(ctx, bc, 1, 0xFF0000);
+ drawCircle(ctx, abc, 1, 0xFFFFFF);
+ } else if (points.length === 4) {
+ const [a, b, c, d] = points;
+ const ab = lerp(a, b, p);
+ const bc = lerp(b, c, p);
+ const cd = lerp(c, d, p);
+ const abc = lerp(ab, bc, p);
+ const bcd = lerp(bc, cd, p);
+ const abcd = lerp(abc, bcd, p);
+
+ drawDashedLine(ctx, ab, bc, 0xFF0000);
+ drawDashedLine(ctx, bc, cd, 0xFF0000);
+ drawDashedLine(ctx, abc, bcd, 0xFFFF00);
+ drawCircle(ctx, ab, 1, 0xFF0000);
+ drawCircle(ctx, bc, 1, 0xFF0000);
+ drawCircle(ctx, cd, 1, 0xFF0000);
+ drawCircle(ctx, abc, 1, 0xFFFF00);
+ drawCircle(ctx, bcd, 1, 0xFFFF00);
+ drawCircle(ctx, abcd, 1, 0xFFFFFF);
+ }
+
+ for (let i = 0; i < points.length - 1; ++i) {
+ const current = points[i];
+ const next = points[i+1];
+ drawLine(ctx, current, next, 0xFF00FF);
+ }
+
+ for (const point of points) {
+ drawCircle(ctx, point, 1, 0xFF00FF);
+ }
+
+ window.requestAnimationFrame(update);
+}
+
+function init() {
+ const canvas = document.getElementById("canvas");
+ if (canvas.getContext) {
+ ctx = canvas.getContext("2d");
+ resizeCanvas(ctx); // Init canvas to full window size
+
+ canvas.addEventListener("click", (evt) => {
+ const {clientX, clientY} = evt;
+ if (points.length < 4) {
+ points.push({x: clientX, y: clientY});
+ }
+ });
+
+ window.addEventListener('resize', () => resizeCanvas(ctx));
+ window.requestAnimationFrame(update)
+ }
+}
+
+init();
+
diff --git a/bezier-2.html b/bezier-2.html
new file mode 100644
index 0000000..458b67d
--- /dev/null
+++ b/bezier-2.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+ Document
+
+
+
+
+
+
diff --git a/bezier-2.js b/bezier-2.js
new file mode 100644
index 0000000..e5d211a
--- /dev/null
+++ b/bezier-2.js
@@ -0,0 +1,53 @@
+import { lerp, drawCircle, drawLine, drawDashedLine, resizeCanvas } from "./common.js"
+
+const points = [];
+
+function cubicBezier(a, b, c, d, res=0.05) {
+ const eps = 0.001; // to prevent issues with float comparaison (p <= 1)
+ const curve = [];
+ for (let p = 0; p - 1 < eps; p += res) {
+ const ab = lerp(a, b, p);
+ const bc = lerp(b, c, p);
+ const cd = lerp(c, d, p);
+ const abc = lerp(ab, bc, p);
+ const bcd = lerp(bc, cd, p);
+ const abcd = lerp(abc, bcd, p);
+ curve.push(abcd);
+ console.log(p);
+ }
+ return curve;
+}
+
+function init() {
+ const canvas = document.getElementById("canvas");
+ if (canvas.getContext) {
+ const ctx = canvas.getContext("2d");
+ resizeCanvas(ctx); // Init canvas to full window size
+
+ canvas.addEventListener("click", (evt) => {
+ const {clientX, clientY} = evt;
+ if (points.length < 4) {
+ const p = {x: clientX, y: clientY};
+ points.push(p);
+ drawCircle(ctx, p, 1, 0xFF00FF);
+
+ if (points.length == 4) {
+ const [a, b, c, d] = points;
+ drawDashedLine(ctx, a, b, 0xFF00FF);
+ drawDashedLine(ctx, b, c, 0xFF00FF);
+ drawDashedLine(ctx, c, d, 0xFF00FF);
+
+ const curve = cubicBezier(a, b, c, d);
+ for (let i=0; i < curve.length - 1; ++i) {
+ drawLine(ctx, curve[i], curve[i+1], 0xFFFFFF);
+ }
+ }
+ }
+ });
+
+ window.addEventListener('resize', () => resizeCanvas(ctx));
+ }
+}
+
+init();
+
diff --git a/common.js b/common.js
new file mode 100644
index 0000000..153f57d
--- /dev/null
+++ b/common.js
@@ -0,0 +1,38 @@
+export function resizeCanvas(ctx) {
+ ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+ ctx.canvas.width = window.innerWidth;
+ ctx.canvas.height = window.innerHeight;
+}
+
+export function lerp(a, b, p) {
+ return {
+ x: a.x + (b.x - a.x) * p,
+ y: a.y + (b.y - a.y) * p
+ };
+}
+
+export function drawCircle(ctx, {x, y}, radius, color) {
+ ctx.save();
+ ctx.beginPath();
+ ctx.arc(x, y, radius, 0, 2*Math.PI);
+ ctx.strokeStyle = `#${color.toString(16)}`
+ ctx.lineWidth = 5;
+ ctx.stroke();
+ ctx.restore();
+}
+
+export function drawLine(ctx, start, end, color, dashed=false) {
+ ctx.save();
+ ctx.beginPath();
+ if (dashed) ctx.setLineDash([5, 5]);
+ ctx.strokeStyle = `#${color.toString(16)}`
+ ctx.moveTo(start.x, start.y);
+ ctx.lineTo(end.x, end.y);
+ ctx.stroke();
+ ctx.restore();
+}
+
+export function drawDashedLine(ctx, start, end, color) {
+ drawLine(ctx, start, end, color, true);
+}
+
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..26322bb
--- /dev/null
+++ b/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+ Document
+
+
+
+
+