Convolution 2D

src/App.tsx

@@ -1,5 +1,5 @@
-import { BubbleSortStarter } from "./visualizers/bubble-sort/start";
-import { BubbleSortRender } from "./visualizers/bubble-sort/render";
+import { Convolution2DStarter } from "./visualizers/convolution2d/start";
+import { Convolution2DRender } from "./visualizers/convolution2d/render";
 import { useVisualizer } from "./lib/hooks";
 import { useEffect, useState } from "react";
 
@@ -48,8 +48,8 @@ const App = () => {
     <button onClick={() => setEventOverride(0)}>Beginning</button>
     <button onClick={() => setEventOverride(events.length - 1)}>End</button>
     <small>Use arrow keys to navigate</small>
-    <BubbleSortStarter doStart={start}/>
-    <BubbleSortRender curState={curStateOverride} curEvent={curEventOverride}/>
+    <Convolution2DStarter doStart={start}/>
+    <Convolution2DRender curState={curStateOverride} curEvent={curEventOverride}/>
     <div>
       {events && events.map((x, i) => {
         return <div key={i}>

src/lib/hooks.tsx

@@ -1,5 +1,5 @@
 import { useSyncExternalStore } from "react";
-import { globalStore } from "../visualizers/bubble-sort";
+import { globalStore } from "../visualizers/convolution2d";
 
 export const useVisualizer = () => {
     return useSyncExternalStore(globalStore.subscribe, globalStore.getCurSnapshot);

src/visualizers/convolution2d/convolution2d.tsx

@@ -0,0 +1,93 @@
+import { bind, here } from "./";
+import { Matrix, PaddingType, PaddedMatrix, emptyMatrix } from "./matrix";
+import { range, sumBy } from "lodash";
+
+export const convolution2d = async (
+    input: Matrix,
+    kernel: Matrix,
+    padding: number,
+    step: number,
+    paddingType: PaddingType,
+) => {
+    const matrix = new Mutable(input);
+    const resultHeight = sizeAfterConvolution(input.height, kernel.height, padding, step);
+    const resultWidth = sizeAfterConvolution(input.width, kernel.width, padding, step); 
+    const result = emptyMatrix(resultHeight, resultWidth);
+
+    bind("matrix", matrix);
+    bind("kernel", kernel);
+    bind("result", result);
+
+    await here("start");
+    matrix.value = new PaddedMatrix(matrix.value, padding, paddingType);
+    await here("add_padding", padding);
+    for (let y = 0; y < result.height; y++) {
+        for (let x = 0; x < result.width; x++) {
+            const sum = sumBy(range(kernel.height), ky =>
+                sumBy(range(kernel.width), kx =>
+                    kernel.get(ky, kx) * matrix.value.get(y * step + ky, x * step + kx)
+                )
+            );
+            result.set(y, x, sum);
+
+            const meta: ConvolutionStepMeta = {
+                inputXfrom: x * step,
+                inputXto: x * step + kernel.width,
+                inputYfrom: y * step,
+                inputYto: y * step + kernel.height,
+                outputX: x,
+                outputY: y,
+            };
+            await here("convolution_step", meta);
+        }
+    }
+    await here("done");
+}
+
+const sizeAfterConvolution = (size: number, kernelSize: number, padding: number, step: number) =>
+    Math.floor((size - kernelSize + 2 * padding) / step) + 1;
+
+// TODO: move to lib?
+class Mutable<T> {
+    constructor(public value: T) {}
+}
+
+export type Convolution2DState = {
+    matrix: Mutable<Matrix>,
+    kernel: Matrix,
+    padding: number,
+    step: number,
+    paddingType: PaddingType,
+    result: Matrix,
+}
+
+export type Convolution2DEvent = Start | Done | AddPaddingEvent | ConvolutionStepEvent;
+
+// TODO: move Start and Done to lib?
+type Start = {
+    name: "start",
+    args: [],
+}
+type Done = {
+    name: "done",
+    args: [],
+}
+type AddPaddingEvent = {
+    name: "add_padding",
+    args: [padding: number],
+}
+type ConvolutionStepEvent = {
+    name: "convolution_step",
+    args: [meta: ConvolutionStepMeta],
+}
+
+export type ConvolutionStepMeta = {
+    inputXfrom: number,
+    inputXto: number,
+    inputYfrom: number,
+    inputYto: number,
+    outputX: number,
+    outputY: number,
+}
+
+export type Convolution2DArguments = [Matrix, Matrix, number, number, PaddingType];

src/visualizers/convolution2d/index.tsx

@@ -0,0 +1,21 @@
+import { AlgorithmManifest } from "../../lib/manifest";
+import { RuntimeStore } from "../../lib/store";
+import { Convolution2DArguments, Convolution2DEvent, Convolution2DState, convolution2d } from "./convolution2d";
+import { Convolution2DRender } from "./render";
+import { Convolution2DStarter } from "./start";
+
+export const manifest: AlgorithmManifest<Convolution2DState, Convolution2DEvent, Convolution2DArguments> = {
+    algo: convolution2d,
+    startComponent: Convolution2DStarter,
+    renderComponent: Convolution2DRender,
+}
+
+export const globalStore = new RuntimeStore<Convolution2DState, Convolution2DEvent, Convolution2DArguments>(convolution2d);
+
+export const bind = (name: keyof Convolution2DState, value: Convolution2DState[keyof Convolution2DState]) => {
+    globalStore.bind(name, value);
+}
+
+export const here = async (name: Convolution2DEvent["name"], ...args: Convolution2DEvent["args"]): Promise<void> => {
+    return globalStore.here(name, ...args);
+}

src/visualizers/convolution2d/matrix.tsx

@@ -0,0 +1,90 @@
+// TODO: move to lib?
+
+import { constant, times } from "lodash";
+
+export interface Matrix {
+    height: number;
+    width: number;
+    get: (row: number, column: number) => number;
+}
+
+export enum PaddingType {
+    Reflect="reflect", Wrap="wrap", Edge="edge", Zero="zero"
+}
+
+export class ArrayMatrix implements Matrix {
+    height: number;
+    width: number;
+
+    constructor(private array: number[][]) {
+        this.height = array.length;
+        this.width = array[0].length;
+    }
+
+    get(row: number, column: number) {
+        return this.array[row][column];
+    }
+
+    set(row: number, column: number, value: number) {
+        this.array[row][column] = value;
+    }
+}
+
+export class PaddedMatrix implements Matrix {
+    height: number;
+    width: number;
+
+    constructor(
+        private matrix: Matrix,
+        public padding: number,
+        public paddingType: PaddingType,
+    ) {
+        this.height = matrix.height + 2 * padding;
+        this.width = matrix.width + 2 * padding;
+    }
+
+    get(row: number, column: number) {
+        return this.matrix.get(
+            recalculateIndex(row, this.matrix.height, this.padding, this.paddingType),
+            recalculateIndex(column, this.matrix.width, this.padding, this.paddingType),
+        );
+    }
+}
+
+export const emptyMatrix = (height: number, width: number): ArrayMatrix => {
+    console.log(times(width, 0));
+    return new ArrayMatrix(times(height, () => times(width, constant(0))));
+}
+
+const recalculateIndex = (
+    index: number,
+    length: number,
+    padding: number,
+    paddingType: PaddingType
+) => {
+    const correctedIndex = index - padding;
+    if (correctedIndex >= 0 && correctedIndex < length) {
+        return correctedIndex;
+    }
+    switch (paddingType) {
+        case PaddingType.Reflect:
+            return reflectIndex(correctedIndex, length);
+        case PaddingType.Wrap:
+            return wrapIndex(correctedIndex, length);
+        case PaddingType.Edge:
+            return edgeIndex(correctedIndex, length);
+        case PaddingType.Zero:
+            return 0;
+        default:
+            throw Error("Unknown type: " + paddingType)
+    }
+}
+
+const reflectIndex = (index: number, length: number) =>
+    index < 0 ? -index : 2 * length - index - 2;
+
+const wrapIndex = (index: number, length: number) =>
+    index < 0 ? (index % length) + length : index % length;
+
+const edgeIndex = (index: number, length: number) =>
+    index < 0 ? 0 : length - 1;

src/visualizers/convolution2d/render.tsx

@@ -0,0 +1,70 @@
+import { Convolution2DEvent, Convolution2DState, ConvolutionStepMeta } from "./convolution2d";
+import { Matrix } from "./matrix";
+import { range } from "lodash";
+
+export type RenderProps = {
+    curState: Convolution2DState;
+    curEvent: Convolution2DEvent;
+}
+
+export const Convolution2DRender = ({ curState, curEvent }) => {
+    console.log("Rendering", curState, curEvent);
+    const matrix = curState?.matrix.value;
+    console.log(matrix);
+    switch (curEvent?.name) {
+        case "convolution_step":
+            const [meta]: [ConvolutionStepMeta] = curEvent.args;    
+            return <div>
+                Input:
+                {matrixRender(matrix, 0, (y, x) => 
+                    meta.inputYfrom <= y && y < meta.inputYto &&
+                    meta.inputXfrom <= x && x < meta.inputXto)}
+                Kernel:
+                {matrixRender(curState?.kernel)}
+                Result:
+                {matrixRender(curState?.result, 0, (y, x) =>
+                    meta.outputY === y && meta.outputX === x)}
+            </div>;
+        case "add_padding":
+            const [padding]: [number] = curEvent.args;
+            return <div>
+                Input:
+                {matrixRender(matrix, padding)}
+                Kernel:
+                {matrixRender(curState?.kernel)}
+                Result:
+                {matrixRender(curState?.result)}
+            </div>;
+        default:    
+            return curState && <div>
+                Input:
+                {matrixRender(matrix)}
+                Kernel:
+                {matrixRender(curState?.kernel)}
+                Result:
+                {matrixRender(curState?.result)}
+            </div>;
+    }
+}
+
+const matrixRender = (
+    matrix: Matrix,
+    padding: number = 0,
+    isActive: (y: number, x: number) => boolean = () => false,
+) => {
+    const isPadding = (row: number, col: number) =>
+        row < padding || row >= matrix.height - padding ||
+        col < padding || col >= matrix.width - padding;
+    return <table>
+        <tbody>
+        {matrix && range(matrix.height).map(y =>
+            <tr>{range(matrix.width).map(x =>
+                <td style={{
+                    color: isActive(y, x) ? "red" : "black",
+                    backgroundColor: isPadding && isPadding(y, x) ? "#e0e0e0" : "white"
+                }}>{matrix.get(y, x)}</td>
+            )}</tr>
+        )}
+        </tbody>
+    </table>;
+}

src/visualizers/convolution2d/start.tsx

@@ -0,0 +1,42 @@
+import { useState } from "react"
+import { Convolution2DArguments } from "./convolution2d"
+import { PaddingType, ArrayMatrix } from "./matrix"
+
+type Props = {
+    doStart: (args: Convolution2DArguments, noStop: boolean) => void
+}
+
+export const Convolution2DStarter = ({ doStart }: Props) => {
+    const options = Object.values(PaddingType);
+    const [selectedType, setSelectedType] = useState(PaddingType.Edge);
+    const args: Convolution2DArguments = [
+        new ArrayMatrix([
+            [5, 4, 3, 2, 1],
+            [4, 3, 2, 1, 0],
+            [3, 2, 1, 0, 1],
+            [2, 1, 0, 1, 2],
+            [1, 0, 1, 2, 3],
+        ]),
+        new ArrayMatrix([
+            [0, 1, 0],
+            [1, 1, 1],
+            [0, 1, 0],
+        ]),
+        2,
+        3,
+        selectedType,
+    ]
+    // console.log(args[4]);
+    return <div>
+        <select 
+            value={selectedType}
+            onChange={(op) => setSelectedType(op.target.value as PaddingType)}
+        >
+            {options.map((op) => <option value={op} key={op}>
+                {op}
+            </option>)}
+        </select>
+        <button onClick={() => doStart(args, false)}>Start</button>
+        <button onClick={() => doStart(args, true)}>Run Full</button>
+    </div>;
+}