teaching machines

Snap Circuits Bridges

July 12, 2020 by Chris Johnson. Filed under public, twoville.

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
radius = 0.25
start = [radius, opening * 0.5].toCartesian()
gap = 1 - 2 * radius * cos(opening * 0.5)
barThickness = 0.1
snapOuterRadius = 0.12
snapInnerRadius = 0.05

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]
      heading = 0
    
    // 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]
      radius = snapOuterRadius
      stroke.color = :black
      stroke.size = 0.01
    with circle()
      color = [0.7, ~, ~]
      center = [i, y]
      radius = snapInnerRadius
      stroke.color = :black
      stroke.size = 0.01
  
  // Draw number at integral midpoint of bridge.
  with circle()
    center = [n / 2 - 0.5, y]
    radius = 0.12
    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)

    
    
    
  
  
    

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

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

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]
      heading = 0
    
    // 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]
      radius = snapOuterRadius
      stroke.color = :black
      stroke.size = 0.01
    with circle()
      color = [0.7, ~, ~]
      center = [i, y]
      radius = snapInnerRadius
      stroke.color = :black
      stroke.size = 0.01
  
  // Draw number at integral midpoint of bridge.
  with circle()
    center = [n / 2 - 0.5, y]
    radius = 0.12
    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)

  
  expand

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.