For the next ten minutes, I will tell some stories about a piece of software that I’ve been writing for making two-dimensional shapes using mathematics and computer science. There are a few things you should know before we begin:

• I am a computer science educator, not a mathematics educator. My goals are perhaps different than yours.
• I build software to help my students make things that have a life apart from the computer.
• The software I build is not the product. The products I care about are my students and the shapes they are able to make.
• My primary audience is young people in my community, not the whole world and professionals.

The software is called Twoville. It is a programming environment for generating scalable vector graphics files (SVGs). Twoville runs in the browser and is open-source and free. There are lots of 2D drawing languages and libraries. Twoville is different from most of them in that the shapes can be modified using either the mouse or code. This feature is best understood in a live demonstration.

Here we plot a rectangle:

  

    r = rectangle
r.corner = [10, 10]
r.size = [40, 80]
r.color = :cornflower

    
    
    
  
  
    

    r = rectangle
r.corner = [10, 10]
r.size = [40, 80]
r.color = :cornflower

  
  expand

I don’t use parameters much in Twoville for two reasons: I want all the data to be named and I want the lines of code to be short. When I work with young learners on iPads or Chromebooks, long lines make for clumsy editing. Instead of parameters, properties are assigned in separate statements. This can lead to repetitive prefixing, which can be eliminated using a scoping block:

  

    rectangle
  corner = [10, 10]
  size = [40, 80]
  color = :cornflower

    
    
    
  
  
    

    rectangle
  corner = [10, 10]
  size = [40, 80]
  color = :cornflower

  
  expand

One of my jobs as a computer science educator is to help my students learn to program. This is a demoralizing experience for many, so I try to stay near the spatial and visual domains so that they can use their prior knowledge as a human with a body as they think about the code. However, there’s no getting around the fact that programming is indirect manipulation of the output. Trying to tweak a shape only through code throws away a good chunk of our brains. Twoville tries to support more of my students’ brains by allowing direct manipulation of the output. The programmer may drag on the handles to modify a shape’s properties.

The properties don’t have to be just raw numbers in order to directly manipulate them. They can be expressions, and Twoville will do its best to preserve their structure. Consider directly manipulating this circle, whose radius is derived from a diameter variable:

  

    diameter = 100
circle
  center = [50, 50]
  radius = 0.5 * diameter
  color = :purple

    
    
    
  
  
    

    diameter = 100
circle
  center = [50, 50]
  radius = 0.5 * diameter
  color = :purple

  
  expand

When you directly manipulate the radius handle, the expression is maintained. Instead the variable value is adjusted. Behind the scenes, Twoville has some heuristics in place that guide how the the expression is updated. The structure of the radius assignment above looks like this:

When the mouse drags on the handle, we determine a new radius value strictly from the mouse position. Some part of the expression needs to change. We favor changing the right operand, whose new value can be solved for:

If the right operand is not a simple number or a variable whose value is a simple number, then the left operand is updated instead of the right. If neither are simple, then an offset is added to the unchanged original expression:

If you don’t like these heuristics, you can lock an operand from being updated by surrounding it in parentheses.

There are other shapes beyond rectangles and circles. General polygons are available:

  

    view
  center = :zero2
  size = [25, 25]

polygon
  color = :tomato
  for i to 6
    vertex.position = unpolar(10, i * 60)

    
    
    
  
  
    

    view
  center = :zero2
  size = [25, 25]

polygon
  color = :tomato
  for i to 6
    vertex.position = unpolar(10, i * 60)

  
  expand

Polygons can be smoothed out by switching them to what I call ungons:

  

    view
  center = :zero2
  size = [25, 25]

ungon
  formula = :absolute
  rounding = 3
  color = :tomato
  for i to 6
    vertex.position = unpolar(10, i * 60)

    
    
    
  
  
    

    view
  center = :zero2
  size = [25, 25]

ungon
  formula = :absolute
  rounding = 3
  color = :tomato
  for i to 6
    vertex.position = unpolar(10, i * 60)

  
  expand

The smoothing is done by applying Chaikin’s algorithm, which turns polygons into sequences of Bézier curves.

The most general shape is a path, which supports straight edges, circular arcs, Bézier curves, and holes. Here I stitched together a couple of quadratic Bézier curves, omitting the second’s control point and letting it be placed automatically to maintain continuity:

  

    path
  stroke
    color = :black
    weight = 1
  color = :mint 
  go.position = [50, 100]
  quadratic
    position = [50, 0]
    control = [100, 0]
  quadratic
    position = [50, 100]

    
    
    
  
  
    

    path
  stroke
    color = :black
    weight = 1
  color = :mint 
  go.position = [50, 100]
  quadratic
    position = [50, 0]
    control = [100, 0]
  quadratic
    position = [50, 100]

  
  expand

Twoville is my vehicle for talking about computer science and math with young people in my community. We managed to hold a fabrication summer camp in June. The students used Twoville to create vinyl stickers, stencils for painting T-shirts, and acrylic structures. Here are a few of their creations:

(student work is shared only in the live talk)

Thus we have Twoville, a environment for making shapes that can be both indirectly manipulated with code and directly manipulated with a mouse. The shapes can then be fabricated. What questions do you have?

  

    x = 20
y = 60

path
  stroke
    color = :black
    weight = 1
  // opacity = 0
  color = :lavender
  go.position = [x, y]
  line.position = [x + 10, y]
  cubic
    control1 = [49.72, 93.94]
    control2 = [90.48, 48.81]
    position = [45, 36]
  line.position = [45, 10]
  line.position = [55, 10]
  line.position = [55, 30]
  cubic
    control1 = [117.74, 50.08]
    control2 = [40.15, 121.34]
    position = [x, y]
  back
  circle
    center = [50, 0]
    radius = 5
  translate
    offset = [0, 10]

    
    
    
  
  
    

    x = 20
y = 60

path
  stroke
    color = :black
    weight = 1
  // opacity = 0
  color = :lavender
  go.position = [x, y]
  line.position = [x + 10, y]
  cubic
    control1 = [49.72, 93.94]
    control2 = [90.48, 48.81]
    position = [45, 36]
  line.position = [45, 10]
  line.position = [55, 10]
  line.position = [55, 30]
  cubic
    control1 = [117.74, 50.08]
    control2 = [40.15, 121.34]
    position = [x, y]
  back
  circle
    center = [50, 0]
    radius = 5
  translate
    offset = [0, 10]

  
  expand

There are a few rules that you need to follow to make sure the cutting process goes smoothly:

1. Use a thin red stroke wherever you want the laser-cutter to cut completely through the material.
2. Use black fill wherever you want the laser-cutter to etch partially into the material.
3. Don’t use any other colors, and don’t fill in any shapes that you don’t want etched.
4. Acrylic doesn’t bend, so don’t make any nets.
5. Contain your design within a 4-inch square. If the exact dimensions aren’t important, use whatever numbers you want within a square, and we’ll scale it when we’re ready to cut. If exact dimensions are important, you’ll want to assume your numbers are in points. The laser cutter assumes your numbers are in these units. Every 72 points is 1-inch, so each side of a 4-inch square is 288 points.

When you have had your design looked over by a teacher, click the Send to Chris link in the settings panel.

Tetrahedron

A tetrahedron is the simplest shape that occupies all three dimensions. It is made of four equilateral triangles. There are several ways to unfold one so that it lies flat. Consider this method:

1. Set the tetrahedron so it’s resting flat on a table.
2. Peel one of the side triangles down so it lies flat.
3. Peel one of the remaining side triangles down so it lies flat.
4. Peel the last side triangle down so it lies flat.

What shape do the flattened triangles form? A bigger equilateral triangle.

We can make this shape in Twoville as a polygon with a bit of turtle geometry:

  

    s = 10

view
  size = [s * 4, s * 4]

polygon
  color = :cornflower
  turtle
    position = [10, 10]
    heading = 0
  repeat 3
    walk.distance = s
    walk.distance = s
    turn.degrees = 120

    
    
    
  
  
    

    s = 10

view
  size = [s * 4, s * 4]

polygon
  color = :cornflower
  turtle
    position = [10, 10]
    heading = 0
  repeat 3
    walk.distance = s
    walk.distance = s
    turn.degrees = 120

  
  expand

