Convolution Filter Explorer¶
Specification¶
The full specification below is extracted from Chapter 16: The AI HAT+ and Neural Network Fundamentals.
Type: microsim
**sim-id:** convolution-filter-explorer<br/>
**Library:** p5.js<br/>
**Template:** https://github.com/dmccreary/linear-algebra/tree/main/docs/sims/convolution-operation<br/>
**Status:** Specified
Learning objective: Students will *apply* (Bloom L3: Apply) a small convolution filter to a grid of pixel values and predict the resulting feature map value at each position.
Canvas: 700x460px, responsive — two grids (a small 6x6 source image grid and a resulting smaller output feature-map grid) recomputed as fractions of `width` inside `windowResized()`, stacked vertically below 560px wide instead of side by side.
Layout: left grid shows a 6x6 grid of simple pixel values (0-9, grayscale-shaded cells); a 3x3 highlighted "filter window" outline sits on top of the grid at its current position. Right grid shows the resulting smaller output feature map, filled in only for positions the filter has already visited.
Controls: a `createButton()` labeled "Step" that slides the filter window one position to the right (wrapping to the next row when it reaches the edge) and computes and fills in the corresponding output cell; a `createButton()` labeled "Run All" that animates the filter across every remaining position automatically; a `createButton()` labeled "Reset" that clears the output grid and returns the filter to the top-left position.
Interaction: while the filter window sits at a given position, a small readout beneath the grids shows the exact multiplication-and-sum calculation being performed (each of the 9 filter weights times its corresponding pixel value, summed), so students can verify the output cell's value before or after clicking "Step." Hovering any filled output cell re-highlights the source region that produced it.
Implementation: p5.js. Store the source grid and a fixed 3x3 filter (e.g., a simple edge-detection kernel) as 2D arrays. On each "Step," compute the dot product of the filter and the currently covered 3x3 region, write it to the output array, and advance a stored `(row, col)` position for the filter window. Redraw both grids from their arrays each frame.