Turn a looping character into usable frame assets
Which parts of the preview are captured by each export?
Use the presets as starting points, then compare silhouettes, expressions and motion at fixed phases. This tool draws procedural Canvas shapes; it does not generate video, simulate a physical material or establish a successful licensed character brand.
The sticker and strip redraw chosen phases without mouse spring deformation. The sticker always includes a white outline, while the strip always omits it, regardless of the preview toggle. JSON records selected traits and motion settings; it is neither a JSON Schema nor a full playback or spring-state snapshot.
Try a worked example
At speed 1.0, the phase advances by one cycle per accumulated animation second. Frame F3 selects phase 2/8=0.25. For the hop cycle at elasticity 0.7, sin(2*pi*0.25)=1, so the vertical offset is -24.5 canvas pixels, scaleY=1.154 and scaleX=1/sqrt(1.154), about0.931. The sticker redraws this phase at1024x1024. The strip samples phases0/8 through7/8 into eight200x200 cells, giving1600x200 pixels. It is a static PNG; an importing player must supply timing.
Read motion as an authored drawing rule
Elasticity controls amplitudes in the cycle formulas. The separate drag spring uses fixed stiffness0.12 and damping0.82 per draw step; it is not a measured material model and its response depends on rendering cadence. Pause stops phase advancement, while the drawing loop and spring settling continue. Step advances one of eight sample phases and wraps afterF8.
The shape deformation is visual, not a volume-conserving physical calculation. For example, the hop expansion uses scaleX=1/sqrt(scaleY), so its2D scale-area product is sqrt(scaleY), not1. Wiggle uses reciprocal axis scales, but that alone does not validate a3D volume or material response.
Check a bitmap before importing or printing it
Canvas exports serialize a bitmap. The HTML standard documents toBlob and PNG encoding; it does not promise compatibility with a specific game engine, messaging platform or print service. Inspect transparency, crop, frame dimensions and slogan readability in the downloaded file. A larger bitmap is not an automatic guarantee of print quality. The original200-pixel strip cells place the slogan near or below the bottom edge, so lettering can be clipped. Clear the slogan before exporting a strip and check all eight cells; the1024-pixel sticker uses different geometry and fits the tested short slogan. HTML standard: Canvas bitmap export
Frame timing is not embedded in the stripPNG. For eight evenly spaced frames at speed1.0, a one-second loop would assign125milliseconds per frame; at2.0 it would assign62.5milliseconds. Exported cells are rebuilt independently of the current scrubbed phase, playback speed or temporary drag offsets.
Keep motion control and branding claims separate
W3C explains why moving content may need a pause, stop or hide mechanism. Here the Pause button freezes the cycle but does not stop spring settling; frame buttons also pause phase advancement. This distinction matters when inspecting a pose or assessing motion comfort. This lesson does not certify full accessibility compliance. W3C: pause, stop and hide moving content
Compare a silhouette at small size and a short slogan against your intended background. The five presets and remix choices are design fixtures, not evidence of audience empathy, commercial demand, trademark clearance or permission to reproduce another brand. Reset selects the default look and cycle but keeps speed, playback, phase, outline toggle and temporary spring state. It is not a full reset or undo history.
Sources and further reading