Notice how the internal edges are not visible. We don’t want our cutter to cut through the paper along these edges. However, wouldn’t it be nice if the cutter made a slight cut along them to make the paper easier to fold? Such a cut is called a score. Our cutter can be made to score paper. Let’s trace out these score lines using a path:

  

    s = 10

view
  size = [s * 4, s * 4]

polygon
  color = :cornflower
  turtle
    position = [10, 10]
    heading = 0
  repeat 3
    walk.distance = s
    walk.distance = s
    turn.degrees = 120

path
  stroke
    color = :red
    weight = 0.1
  color = :black
  opacity = 0
  turtle
    position = [10 + s, 10]
    heading = 60
  repeat 3
    walk.distance = s
    turn.degrees = 120

    
    
    
  
  
    

    s = 10

view
  size = [s * 4, s * 4]

polygon
  color = :cornflower
  turtle
    position = [10, 10]
    heading = 0
  repeat 3
    walk.distance = s
    walk.distance = s
    turn.degrees = 120

path
  stroke
    color = :red
    weight = 0.1
  color = :black
  opacity = 0
  turtle
    position = [10 + s, 10]
    heading = 60
  repeat 3
    walk.distance = s
    turn.degrees = 120

  
  expand

I’ve colored these lines in red. When I load this design into the cutter, I’ll state that all red lines are scores rather than cuts. I shouldn’t use red for anything else.

Suppose we cut this flat and assembled it into a solid tetrahedron again. The triangles would not stick to each other. We could attach them with tape, which would be visible. To attach them invisibly, we could add tabs along the edges that folded under the neighboring triangle. With a little glue, these tabs would hold the tetrahedron together.

In Twoville, we can add tabs by inserting a tab command right before an command that makes a straight line. Here we add a tab to the first triangle along each edge:

  

    s = 10

view
  size = [s * 4, s * 4]

polygon
  color = :cornflower
  turtle
    position = [10, 10]
    heading = 0
  repeat 3
    tab
    walk.distance = s
    walk.distance = s
    turn.degrees = 120

path
  stroke
    color = :red
    weight = 0.1
  color = :black
  opacity = 0
  turtle
    position = [10 + s, 10]
    heading = 60
  repeat 3
    walk.distance = s
    turn.degrees = 120

    
    
    
  
  
    

    s = 10

view
  size = [s * 4, s * 4]

polygon
  color = :cornflower
  turtle
    position = [10, 10]
    heading = 0
  repeat 3
    tab
    walk.distance = s
    walk.distance = s
    turn.degrees = 120

path
  stroke
    color = :red
    weight = 0.1
  color = :black
  opacity = 0
  turtle
    position = [10 + s, 10]
    heading = 60
  repeat 3
    walk.distance = s
    turn.degrees = 120

  
  expand

The tabs also need score lines. We add new segments to our path by tracing along the outer edge again. However, this time we use fly to skip over the triangle that doesn’t have a tab:

  

    s = 10

view
  size = [s * 4, s * 4]

polygon
  color = :cornflower
  turtle
    position = [10, 10]
    heading = 0
  repeat 3
    tab
    walk.distance = s
    walk.distance = s
    turn.degrees = 120

path
  stroke
    color = :red
    weight = 0.1
  color = :black
  opacity = 0
  turtle
    position = [10 + s, 10]
    heading = 60
  repeat 3
    walk.distance = s
    turn.degrees = 120
  turtle
    position = [10, 10]
    heading = 0
  repeat 3
    walk.distance = s
    fly.distance = s
    turn.degrees = 120

    
    
    
  
  
    

    s = 10

view
  size = [s * 4, s * 4]

polygon
  color = :cornflower
  turtle
    position = [10, 10]
    heading = 0
  repeat 3
    tab
    walk.distance = s
    walk.distance = s
    turn.degrees = 120

path
  stroke
    color = :red
    weight = 0.1
  color = :black
  opacity = 0
  turtle
    position = [10 + s, 10]
    heading = 60
  repeat 3
    walk.distance = s
    turn.degrees = 120
  turtle
    position = [10, 10]
    heading = 0
  repeat 3
    walk.distance = s
    fly.distance = s
    turn.degrees = 120

  
  expand

When we cut this out, we end up with a tetrahedron that almost makes itself. We just apply a little glue.

Sealed Box

Now it’s your turn design a net that folds into a box. A box has six sides: four walls on the side, one on the top, and one on the bottom. Here’s one possible unfolding with the four walls on the side in a long strip:

Draw your unfolded box on your graph paper. Label the coordinates of all the faces’ corners. Mark the edges where you would like tabs to appear. Not all of them need tabs; you will need to fold this in your brain to identify the ones that do.

Have your drawing checked by a teacher. After any issues are resolved, head to the computer and code it up. Add score lines between the faces and along the tabs in red. Then we’ll cut it.

Lidded Box

In our remaining time, you challenge is to make a box with a lid. The bottom of the box is made up of its rectangular base and four walls, plus some tabs to make the walls stick together. The top of the box is made up of its rectangular top and four walls, plus some tabs. Both parts look something like this without tabs:

Where do the tabs go?

For the bottom to fit inside the top, the bottom must be slightly smaller than the top. If you use variables, you can save yourself some effort. Design just one piece in terms of a variable. To produce the second piece, change the value of the variable slightly.

As always, start by drawing your design on graph paper. Check in with a teacher. Then code up your design and we’ll get it cut.

Initial

Earlier we traced out a blocky letter. My first initial is C, and I ended up with a design that looked like this:

  

    polygon
  color = :black
  vertex.position = [30, 20]
  vertex.position = [30, 80]
  vertex.position = [90, 80]
  vertex.position = [90, 100]
  vertex.position = [10, 100]
  vertex.position = [10, 0]
  vertex.position = [90, 0]
  vertex.position = [90, 20]

    
    
    
  
  
    

    polygon
  color = :black
  vertex.position = [30, 20]
  vertex.position = [30, 80]
  vertex.position = [90, 80]
  vertex.position = [90, 100]
  vertex.position = [10, 100]
  vertex.position = [10, 0]
  vertex.position = [90, 0]
  vertex.position = [90, 20]

  
  expand

Those right angles are too raw and rough. Lettering that pleases the reader has curvature. I’d rather have a C that looked like this:

We will make this better C using the path command. The path command is more general than rectangles, polylines, and polygons. It allows for both straight lines and curved lines. To draw this C, we anchor ourselves on the bottom of the internal straight edge using the go command and then draw a line straight upward with the line command:

  

    path
  stroke
    color = :black
    weight = 1
  opacity = 0
  color = :black
  go.position = [30, 30]
  line.position = [30, 70]

    
    
    
  
  
    

    path
  stroke
    color = :black
    weight = 1
  opacity = 0
  color = :black
  go.position = [30, 30]
  line.position = [30, 70]

  
  expand

Next we need a curve. In particular, we need a circular arc. An arc is a portion of circle’s perimeter. In this case, the circle is centered at (50, 70) and the arc is just 180 degrees of it. That is all we need to tell the orbit command:

  

    path
  stroke
    color = :black
    weight = 1
  opacity = 0
  color = :black
  go.position = [30, 30]
  line.position = [30, 70]
  orbit
    center = [50, 70]
    degrees = -180

    
    
    
  
  
    

    path
  stroke
    color = :black
    weight = 1
  opacity = 0
  color = :black
  go.position = [30, 30]
  line.position = [30, 70]
  orbit
    center = [50, 70]
    degrees = -180

  
  expand

To turn clockwise, we use a negative number of degrees.

We keep adding lines and arcs to arrive at this shape:

  

    path
  stroke
    color = :black
    weight = 1
  opacity = 0
  color = :black
  go.position = [30, 30]
  line.position = [30, 70]
  orbit
    center = [50, 70]
    degrees = -180
  line.position = [80, 70]
  orbit
    center = [50, 70]
    degrees = 180
  line.position = [20, 30]
  orbit
    center = [50, 30]
    degrees = 180
  line.position = [70, 30]
  orbit
    center = [50, 30]
    degrees = -180

    
    
    
  
  
    

    path
  stroke
    color = :black
    weight = 1
  opacity = 0
  color = :black
  go.position = [30, 30]
  line.position = [30, 70]
  orbit
    center = [50, 70]
    degrees = -180
  line.position = [80, 70]
  orbit
    center = [50, 70]
    degrees = 180
  line.position = [20, 30]
  orbit
    center = [50, 30]
    degrees = 180
  line.position = [70, 30]
  orbit
    center = [50, 30]
    degrees = -180

  
  expand

