Cycloid Critters
Cycloid Critters is a browser-based character maker for children. Every part of the creature is a curve from the cycloid family. Children pick a body part, choose a shape, and watch a rolling wheel draw it. The curve then becomes an ear, an eye, a mouth or a body on their critter. The math is the art material, not a lesson added on top of the art.
Screenshot of Cycloid Critters, built with Calude
The math behind it
What is a cycloid?
A cycloid is the path made by a point on the edge of a wheel as the wheel rolls along a flat line. Picture a bike tire with a dot of paint on it. As the bike moves forward, the dot travels in a row of arches, one arch for each full turn of the wheel. Every time the dot touches the ground, the path makes a sharp point called a cusp. The name comes from the Greek word for circle.
The cycloid family
Change what the wheel rolls on, or where the pen sits on the wheel, and you get the cycloid's relatives. Cycloid Critters includes three groups.
Rolling around the outside of a circle: epicycloids. A small wheel rolls around the outside of a bigger circle (epimeans on or upon). The number of points depends on how much bigger the circle is than the wheel.
Cardioid: the circle and wheel are the same size, so there is one point. The shape looks like a heart, and its name comes from the Greek word for heart.
Nephroid: the circle is twice as big, so there are two points. The shape looks like a kidney bean, and its name comes from the Greek word for kidney.
Epicycloid: with a circle three or more times bigger, you get flower and sun shapes with that many points.
Rolling around the inside of a circle: hypocycloids. A small wheel rolls around the inside of a bigger circle, like a coin circling inside a bowl (hypo means under or inside). Again, the number of points matches how many times bigger the circle is.
Deltoid: the circle is three times bigger, so there are three points. It makes a curved triangle named after the Greek letter delta (Δ).
Astroid: the circle is four times bigger, so there are four points. It makes a star, and its name comes from the Greek word for star.
Hypocycloid: with five or more points, you get spiky stars.
Moving the pen: trochoids. If the pen is not on the edge of the wheel, the curve is called a trochoid, from the Greek word for wheel.
Pen tucked inside the wheel: it never touches the track, so the sharp points turn into soft, rounded bumps.
Pen sticking out past the edge: it swings below the track and draws loops instead of points.
The same idea applies to the circle shapes. The outside versions are called epitrochoids, and the inside versions are hypotrochoids. Hypotrochoids are the looping, petal-like patterns made by the Spirograph toy.
The one big idea. For every shape that rolls around a circle, the number of points equals how many times bigger the circle is than the wheel. A circle four times bigger gives four points. The tool uses whole numbers only, so this rule always shows up clearly.
Learner Context
Primary audience: children ages 5 to 10. The design allows for a wide range of reading ability.
Children 5 to 7 can use it almost entirely through pictures: shape tiles with drawn icons, color swatches, large plus and minus buttons, and dragging parts with a finger.
Children 8 to 10 can read the shape cards, follow the "Try this" challenges, and start reasoning about why the number of points changes.
Secondary audience: the adults alongside them. Parents, teachers and art facilitators get pronunciation guides and word origins on every card. An adult who has never heard the word "astroid" can still say it with confidence and explain it to a child.
UX Notes
Parts bin
The critter has six parts: head, eyes, ears, mouth, hair and body. Building a character one part at a time gives young children a clear path and keeps choices manageable. Eyes and ears move and mirror as pairs, which quietly introduces symmetry.
Shape tiles
Seven tiles (cycloid, cardioid, nephroid, epicycloid, deltoid, astroid and hypocycloid) each show a small drawing of the shape. Children choose by sight before they can read the names.
Drawing machine
This is the heart of the tool. When a shape is chosen, a wheel visibly rolls along a line, around the outside of a circle, or around the inside, and a pen on the wheel draws the curve in real time. Most geometry tools show only the finished shape. This one shows how the shape comes to be. A "Draw it again" button replays it.
Shape cards
Each card answers three questions: what the shape is called, how it is made, and why it looks the way it does. Each card includes:
the name and how to say it
where the word comes from
a short, concrete explanation, using comparisons like a bike tire or a coin in a bowl
Points control
Plus and minus buttons change the number of points or arches. A label under the drawing machine states the rule each time, for example "Big circle is 4× the wheel → 4 points." As children press plus, they watch a deltoid become an astroid and then a five-pointed hypocycloid, with the name changing along the way. The rule is shown again and again rather than explained once.
Pen position
Three buttons place the pen on the rim, tucked in, or sticking out. This is a simple experiment: children see sharp points soften or turn into loops. It also leads to some of the most expressive results, like the curly hair on the starting critter.
"Try this" challenges
Each card ends with one small, open challenge, such as "Can you make a sun with exactly 7 points?" These turn free play into gentle inquiry, with no scores and no wrong answers.
Curve collection
Ten badges start hidden and reveal a name when a child watches that curve being drawn. This rewards curiosity and gives older children a reason to explore the whole family.
Make it yours
Children can change color (eight pens), size, rotation, filled or outline style, and whether a part is shown. Parts can be dragged anywhere on the paper.
Name, recipe and surprise!
Naming the critter builds ownership and invites storytelling.
The "made of" card turns the character back into vocabulary ("Ears: Deltoid × 2"), so a child can explain their creation to someone else.
"Surprise me" gives hesitant children an easy start, and "Start over" brings back the original critter.
Starting critter
The tool opens with a ready-made character named Sprocket. It has a cardioid head, astroid eyes, deltoid ears, a two-arch cycloid mouth, curly trochoid hair and a soft flower-shaped body. Children see what's possible right away instead of facing a blank page.
How it helps children learn
Learning by making
Children learn by building something they care about. A critter they named and designed gives them a reason to understand the shapes inside it. This connects to research on transmedia making, where creative production is the moment of learning.
Seeing the process
Watching the wheel draw keeps attention on how shapes form, the part that usually disappears in textbook diagrams.
Words with meaning attached
Terms like cusp, astroid and epicycloid arrive linked to a picture, a motion, and a body part the child made. That makes them easier to remember than a definition.
Finding patterns through play
Children notice the points rule, test it, and then use it to make what they want.
Art and math together
Color, size, rotation and personality matter as much as accuracy. A child drawn in by the art leaves knowing a few curves; a child drawn in by the math leaves having made something expressive.
Look and feel
Graph paper
the critter sits on a sheet of graph paper, so it feels like a drawing on a desk. The paper stays light in dark mode so critter colors stay true
Type
a rounded, friendly display font for names and headings, and a very readable body font for the explanations young readers will sound out
Color
eight pen colors chosen to stay bright on the paper, with a dark ink outline so characters look illustrated rather than computer-made
Touch
large buttons and swatches for small hands on tablets, and dragging that works with touch
Motion
curves draw instantly instead of animating for anyone who has reduced motion turned on
Where it fits
Oki Pie Workshops
a warm-up before drawing or painting, or the center of a "shapes that roll" lesson. Children could paint their critter afterward
At home
a parent and child exploring side by side, with the shape cards giving the adult the words.
Technical notes
Built as a single HTML file with comments throughout, ready to embed on Squarespace.
All styles and code are namespaced, so it won't clash with other tools on the same page.
Credit line: "Made by Dr. Sonia Tiwari for Oki Pie Lab," with links.
Current limits and next steps
Placement is by dragging only
A future "tidy up" button could snap parts back into place.
Possible additions:
a printable curve recipe card for an offline activity
a facilitator guide with discussion questions
a hands-on extension where children roll real coins and lids to trace curves on paper
an Oki Pie character as the wheel-rolling guide
