113 lines
3.3 KiB
TypeScript
113 lines
3.3 KiB
TypeScript
export interface Point {
|
|
x: number;
|
|
y: number;
|
|
}
|
|
|
|
export const DIRECTIONS: Point[] = [
|
|
{ x: 0, y: -1}, // N
|
|
{ x: -1, y: -1}, // NW
|
|
{ x: 1, y: -1}, // NE
|
|
{ x: -1, y: 0}, // W
|
|
{ x: 1, y: 0}, // E
|
|
{ x: 0, y: 1}, // S
|
|
{ x: -1, y: 1}, // SW
|
|
{ x: 1, y: 1}, // SE
|
|
];
|
|
|
|
export function lerpPoint(a: Point, b: Point, p: number) {
|
|
return {
|
|
x: a.x + (b.x - a.x) * p,
|
|
y: a.y + (b.y - a.y) * p
|
|
};
|
|
}
|
|
|
|
export function lerpRgb(a: number, b: number, t: number) {
|
|
const red = lerp(a >> 16, b >> 16, t)
|
|
const green = lerp((a >> 8) & 0xff, (b >> 8) & 0xff, t)
|
|
const blue = lerp(a & 0xff, b & 0xff, t)
|
|
return (red << 16) | (green << 8) | blue
|
|
}
|
|
|
|
export function lerp(a: number, b: number, t: number) {
|
|
return (1 - t) * a + b * t;
|
|
}
|
|
|
|
export function quadraticBezier(a: Point, b: Point, c: Point, 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 = lerpPoint(a, b, p);
|
|
const bc = lerpPoint(b, c, p);
|
|
const abc = lerpPoint(ab, bc, p);
|
|
curve.push(abc);
|
|
}
|
|
return curve;
|
|
}
|
|
|
|
export function cubicBezier(a: Point, b: Point, c: Point, d: Point, 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 = lerpPoint(a, b, p);
|
|
const bc = lerpPoint(b, c, p);
|
|
const cd = lerpPoint(c, d, p);
|
|
const abc = lerpPoint(ab, bc, p);
|
|
const bcd = lerpPoint(bc, cd, p);
|
|
const abcd = lerpPoint(abc, bcd, p);
|
|
curve.push(abcd);
|
|
}
|
|
return curve;
|
|
}
|
|
|
|
export function resizeCanvas(ctx: CanvasRenderingContext2D) {
|
|
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
|
|
ctx.canvas.width = window.innerWidth;
|
|
ctx.canvas.height = window.innerHeight;
|
|
}
|
|
|
|
export function drawCircle(ctx: CanvasRenderingContext2D, center: Point, radius: number, color: number) {
|
|
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();
|
|
}
|
|
|
|
export function fillCircle(ctx: CanvasRenderingContext2D, center: Point, radius: number, color: number) {
|
|
ctx.save();
|
|
ctx.beginPath();
|
|
ctx.arc(center.x, center.y, radius, 0, 2 * Math.PI);
|
|
ctx.fillStyle = `#${color.toString(16)}`;
|
|
ctx.fill();
|
|
ctx.restore();
|
|
}
|
|
|
|
export function drawLine(ctx: CanvasRenderingContext2D, start: Point, end: Point, color: number, 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: CanvasRenderingContext2D, start: Point, end: Point, color: number) {
|
|
drawLine(ctx, start, end, color, true);
|
|
}
|
|
|
|
export function drawPoints(ctx: CanvasRenderingContext2D, points: Point[]) {
|
|
for (const p of points) {
|
|
drawCircle(ctx, p, 2, 0xFF00FF);
|
|
}
|
|
}
|
|
|
|
export function drawCurve(ctx: CanvasRenderingContext2D, curve: Point[]) {
|
|
for (let i=0; i < curve.length - 1; ++i) {
|
|
drawLine(ctx, curve[i], curve[i+1], 0xFFFFFF);
|
|
}
|
|
}
|