Skip to content

Photoresistor Voltage Divider and Threshold Explorer

Run MicroSim in Fullscreen

Specification

The full specification below is extracted from Chapter 6: Buttons, Photoresistors, and Analog Sensor Input.

Type: microsim
**sim-id:** photoresistor-voltage-divider-threshold-explorer<br/>
**Library:** p5.js<br/>
**Template:** https://github.com/dmccreary/moving-rainbow/tree/main/docs/sims/photoresistor-component<br/>
**Status:** Specified

Learning objective: Students will *apply* (Bloom L3: Apply) a calibrated threshold value to a photoresistor's voltage-divider output to classify a simulated room as light or dark.

Canvas: 700x480px, responsive -- recompute the circuit-diagram and graph panel widths as fractions of `windowWidth` in `windowResized()`, stacking the two panels vertically below 600px wide.

Layout: left panel shows a simple schematic voltage-divider circuit drawn with p5.js primitives (power rail, photoresistor symbol as a zig-zag resistor inside a circle, fixed resistor symbol, ground rail, with the midpoint tap highlighted). Right panel shows a live horizontal bar gauge of the current ADC reading (0-65535) with a draggable threshold marker line overlaid on the same scale, and a text readout below stating "Reading: [value] -- Room is [LIGHT / DARK]" that updates live.

Controls: a `createSlider()` labeled "Simulated Light Level" (range 0-100, default 50) representing ambient brightness, which drives the simulated ADC reading; a second `createSlider()` labeled "Threshold Value" (range 0-65535, default 32768) representing the calibrated cutoff, whose handle also appears as the draggable marker line on the gauge; a `createButton()` labeled "Auto-Calibrate" that sets the threshold slider to the midpoint between the last recorded darkest and brightest readings (tracked as running min/max as the light-level slider is moved).

Interaction: hovering the circuit schematic's photoresistor symbol shows a tooltip reading "Resistance falls as light increases," and hovering the fixed resistor shows "Fixed resistance -- sets the divider ratio." Dragging the threshold marker directly on the gauge updates the Threshold Value slider (and vice versa), keeping both controls synchronized. The text readout's LIGHT/DARK classification and its background color (warm gold above threshold, deep indigo below) update immediately as either slider moves, so students can directly see calibration change the classification boundary without changing the sensor reading itself.

Implementation: p5.js. Simulated ADC value computed as a simple monotonic function of the light-level slider plus a small amount of random jitter (±500) added each frame to mimic real sensor noise. Circuit schematic drawn once and cached; only the gauge, marker, and readout redraw each frame. Use `map()` to convert between the 0-65535 ADC range and pixel positions on the gauge, recalculated in `windowResized()`.