PLSE Outreach- Dragon Curves!

Every quarter PLSE hosts an outreach event to teach high school students about programming languages research! This quarter we hosted a lab tour as part of UW’s CS Education Week. The event helps interested students get a taste of computer science, and learn about the cool research we do here at PLSE. In groups of 20-30, students and their parents come do an activity designed to get them thinking about what programming is, and what practical problems it can solve. We had a lot of fun, and got a lot of great questions!

Our activity this year was to assemble one big paper dragon curve, a self-similar fractal curve:

| | | :————————-|————————-: A dragon curve made out of paper with light shining on it | A picture of 3 PLSE students holding a paper dragon curve up

Visual instructions for making a dragon curve

Following the visual instructions above, students construct a dragon curve. To make a dragon curve, students start by making small dragon curves out of paper. Then at each step two smaller dragon curves can be combined to make one larger curve. For example, two small dragon curves are combined at the red dot in the picture above. Then the second dragon curve is rotated 90 degrees clockwise about that point. The other end point of the second dragon curve becomes the new pivot point.

Once the students make their own dragon curve, they combine it with their neighbors’ dragon curves to make a bigger one. We continue combining the dragon curves until the whole group makes one big one!

   
A picture of Oliver teaching the students how to make a dragon curve A picture of students making dragon curves

Programming Dragon Curves

In this activity, the instructions for making a dragon curve are like a program and the students are the computer. Even though the instructions are quite simple, they are not easy to follow. Everyone struggles to keep their dragon curves oriented correctly, and to rotate them preciesly — including PLSE members. After 15 minutes of hard work making a dragon curve, it’s time for the big reveal: computers can make dragon curves too! Not only that, but they can make them easily and much more quickly on the screen.

   
A picture of dragon curve code in processing A picture of the resulting dragon curve

We show this code to the students, and explain how it works. The important part is the two commands new Move(5, 0) and new Move(5, 0). These add the first and second lines, forming the “seed” of the entire dragon curves. Students are usually a little impressed and surprised by the results. However, this demo really shines when I ask students for changes we could make to the code! Small changes to the code can have wild effects on the resulting dragon curve. For example, look what happens when we change the first command to a diagonal line:

   
A picture of dragon curve code in processing with a small change A picture of the resulting dragon curve, which is very wavey

Adding a different seed changes the results completely. It’s difficult to predict the changes, but it’s easy to perform them and run the code. It’s also easy to change the code. I ask the students to reflect on why that might be. The punchline is that we have designed a programming language! It’s a small programming language that lets us write down the first few steps of a dragon curve.

If you would like to install and run this code yourself, follow these instructions!

Besides being fun, this activity has connections to programming languages research. Dragon curves are a an example of a fractal that can be generated using an L-system. L-systems are a programming language: they allow people to describe fractals in a concise way, and then generate them. In Computer Graphics, L-systems are used to generate procedural content, such as fields of trees and flowers. Here at the PLSE lab, we work on other domain specific languages for helping people write better code, more easily.