If we’d rather see the filled object instead of its outline, we remove the stroke and add a color:

  

    path
  color = :black
  go.position = [30, 30]
  line.position = [30, 70]
  orbit
    center = [50, 70]
    degrees = -180
  line.position = [80, 70]
  orbit
    center = [50, 70]
    degrees = 180
  line.position = [20, 30]
  orbit
    center = [50, 30]
    degrees = 180
  line.position = [70, 30]
  orbit
    center = [50, 30]
    degrees = -180

    
    
    
  
  
    

    path
  color = :black
  go.position = [30, 30]
  line.position = [30, 70]
  orbit
    center = [50, 70]
    degrees = -180
  line.position = [80, 70]
  orbit
    center = [50, 70]
    degrees = 180
  line.position = [20, 30]
  orbit
    center = [50, 30]
    degrees = 180
  line.position = [70, 30]
  orbit
    center = [50, 30]
    degrees = -180

  
  expand

Our vinyl cutter doesn’t care. It will cut along the outer edge of the shape whether we use fill or stroke.

Spaceship

The path command allows you to describe an arc in two ways:

1. With the orbit command, which has degrees and center properties. Use this form when the arc orbits around something.
2. With the bump command, which has degrees and position properties. Use this form when the arc must end at a certain location.

In the letter C above, we used the center property to make the inner and outer curves orbit around the same location. Sometimes reasoning about the center is difficult because the center isn’t actually part of the object. In such cases, the position property might be easier to use. For example, I modeled this spaceship by thinking about where I wanted the arcs to end:

  

    path
  stroke
    weight = 1
    color = :gray
  color = :soggy
  closed = true
  go.position = [100, 50]
  bump
    degrees = 30
    position = [70, 60]
  bump
    position = [30, 60]
    degrees = 160
  bump
    position = [0, 50]
    degrees = 30
  bump
    position = [100, 50]
    degrees = 72

    
    
    
  
  
    

    path
  stroke
    weight = 1
    color = :gray
  color = :soggy
  closed = true
  go.position = [100, 50]
  bump
    degrees = 30
    position = [70, 60]
  bump
    position = [30, 60]
    degrees = 160
  bump
    position = [0, 50]
    degrees = 30
  bump
    position = [100, 50]
    degrees = 72

  
  expand

Use whichever form makes sense to you. Note that you can’t define both position and center. In either form, you must define degrees.

Fish

Now it’s your turn to make an object with curved edges out of a path. You challenge is create a fish, perhaps like this one:

Start by drawing on your graph paper. Identify the vertices between the curved edges. Show your drawing to a teacher. Then start coding it up in Twoville.

Pac-Man

You may be familiar with a little yellow creature that eats pellets and runs away from ghosts. That creature is named Pac-Man. He was born in a Japanese arcade game in 1980. Pac-Man’s made mostly out of circles, which makes him a good candidate for modeling in Twoville. However, one of those circles is his eye, which is really just a hole. So far we haven’t seen a way to make holes in our shapes. That all changes with path.

To make a hole in an object defined as a path, we plot a new shape in front of an old one. Wherever the path overlaps with itself, a hole appears.

Consider this first attempt at plotting Pac-Man, which draws a circle with a wedge removed using the line and orbit commands:

  

    path
  stroke
    weight = 1
    color = :black
  color = :yellow
  closed = true
  go.position = [50, 50]
  line.position = [70, 70]
  orbit
    center = [50, 50]
    degrees = 270
  line.position = [50, 50]

    
    
    
  
  
    

    path
  stroke
    weight = 1
    color = :black
  color = :yellow
  closed = true
  go.position = [50, 50]
  line.position = [70, 70]
  orbit
    center = [50, 50]
    degrees = 270
  line.position = [50, 50]

  
  expand

Notice that this Pac-Man lacks an eye. We attach one by adding more pieces to the path. The easiest way is to use the circle command inside the path:

  

    path
  stroke
    weight = 1
    color = :black
  color = :yellow
  closed = true
  go.position = [50, 50]
  line.position = [70, 70]
  orbit
    center = [50, 50]
    degrees = 270
  line.position = [50, 50]
  circle
    center = [54, 68]
    radius = 3.5

    
    
    
  
  
    

    path
  stroke
    weight = 1
    color = :black
  color = :yellow
  closed = true
  go.position = [50, 50]
  line.position = [70, 70]
  orbit
    center = [50, 50]
    degrees = 270
  line.position = [50, 50]
  circle
    center = [54, 68]
    radius = 3.5

  
  expand

Holes do not need to be circles. We could have used the rectangle command. Or we can make any arbitrary shape using go, line, orbit, and bump. Here we make a triangular eye:

  

    path
  stroke
    weight = 1
    color = :black
  color = :yellow
  closed = true
  go.position = [50, 50]
  line.position = [70, 70]
  orbit
    center = [50, 50]
    degrees = 270
  line.position = [50, 50]
  go.position = [50, 67]
  line.position = [56, 67]
  line.position = [54, 72]

    
    
    
  
  
    

    path
  stroke
    weight = 1
    color = :black
  color = :yellow
  closed = true
  go.position = [50, 50]
  line.position = [70, 70]
  orbit
    center = [50, 50]
    degrees = 270
  line.position = [50, 50]
  go.position = [50, 67]
  line.position = [56, 67]
  line.position = [54, 72]

  
  expand

Before he looked hungry. Now he looks like he’s yawning.

ABDs

Remember that time you plotted a letter for someone you cared about, but that someone’s letter couldn’t have a hole in it? Well, we’re not limited anymore. Think of someone that you care about that can be identified by a letter that has a whole in it. In English, those letters are A, B, D, O, P, Q, and R.

Draw the letter on graph paper, use the path to trace its outer perimeter with all of its arcs and straight lines, and then trace out the perimeters of its holes. Identify its positions and sizes. Code it up and we’ll turn it into a sticker that you can give to the person you care about.

Bezier

We’ve seen how the path command allows us to add circular arcs to our shapes. Not all curves are simple circular arcs. A guitar pick, for example, doesn’t look very circular. Let’s examine how to model these other kinds of curves.

Suppose we have a starting position P. We want to connect P to position Q. A straight line would lead directly from on to the other, but we want a curve. To control the curvature, we add a third position that acts as a black hole that sucks the edge toward it. This third point is called a control point. As the control point moves farther from the edge, the curve gets bigger and bigger.

To see this in action, let’s model a leaf. We start with the stem, which is made of straight lines:

  

    path
  color = :green
  opacity = 0
  stroke
    color = :green
    weight = 1
  go.position = [5, 48]
  line.position = [5, 52]
  line.position = [30, 52]

    
    
    
  
  
    

    path
  color = :green
  opacity = 0
  stroke
    color = :green
    weight = 1
  go.position = [5, 48]
  line.position = [5, 52]
  line.position = [30, 52]

  
  expand

Now we jump to the tip, adding a control point to tug at the edge between the stem and the tip. We use the command quadratic to describe this curve:

  

    path
  color = :green
  opacity = 0
  stroke
    color = :green
    weight = 1
  go.position = [5, 48]
  line.position = [5, 52]
  line.position = [30, 52]
  quadratic
    position = [95, 50]
    control = [38, 93]

    
    
    
  
  
    

    path
  color = :green
  opacity = 0
  stroke
    color = :green
    weight = 1
  go.position = [5, 48]
  line.position = [5, 52]
  line.position = [30, 52]
  quadratic
    position = [95, 50]
    control = [38, 93]

  
  expand

Now we mirror this same pattern to complete the other side of the leaf, closing out the path with the back command:

  

    path
  color = :green
  go.position = [5, 48]
  line.position = [5, 52]
  line.position = [30, 52]
  quadratic
    position = [95, 50]
    control = [38, 93]
  quadratic
    position = [30, 48]
    control = [38, 7]
  back

    
    
    
  
  
    

    path
  color = :green
  go.position = [5, 48]
  line.position = [5, 52]
  line.position = [30, 52]
  quadratic
    position = [95, 50]
    control = [38, 93]
  quadratic
    position = [30, 48]
    control = [38, 7]
  back

  
  expand

