canvas-emulator 1.0.0

package/src/canvas/canvas.ts

@@ -0,0 +1,123 @@
+import { V4 } from "../common";
+import { range, toBatched } from "../common/array";
+import { clamp, smoothstep } from "../common/scalar";
+import { CanvasContext2DImpl, type CanvasContext2D } from "./context-2d";
+
+export type Pixel = [number, number, number, number];
+export type Point = [number, number];
+
+export interface Canvas {
+  width: number;
+  height: number;
+  channels: number;
+  data: Array<number>;
+
+  indexAt(p: Point): number;
+  at(p: Point): Pixel;
+  atUV(p: Point): Pixel;
+
+  setAt(p: Point, px: Pixel | number): void;
+  setAtUV(p: Point, px: Pixel | number): void;
+
+  each(fn: (pos: Point, uv: Point) => void): void;
+
+  renderRGBA(): Array<Pixel>;
+  renderRGB(): Array<[number, number, number]>;
+
+  getContext2D(): CanvasContext2D;
+}
+
+export type CanvasConfig = {
+  width: number;
+  height: number;
+};
+
+export class CanvasImpl implements Canvas {
+  width: number;
+  height: number;
+  channels: 4 = 4;
+  data: Array<number>;
+
+  private readonly length: number;
+
+  constructor(cfg: CanvasConfig) {
+    const { width, height } = cfg;
+    this.width = width;
+    this.height = height;
+    this.length = width * height * this.channels;
+    this.data = range(this.length).fill(0);
+  }
+
+  indexAt(p: Point): number {
+    const x = Math.floor(p[0]);
+    const y = Math.floor(p[1]);
+    return clamp((y * this.width + x) * this.channels, 0, this.length - 1);
+  }
+
+  at(p: Point): Pixel {
+    const idx = this.indexAt(p);
+    return this.data.slice(idx, idx + this.channels) as Pixel;
+  }
+
+  atUV(p: Point): Pixel {
+    const x = p[0] * this.width;
+    const y = p[1] * this.height;
+    return this.at([x, y]);
+  }
+
+  setAt(p: Point, px: Pixel | number): void {
+    const idx = this.indexAt(p);
+    const nextAlpha = typeof px === "number" ? 1.0 : px[3];
+    const current = this.at(p);
+    const currentAlpha = current[3];
+
+    const nextData: V4 = typeof px === "number" ? [px, px, px, px] : px;
+
+    const mixCurrent = smoothstep(0, 1, currentAlpha - nextAlpha);
+    const mixNext = smoothstep(0, 1, nextAlpha);
+
+    for (let i = 0; i < nextData.length; i++) {
+      this.data[idx + i] =
+        this.data[idx + i]! * mixCurrent + nextData[i]! * mixNext;
+    }
+  }
+
+  setAtUV(p: Point, px: Pixel | number): void {
+    const x = p[0] * this.width;
+    const y = p[1] * this.height;
+    return this.setAt([x, y], px);
+  }
+
+  each(fn: (pos: Point, uv: Point) => void): void {
+    for (let y = 0; y < this.height; y++) {
+      for (let x = 0; x < this.width; x++) {
+        const p: Point = [x, y];
+        const uv: Point = [x / this.width, y / this.height];
+        fn(p, uv);
+      }
+    }
+  }
+
+  renderRGBA(): Array<Pixel> {
+    return toBatched(this.data, this.channels, 0);
+  }
+
+  renderRGB(): Array<[number, number, number]> {
+    const pixels: Array<[number, number, number]> = [];
+    for (let i = 0; i < this.data.length; i += this.channels) {
+      const r = this.data[i]!;
+      const g = this.data[i + 1]!;
+      const b = this.data[i + 2]!;
+      pixels.push([r, g, b]);
+    }
+    return pixels;
+  }
+
+  getContext2D(): CanvasContext2D {
+    return new CanvasContext2DImpl(this);
+  }
+}
+
+export const createCanvas = (cfg: CanvasConfig): Canvas => {
+  return new CanvasImpl(cfg);
+};

package/src/canvas/context-2d.ts

