diff --git a/bezier-2.html b/bezier-2.html
index 458b67d..62c7e5f 100644
--- a/bezier-2.html
+++ b/bezier-2.html
@@ -1,4 +1,4 @@
-
+
diff --git a/bezier-2.js b/bezier-2.js
index 794e6c3..20a01e7 100644
--- a/bezier-2.js
+++ b/bezier-2.js
@@ -1,35 +1,62 @@
-import { lerp, drawCircle, drawLine, drawDashedLine, resizeCanvas, cubicBezier } from "./common.js"
+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);
+ }
+}
-const points = [];
function init() {
const canvas = document.getElementById("canvas");
+ let selection = undefined;
+ let points = [
+ { x: 227, y: 434 },
+ { x: 341, y: 234 },
+ { x: 649, y: 255 },
+ { x: 765, y: 450 },
+ ];
+
if (canvas.getContext) {
const ctx = canvas.getContext("2d");
- resizeCanvas(ctx); // Init canvas to full window size
+ resizeCanvas(ctx); // Init canvas
+ drawPoints(ctx, points);
+ const bezier = cubicBezier(...points);
+ drawCurve(ctx, bezier);
- 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);
- }
+ 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);
}
}
- });
+ };
- window.addEventListener('resize', () => resizeCanvas(ctx));
+ 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;
+ };
}
}
diff --git a/bezier-3.html b/bezier-3.html
deleted file mode 100644
index 2187aa3..0000000
--- a/bezier-3.html
+++ /dev/null
@@ -1,12 +0,0 @@
-
-
-
-
-
- Document
-
-
-
-
-
-
diff --git a/bezier-3.js b/bezier-3.js
deleted file mode 100644
index 6ad5ae1..0000000
--- a/bezier-3.js
+++ /dev/null
@@ -1,64 +0,0 @@
-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/index.html b/index.html
index f4b5106..1ccc603 100644
--- a/index.html
+++ b/index.html
@@ -18,7 +18,6 @@
Grid
Bezier demo #1
Bezier demo #2
- Bezier demo #3