A quadratic curve has a single control point tugging at the edge. To get even more control over the curvature, we can add two control points using the cubic command:

  

    path
  color = :green
  go.position = [5, 48]
  line.position = [5, 52]
  line.position = [30, 52]
  y = 2
  cubic
    position = [95, 50]
    control1 = [39, 97]
    control2 = [59, 65]
  cubic
    position = [30, 48]
    control1 = [64, 37]
    control2 = [36, 8]
  back

    
    
    
  
  
    

    path
  color = :green
  go.position = [5, 48]
  line.position = [5, 52]
  line.position = [30, 52]
  y = 2
  cubic
    position = [95, 50]
    control1 = [39, 97]
    control2 = [59, 65]
  cubic
    position = [30, 48]
    control1 = [64, 37]
    control2 = [36, 8]
  back

  
  expand

These kinds of curves are called Bézier curves. They are named after Pierre Bézier, who invented them so that he could describe the shapes of cars.

Shape Jam

We are going to have a shape jam. Your “theme” for today is to use paths and Bézier curves. Follow these steps in making your shape:

1. Start by drawing on graph paper.
2. Get your design inspected by a teacher to make sure it’s something we can fabricate.
3. Mark the positions of the vertices and control points.
4. Code up your shape in Twoville.

You will have about 30 minutes to make your design. Use that time to make something interesting that exercises your creativity and your brain. We’ll turn your creation into a vinyl sticker.

Caterpillar

Code is like a caterpillar. It is on its way to being something beautiful that will bring people delight. But it’s trapped in a body that doesn’t seem beautiful. Speaking of caterpillars, let’s design one using the ideas we discussed yesterday. Some caterpillars are sort of bulbous, so let’s string together a sequence of overlapping circles:

  

    view
  corner = [-10, -10]
  size = [128, 20]

circle
  center = [0, 0]
  radius = 10
  color = :black

circle
  center = [12, 0]
  radius = 10
  color = :black

circle
  center = [24, 0]
  radius = 10
  color = :black

circle
  center = [36, 0]
  radius = 10
  color = :black

circle
  center = [48, 0]
  radius = 10
  color = :black

circle
  center = [60, 0]
  radius = 10
  color = :black

circle
  center = [72, 0]
  radius = 10
  color = :black

circle
  center = [84, 0]
  radius = 10
  color = :black

circle
  center = [96, 0]
  radius = 10
  color = :black

circle
  center = [108, 0]
  radius = 10
  color = :black

    
    
    
  
  
    

    view
  corner = [-10, -10]
  size = [128, 20]

circle
  center = [0, 0]
  radius = 10
  color = :black

circle
  center = [12, 0]
  radius = 10
  color = :black

circle
  center = [24, 0]
  radius = 10
  color = :black

circle
  center = [36, 0]
  radius = 10
  color = :black

circle
  center = [48, 0]
  radius = 10
  color = :black

circle
  center = [60, 0]
  radius = 10
  color = :black

circle
  center = [72, 0]
  radius = 10
  color = :black

circle
  center = [84, 0]
  radius = 10
  color = :black

circle
  center = [96, 0]
  radius = 10
  color = :black

circle
  center = [108, 0]
  radius = 10
  color = :black

  
  expand

Writing this code wears me out. Even worse, if I later decide to change the radius or the color, I’ll have to change many lines. I’m likely to miss one. The cost of making changes discourages experimentation.

A better solution is to use a loop. Programming languages often support several kinds of loops. We’re going to talk about one: the for loop. A for loop walks through a sequence of numbers. For each value in the sequence, it runs its block of code. The value of the sequence is available in a variable. To walk through the numbers from 0 to 10, we write this loop:

  

    for i to 10
  print(i)

    
    
    
  
  
    

    for i to 10
  print(i)

  
  expand

This loop allows us to reduce our circle drawing code to something much shorter and less repetitive:

  

    view
  corner = [-10, -10]
  size = [128, 20]

for i to 10
  circle
    center = [i * 12, 0]
    radius = 10
    color = :black

    
    
    
  
  
    

    view
  corner = [-10, -10]
  size = [128, 20]

for i to 10
  circle
    center = [i * 12, 0]
    radius = 10
    color = :black

  
  expand

Now it’s much easier to change the color or radius.

If you want to apply a little curvature to the caterpillar and feel comfortable with trigonometric functions, you can alter the y-coordinate of the body segments using the sine function:

  

    view
  corner = [-10, -22]
  size = [128, 44]

for i to 10
  circle
    center = [i * 12, sin(i * 40) * 12]
    radius = 10
    color = :black

    
    
    
  
  
    

    view
  corner = [-10, -22]
  size = [128, 44]

for i to 10
  circle
    center = [i * 12, sin(i * 40) * 12]
    radius = 10
    color = :black

  
  expand

The for-to loop that we just saw always starts at 0 and stops when it reaches the upper bound. There’s also the for-in loop which allows you start at a different number. It looks like this:

  

    for i in 5..10
  print(i)

    
    
    
  
  
    

    for i in 5..10
  print(i)

  
  expand

Notice how 10 is printed. Unlike the for-to, the upper bound is included in the range of numbers that the loop walks through.

Tower

Now it’s your turn to make something. First draw this stack of rectangles on your graph paper:

Label the centers and the sizes of the rectangles.

Then write a Twoville program with a loop that plots them.

Turtle Geometry

So far, we’ve been thinking of space as a grid that we are flying over. We look down and see imaginary streets that intersect. To identify a location, we name its vertical street and its horizontal street.

This isn’t how you think about space when you are physically in the space instead of flying overhead. When you are on a bike or in a car, you think about moving forward and turning. This first-person perspective is sometimes called turtle geometry. Let’s try making a shape with turtle geometry instead of “bird geometry.”

In a moment, you are going to trace out the letter of someone’s name. To prepare you for that task, let’s pretend this shape is a letter:

In fact, this shape is a letter in Russian. It makes a P sound.

We’ll plot this letter with turtle geometry using a polyline, which is like a polygon but is not filled in. It starts off like this, with an additional weight property to control the line thickness:

  

    view
  center = [50, 50]
  size = [110, 110]

polyline
  color = :black
  weight = 3

    
    
    
  
  
    

    view
  center = [50, 50]
  size = [110, 110]

polyline
  color = :black
  weight = 3

  
  expand

With bird geometry, we used vertex.position to add each corner. With turtle geometry, we start by initially positioning the turtle. It has both a position and a direction or heading. The heading is an angle. A heading of 0 starts the turtle facing to the right. A heading of 90 starts the turtle facing up. Let’s start it facing up and sitting in the bottom-right corner:

  

    view
  center = [50, 50]
  size = [110, 110]

polyline
  color = :black
  weight = 3
  turtle
    position = [100, 0]
    heading = 90

    
    
    
  
  
    

    view
  center = [50, 50]
  size = [110, 110]

polyline
  color = :black
  weight = 3
  turtle
    position = [100, 0]
    heading = 90

  
  expand

We move the turtle forward with the walk command, which expects a distance property:

  

    view
  center = [50, 50]
  size = [110, 110]

polyline
  color = :black
  weight = 3
  turtle
    position = [100, 0]
    heading = 90
  walk.distance = 100

    
    
    
  
  
    

    view
  center = [50, 50]
  size = [110, 110]

polyline
  color = :black
  weight = 3
  turtle
    position = [100, 0]
    heading = 90
  walk.distance = 100

  
  expand

We turn the turtle with the turn command, which expects a degrees property. To turn left at a right angle, we turn 90 degrees:

  

    view
  center = [50, 50]
  size = [110, 110]

polyline
  color = :black
  weight = 3
  turtle
    position = [100, 0]
    heading = 90
  walk.distance = 100
  turn.degrees = 90

    
    
    
  
  
    

    view
  center = [50, 50]
  size = [110, 110]

polyline
  color = :black
  weight = 3
  turtle
    position = [100, 0]
    heading = 90
  walk.distance = 100
  turn.degrees = 90

  
  expand

Fast-forwarding a bit, we arrive at the inner perimeter:

  

    view
  center = [50, 50]
  size = [110, 110]

