SSH vs VNC Remote Access Explorer¶
Specification¶
The full specification below is extracted from Chapter 12: File Management, Packages, and Remote Access on the Pi 500+.
Type: interactive-infographic
**sim-id:** ssh-vnc-remote-access-explorer<br/>
**Library:** p5.js<br/>
**Status:** Specified
Learning objective: Students will *compare* (Bloom L4: Analyze) SSH remote login and VNC remote desktop access in terms of what data they transmit and when each is the better choice.
Canvas: 700x420px, responsive — recompute the two-panel layout as fractions of `width` inside `windowResized()`, stacking panels vertically below 520px wide.
Layout: two side-by-side panels, "SSH" (left) and "VNC" (right), each showing a simplified laptop icon on one side and a Pi 500+ icon on the other, connected by an animated data stream: a thin line of small text characters for SSH (representing a terminal-only connection), and a wider stream of small rectangular "frame" icons for VNC (representing a streamed graphical desktop), visually reinforcing the bandwidth difference described in the chapter's comparison table.
Controls: a `createButton()` labeled "Connect via SSH" and a separate `createButton()` labeled "Connect via VNC," each triggering that panel's animated data stream; a `createButton()` labeled "Reset."
Interaction: clicking either laptop or Pi icon opens an infobox reminding the student what local network discovery and hostname mean in this context (e.g., "the laptop found this Pi 500+ using its hostname, raspberrypi.local, instead of a typed-in IP address"). After each animated connection completes, a short caption appears summarizing that protocol's typical use, matching the chapter's comparison table.
Implementation: p5.js. Represent each data stream as a looped particle system — small text glyphs for SSH, small rectangles for VNC — moving along a fixed path between the two icons, using `frameCount` modulo a period to control looping. Icon click hit-testing via `dist()` against each icon's center and a fixed radius.