@@ -0,0 +1,305 @@
+import { clamp, remap, toRGB, V2 } from "../common";
+import { type Canvas } from "./canvas";
+import { NOTO_MONO_REGULAR_48 as font } from "../data/font/noto-mono-regular-48";
+
+const FONT_WIDTH: number = 48;
+
+export type TextMetrics = {
+  width: number;
+};
+
+class State {
+  fillStyle: string = "red";
+  strokeStyle: string = "red";
+  cursor: V2 = [0, 0];
+  points: V2[] = [];
+  paths: Array<V2[]> = [];
+  activePath: V2[] | null = null;
+  fontSize: number = FONT_WIDTH;
+
+  clone(): State {
+    const copy = new State();
+    copy.fillStyle = this.fillStyle;
+    copy.strokeStyle = this.strokeStyle;
+    copy.cursor = [this.cursor[0], this.cursor[1]];
+    copy.points = [...this.points.map((p): V2 => [p[0], p[1]])];
+    copy.paths = this.paths.map((p) => [...p]);
+    copy.activePath = this.activePath ? [...this.activePath] : null;
+    copy.fontSize = this.fontSize;
+    return copy;
+  }
+
+  get path(): V2[] {
+    if (this.paths.length <= 0) return this.points;
+    return this.paths[this.paths.length - 1]!;
+  }
+
+  beginPath() {
+    this.paths.push([]);
+  }
+
+  closePath() {
+    const path = this.paths.pop();
+    this.activePath = path || null;
+  }
+
+  addPoint(point: V2) {
+    if (this.activePath !== null) {
+      this.activePath.push([point[0], point[1]]);
+      return;
+    }
+    this.points.push([point[0], point[1]]);
+  }
+
+  addCursor() {
+    this.addPoint(this.cursor);
+  }
+
+  setCursor(x: number, y: number) {
+    this.cursor = [x, y];
+  }
+}
+
+export type CanvasContext2D = CanvasContext2DImpl;
+
+export class CanvasContext2DImpl {
+  canvas: Canvas;
+  private stack: Array<State> = [new State()];
+
+  constructor(canvas: Canvas) {
+    this.canvas = canvas;
+  }
+
+  private get state(): State {
+    const states = this.stack;
+    if (states.length <= 0) throw new Error("Out of states");
+    return states[states.length - 1]!;
+  }
+
+  get fillStyle(): string {
+    return this.state.fillStyle;
+  }
+  set fillStyle(value: string) {
+    this.state.fillStyle = value;
+  }
+
+  get strokeStyle(): string {
+    return this.state.strokeStyle;
+  }
+  set strokeStyle(value: string) {
+    this.state.strokeStyle = value;
+  }
+
+  save() {
+    this.stack.push(this.state.clone());
+  }
+
+  restore(): void {
+    this.stack.pop();
+  }
+
+  moveTo(x: number, y: number): void {
+    this.state.setCursor(x, y);
+  }
+
+  lineTo(x: number, y: number): void {
+    this.state.addCursor();
+    this.state.addPoint([x, y]);
+  }
+
+  arc(x: number, y: number, radius: number, startAngle: number): void {
+    const segments = 32;
+    for (let i = 0; i < segments; i++) {
+      const angle1 = remap(i, [0, segments], [startAngle, Math.PI * 2]);
+      const angle2 = remap(i + 1, [0, segments], [startAngle, Math.PI * 2]);
+      const p1: V2 = [
+        x + Math.cos(angle1) * radius,
+        y + Math.sin(angle1) * radius,
+      ];
+      const p2: V2 = [
+        x + Math.cos(angle2) * radius,
+        y + Math.sin(angle2) * radius,
+      ];
+      this.state.addPoint(p1);
+      this.state.addPoint(p2);
+    }
+  }
+
+  rect(x: number, y: number, width: number, height: number): void {
+    const tl: V2 = [x, y];
+    const tr: V2 = [x + width, y];
+    const br: V2 = [x + width, y + height];
+    const bl: V2 = [x, y + height];
+    this.state.addPoint(tl);
+    this.state.addPoint(tr); // top
+    this.state.addPoint(tr);
+    this.state.addPoint(br); // right
+    this.state.addPoint(br);
+    this.state.addPoint(bl); // bottom
+    this.state.addPoint(bl);
+    this.state.addPoint(tl); // left
+  }
+
+  fill(): void {
+    const path = this.state.path;
+    if (path.length < 3) return;
+
+    const rgb = toRGB(this.fillStyle);
+    const pixel: [number, number, number, number] = [rgb[0], rgb[1], rgb[2], 1];
+
+    let minY = path[0]![1];
+    let maxY = path[0]![1];
+    for (const p of path) {
+      if (p[1] < minY) minY = p[1];
+      if (p[1] > maxY) maxY = p[1];
+    }
+
+    for (let y = Math.ceil(minY); y <= Math.floor(maxY); y++) {
+      const intersections: number[] = [];
+
+      for (let i = 0; i < path.length; i++) {
+        const a = path[i]!;
+        const b = path[(i + 1) % path.length]!;
+        const y1 = a[1];
+        const y2 = b[1];
+
+        if ((y1 <= y && y < y2) || (y2 <= y && y < y1)) {
+          const x = a[0] + ((y - y1) * (b[0] - a[0])) / (y2 - y1);
+          intersections.push(x);
+        }
+      }
+
+      intersections.sort((a, b) => a - b);
+
+      for (let i = 0; i < intersections.length; i += 2) {
+        const x1 = Math.ceil(intersections[i]!);
+        const x2 = Math.floor(intersections[i + 1]!);
+        for (let x = x1; x <= x2; x++) {
+          this.canvas.setAt([x, y], pixel);
+        }
+      }
+    }
+  }
+  stroke(): void {
+    const rgb = toRGB(this.strokeStyle);
+    const pixel: [number, number, number, number] = [rgb[0], rgb[1], rgb[2], 1];
+
+    for (let i = 0; i < this.state.path.length; i += 2) {
+      const a = this.state.path[(i + 0) % this.state.path.length]!;
+      const b = this.state.path[(i + 1) % this.state.path.length]!;
+      const x1 = a[0];
+      const y1 = a[1];
+      const x2 = b[0];
+      const y2 = b[1];
+      const dx = x2 - x1;
+      const dy = y2 - y1;
+
+      if (Math.abs(dx) >= Math.abs(dy)) {
+        const step = dx >= 0 ? 1 : -1;
+        const m = dy / dx;
+        for (let x = x1; step > 0 ? x < x2 : x > x2; x += step) {
+          const y = m * (x - x1) + y1;
+          this.canvas.setAt([x, y], pixel);
+        }
+      } else {
+        const step = dy >= 0 ? 1 : -1;
+        const m = dx / dy;
+        for (let y = y1; step > 0 ? y < y2 : y > y2; y += step) {
+          const x = m * (y - y1) + x1;
+          this.canvas.setAt([x, y], pixel);
+        }
+      }
+    }
+  }
+
+  strokeRect(x: number, y: number, width: number, height: number): void {
+    this.rect(x, y, width, height);
+    this.stroke();
+  }
+
+  fillRect(x: number, y: number, width: number, height: number): void {
+    this.rect(x, y, width, height);
+    this.fill();
+  }
+
+  clearRect(x: number, y: number, width: number, height: number): void {
+    for (let py = 0; py < height; py++) {
+      for (let px = 0; px < width; px++) {
+        this.canvas.setAt([x + px, y + py], [0, 0, 0, 0]);
+      }
+    }
+  }
+
+  private drawChar(
+    char: string,
+    x: number,
+    y: number,
+    width: number,
+    ratio: number,
+  ): {
+    advance: number;
+    offset_x: number;
+    offset_y: number;
+    width: number;
+    height: number;
+  } {
+    this.state.fontSize = width;
+    const code = char.charCodeAt(0);
+    const glyph = font[`${code}` as keyof typeof font];
+    if (typeof glyph === "undefined") throw new Error(`Cannot draw: ${char}`);
+    const pixels = glyph.data;
+
+    const height = width;
+
+    for (let py = 0; py < height; py++) {
+      for (let px = 0; px < width; px++) {
+        const pixelY = Math.floor((py / height) * FONT_WIDTH);
+        const pixelX = Math.floor((px / width) * FONT_WIDTH);
+        const idx = clamp(
+          pixelY * FONT_WIDTH + pixelX,
+          0,
+          FONT_WIDTH * FONT_WIDTH - 1,
+        );
+        const alpha = pixels[idx]!;
+
+        const imgX = x + px;
+        const imgY = y + py + ratio * 0.5 * glyph.offset_y;
+
+        const rgb = toRGB(this.fillStyle);
+        this.canvas.setAt([imgX, imgY], [rgb[0], rgb[1], rgb[2], alpha]);
+      }
+    }
+
+    return glyph;
+  }
+
+  fillText(text: string, x: number, y: number): void;
+  fillText(text: string, x: number, y: number, maxWidth: number): void;
+  fillText(text: string, x: number, y: number, maxWidth: undefined): void;
+  fillText(text: string, x: number, y: number, maxWidth?: number): void {
+    const width = maxWidth || FONT_WIDTH;
+    const ratio = width / FONT_WIDTH;
+    for (const c of text) {
+      const glyph = this.drawChar(c, x, y, width, ratio);
+      x += ratio * glyph.advance;
+    }
+  }
+
+  strokeText(text: string, x: number, y: number): void;
+  strokeText(text: string, x: number, y: number, maxWidth: number): void;
+  strokeText(text: string, x: number, y: number, maxWidth: undefined): void;
+  strokeText(text: string, x: number, y: number, maxWidth?: number): void {
+    this.fillText(text, x, y, maxWidth || 48);
+  }
+
+  measureText(text: string): TextMetrics {
+    return { width: text.length * this.state.fontSize * 0.5 };
+  }
+
+  beginPath(): void {
+    this.state.beginPath();
+  }
+  closePath(): void {
+    this.state.closePath();
+  }
+}