polyline
  color = :black
  weight = 3
  turtle
    position = [100, 0]
    heading = 90
  walk.distance = 100
  turn.degrees = 90
  walk.distance = 100
  turn.degrees = 90
  walk.distance = 100
  turn.degrees = 90
  walk.distance = 20

    
    
    
  
  
    

    view
  center = [50, 50]
  size = [110, 110]

polyline
  color = :black
  weight = 3
  turtle
    position = [100, 0]
    heading = 90
  walk.distance = 100
  turn.degrees = 90
  walk.distance = 100
  turn.degrees = 90
  walk.distance = 100
  turn.degrees = 90
  walk.distance = 20

  
  expand

Our distances change and we must also make turns to the right, which use a negative number of degrees:

  

    view
  center = [50, 50]
  size = [110, 110]

polyline
  color = :black
  weight = 3
  turtle
    position = [100, 0]
    heading = 90
  walk.distance = 100
  turn.degrees = 90
  walk.distance = 100
  turn.degrees = 90
  walk.distance = 100
  turn.degrees = 90
  walk.distance = 20
  turn.degrees = 90
  walk.distance = 80
  turn.degrees = -90
  walk.distance = 60
  turn.degrees = -90
  walk.distance = 80

    
    
    
  
  
    

    view
  center = [50, 50]
  size = [110, 110]

polyline
  color = :black
  weight = 3
  turtle
    position = [100, 0]
    heading = 90
  walk.distance = 100
  turn.degrees = 90
  walk.distance = 100
  turn.degrees = 90
  walk.distance = 100
  turn.degrees = 90
  walk.distance = 20
  turn.degrees = 90
  walk.distance = 80
  turn.degrees = -90
  walk.distance = 60
  turn.degrees = -90
  walk.distance = 80

  
  expand

The last leg is not closed. We could walk to close it off, or we could just switch to a polygon:

  

    view
  center = [50, 50]
  size = [110, 110]

polygon
  color = :black
  turtle
    position = [100, 0]
    heading = 90
  walk.distance = 100
  turn.degrees = 90
  walk.distance = 100
  turn.degrees = 90
  walk.distance = 100
  turn.degrees = 90
  walk.distance = 20
  turn.degrees = 90
  walk.distance = 80
  turn.degrees = -90
  walk.distance = 60
  turn.degrees = -90
  walk.distance = 80

    
    
    
  
  
    

    view
  center = [50, 50]
  size = [110, 110]

polygon
  color = :black
  turtle
    position = [100, 0]
    heading = 90
  walk.distance = 100
  turn.degrees = 90
  walk.distance = 100
  turn.degrees = 90
  walk.distance = 100
  turn.degrees = 90
  walk.distance = 20
  turn.degrees = 90
  walk.distance = 80
  turn.degrees = -90
  walk.distance = 60
  turn.degrees = -90
  walk.distance = 80

  
  expand

Letter

Now it’s time for you to make something of your own. Think of someone you care about. That could be a family member, a friend, or yourself. What is the first letter of that person’s name? If that person’s letter has holes in it, as we see in A, B, D, O, P, Q, and R, think of someone else, or think of a different name to represent that person. Later we’ll see how to add holes to shapes, but not yet.

Once you have a letter, follow these steps:

1. Draw it on your graph paper in a block style. The letters must have thickness; they can’t just be lines.
2. Identity the corner at which you want the turtle to start. Label its position and heading.
3. For each edge, label its length.
4. For each corner, measure how much the turtle turns from its current direction to align with the new edge.
5. Turn your drawing into a Twoville program.

Ask lots of questions. When you’ve finished, we’ll fabricate your letter into a vinyl sticker that you can give to the person you have in mind.

Starfish

We’ve examined loops. We’ve examined turtle geometry. If we put these two ideas together, we can make some interesting and beautiful shapes, like a starfish maybe. As a first step, let’s model a pentagon. From the turtle’s perspective it moves forward, turns some degrees, moves forward, turns some degrees, and so on. It does this five times total. How many degrees does it turn at each bend? In total, it turns a complete circuit of 360 degrees. It has five steps to do it in, so each step is 360 / 5 = 72 degrees.

That leads to this program:

  

    polyline
  color = :black
  weight = 1
  turtle
    heading = 0
    position = [20, 5]
  for i to 5
    walk.distance = 60
    turn.degrees = 72

    
    
    
  
  
    

    polyline
  color = :black
  weight = 1
  turtle
    heading = 0
    position = [20, 5]
  for i to 5
    walk.distance = 60
    turn.degrees = 72

  
  expand

How would the program change in order to make a hexagon? We’d have six steps of 60 degrees each. A triangle? Three steps of 120 degrees each. A polygon with $n$ vertices? We’d have $n$ steps of $\frac{360}{n}$ degrees. Consider this parametric version of the same program:

  

    n = 10
polyline
  color = :black
  weight = 1
  turtle
    heading = 0
    position = [40, 20]
  for i to n
    walk.distance = 20
    turn.degrees = 360.0 / n

    
    
    
  
  
    

    n = 10
polyline
  color = :black
  weight = 1
  turtle
    heading = 0
    position = [40, 20]
  for i to n
    walk.distance = 20
    turn.degrees = 360.0 / n

  
  expand

Starfish generally have five arms, but some have 40 or 50. Probably we don’t need to think parametrically right now. Five is good. Here’s my preliminary sketch of the turtle walking along the edge of the starfish:

In my program, I’m going to start the turtle off at the bottom-right of the top arm, pointing upward:

  

    view
  center = [-2.5, 0]
  size = [50, 50]

polyline
  color = :black
  weight = 0.2
  turtle
    heading = 90
    position = [0, 0]

    
    
    
  
  
    

    view
  center = [-2.5, 0]
  size = [50, 50]

polyline
  color = :black
  weight = 0.2
  turtle
    heading = 90
    position = [0, 0]

  
  expand

Then I trace out the arm, which is currently very boxy:

  

    view
  center = [-2.5, 0]
  size = [50, 50]

polyline
  color = :black
  weight = 0.2
  turtle
    heading = 90
    position = [0, 0]
  walk.distance = 20
  turn.degrees = 90
  walk.distance = 5
  turn.degrees = 90
  walk.distance = 20 

    
    
    
  
  
    

    view
  center = [-2.5, 0]
  size = [50, 50]

polyline
  color = :black
  weight = 0.2
  turtle
    heading = 90
    position = [0, 0]
  walk.distance = 20
  turn.degrees = 90
  walk.distance = 5
  turn.degrees = 90
  walk.distance = 20 

  
  expand

To get five of these arms, I put this code in a for-to loop. But first I need to turn at the armpit. This is a right turn, so the number of degrees will be negative. The angle is bigger than a right angle, so the number will be greater than 90. Through either experimentation or math, we’ll find that number that we need is -108. Here’s our completed, repeated path:

  

    view
  center = [-2.5, 0]
  size = [50, 50]

polyline
  color = :black
  weight = 0.2
  turtle
    heading = 90
    position = [0, 0]
  for i to 5
    walk.distance = 20
    turn.degrees = 90
    walk.distance = 5
    turn.degrees = 90
    walk.distance = 20 
    turn.degrees = -108

    
    
    
  
  
    

    view
  center = [-2.5, 0]
  size = [50, 50]

polyline
  color = :black
  weight = 0.2
  turtle
    heading = 90
    position = [0, 0]
  for i to 5
    walk.distance = 20
    turn.degrees = 90
    walk.distance = 5
    turn.degrees = 90
    walk.distance = 20 
    turn.degrees = -108

  
  expand

The final step is to fill the starfish in. We could switch polyline to polygon, but the arms would be blocky. If we switch to an ungon, then we’ll get rounded corners on the arms:

  

    view
  center = [-2.5, 0]
  size = [50, 50]

ungon
  color = :black
  turtle
    heading = 90
    position = [0, 0]
  for i to 5
    walk.distance = 20
    turn.degrees = 90
    walk.distance = 5
    turn.degrees = 90
    walk.distance = 20 
    turn.degrees = -108

    
    
    
  
  
    

    view
  center = [-2.5, 0]
  size = [50, 50]

ungon
  color = :black
  turtle
    heading = 90
    position = [0, 0]
  for i to 5
    walk.distance = 20
    turn.degrees = 90
    walk.distance = 5
    turn.degrees = 90
    walk.distance = 20 
    turn.degrees = -108

  
  expand

Shape Jam

