Repository navigation
Releases: catmaitachi/kittens
Release list
v2.0.0
This release changes how a coat is described. In 1.x a coat was a handful of flat colors plus a
pattern rule that only the built-in coats could use. In 2.0 a coat is a grid of pixels, like a
Minecraft skin: every fur pixel of every pose reads its color from one cell of that grid, so you
can paint your own cat and hand it to the library as plain data. The landing page now opens with
a customizer that does exactly that. Cats also got a patience bar, and a cat shaken too hard
stays grumpy for a while.
Added
- Coats are a 35×27 grid of characters (
skin) plus acolorsmap from each character to a
#rrggbbcolor. The head and the tail have one area each and look the same in every pose.
The body, paws included, has its own area for each kind of pose (sitting, standing and
walking, curled up, stretching, held), mapped pixel for pixel, so painting the sitting cat
leaves the walking one alone. A cell holds the exact color you see, shadows included. - The outline, the soft outline, the nose and each eye (
eyes.left,eyes.right) are separate
colors on the coat, so a cat can have one blue eye and one green. KittenCoatis the interface for a coat.COATSholds the five built-in ones,
registerCoat()makes yours available by name (coat="my-cat"), andresolveCoat()fills in
whatever a partial coat leaves out, usingcalico.- For editors and custom renderers:
skinCellAt(frame, x, y)says which grid cell a pixel of a
pose uses,eyeAt(frame, x, y)says whether a pixel is the left or the right eye,
renderFrame(coat, frame)paints a single pose, andcoatToCode(coat)returns a
registerCoat({...})call ready to paste.SKIN_WandSKIN_Hgive the grid size. - Patience, a bar from 0 to 100. Holding a cat costs nothing. Each hard shake (a sharp change of
direction at speed) takes 35, and the next shake only counts a second later, so it takes some
insistence. At zero the cat wriggles free and gets grumpy: a patience bar shows up over its
head, it huffs every so often, won't be picked up and runs from the cursor. The bar refills in
about 12 seconds; once it's full the cat calms down and the bar goes away. Read it with the
patienceandangrygetters, or listen for theangryandcalmevents (kitten:angryand
kitten:calmon the layer). npm run checkmakes sure every fur pixel of every frame lands on a valid cell and that each
built-in coat has a color there.
Changed
coattakes a coat name or aKittenCoatobject (a partial one is fine).- The orange, siamese and gray coats were redrawn on the grid. Orange has even stripes with a
white chest and white socks, the siamese has a cream forehead and a dark mask centered on the
muzzle, and gray is one tone with soft stripes. Calico and black look the same as before. - The landing page opens with the coat customizer. Pick a coat and a pose, click the pencil to
paint any pixel (with an eyedropper, recent colors and undo), then copy the coat code or a
prompt that asks your AI agent to adopt that exact cat. The other demos were rearranged: cats
exploring a living room, cats you call with a double click on a notebook page, and a box full
of cats.
Removed
PALETTES,Palette,PaletteKeyandPaletteName. See "Migrating from 1.x" below.
Migrating from 1.x
A 1.x coat was a Palette: flat colors for eight regions (k outline, s soft outline, w
fur, g fur shadow, d dark patch, o light patch, a eye, p nose), plus an optional
pattern function baked into PALETTES/PATTERNS that only the built-in coats could use. A
2.0 coat is a KittenCoat: the pattern lives directly in the skin grid, so there's no
separate pattern function, and the outline, soft outline, nose and each eye are colors on the
coat object itself rather than palette entries.
If you passed a coat name (coat: 'siamese', coat="black"), nothing changes.
If you passed a custom palette object, rebuild it as a KittenCoat. There's no automatic
converter, since a flat palette has no patches or stripes to place on the grid. The fastest
path is to start from a built-in coat and edit its skin and colors:
// 1.x
const cat = new Kitten(el, { coat: { w: '#e8e8ea', a: '#d8b25a', p: '#e59aa8' } });
// 2.0
import { COATS } from '@catmaitachi/kittens';
const cat = new Kitten(el, {
coat: { ...COATS.calico, name: 'my-coat', colors: { ...COATS.calico.colors, a: '#e8e8ea' } },
});To paint a coat from scratch instead of adapting one, use the
customizer on the landing page and copy the registerCoat({...})
call it generates.
v1.0.2
v1.0.1
v1.0.0
Full Changelog: https://github.com/catmaitachi/kittens/commits/v1.0.0