remove ignored files
This commit is contained in:
parent
412bd60c8c
commit
f5a722dd3c
67
bezier-1.js
67
bezier-1.js
@ -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();
|
|
||||||
58
bezier-2.js
58
bezier-2.js
@ -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();
|
|
||||||
68
common.js
68
common.js
@ -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);
|
|
||||||
}
|
|
||||||
96
image.js
96
image.js
@ -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);
|
|
||||||
87
spline.js
87
spline.js
@ -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();
|
|
||||||
Loading…
x
Reference in New Issue
Block a user