package/src/canvas/index.ts

@@ -0,0 +1 @@
+export * from "./canvas";

package/src/common/array.ts

@@ -0,0 +1,176 @@
+import { type Triple, type Pair, V2, V3 } from "./types";
+
+export const range = (n: number): number[] =>
+  n <= 0 || typeof n !== "number" || isNaN(n) || !isFinite(n) ?
+    []
+  : Array.from(Array(Math.floor(n)).keys());
+
+export const zipMin = <A, B>(a: A[], b: B[]): Array<Pair<A, B>> =>
+  range(Math.min(a.length, b.length)).map((i): Pair<A, B> => {
+    const x = a[i]!;
+    const y = b[i]!;
+    return [x, y];
+  });
+
+export const zipMax = <A, B>(
+  a: A[],
+  b: B[],
+): Array<Pair<A | undefined, B | undefined>> =>
+  range(Math.min(a.length, b.length)).map(
+    (i): Pair<A | undefined, B | undefined> => {
+      const x = a[i];
+      const y = b[i];
+      return [x, y];
+    },
+  );
+
+export function toBatched<T>(arr: T[], batchSize: 1, padding: T): Array<[T]>;
+export function toBatched<T>(arr: T[], batchSize: 2, padding: T): Array<[T, T]>;
+export function toBatched<T>(
+  arr: T[],
+  batchSize: 3,
+  padding: T,
+): Array<[T, T, T]>;
+export function toBatched<T>(
+  arr: T[],
+  batchSize: 4,
+  padding: T,
+): Array<[T, T, T, T]>;
+export function toBatched<T>(
+  arr: T[],
+  batchSize: 5,
+  padding: T,
+): Array<[T, T, T, T, T]>;
+export function toBatched<T>(
+  arr: T[],
+  batchSize: 6,
+  padding: T,
+): Array<[T, T, T, T, T, T]>;
+export function toBatched<T>(
+  arr: T[],
+  batchSize: 7,
+  padding: T,
+): Array<[T, T, T, T, T, T, T]>;
+export function toBatched<T>(
+  arr: T[],
+  batchSize: 8,
+  padding: T,
+): Array<[T, T, T, T, T, T, T, T]>;
+export function toBatched<T>(
+  arr: T[],
+  batchSize: number,
+  padding: T,
+): Array<T[]>;
+export function toBatched<T>(arr: T[], batchSize: number): Array<T[]>;
+export function toBatched<T>(
+  arr: T[],
+  batchSize: number,
+  padding?: T,
+): Array<T[]>;
+export function toBatched<T>(
+  arr: T[],
+  batchSize: number,
+  padding?: T,
+): Array<T[]> {
+  const output: Array<T[]> = [];
+
+  for (let i = 0; i < arr.length; i += batchSize) {
+    const batch = arr.slice(i, i + batchSize);
+    if (padding !== undefined && batch.length < batchSize) {
+      batch.push(...Array<T>(batchSize - batch.length).fill(padding));
+    }
+    output.push(batch);
+  }
+
+  return output;
+}
+
+export const sum = (arr: number[]): number => arr.reduce((a, b) => a + b, 0);
+
+export const average = (arr: number[]): number =>
+  arr.length <= 0 ? 0 : sum(arr) / arr.length;
+
+export const magnitude = (arr: number[]): number => Math.hypot(...arr);
+
+export const normalizeSq = <Arr extends number[]>(arr: Arr): Arr => {
+  const mag = magnitude(arr);
+  if (Math.abs(mag) < 0.00000000000000001) return [...arr] as Arr;
+  return arr.map((x) => x / mag) as Arr;
+};
+
+// alias for normalizeSq
+export const unit = <Arr extends number[]>(arr: Arr): Arr => normalizeSq(arr);
+
+export const dot = (a: number[], b: number[]): number =>
+  sum(zipMin(a, b).map(([v1, v2]) => v1 * v2));
+
+export const cross = (
+  a: number[] | Triple<number, number, number>,
+  b: number[] | Triple<number, number, number>,
+): Triple<number, number, number> => {
+  if (a.length !== 3)
+    throw new Error("cross() can only be used on 3-dimensional vectors");
+  if (b.length !== a.length)
+    throw new Error("both vectors must have the same length");
+
+  const ax = a[0]!;
+  const ay = a[1]!;
+  const az = a[2]!;
+
+  const bx = a[0]!;
+  const by = a[1]!;
+  const bz = a[2]!;
+
+  const x = ay * bz - az * by;
+  const y = az * bx - ax * bz;
+  const z = ax * by - ay * bx;
+
+  return [x, y, z];
+};
+
+export function add(a: V2, b: V2): V2;
+export function add(a: V3, b: V3): V3;
+export function add(a: number[], b: number[]): number[];
+export function add(a: number[], b: number[]): number[] {
+  return zipMin(a, b).map(([v1, v2]) => v1 + v2);
+}
+
+export function sub(a: V2, b: V2): V2;
+export function sub(a: V3, b: V3): V3;
+export function sub(a: number[], b: number[]): number[];
+export function sub(a: number[], b: number[]): number[] {
+  return zipMin(a, b).map(([v1, v2]) => v1 - v2);
+}
+
+export function mul(a: V2, b: V2): V2;
+export function mul(a: V3, b: V3): V3;
+export function mul(a: number[], b: number[]): number[];
+export function mul(a: number[], b: number[]): number[] {
+  return zipMin(a, b).map(([v1, v2]) => v1 * v2);
+}
+
+export function div(a: V2, b: V2): V2;
+export function div(a: V3, b: V3): V3;
+export function div(a: number[], b: number[]): number[];
+export function div(a: number[], b: number[]): number[] {
+  return zipMin(a, b).map(([v1, v2]) => v1 / v2);
+}
+
+export function scale(a: V2, s: number): V2;
+export function scale(a: V3, s: number): V3;
+export function scale(a: number[], s: number): number[];
+export function scale(a: number[], s: number): number[] {
+  return a.map((v) => v * s);
+}
+
+export const distance = (a: number[], b: number[]): number =>
+  magnitude(sub(b, a));
+
+export const cosineDistance = (a: number[], b: number[]): number => {
+  const dp = dot(a, b);
+  const magA = magnitude(a);
+  const magB = magnitude(b);
+  const result = dp / (magA * magB);
+  if (isNaN(result) || !isFinite(result)) return 0;
+  return result;
+};

