diff --git a/bezier-1.js b/bezier-1.js deleted file mode 100644 index e625457..0000000 --- a/bezier-1.js +++ /dev/null @@ -1,67 +0,0 @@ -"use strict"; -Object.defineProperty(exports, "__esModule", { value: true }); -const common_js_1 = require("./common.js"); -let points = []; -function update(ctx, 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; - (0, common_js_1.drawCircle)(ctx, (0, common_js_1.lerp)(start, end, p), 1, 0xFF0000); - } - else if (points.length === 3) { - const [a, b, c] = points; - const ab = (0, common_js_1.lerp)(a, b, p); - const bc = (0, common_js_1.lerp)(b, c, p); - const abc = (0, common_js_1.lerp)(ab, bc, p); - (0, common_js_1.drawDashedLine)(ctx, ab, bc, 0xFF0000); - (0, common_js_1.drawCircle)(ctx, ab, 1, 0xFF0000); - (0, common_js_1.drawCircle)(ctx, bc, 1, 0xFF0000); - (0, common_js_1.drawCircle)(ctx, abc, 1, 0xFFFFFF); - } - else if (points.length === 4) { - const [a, b, c, d] = points; - const ab = (0, common_js_1.lerp)(a, b, p); - const bc = (0, common_js_1.lerp)(b, c, p); - const cd = (0, common_js_1.lerp)(c, d, p); - const abc = (0, common_js_1.lerp)(ab, bc, p); - const bcd = (0, common_js_1.lerp)(bc, cd, p); - const abcd = (0, common_js_1.lerp)(abc, bcd, p); - (0, common_js_1.drawDashedLine)(ctx, ab, bc, 0xFF0000); - (0, common_js_1.drawDashedLine)(ctx, bc, cd, 0xFF0000); - (0, common_js_1.drawDashedLine)(ctx, abc, bcd, 0xFFFF00); - (0, common_js_1.drawCircle)(ctx, ab, 1, 0xFF0000); - (0, common_js_1.drawCircle)(ctx, bc, 1, 0xFF0000); - (0, common_js_1.drawCircle)(ctx, cd, 1, 0xFF0000); - (0, common_js_1.drawCircle)(ctx, abc, 1, 0xFFFF00); - (0, common_js_1.drawCircle)(ctx, bcd, 1, 0xFFFF00); - (0, common_js_1.drawCircle)(ctx, abcd, 1, 0xFFFFFF); - } - for (let i = 0; i < points.length - 1; ++i) { - const current = points[i]; - const next = points[i + 1]; - (0, common_js_1.drawLine)(ctx, current, next, 0xFF00FF); - } - for (const point of points) { - (0, common_js_1.drawCircle)(ctx, point, 1, 0xFF00FF); - } - window.requestAnimationFrame(t => update(ctx, t)); -} -function init() { - const canvas = document.getElementById("game"); - if (!canvas) - throw new Error("unable to get canvas HTML element"); - const ctx = canvas.getContext("2d"); - if (!ctx) - throw new Error("unable to get canvas 2D context"); - (0, common_js_1.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', () => (0, common_js_1.resizeCanvas)(ctx)); - window.requestAnimationFrame(t => update(ctx, t)); -} -init(); diff --git a/bezier-2.js b/bezier-2.js deleted file mode 100644 index 8031ae1..0000000 --- a/bezier-2.js +++ /dev/null @@ -1,58 +0,0 @@ -"use strict"; -Object.defineProperty(exports, "__esModule", { value: true }); -const common_js_1 = require("./common.js"); -function drawPoints(ctx, points) { - const [a, b, c, d] = points; - (0, common_js_1.drawLine)(ctx, a, b, 0xFF00FF); - (0, common_js_1.drawLine)(ctx, c, d, 0xFF00FF); - for (const p of points) { - (0, common_js_1.drawCircle)(ctx, p, 2, 0xFF00FF); - } -} -function drawCurve(ctx, curve) { - for (let i = 0; i < curve.length - 1; ++i) { - (0, common_js_1.drawLine)(ctx, curve[i], curve[i + 1], 0xFFFFFF); - } -} -function init() { - const canvas = document.getElementById("game"); - if (!canvas) - throw new Error("unable to get canvas HTML element"); - const ctx = canvas.getContext("2d"); - if (!ctx) - throw new Error("unable to get canvas 2D context"); - let selection = undefined; - let points = [ - { x: 227, y: 434 }, - { x: 341, y: 234 }, - { x: 649, y: 255 }, - { x: 765, y: 450 }, - ]; - (0, common_js_1.resizeCanvas)(ctx); // Init canvas - drawPoints(ctx, points); - const bezier = (0, common_js_1.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 = (0, common_js_1.cubicBezier)(...points); - drawCurve(ctx, bezier); - drawPoints(ctx, points); - } - }; - canvas.onmouseup = () => { - selection = undefined; - }; -} -init(); diff --git a/common.js b/common.js deleted file mode 100644 index 4a8cf6a..0000000 --- a/common.js +++ /dev/null @@ -1,68 +0,0 @@ -"use strict"; -Object.defineProperty(exports, "__esModule", { value: true }); -exports.lerp = lerp; -exports.quadraticBezier = quadraticBezier; -exports.cubicBezier = cubicBezier; -exports.resizeCanvas = resizeCanvas; -exports.drawCircle = drawCircle; -exports.drawLine = drawLine; -exports.drawDashedLine = drawDashedLine; -function lerp(a, b, p) { - return { - x: a.x + (b.x - a.x) * p, - y: a.y + (b.y - a.y) * p - }; -} -function quadraticBezier(a, b, c, 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 abc = lerp(ab, bc, p); - curve.push(abc); - } - return curve; -} -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; -} -function resizeCanvas(ctx) { - ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); - ctx.canvas.width = window.innerWidth; - ctx.canvas.height = window.innerHeight; -} -function drawCircle(ctx, center, radius, color) { - ctx.save(); - ctx.beginPath(); - ctx.arc(center.x, center.y, radius, 0, 2 * Math.PI); - ctx.strokeStyle = `#${color.toString(16)}`; - ctx.lineWidth = 5; - ctx.stroke(); - ctx.restore(); -} -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(); -} -function drawDashedLine(ctx, start, end, color) { - drawLine(ctx, start, end, color, true); -} diff --git a/image.js b/image.js deleted file mode 100644 index ef52e1f..0000000 --- a/image.js +++ /dev/null @@ -1,96 +0,0 @@ -"use strict"; -const canvas = document.getElementById("game"); -if (!canvas) - throw new Error("unable to get canvas HTML element"); -const ctx = canvas.getContext("2d"); -if (!ctx) - throw new Error("unable to get canvas 2D context"); -const img = new Image(); -img.crossOrigin = "anonymous"; -img.src = "/rose.png"; -img.onload = () => { - /*canvas.offscreenCanvas = document.createElement("canvas"); - canvas.offscreenCanvas.height = img.height; - canvas.offscreenCanvas.width = img.width; - canvas.offscreenCanvas.getContext("2d").drawImage(img, 0, 0); - */ - ctx.drawImage(img, 0, 0); -}; -function invert(imgData) { - const data = imgData.data; - for (let i = 0; i < data.length; i += 4) { - //const avg = (data[i] + data[i + 1] + data[i + 2]) / 3; - data[i] = 255 - data[i]; - data[i + 1] = 255 - data[i + 1]; - data[i + 2] = 255 - data[i + 2]; - } -} -function greyscale(imgData) { - const data = imgData.data; - for (let i = 0; i < data.length; i += 4) { - const avg = (data[i] + data[i + 1] + data[i + 2]) / 3; - data[i] = avg; - data[i + 1] = avg; - data[i + 2] = avg; - } -} -function clamp(x, min, max) { - return Math.min(Math.max(x, min), max); -} -function convolve(imageData, kernel) { - const width = imageData.width; - const height = imageData.height; - const data = imageData.data; - const out = new ImageData(width, height); - const kernelSize = Math.sqrt(kernel.length); // Assuming kernel is square - const halfKernel = Math.floor(kernelSize / 2); - for (let y = 0; y < height; y++) { - for (let x = 0; x < width; x++) { - let r = 0, g = 0, b = 0; - for (let ky = -halfKernel; ky <= halfKernel; ky++) { - for (let kx = -halfKernel; kx <= halfKernel; kx++) { - const px = x + kx; - const py = y + ky; - if (px >= 0 && px < width && py >= 0 && py < height) { - const idx = (py * width + px) * 4; - const kernelValue = kernel[(ky + halfKernel) * kernelSize + (kx + halfKernel)]; - r += data[idx] * kernelValue; - g += data[idx + 1] * kernelValue; - b += data[idx + 2] * kernelValue; - } - } - } - out.data[(y * width + x) * 4] = r; - out.data[(y * width + x) * 4 + 1] = g; - out.data[(y * width + x) * 4 + 2] = b; - out.data[(y * width + x) * 4 + 3] = data[(y * width + x) * 4 + 3]; // preserve original alpha - } - } - return out; -} -// multiply two 3x3 matrices -function matMult(a, b) { - const result = new Array(9).fill(0); - for (let j = 0; j < 3; ++j) { - for (let i = 0; i < 3; ++i) { - for (let k = 0; k < 3; ++k) { - result[j * 3 + i] += a[j * 3 + k] * b[k * 3 + i]; - } - } - } - return result; -} -canvas.onclick = () => { - const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); - ctx.clearRect(0, 0, canvas.height, canvas.width); - //invert(imgData); - //greyscale(imgData); - //const identityKernel = [0, 0, 0, 0, 1, 0, 0, 0, 0]; - const gaussianKernel = [0.075, 0.124, 0.075, 0.124, 0.204, 0.124, 0.075, 0.124, 0.075]; - const convolved = convolve(imgData, gaussianKernel); - ctx.putImageData(convolved, 0, 0); -}; -const matrixA = [1, 2, 3, 4, 5, 6, 7, 8, 9]; -const matrixB = [9, 8, 7, 6, 5, 4, 3, 2, 1]; -const result = matMult(matrixA, matrixB); -console.log(result); diff --git a/spline.js b/spline.js deleted file mode 100644 index 2914c11..0000000 --- a/spline.js +++ /dev/null @@ -1,87 +0,0 @@ -"use strict"; -Object.defineProperty(exports, "__esModule", { value: true }); -const common_js_1 = require("./common.js"); -function drawPoints(ctx, points) { - for (const p of points) { - (0, common_js_1.drawCircle)(ctx, p, 2, 0xFF00FF); - } -} -function drawCurve(ctx, curve) { - for (let i = 0; i < curve.length - 1; ++i) { - (0, common_js_1.drawLine)(ctx, curve[i], curve[i + 1], 0xFFFFFF); - } -} -function draw(ctx, points) { - let start = 0; - while (true) { - const sl = points.slice(start, start + 4); - if (sl.length === 4) { - const bezier = (0, common_js_1.cubicBezier)(...sl); - drawCurve(ctx, bezier); - start += 3; - } - else if (sl.length === 3) { - const bezier = (0, common_js_1.quadraticBezier)(...sl); - drawCurve(ctx, bezier); - start += 2; - } - else { - break; - } - } - drawPoints(ctx, points); -} -function init() { - const canvas = document.getElementById("game"); - if (!canvas) - throw new Error("unable to get canvas HTML element"); - const ctx = canvas.getContext("2d"); - if (!ctx) - throw new Error("unable to get canvas 2D context"); - let selection = undefined; - let points = [ - { x: 227, y: 434 }, - { x: 341, y: 234 }, - { x: 649, y: 255 }, - { x: 765, y: 450 }, - { x: 800, y: 500 }, - { x: 850, y: 450 }, - { x: 900, y: 550 }, - ]; - (0, common_js_1.resizeCanvas)(ctx); // Init canvas - draw(ctx, points); - canvas.oncontextmenu = (evt) => { - evt.preventDefault(); - points = []; - // redraw - ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); - draw(ctx, points); - }; - 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); - } - } - if (selection === undefined) { - points.push({ x: clientX, y: clientY }); - // redraw - ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); - draw(ctx, points); - } - }; - 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); - draw(ctx, points); - } - }; - canvas.onmouseup = () => { - selection = undefined; - }; -} -init();