Neural Network Layer Explorer¶
Specification¶
The full specification below is extracted from Chapter 16: The AI HAT+ and Neural Network Fundamentals.
Type: interactive-diagram
**sim-id:** neural-network-layer-explorer<br/>
**Library:** p5.js<br/>
**Template:** https://github.com/dmccreary/linear-algebra/tree/main/docs/sims/neural-network-architecture<br/>
**Status:** Specified
Learning objective: Students will *explain* (Bloom L2: Understand) how a neuron computes a weighted sum of its inputs and how neurons connect across layers to form a neural network.
Canvas: 700x460px, responsive — recompute neuron positions as fractions of `width`/`height` inside `windowResized()`, keeping three layers readable down to 480px wide by shrinking neuron circle radius before reducing spacing.
Layout: three vertical columns of circles representing an "Input Layer" (2 neurons), a "Hidden Layer" (3 neurons), and an "Output Layer" (1 neuron), connected by lines representing weighted connections. Line thickness varies slightly to hint that each connection has its own weight value, without requiring students to read exact numbers from every line.
Interaction: clicking any hidden-layer or output-layer neuron opens an infobox beneath the diagram showing that specific neuron's weighted-sum calculation using the exact worked example from the surrounding chapter text (inputs, weights, bias, and the resulting \( z \) value), reinforcing the same numbers the reader already saw in prose. A `createSlider()` labeled "Input 1 Value" (range 0-1, step 0.1, default 0.5) lets students change one input and watch the connected neurons' displayed weighted-sum values update live. A `createButton()` labeled "Reset" restores the default input values.
Implementation: p5.js. Store neurons as objects with `{x, y, layer, inputs, weights, bias}` and connections as line segments between neuron pairs. Recompute each neuron's weighted sum from its inputs and fixed weights whenever the slider changes, and redraw the displayed value next to each neuron. Hit-testing via `dist()` for neuron clicks.