Just like yesterday, we are going to have a shape jam. Your “theme” for today is to use turtle geometry and loops. Follow these steps in making your shape:

1. Start by drawing on graph paper.
2. Get your design inspected by a teacher to make sure it’s something we can fabricate.
3. Mark the turtle’s starting position and heading, the distances of each walk, and the degrees of each turn.
4. Code up your shape in Twoville.

You will have about 30 minutes to make your design. Use that time to make something interesting that exercises your creativity and your brain. We’ll turn your creation into a vinyl sticker.

Welcome to summer camp! My name is Chris. Scattered throughout the room are some of my friends that you will meet soon. For the next week, all of us will be making things with technology. The tools we’ll be using to make things include computers, a vinyl cutter, a laser cutter, and a pen plotter. We provide these tools for you to use, but there are some tools that we expect you to supply. Each day we need you to bring your brains, of course, but also your eyes and hands. Don’t try to borrow anybody else’s. They won’t fit you. We’ve tried to design this camp so that it’s more about you doing things with your brain and body than about listening to us talk.

Frankenshape

Speaking of body parts, let’s get right to our first making exercise. We will make a Frankenshape, a shape that is made out of other shapes. Our exercise will have three stages: drawing a prototype shape, measuring the physical shape’s properties, and programming a digital version of the shape that we can fabricate on one of our tools.

Drawing

Here are the supplies we need:

• pencil
• graph paper
• scissors
• ruler (optional)
• compass (optional)

Notice there’s no computer on the list. In most of our activities, we will start with drawing. Our brain works better if our body is involved. So, here’s the challenge for you and your body:

1. Draw an interesting creature or object on your graph paper using only circles and rectangles. Center each circle and rectangle on a grid point. Ensure that the circles and rectangles overlap and that there is only one “island” of shapes. Here’s my design, which may be a bat:
2. Count how many circles and rectangles you have. My bat has five squares and one circle.
3. Cut out your shape along only the outer edge.

Once that is done, we’ll get to know each other and our designs with this challenge:

1. Flip over your shape so that it lies flat on the table and no pencil marks are visible. Only the design’s silhouette is visible.
2. Find someone else in the room, learn their name, and invite them to your table.
3. Ask them what they think your object is.
4. Ask them how many circles and rectangles they see.
5. Do this again with someone different.

Measuring

In a moment you will turn your design into a computer program. The program will produce a file that we can feed into the pen plotter or the vinyl cutter. Before that can happen, we need to figure out some numbers. In particular, we need this information:

• The XY-coordinates of each shape’s center.
• The radius of each circle.
• The width and height of each rectangle.
• The rotation of each rectangle.

To determine the xy-coordinates of each shape, first designate some point on the grid to be the origin, the location (0, 0). I choose my bat’s “belly button” to be the origin. The coordinates of each shape’s centers are then measurements of how far away they are from the origin:

Here’s my bat with its coordinates and sizes marked:

The rotations are not marked. The three squares are each rotated 45 degrees.

Programming

With your measurements identified, you are now ready to use the computer. Open a web browser and direct yourself to Twoville. In the editor, place one of your black circles by writing code like this:

  

    circle
  center = [60, 50]
  radius = 30
  color = :black

    
    
    
  
  
    

    circle
  center = [60, 50]
  radius = 30
  color = :black

  
  expand

Don’t use my numbers. Use your numbers. Notice the indentation. Notice the punctuation. These typographical details matter. We call the symbols [ and ] square brackets.

To plot a second circle, we use a second circle block:

  

    circle
  center = [60, 50]
  radius = 30
  color = :black

circle
  center = [30, 30]
  radius = 20
  color = :black

    
    
    
  
  
    

    circle
  center = [60, 50]
  radius = 30
  color = :black

circle
  center = [30, 30]
  radius = 20
  color = :black

  
  expand

Plot a rectangle with code like this:

  

    rectangle
  center = [40, 60]
  size = [30, 70]
  color = :black

    
    
    
  
  
    

    rectangle
  center = [40, 60]
  size = [30, 70]
  color = :black

  
  expand

Notice that rectangles have a size property similar to the circle’s radius property. Unlike radius, the size property must be set to a list of two numbers. If your rectangle is rotated, add a rotate block:

  

    rectangle
  center = [40, 60]
  size = [30, 70]
  color = :black
  rotate
    pivot = [40, 60]
    degrees = 20

    
    
    
  
  
    

    rectangle
  center = [40, 60]
  size = [30, 70]
  color = :black
  rotate
    pivot = [40, 60]
    degrees = 20

  
  expand

Putting all these ideas together, here is my bat:

  

    rectangle
  center = [0, 0]
  size = [4, 4]
  color = :black
  rotate
    pivot = [0, 0]
    degrees = 45

rectangle
  center = [4, 0]
  size = [4, 4]
  color = :black
  rotate
    pivot = [4, 0]
    degrees = 45

rectangle
  center = [-4, 0]
  size = [4, 4]
  color = :black
  rotate
    pivot = [-4, 0]
    degrees = 45

circle
  center = [0, 4]
  radius = 2
  color = :black

rectangle
  center = [1, 5]
  size = [1.75, 1.75]
  color = :black

rectangle
  center = [-1, 5]
  size = [1.75, 1.75]
  color = :black

    
    
    
  
  
    

    rectangle
  center = [0, 0]
  size = [4, 4]
  color = :black
  rotate
    pivot = [0, 0]
    degrees = 45

rectangle
  center = [4, 0]
  size = [4, 4]
  color = :black
  rotate
    pivot = [4, 0]
    degrees = 45

rectangle
  center = [-4, 0]
  size = [4, 4]
  color = :black
  rotate
    pivot = [-4, 0]
    degrees = 45

circle
  center = [0, 4]
  radius = 2
  color = :black

rectangle
  center = [1, 5]
  size = [1.75, 1.75]
  color = :black

rectangle
  center = [-1, 5]
  size = [1.75, 1.75]
  color = :black

  
  expand

When I run this, the bat shows up very small in the bottom-left corner. That’s because Twoville looks at the scene through a window whose bottom-left corner is at (0, 0) and whose dimensions are (100, 100). This window is only the default. We can alter it by setting properties of the view object:

  

    view
	corner = [-7, -3]
	size = [14, 9]

rectangle
  center = [0, 0]
  size = [4, 4]
  color = :black
  rotate
    pivot = [0, 0]
    degrees = 45

rectangle
  center = [4, 0]
  size = [4, 4]
  color = :black
  rotate
    pivot = [4, 0]
    degrees = 45

rectangle
  center = [-4, 0]
  size = [4, 4]
  color = :black
  rotate
    pivot = [-4, 0]
    degrees = 45

circle
  center = [0, 4]
  radius = 2
  color = :black

rectangle
  center = [1, 5]
  size = [1.75, 1.75]
  color = :black

rectangle
  center = [-1, 5]
  size = [1.75, 1.75]
  color = :black

    
    
    
  
  
    

    view
	corner = [-7, -3]
	size = [14, 9]

rectangle
  center = [0, 0]
  size = [4, 4]
  color = :black
  rotate
    pivot = [0, 0]
    degrees = 45

rectangle
  center = [4, 0]
  size = [4, 4]
  color = :black
  rotate
    pivot = [4, 0]
    degrees = 45

rectangle
  center = [-4, 0]
  size = [4, 4]
  color = :black
  rotate
    pivot = [-4, 0]
    degrees = 45

circle
  center = [0, 4]
  radius = 2
  color = :black

rectangle
  center = [1, 5]
  size = [1.75, 1.75]
  color = :black

rectangle
  center = [-1, 5]
  size = [1.75, 1.75]
  color = :black

  
  expand

We can even turn on a grid to help us identify locations:

  

    view
	corner = [-7, -3]
	size = [14, 9]

grid

rectangle
  center = [0, 0]
  size = [4, 4]
  color = :black
  rotate
    pivot = [0, 0]
    degrees = 45

rectangle
  center = [4, 0]
  size = [4, 4]
  color = :black
  rotate
    pivot = [4, 0]
    degrees = 45

rectangle
  center = [-4, 0]
  size = [4, 4]
  color = :black
  rotate
    pivot = [-4, 0]
    degrees = 45

circle
  center = [0, 4]
  radius = 2
  color = :black

rectangle
  center = [1, 5]
  size = [1.75, 1.75]
  color = :black

