From e09b3e1d73d4eab52981b7764c62cbe1167f1313 Mon Sep 17 00:00:00 2001 From: Thibaud Date: Thu, 26 Sep 2024 23:36:06 +0200 Subject: [PATCH] add bezier #3 demo --- bezier-2.js | 18 +-------------- bezier-3.html | 12 ++++++++++ bezier-3.js | 64 +++++++++++++++++++++++++++++++++++++++++++++++++++ common.js | 27 +++++++++++++++++----- index.html | 11 ++++++++- 5 files changed, 108 insertions(+), 24 deletions(-) create mode 100644 bezier-3.html create mode 100644 bezier-3.js diff --git a/bezier-2.js b/bezier-2.js index e5d211a..794e6c3 100644 --- a/bezier-2.js +++ b/bezier-2.js @@ -1,23 +1,7 @@ -import { lerp, drawCircle, drawLine, drawDashedLine, resizeCanvas } from "./common.js" +import { lerp, drawCircle, drawLine, drawDashedLine, resizeCanvas, cubicBezier } 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) { diff --git a/bezier-3.html b/bezier-3.html new file mode 100644 index 0000000..2187aa3 --- /dev/null +++ b/bezier-3.html @@ -0,0 +1,12 @@ + + + + + + Document + + + + + + diff --git a/bezier-3.js b/bezier-3.js new file mode 100644 index 0000000..6ad5ae1 --- /dev/null +++ b/bezier-3.js @@ -0,0 +1,64 @@ +import { resizeCanvas, drawCircle, drawLine, cubicBezier } from "./common.js"; + +function drawPoints(ctx, points) { + const [a, b, c, d] = points; + drawLine(ctx, a, b, 0xFF00FF); + drawLine(ctx, c, d, 0xFF00FF); + for (const p of points) { + drawCircle(ctx, p, 2, 0xFF00FF); + } +} + +function drawCurve(ctx, curve) { + for (let i=0; i < curve.length - 1; ++i) { + drawLine(ctx, curve[i], curve[i+1], 0xFFFFFF); + } +} + + +function init() { + const canvas = document.getElementById("canvas"); + let selection = undefined; + let points = [ + { x: 300, y: 100 }, + { x: 400, y: 100 }, + { x: 100, y: 300 }, + { x: 300, y: 300 }, + ]; + + if (canvas.getContext) { + const ctx = canvas.getContext("2d"); + resizeCanvas(ctx); // Init canvas + drawPoints(ctx, points); + const bezier = cubicBezier(...points); + drawCurve(ctx, bezier); + + canvas.onmousedown = (evt) => { + const { clientX, clientY } = evt; + for (const p of points) { + if (Math.abs(p.x - clientX) < 10 && Math.abs(p.y - clientY) < 10) { + selection = points.indexOf(p); + } + } + }; + + canvas.onmousemove = (evt) => { + if (selection !== undefined) { + points[selection].x = evt.clientX; + points[selection].y = evt.clientY; + // redraw + ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); + const bezier = cubicBezier(...points); + drawCurve(ctx, bezier); + drawPoints(ctx, points); + } + }; + + canvas.onmouseup = () => { + selection = undefined; + }; + } +} + +init(); + diff --git a/common.js b/common.js index 153f57d..13cfd37 100644 --- a/common.js +++ b/common.js @@ -1,9 +1,3 @@ -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, @@ -11,6 +5,27 @@ export function lerp(a, b, p) { }; } +export 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); + } + return curve; +} + +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 drawCircle(ctx, {x, y}, radius, color) { ctx.save(); ctx.beginPath(); diff --git a/index.html b/index.html index 26322bb..f4b5106 100644 --- a/index.html +++ b/index.html @@ -4,12 +4,21 @@ Document + - +