From e49d6f173294837cedf6143fe0bf292c470f4e78 Mon Sep 17 00:00:00 2001 From: Thibaud Date: Thu, 26 Sep 2024 22:46:28 +0200 Subject: [PATCH] add two bezier examples --- bezier-1.html | 12 +++++++++ bezier-1.js | 74 +++++++++++++++++++++++++++++++++++++++++++++++++++ bezier-2.html | 12 +++++++++ bezier-2.js | 53 ++++++++++++++++++++++++++++++++++++ common.js | 38 ++++++++++++++++++++++++++ index.html | 15 +++++++++++ 6 files changed, 204 insertions(+) create mode 100644 bezier-1.html create mode 100644 bezier-1.js create mode 100644 bezier-2.html create mode 100644 bezier-2.js create mode 100644 common.js create mode 100644 index.html 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 + + + + +