rectangle
  center = [-1, 5]
  size = [1.75, 1.75]
  color = :black

    
    
    
  
  
    

    view
	corner = [-7, -3]
	size = [14, 9]

grid

rectangle
  center = [0, 0]
  size = [4, 4]
  color = :black
  rotate
    pivot = [0, 0]
    degrees = 45

rectangle
  center = [4, 0]
  size = [4, 4]
  color = :black
  rotate
    pivot = [4, 0]
    degrees = 45

rectangle
  center = [-4, 0]
  size = [4, 4]
  color = :black
  rotate
    pivot = [-4, 0]
    degrees = 45

circle
  center = [0, 4]
  radius = 2
  color = :black

rectangle
  center = [1, 5]
  size = [1.75, 1.75]
  color = :black

rectangle
  center = [-1, 5]
  size = [1.75, 1.75]
  color = :black

  
  expand

After you get your shape made, we will fabricate it. You’ll submit your shape to me, I will load it into a vinyl cutter, and out will come a vinyl sticker.

Camera

Circles and rectangles are indispensible tools to have around, but they aren’t enough to make all the interesting designs out there. Let’s explore another design that requires a new kind of shape. Check out this movie camera:

Draw your own version of this camera on your graph paper. Put the corners and centers at intersections as much as possible.

What shapes did you use to make this design? I used two circles, one rectangle, and one trapezoid. I could have used a triangle instead of trapezoid. The general name for a shape with corners or vertices is a polygon. Rectangles are polygons, as are triangles, trapezoids, stars, and lightning bolts.

Measure the camera, identifying the sizes and the xy-coordinates of the vertices.

Program the camera in Twoville. For your new shape, use the polygon command, as demonstrated in this program that plots an elbow:

  

    polygon
  vertex.position = [0, 0]
  vertex.position = [0, 100]
  vertex.position = [100, 100]
  vertex.position = [100, 80]
  vertex.position = [20, 80]
  vertex.position = [20, 0]
  color = :black

    
    
    
  
  
    

    polygon
  vertex.position = [0, 0]
  vertex.position = [0, 100]
  vertex.position = [100, 100]
  vertex.position = [100, 80]
  vertex.position = [20, 80]
  vertex.position = [20, 0]
  color = :black

  
  expand

Barbell

Making is an iterative process. We try something and then we adjust it until it feels right. It’s not that we are wrong in our first attempts, it’s that we are uninformed. With each iteration, we get more information that inspires us to make further changes or perhaps return to an earlier iteration.

Coding is making and is also an iterative process. We write some code, inspect the output, and adjust the code. Sometimes adjusting the code can become tedious. For example, suppose you want to make this shape:

  

    circle
  color = :black
  center = [40, 50]
  radius = 5

circle
  color = :black
  center = [60, 50]
  radius = 5

rectangle
  color = :black
  corner = [40, 48.5]
  size = [20, 3]

    
    
    
  
  
    

    circle
  color = :black
  center = [40, 50]
  radius = 5

circle
  color = :black
  center = [60, 50]
  radius = 5

rectangle
  color = :black
  corner = [40, 48.5]
  size = [20, 3]

  
  expand

Later you decide the circles need to be bigger. You change one, but you mustn’t forget to change the other:

  

    circle
  color = :black
  center = [40, 50]
  radius = 7

circle
  color = :black
  center = [60, 50]
  radius = 7

rectangle
  color = :black
  corner = [40, 48.5]
  size = [20, 3]

    
    
    
  
  
    

    circle
  color = :black
  center = [40, 50]
  radius = 7

circle
  color = :black
  center = [60, 50]
  radius = 7

rectangle
  color = :black
  corner = [40, 48.5]
  size = [20, 3]

  
  expand

Then you decide the structure needs to be a little wider, so you change the x-coordinates of the circles:

  

    circle
  color = :black
  center = [30, 50]
  radius = 7

circle
  color = :black
  center = [70, 50]
  radius = 7

rectangle
  color = :black
  corner = [40, 48.5]
  size = [20, 3]

    
    
    
  
  
    

    circle
  color = :black
  center = [30, 50]
  radius = 7

circle
  color = :black
  center = [70, 50]
  radius = 7

rectangle
  color = :black
  corner = [40, 48.5]
  size = [20, 3]

  
  expand

Oh, you forgot that you also need to adjust the rectangle:

  

    circle
  color = :black
  center = [30, 50]
  radius = 7

circle
  color = :black
  center = [70, 50]
  radius = 7

rectangle
  color = :black
  corner = [30, 48.5]
  size = [40, 3]

    
    
    
  
  
    

    circle
  color = :black
  center = [30, 50]
  radius = 7

circle
  color = :black
  center = [70, 50]
  radius = 7

rectangle
  color = :black
  corner = [30, 48.5]
  size = [40, 3]

  
  expand

Right now the numbers are separate. They should be linked so that if we change the size of one circle, the other changes automatically. If we change the location of the right circle, the width of the rectangle changes automatically. We do this by naming the numbers using variables:

  

    anchorX = 30
separation = 30
right = anchorX + separation
circleRadius = 7

circle
  color = :black
  center = [anchorX, 50]
  radius = circleRadius

circle
  color = :black
  center = [right, 50]
  radius = circleRadius

rectangle
  color = :black
  corner = [anchorX, 48.5]
  size = [separation, 3]

    
    
    
  
  
    

    anchorX = 30
separation = 30
right = anchorX + separation
circleRadius = 7

circle
  color = :black
  center = [anchorX, 50]
  radius = circleRadius

circle
  color = :black
  center = [right, 50]
  radius = circleRadius

rectangle
  color = :black
  corner = [anchorX, 48.5]
  size = [separation, 3]

  
  expand

To make the height of the bar adjustable, we add another variable:

  

    anchorX = 30
separation = 30
right = anchorX + separation
circleRadius = 7
barHeight = 3

circle
  color = :black
  center = [anchorX, 50]
  radius = circleRadius

circle
  color = :black
  center = [right, 50]
  radius = circleRadius

rectangle
  color = :black
  corner = [anchorX, 48.5]
  size = [separation, barHeight]

    
    
    
  
  
    

    anchorX = 30
separation = 30
right = anchorX + separation
circleRadius = 7
barHeight = 3

circle
  color = :black
  center = [anchorX, 50]
  radius = circleRadius

circle
  color = :black
  center = [right, 50]
  radius = circleRadius

rectangle
  color = :black
  corner = [anchorX, 48.5]
  size = [separation, barHeight]

  
  expand

What happens if tweak the height of the bar?

  

    anchorX = 30
separation = 30
right = anchorX + separation
circleRadius = 7
barHeight = 5

circle
  color = :black
  center = [anchorX, 50]
  radius = circleRadius

circle
  color = :black
  center = [right, 50]
  radius = circleRadius

rectangle
  color = :black
  corner = [anchorX, 48.5]
  size = [separation, barHeight]

    
    
    
  
  
    

    anchorX = 30
separation = 30
right = anchorX + separation
circleRadius = 7
barHeight = 5

circle
  color = :black
  center = [anchorX, 50]
  radius = circleRadius

circle
  color = :black
  center = [right, 50]
  radius = circleRadius

rectangle
  color = :black
  corner = [anchorX, 48.5]
  size = [separation, barHeight]

  
  expand

It’s no longer centered. We need to adjust our corner so that half of the bar is below the x-axis. Instead of using plain numbers and variables, we perform a little math right in the code:

  

    anchorX = 30
anchorY = 50
separation = 30
right = anchorX + separation
circleRadius = 7
barHeight = 5

circle
  color = :black
  center = [anchorX, anchorY]
  radius = circleRadius

circle
  color = :black
  center = [right, anchorY]
  radius = circleRadius

rectangle
  color = :black
  corner = [anchorX, anchorY - barHeight * 0.5]
  size = [separation, barHeight]

    
    
    
  
  
    

    anchorX = 30
anchorY = 50
separation = 30
right = anchorX + separation
circleRadius = 7
barHeight = 5

circle
  color = :black
  center = [anchorX, anchorY]
  radius = circleRadius

circle
  color = :black
  center = [right, anchorY]
  radius = circleRadius

rectangle
  color = :black
  corner = [anchorX, anchorY - barHeight * 0.5]
  size = [separation, barHeight]

  
  expand

