How the Witch Hat Atelier Spell Simulator Works

The browser recognition pipeline

The WHA Spell Simulator is a local JavaScript application. It does not send your drawing to a language model or image-recognition API. Pointer Events capture a sequence of points, geometry modules analyze those points, a dictionary matcher recognizes candidate symbols, and a compiler turns the recognized structure into animation parameters.

How the Witch Hat Atelier Spell Simulator works can therefore be inspected as a deterministic sequence: captured strokes become geometry, recognized geometry becomes structured spell data, and structured spell data drives the visual renderer.

1. Pointer capture and stroke cleanup

Mouse, touch, and pen input are converted from CSS coordinates into the canvas coordinate system. Nearby samples are filtered to reduce noise, extremely short marks are ignored, and a smoothing pass softens hand jitter without intentionally redesigning the symbol.

2. Ring detection

The parser fits circular candidates, measures angular coverage, checks roundness, and uses a topology-based flood-fill test to decide whether a boundary is actually sealed. It also remembers the previous open ring so a short final closure stroke can activate the same diagram instead of creating an unrelated shape.

3. Layers and candidate grouping

Every stroke is measured relative to the detected ring. Normalized radius divides the paper into center, middle, outer, boundary, and outside areas. Spatially related strokes are grouped into symbol candidates, while ring strokes and irrelevant outside marks are excluded.

4. Template recognition

Candidates are normalized for position and scale and compared with local templates. The matcher considers shape, unexplained ink, orientation rules, permitted layers, and confidence. It can accept mild overdraw as “valid messy,” but it rejects unrelated contamination and low-confidence guesses.

5. GlyphAST creation

The public parse result is a structured GlyphAST containing the ring, primary sigil, signs, unknown candidates, global neatness and instability metrics, and warnings. A second recognized sigil is preserved as an unsupported condition rather than silently ignored.

6. Spell compilation

The compiler validates the GlyphAST and creates SpellIR. It chooses the element, aggregates manifestations, combines directional influence, and calculates focus, spread, force, range, gravity, duration, quality, stability, and neatness. An open valid ring is prepared; a closed valid ring is active.

7. Canvas effect rendering

A second transparent canvas sits above the paper canvas. Fire, water, wind, earth, and light have separate particle renderers. They consume the same SpellIR fields, reset when the spell signature changes, and fade after the compiled duration.

Empty, prepared, active, and invalid states

State	Meaning	Next action
Empty	No ring has been detected.	Draw a large open circle.
Prepared	A valid sigil exists inside an open ring.	Finish signs, then seal the gap.
Active	The ring is closed and the spell is valid.	Observe or download the effect.
Invalid	A required part is missing or unsupported.	Use the result message to repair that part.

Privacy and technical limits

Ordinary drawing and recognition stay in the browser. The current site does not require an account or drawing upload. Refreshing the page clears the in-memory drawing unless you download a PNG first. Because recognition is template-based, it is not a general symbol recognizer and cannot recover stroke order from a raster image.

Why the tool uses two intermediate representations

Keeping recognition and behavior separate makes failure easier to explain. GlyphAST describes what the parser believes is on the page. SpellIR describes what a valid recognized structure should do. If the renderer received raw strokes directly, it would be difficult to distinguish a recognition error from a visual-effect error.

The separation also lets multiple renderers consume the same behavior. Element modules do not need to know how circle fitting or template matching works; they receive normalized force, spread, focus, direction, duration, scale, gravity, and manifestation values. Conversely, the recognizer does not need to contain particle code.

How quality, stability, and duration differ

Quality reflects the overall confidence and cleanliness of the recognized drawing. Stability accounts for unknown, contaminated, ambiguous, or messy candidates and ring neatness. Duration uses quality and neatness with a nonlinear curve, so a cleaner diagram generally remains visible longer. These are simulation variables, not official rankings or claims about an artist’s skill.

Performance and accessibility

The animation loop uses requestAnimationFrame and caps the particle budget. The paper and effect canvases have stable internal dimensions and scale to the available CSS width, while pointer coordinates are converted back into the internal coordinate system. Reduced-motion preferences disable decorative page transitions, although the core spell animation remains part of the requested simulator output.

Controls use buttons, labels, status text, and live result messages rather than relying on color alone. The drawing itself is inherently visual, but the element, effect, warnings, and numerical meters remain readable text outside the canvas.

How the Witch Hat Atelier spell simulator works in practice

How the Witch Hat Atelier spell simulator works is easiest to observe with a preset. Loading Fire Shoot supplies normal stroke objects rather than a precomputed result. The ring detector, candidate grouper, template matcher, GlyphAST builder, compiler, and renderer all process those strokes exactly as they process a freehand drawing.

How the Witch Hat Atelier spell simulator works also explains its repair messages. “No ring detected” belongs to geometry. “Missing primary sigil” belongs to recognition. “Multiple sigils detected” belongs to compiler validation. A prepared spell is valid but waiting for closure, while an active spell has passed those stages and received an activation time.

Another way to understand how the Witch Hat Atelier spell simulator works is to use Undo after activation. Removing the sealing stroke returns the diagram to an open boundary during the next computation. The element and signs can remain recognized, but particle emission stops because the compiled state is prepared instead of active.

This separation is why how the Witch Hat Atelier spell simulator works can be documented without hiding behind a remote service. The browser holds the strokes, templates, structured representations, and visual effects. Users can inspect advanced diagnostics, compare states, and see which stage rejected a drawing.

A final review of how the Witch Hat Atelier spell simulator works should compare the visible status with Advanced Diagnostics. That comparison shows why the system works predictably: the interface summarizes the same ring, glyph, warning, and SpellIR values that drive rendering.