thib8956/test-canvas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add two bezier examples

Browse Source
This commit is contained in:
Thibaud Gasser 2024-09-26 22:46:28 +02:00
parent c0cf1d7005
commit e49d6f1732
6 changed files with 204 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
bezier-1.html Normal file
View File

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body style="margin: 0; padding 0; overflow: hidden; background-color: #000000">
<canvas id="canvas" width="800" height="600"></canvas>
</body>
<script type="module" src="bezier-1.js"></script>
</html>

74
bezier-1.js Normal file
View File

@ -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();

12
bezier-2.html Normal file
View File

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body style="margin: 0; padding 0; overflow: hidden; background-color: #000000">
<canvas id="canvas" width="800" height="600"></canvas>
</body>
<script type="module" src="bezier-2.js"></script>
</html>

53
bezier-2.js Normal file
View File

@ -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();

38
common.js Normal file
View File

@ -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);
}

15
index.html Normal file
View File

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body style="margin: 0; padding 0; overflow: hidden; background-color: #000000">
<ul>
<li><a href="/grid.html">Grid</a></li>
<li><a href="/bezier-1.html">Bezier demo #1</a></li>
<li><a href="/bezier-2.html">Bezier demo #2</a></li>
</ul>
</body>
</html>