aogl.cn — personal bookmarks for generative AI tools and LLM releases

← Back to home · Editorial originals

Monkey sprite head tracking — 120-frame sheet & peach cursor demo

sprite_hd_120 · angle calibration · embedded HTML · source MP4

· aogl.cn original

This monkey sprite head-tracking page documents a personal pipeline on aogl.cn: turn a short head-turn video into a sprite sheet, calibrate angle-to-frame mapping (not a naive angle/360*frames linear map), and ship a mouse-driven HTML demo with a custom peach cursor. Keywords that match real searches include sprite sheet head turn, CSS background-position animation, interactive character follow mouse, chroma key to WebP.

Pipeline in one sentence

Extract frames, build a contact / calibration sheet to read true facing directions, map compass angles to frame numbers, pack a 10x12 grid (120 frames) into sprite_hd_120.webp, and validate up / right / down / left / diagonals / center in the browser.

Angle-to-frame calibration contact sheet for monkey head-turn sprite
calibration_sheet.jpg: contact sheet used to build the angle-to-frame lookup.

Front reference frame

The neutral camera-facing still is exported as frame_front.webp for thumbnails and as a sanity check before packing the grid.

Monkey character front-facing reference frame
frame_front.webp: front pose reference.

Live demo: 120-frame HD + peach cursor

Move the mouse around the character: the viewer steps through 120 background positions on sprite_hd_120.webp (10 columns x 12 rows). A peach image follows the pointer with pointer-events: none so clicks still reach the page.

Embedded: original/monkey2/gemini-code-1778834915677.html uses sprite_hd_120.webp and cursor.png.

Sprite sheet assets

Three WebP masters document the iteration: standard density, HD, and the final 120-frame grid used in production.

Monkey head-turn sprite sheet standard resolution WebP Monkey head-turn sprite sheet HD WebP Monkey head-turn sprite sheet 120 frames 10 by 12 grid WebP

Source stills (turn_head_1-10)

Ten numbered PNGs sample the rotation arc before packing the full grid, useful for QA and for alt-text-rich galleries.

Head turn still 1 Head turn still 2 Head turn still 3 Head turn still 4 Head turn still 5 Head turn still 6 Head turn still 7 Head turn still 8 Head turn still 9 Head turn still 10

Source video (MP4)

Two exports document early and refined head-turn passes; chroma was keyed to transparency before sprite packing.

turn_head_v1.mp4
turn_head_v2.mp4

Generative style anchors

Two Gemini exports in original/monkey2/ sit beside the technical assets for social previews and image search, not replacements for the calibrated sprite.

Generative monkey character anchor lighting and costume Generative monkey character anchor alternate style pass

Offline tooling

Python helpers (gemini-code-1778834954429.py, gemini-code-1778835935559.py, gemini-code-1778835961926.py) and notes in txt.txt record the extraction and chroma rules (preserve subject, avoid eating white/grey). This article keeps the public-facing HTML, images, and video paths stable for SEO.