Witch Cast

A browser game built around a single gesture: you draw a magical glyph with the mouse, and the moment you close the outer ring, the spell parses and fires as a particle effect on the canvas. The magic system follows the rules from Witch Hat Atelier (Kamome Shirahama's manga), where every spell is a glyph you have to draw by hand.

The idea

In the manga, magic is not spoken, it is drawn. A spell is three things stacked together: a central sigil that sets the element (fire, water, earth, wind, light), surrounding signs that modify how it behaves, and an enclosing ring that acts as the trigger. Nothing happens while the ring is open. Close it, and the spell activates.

That rule turns out to be a clean game mechanic. The player draws freely, stacking strokes with no feedback, then closes the ring last to set everything off. An empty ring (nothing inside) has its own behavior straight from canon: a shockwave.

How a spell reads

When a stroke completes, the engine walks a small pipeline:

• Ring detection: find the outermost closed loop that encloses other strokes. No closed ring means the glyph stays dormant.
• Segmentation: split the interior strokes into the central sigil versus the surrounding signs, based on how far each sits from the ring's center.
• Classification: match each shape against hand-authored templates with a $1 / $N unistroke recognizer, and read orientation so that reversed signs can invert their effect.
• Composition: a plain rule-based registry maps sigil + signs to a named spell (Pyreball, Watershot, Light Flash, and friends), or falls back to a generic combination so experiments still do something.

Neatness matters. Rounder rings and smoother strokes raise a stability score, and larger seals cast more powerful effects, which mirrors how the manga treats seal size and tidiness.

Under the hood

Built on PixiJS v8 for the ink and 2D effects, with the recognition pipeline written as pure JavaScript and held together by a deterministic test suite: seeded synthetic strokes for every shape, and a confusion-matrix guard so a newly added glyph can never quietly start shadowing an existing one.

The pipeline is deliberately independent of whatever renders the result. The composition engine never touches the renderer: it emits one {effect, position, params, verbs} event onto a tiny in-process bus, and each consumer subscribes. That seam is what let the same casts grow a second home: a Three.js world with Rapier physics, where a spell's verbs resolve against tagged objects sitting on a rune slab. Fire burns, water douses, wind shoves, earth shatters, and light glows, all driven by the same glyph you drew.

Status

Well past the first prototype. The recognition pipeline runs end to end (ring detection, sigil-versus-sign segmentation, template matching, and a spell registry with procedural fallbacks for combinations that have no named spell), and several systems sit on top of it:

• a 3D world where spells act on physics-backed objects (burn, douse, shove, shatter, lift), not just flat particles
• a grimoire that records the spells you discover and lets you name them
• forbidden spells that trigger a consequence when you draw one
• a sandbox mode where you stamp sigils and signs onto a slab instead of drawing them freehand
• nested seals: wrap one seal inside another so their effects combine in a single cast

It is not publicly hosted yet, so there's no live link for now.