When we think about shapes in terms of a small set of variables, we are doing parametric design. The variables are the parameters that control the shape.

Shape Jam

There are these events where people gather together and spend 48 hours making a game. The participants get little sleep, eat a lot of pizza, and enjoy the community of others. At the end, the participants have a small game to show their friends and family. These events are called game jams.

We are going to have a shape jam. There will be no pizza, it won’t be nearly so long, and you can enjoy the community of others by working with a partner, if you so choose. Your challenge in this shape jam is to use circles, rectangles, polygons, variables, and mathematical expressions to make a parametric design. We will turn fabricate it into a vinyl sticker.

Game jams usually have themes. I don’t want to impose a theme on you. However, I do ask you that you incorporate all the ideas we’ve discussed up till now.

Follow these steps in making your shape:

1. Start by drawing on graph paper.
2. Get your design inspected by a teacher to make sure it’s something we can fabricate.
3. Mark the vertex positions and sizes on the graph paper.
4. Code up your shape in Twoville.

You will have about 30 minutes to make your design. Use that time to make something interesting that exercises your creativity and your brain.

  

    // Circle
with circle()
  center = [50, 50]
  radius = 50
  color = [208, 58, 43] / 255.0

// Star
with path()
  color = :white
  closed = true
  go().position = [-10, 0]
  with cubic()
    position = [0, -10]
    control1 = [-1, -1]
    control2 = [-1, -1]
  with mirror()
    axis = :up
    pivot = :zero2
  with mirror()
    axis = :right
    pivot = :zero2
  with translate()
    offset = [64.81, 75.89]
    
// Rover
with ungon()
  color = :white
  formula = :absolute
  rounding = 5
  size = 15
  xs = [20, ~ + size, ~ + size, ~ + size, ~ + size]
  ys = [25, ~ + size, ~ + size, ~ + size]
  vertex().position = [xs[1], ys[3]]
  vertex().position = [xs[2], ys[3]]
  vertex().position = [xs[2], ys[2]]
  vertex().position = [xs[3], ys[2]]
  vertex().position = [xs[3], ys[1]]
  vertex().position = [xs[4], ys[1]]
  vertex().position = [xs[4], ys[0]]
  vertex().position = [xs[3], ys[0]]
  vertex().position = [xs[3], ys[1]]
  vertex().position = [xs[1], ys[1]]
  vertex().position = [xs[1], ys[0]]
  vertex().position = [xs[0], ys[0]]
  vertex().position = [xs[0], ys[1]]
  vertex().position = [xs[1], ys[1]]

    
    
    
  
  
    

    // Circle
with circle()
  center = [50, 50]
  radius = 50
  color = [208, 58, 43] / 255.0

// Star
with path()
  color = :white
  closed = true
  go().position = [-10, 0]
  with cubic()
    position = [0, -10]
    control1 = [-1, -1]
    control2 = [-1, -1]
  with mirror()
    axis = :up
    pivot = :zero2
  with mirror()
    axis = :right
    pivot = :zero2
  with translate()
    offset = [64.81, 75.89]
    
// Rover
with ungon()
  color = :white
  formula = :absolute
  rounding = 5
  size = 15
  xs = [20, ~ + size, ~ + size, ~ + size, ~ + size]
  ys = [25, ~ + size, ~ + size, ~ + size]
  vertex().position = [xs[1], ys[3]]
  vertex().position = [xs[2], ys[3]]
  vertex().position = [xs[2], ys[2]]
  vertex().position = [xs[3], ys[2]]
  vertex().position = [xs[3], ys[1]]
  vertex().position = [xs[4], ys[1]]
  vertex().position = [xs[4], ys[0]]
  vertex().position = [xs[3], ys[0]]
  vertex().position = [xs[3], ys[1]]
  vertex().position = [xs[1], ys[1]]
  vertex().position = [xs[1], ys[0]]
  vertex().position = [xs[0], ys[0]]
  vertex().position = [xs[0], ys[1]]
  vertex().position = [xs[1], ys[1]]

  
  expand

It’s not an exact match. NASA’s landings are better than my own.

red = [1, 0, 0]
green = [0, 1, 0]
blue = [0, 0, 1]
yellow = [1, 1, 0]
cyan = [0, 1, 1]
magenta = [1, 0, 1]

Shades of gray require less understanding of how the intensities combine; all three intensities are the same. These are three shades of gray defined in the CSS standard:

gray = [0.5, 0.5, 0.5]
darkgray = [0.66, 0.66, 0.66]
lightgray = [0.83, 0.83, 0.83]

The names are confusing, but that’s a story for another day.

I am unhappy with how grays are expressed. If I find that a shade is too dark or too light, I have to change three numbers. But not when I’m the one writing the programming language! In Twoville, therefore, I have added a special ditto operator that can be used inside array literals to repeat the previous element.

gray = [0.5, ~, ~]
darkgray = [0.66, ~, ~]
lightgray = [0.83, ~, ~]

The symbol for ditto is the tilde. I wanted it to be a single character for compactness. The other punctuation characters have too much semantic baggage. Tilde is typically only used for bitwise negation, and I’ve got a named function for that. Bitwise negation doesn’t deserve a compact symbol.

Besides expressing grays, the ditto operator makes it easy to enforce square dimensions:

dimensions = [10, ~]

I could have achieved repeating array elements in other ways, perhaps through an array constructor or through some sort of replication operator. These might look something like this:

gray = array(3, 0.5)
gray = [0.5] x 3

But the ditto operator can act as a term in an expression:

powersOfTwo = [1, ~ * 2, ~ * 2, ~ * 2, ~ * 2]

There’s nothing quite as gratifying as being in charge of a language. Before that language has users, anyway.

Ever since I saw someone preview their paper with a foot-stomping fiddle routine at IEEE Visualization, I’ve tried to find my own ways to stand out during these lightning sessions. Limericks are more my style, and I wrote this one for FabLearn.

With a mouse you can do quite a lot
You can click on the shapes you have wrought
Drag them left, drag them right
Change their width, change their height
Do whatever the software’s been taught

What if you want to do other things?
Perhaps make Papert’s gears or some springs
Using math, using n
Doing once, then again
You need power that programming brings

We know making takes both brains and heart
We need tools that don’t keep them apart
Let’s have code, let’s have clicks
Since design is a mix
Today’s demo we think is a start

We had a few visitors, but not many. Maybe the limerick was bad. Other explanations are possible: we were right in the middle of a long list of breakout rooms, people smelled my fear, or educators are burned out on new apps that claim to save education. Who knows.

And here is my first attempt at modeling them using Madeup’s dowel command with rounded bends:

  

    moveto(x = 0, y = 0)

repeat 3
  move(distance = 1)
  yaw(degrees = 90)
  move(distance = 1)
  pitch(degrees = -90)

dowel(sharpness = 5)
    
    
    
  
  
    

    moveto(x = 0, y = 0)

repeat 3
  move(distance = 1)
  yaw(degrees = 90)
  move(distance = 1)
  pitch(degrees = -90)

dowel(sharpness = 5)
  
  expand

Notice the hole in the middle. Given how the rounding is implemented, I was not able to remove it. You can bet that I was haunted by that hole. I took some time to design a new solidifier so that I could create this shape. The solidifier is called table. One feeds it a list of cross sections, all of the same cardinality, and the cross sections are connected together.

The shape generated by table has no hole.

  

    moveto(x = 0, y = 0)
pitch(degrees = -90)
repeat 4
  move(distance = 1)
  yaw(degrees = -90)

path = mold()
paths = [path]

n = 20
degrees = 90.0 / n

axes = [:backward, :up, :right]

repeat 2
  for axis of axes
    repeat n
      path = rotate(path, degrees, axis)
      paths.push(item = path)

table(rows = paths)

    
    
    
  
  
    

    moveto(x = 0, y = 0)
pitch(degrees = -90)
repeat 4
  move(distance = 1)
  yaw(degrees = -90)

path = mold()
paths = [path]

n = 20
degrees = 90.0 / n

axes = [:backward, :up, :right]

repeat 2
  for axis of axes
    repeat n
      path = rotate(path, degrees, axis)
      paths.push(item = path)

table(rows = paths)

  
  expand

Someday soon I’ll have a more general loft solidifier, which will allow cross sections of different cardinalities.