Learning software · Educational tool

Code Playground

A browser sandbox where a shape, a set of sliders, and the code that draws it stay in sync. The code pane switches between Luau, GDScript, and Python.

Try this: Drag the circle and watch the code change, or switch the language to GDScript or Python.

code.rootsofreason.orgLiveOpen full size
Drag the shape, move a slider, or edit the code. The other two follow.
Role
Design & development
Period
2026
Status
Live
Platform
Static site
Built with
  • React, single file from a CDN
  • Canvas
3
ways to change the same shape
3
languages in the code pane
3,047
lines in a single file
01

Why three views

Students learning to code often cannot connect a line of code to what it changes. Here the shape, the sliders, and the code are three views of one state. Change any of them and the other two follow, so the connection is visible.

Three-way binding

Dragmove the shapeSlidersset the numbersCodeLuau, GDScript,or Pythonone shared state
02

Three languages

Luau is the language of Roblox, GDScript of Godot, and Python of most introductory courses. A student can see the same idea in the syntax they will use next.

Display settings

Choose a layout and palette. Your settings are saved in this browser.

Palette
Homepage layout
Motion

Display settings do not change the project selection or publication permissions. Orbital and index layouts use the same project data.

Harmonic drawing

The homepage drawing is a small interactive made for this portfolio. It is separate from the project examples.

3
25

Drag across the center drawing or use these controls. The drawing does not require sound, network access, or continuous animation.