This repository contains code for an experimental iteration of UW PLSE's classic Dragon Curves outreach activity. Some notable changes compared to past iterations are:
- adding an audio interpretation of L-Systems
- adding many more L-Systems (renditions of a Hilbert curve, Sierpinksi triangles, and a fern)
- exposing the underlying L-System (both its axiom/rules and the generated string)
- incrementally animating the creation of the curve alongside the corresponding character in the alphabet
We first used this for a Summer 2025 workshop with Changemakers in Computing (CiC).
This project is written in TypeScript and was bootstraped with @preact/preset-vite (preact is a simple alternative to React that has an almost identical API). It was developed with Node 22.
Running the app locally is similar to most Node-based projects:
$ git clone https://github.com/uwplse/dragoner-curves.git
$ cd dragoner-curves
$ npm install
$ npm run dev
npm run dev starts a dev server at http://localhost:5173/.
This project is automatically deployed to GitHub Pages via GitHub Actions. See .github/workflows for more information, and npm run build generate a production build at dist/.
Coming soon :)
This project builds on:
- prior iterations of the UW PLSE Dragon Curves activity. Many people were involved; thank-yous are in order for:
- past PLSE outreach chairs Audrey Seo, Oliver Flatt, and CSE Outreach Committee Lead Hannah Potter for their significant work in supporting this activity
- PLSE members for their feedback and support in running past events, including Gilbert Bernstein (who originally suggested adding audio to the demo), John Leo, Kirsten Graham, Ben Wang, Amy Zhu, Elliot Zackrone, and many others!
- Changemakers in Computing (CiC) mentors who provided feedback on the activity!
- prior work that Oliver Flatt worked on at the University of Utah and as part of the GREAT Summer Camp
In addition, the following resources were helpful in creating the demo:
- the Wikipedia pages on L-Systems, Dragon curves, the Barnsley fern, the Hilbert curve, and Twinkle Twinkle Little Star
- Harrison Milbradt's blog post on implementing Panning and Zooming in HTML Canvas, which was modified for this app's pan and zoom feature
- p5.js and Processing, which were used to create prior versions of this demo
- Rico Trebeljahr's Fractal Garden project, which was helpful inspiration (even though no code was used)
This project is written in Typescript and uses the following MIT-licensed libraries:
- Preact (as a bite-sized UI framework)
- Tone.js (for high-level audio manipulation)
- Vite (as a JS build and tooling system)
All mistakes should be attributed to Matt Wang :)