Shaping with Code and Mouse at Bridges 2024

Following are the notes from a workshop I hosted at Bridges 2024 in Richmond, Virginia. Bridges is a conference that celebrates mathematics and art.

This is a workshop in which we will make two-dimensional designs. You will make your designs with both cognition and perception, both code and mouse manipulation. Your designs will start virtual but end physical. There are enough of you in this room that I have abandoned my plan to fabricate anything during the workshop. Instead, I will cut your designs into vinyl stickers back in my hotel room instead of sleeping, and I will distribute the stickers to you throughout the remaining days of this conference.

The tool we're going to use to make our designs is one I've been building for a couple of years. It's called Twoville. You will find bugs and incompleteness. I made Twoville so people could make things with math and code. People like me, my children, and the kids in my city's schools.

We have time for two activities: frankenshapes and knot mosaics. These are activities I have actually used with real young humans, and I share them with you in hopes that you might also use Twoville with young people.

Frankenshape

A frankenshape is a shape made out simpler shapes like rectangles and circles; it's a composite shape. I use them to introduce Twoville because my audiences, which have been as young as fifth grade, tend to be familiar with rectangles and circles. You are probably quite familiar with rectangles and circles, but I still hope you feel their magic.

Our first frankenshape will be a cloud. Its core is a rectangle. Let's draw that rectangle with some help from Desmos:

We identify two of its properties: the coordinates of its bottom-left corner and its size. My usual audience often mixes up the x- and y-coordinates.

I've never seen a cloud quite like this. Let's add some circles to fluff it up a bit. I'll draw one on the left. Where is its center? We need its size, but we have several options. My audience members often suggest perimeter or area. Twoville only recognizes the radius. What's the radius of our circle? Let's also add a circle on the right. That makes a capsule, and it still doesn't look like a cloud. Let's add some circles on top, but we won't measure them—their centers and radii are less constrained.

I'm demonstrating this design on a screen, but whenever I lead a Twoville workshop, I have participants start by drawing on graph paper. I'm convinced we do our worst thinking at a screen. We shut off parts of our brain that we need. Instead, we draw and we measure with our viscera. Only after students review their drawing with me do I give them a computer.

Now that we've drawn and measured, we are ready to code up our frankenshape. At this point, coding is really just a matter of translating from one representation to another. It's is a lot less scary when treated as a translation step rather than a design challenge. Here's how we represent the cloud in Twoville:

As we write and run the code, you'll notice a few things. The properties for a shape must be indented to show that to whom they belong. In many other languages, you'll see properties passed as parameters to a function call. In Twoville, everything is labeled. It is verbose by design. Also, if a shape doesn't look good, it seems silly to have to tweak it indirectly through code. Our visual cortex noticed the problem, so let's let it guide the fix. When we place the cursor inside of a shape, we see handles appear for its properties. We drag those handles around to update both the canvas and the code. Holding Shift makes the property snap to integers.

Now it's your turn to make a design. Here are the steps: 0) find a partner, 1) draw, 2) measure, 3) code, and 4) hit Send to Chris. Please put your full name and preferred sticker height.

Knot4

Now we move on to our second activity: knot-making. You know knots outside of mathematics. People tie them in shoes and weddings. The sense of knot that we care about today is a meandering path that meets back up with itself, a circuit. There are no dead ends or branches. They are frequently used to decorate floors, walls, bodies, and pages of illuminated manuscripts. Consider these examples...

We're going to code up our own knots. To make this activity work with young people, I constrain the knots to those we can build as mosaics. These tiles are in our palette:

Sometimes I hand out collections of these tiles printed on and cut from paper, and the students arrange the tiles into knots. That works okay for small groups, but a rogue sneeze can take out a design. Drawing on tiles is also hard. Lately I've been handing out a grid like this, which you'll also find on your handout:

A common strategy for becoming famous is to define a table or matrix and then use it to classify everything. Mathematicians have done this with knots. They arranged them in a table according to their number of crossings.

The knot with 0 crossings is the unknot. We code it like so:

We use turtle or differential geometry to trace out the knot from a first-person perspective. Turtles must be situated and oriented. Thereupon they can walk in integer units and curl in multiples of 90 degrees. These constraints limit the aesthetic choices we can make for our knot, but they are in place so that students are more likely to arrive back where they started. This particular turtle does the same walk-curl pattern four times, so we use a repeat loop to express the repetition.

This knot has 1 crossing:

Note the dig command for making the turtle go under the other segment. This creates a break in the design. If we wanted a solid sticker, we'd use walk only.

This knot has 2 crossings:

Any knot with only 1 or 2 crossings can be deformed into the unknot without cutting. When doing mathematical research, we are interested in more complex knots, many of which can't be deformed into the unknot. When making art, we aren't as concerned about the number of crossings or deformability. You decide whether you are a topologist or an artist today as you make your own knot.

Some kind folks at Geneseo College put together a catalog of square knot mosaics.

You are now ready to make your own knot. As before, here are your steps: 0) find a partner, 1) draw, 2) measure, 3) code, and 4) click Send to Chris.

Conclusion

We have arrived at the end of our workshop. You have made a frankenshape and a knot mosaic. You've also seen Twoville, a tool that you and others near you might be able to use to turn mathematical and algorithmic ideas into physical objects. Code is and will continue to be its primary interface, but it supports tweaking of parameters via the mouse. Twoville is very much a work in progress, and I'm actively working on adding tutorials, fixing bugs, and supporting animation. I welcome friendly feedback.