# teaching machines

## Snap Circuits Bridges

We got my oldest son a Snap Circuits kit when he was very young. The product seemed like a great way to learn about electricity, but we quickly ran into the issue endemic to all educational technologies: you really need an informed human teacher to learn. We tinkered with the kit, but neither of us felt like we understood anything but the simplest circuits.

Fast forward a few years. My oldest son is now 11, I know a little more about electricity, a pandemic has largely bound us to our home, and my younger sons have taken an interest in electricity. These circumstances have led us to extract new life from our forgotten Snap Circuits kit.

The other day my son asked if he could make a diagram of a Snap Circuit. He had seen the Snap Circuits Designer on the Elenco website. The designer is just a Microsoft Word document. Diagrams are made by copying, pasting, dragging, dropping, layering, and finessing. He downloaded it, but we don’t have Microsoft Word and the components are mangled by LibreOffice.

I suggested we make a web app to make designing circuits easier. My son agreed. But as a first step, we need to create scalable images of the components. I gave him a choice of using Inkscape or Twoville. He decided to go with Inkscape, but I’m working alongside him in Twoville.

We call the blue connectors bridges. 2-bridges have two snaps, 3-bridges have three snaps, and so on. To show off to my son, I wrote a function that could produce any n-bridge. Here I use it to create several bridges.



with viewport
corner = [-1, -1]
size = [8, 7]

opening = 72
start = [radius, opening * 0.5].toCartesian()
gap = 1 - 2 * radius * cos(opening * 0.5)
barThickness = 0.1

to bridge(n)
y = n - 2

// Trace the arcs and line segments.
with path()
closed = false
color = :blue
stroke.size = 0.01
stroke.color = :black

// Start at the top arc-endpoint of the left-most snap.
with turtle()
position = start + [0, y]

// Sweep down to bottom arc-endpoint of the left-most snap.
with arc()
center = [0, y]
degrees = 360 - opening

// Now for the bottom, a series of line segments and arcs.
for i to n - 1
move().distance = gap
if i < n - 2
with arc()
center = [i + 1, y]
degrees = 180 - opening

// Sweep around the right-most snap.
with arc()
center = [n - 1, y]
degrees = 360 - opening

// Turn around and do the top, which is just like the bottom.
turn().degrees = 180
for i to n - 1
move().distance = gap
if i < n - 2
with arc()
center = [n - i - 2, y]
degrees = 180 - opening

// Draw white bar.
with rectangle()
color = :white
corner = [0, y + -barThickness * 0.5]
size = [n - 1, barThickness]

// Draw gray snaps.
for i to n
with circle()
color = [0.7, ~, ~]
center = [i, y]
stroke.color = :black
stroke.size = 0.01
with circle()
color = [0.7, ~, ~]
center = [i, y]
stroke.color = :black
stroke.size = 0.01

// Draw number at integral midpoint of bridge.
with circle()
center = [n / 2 - 0.5, y]
stroke.size = 0.02
stroke.color = :white
color = :blue
with text()
message = n
position = [n / 2 - 0.5, y]
color = :white
size = 0.2
anchor = :middle
baseline = :central

for i in 2..7
bridge(i)

var twovilleDiv = jQuery('#twoville_bridges');
twovilleDiv.closest('pre').replaceWith(twovilleDiv);
document.getElementById('twoville_form_bridges').submit();

with viewport
corner = [-1, -1]
size = [8, 7]

opening = 72
start = [radius, opening * 0.5].toCartesian()
gap = 1 - 2 * radius * cos(opening * 0.5)
barThickness = 0.1

to bridge(n)
y = n - 2

// Trace the arcs and line segments.
with path()
closed = false
color = :blue
stroke.size = 0.01
stroke.color = :black

// Start at the top arc-endpoint of the left-most snap.
with turtle()
position = start + [0, y]

// Sweep down to bottom arc-endpoint of the left-most snap.
with arc()
center = [0, y]
degrees = 360 - opening

// Now for the bottom, a series of line segments and arcs.
for i to n - 1
move().distance = gap
if i < n - 2
with arc()
center = [i + 1, y]
degrees = 180 - opening

// Sweep around the right-most snap.
with arc()
center = [n - 1, y]
degrees = 360 - opening

// Turn around and do the top, which is just like the bottom.
turn().degrees = 180
for i to n - 1
move().distance = gap
if i < n - 2
with arc()
center = [n - i - 2, y]
degrees = 180 - opening

// Draw white bar.
with rectangle()
color = :white
corner = [0, y + -barThickness * 0.5]
size = [n - 1, barThickness]

// Draw gray snaps.
for i to n
with circle()
color = [0.7, ~, ~]
center = [i, y]
stroke.color = :black
stroke.size = 0.01
with circle()
color = [0.7, ~, ~]
center = [i, y]
stroke.color = :black
stroke.size = 0.01

// Draw number at integral midpoint of bridge.
with circle()
center = [n / 2 - 0.5, y]
stroke.size = 0.02
stroke.color = :white
color = :blue
with text()
message = n
position = [n / 2 - 0.5, y]
color = :white
size = 0.2
anchor = :middle
baseline = :central

for i in 2..7
bridge(i)



It didn’t take me long to write this, and I can easily adjust the design through the global parameters. Nevertheless, my son will finish his versions in Inkscape faster. Time is not a limiting factor for him.