package/src/common/colors.ts

@@ -0,0 +1,93 @@
+import { V3 } from "./types";
+
+export const COLOR_NAMES_TO_RGB = {
+  red: [1, 0, 0],
+  green: [0, 1, 0],
+  blue: [0, 0, 1],
+  white: [1, 1, 1],
+  black: [0, 0, 0],
+  yellow: [1, 1, 0],
+  cyan: [0, 1, 1],
+  magenta: [1, 0, 1],
+  orange: [1, 0.647, 0],
+  purple: [0.502, 0, 0.502],
+  pink: [1, 0.753, 0.796],
+  lime: [0, 1, 0],
+  navy: [0, 0, 0.502],
+  teal: [0, 0.502, 0.502],
+  maroon: [0.502, 0, 0],
+  olive: [0.502, 0.502, 0],
+  silver: [0.753, 0.753, 0.753],
+  gray: [0.502, 0.502, 0.502],
+  grey: [0.502, 0.502, 0.502],
+  lightgray: [0.827, 0.827, 0.827],
+  lightgrey: [0.827, 0.827, 0.827],
+  darkgray: [0.663, 0.663, 0.663],
+  darkgrey: [0.663, 0.663, 0.663],
+  dimgray: [0.412, 0.412, 0.412],
+  dimgrey: [0.412, 0.412, 0.412],
+  lightblue: [0.678, 0.847, 0.902],
+  lightcyan: [0.878, 1, 1],
+  lightgreen: [0.565, 0.933, 0.565],
+  lightpink: [1, 0.714, 0.757],
+  lightyellow: [1, 1, 0.878],
+  lightsalmon: [1, 0.627, 0.478],
+  darkblue: [0, 0, 0.545],
+  darkgreen: [0, 0.392, 0],
+  darkred: [0.545, 0, 0],
+  darkcyan: [0, 0.545, 0.545],
+  darkmagenta: [0.545, 0, 0.545],
+  darkorange: [1, 0.549, 0],
+  darkviolet: [0.58, 0, 0.827],
+  darkturquoise: [0, 0.808, 0.82],
+  hotpink: [1, 0.412, 0.706],
+  deeppink: [1, 0.078, 0.576],
+  coral: [1, 0.498, 0.314],
+  salmon: [0.98, 0.502, 0.447],
+  tomato: [1, 0.388, 0.278],
+  turquoise: [0.251, 0.878, 0.816],
+  violet: [0.933, 0.51, 0.933],
+  indigo: [0.294, 0, 0.51],
+  gold: [1, 0.843, 0],
+  khaki: [0.941, 0.902, 0.549],
+  beige: [0.961, 0.961, 0.863],
+  ivory: [1, 1, 0.941],
+  lavender: [0.902, 0.902, 0.98],
+  chocolate: [0.824, 0.412, 0.118],
+  peru: [0.804, 0.522, 0.247],
+  sienna: [0.627, 0.322, 0.176],
+  brown: [0.647, 0.165, 0.165],
+  tan: [0.824, 0.706, 0.549],
+} as const;
+
+export const toRGB = (color: string): V3 => {
+  if (color in COLOR_NAMES_TO_RGB) {
+    return COLOR_NAMES_TO_RGB[color as keyof typeof COLOR_NAMES_TO_RGB]! as V3;
+  }
+  if (color.startsWith("#")) {
+    const hex = color.slice(1);
+    if (hex.length === 3) {
+      const r = parseInt(hex[0]! + hex[0]!, 16) / 255;
+      const g = parseInt(hex[1]! + hex[1]!, 16) / 255;
+      const b = parseInt(hex[2]! + hex[2]!, 16) / 255;
+      return [r, g, b];
+    }
+    if (hex.length === 6) {
+      const r = parseInt(hex.slice(0, 2), 16) / 255;
+      const g = parseInt(hex.slice(2, 4), 16) / 255;
+      const b = parseInt(hex.slice(4, 6), 16) / 255;
+      return [r, g, b];
+    }
+  }
+
+  if (color.startsWith("rgba(") || color.startsWith("rgb(")) {
+    const inner = color.slice(color.indexOf("(") + 1, color.lastIndexOf(")"));
+    const parts = inner.split(",").map((s) => s.trim());
+    const r = parseInt(parts[0]!) / 255;
+    const g = parseInt(parts[1]!) / 255;
+    const b = parseInt(parts[2]!) / 255;
+    return [r, g, b];
+  }
+
+  return [0, 0, 0];
+};