Animate like a pro. A range of features from frame control to easing functions to tweens.
let opts = Tweenify(obj, 'prop', {
start: 0,
end: 100,
length: '1s',
ease: Ease.Linear
});
Open in BrowserRead and write binary data with a tiny buffer reader/writer pair.
const writer = BinaryWriter();
writer.uint16(513);
const reader = BinaryReader(writer.toBuffer());
reader.uint16(); // 513
Open in BrowserA 2D camera helper for position, zoom, rotation, and world-to-screen projection.
const cam = Camera2D(canvas.width, canvas.height);
cam.position = { x: 100, y: 50 };
cam.scale = 2;
const screen = cam.at({ x: 120, y: 60 });
Open in BrowserMakes colour manipulation a breeze, provides support for RGBA, HSLA, and CMYA formats.
let col = Colour('rgb', 255, 0, 0);
col.toHex(); // "#ff0000ff"
Open in BrowserRender nicely formatted object trees directly in the DOM for quick inspection.
const debug = Debugger(document.body);
debug({ score: 42, alive: true });
Open in BrowserOffers shorthand methods for querying elements and managing events.
$('#myElem').on('click', (event) => {
console.log('Element clicked!');
});
Open in BrowserTrack realtime frame statistics including min, max, and average FPS.
const fps = FPS();
fps.submit(deltaTime);
fps.average; // current average FPS
Open in BrowserBuild compact finite state machines with event-based transition handlers.
const machine = FSM({
'idle:start': () => 'running',
'running:stop': () => 'idle',
});
machine.call('start');
Open in BrowserWork with raw RGBA image buffers, pixels, regions, chunks, and tiles.
const img = Img(64, 64);
for (const px of img.pixels()) {
px.rgb = 32;
}
img.drawTo(canvas);
Open in BrowserTraverse through multi-dimensional spaces with ease using this library, designed to simplify the process of iterating over complex structures.
let mat = Matrix({x: 3, y: 3}, true);
for (let point of mat) {
console.log(point);
}
Open in BrowserDefine tokenizers and parser combinators for lightweight language tooling.
const lexer = Lexer();
lexer.define('word', /[A-Za-z]+/);
lexer.define('space', /\s+/, { ignore: true });
const tokens = lexer.tokenize('hello world');
Open in BrowserEnsure your numbers stay within the desired bounds, Clamp, Wrap, Fold, and Sigmoid operations.
let limiter = Limit(0, 10);
limiter.clamp(11); // 10
limiter.wrap(11); // 1
limiter.fold(11); // 9
limiter.sigmoid(15); // 9.168...
Open in BrowserFeast on strings, perfect for parsing and syntax highlighting tasks.
let food = Meal('Hello, World!');
food.eat('Hello'); // "Hello"
food.first(2); // ", "
Open in BrowserA variety of pen operations for drawing. Inspired by Scratch, of all things.
let pen = Pen(context);
pen.down();
pen.goto(50, 50);
pen.up();
Open in BrowserChain fluent math operations with a tiny immutable pipeline object.
const value = Pipe(3)
.mul(4)
.add(2)
.sqrt()
.value;
Open in BrowserPrint styled, escaped, and indented text into DOM elements.
const out = Pretty($('#log'));
out.println('Hello');
out.indent();
out.println('Indented');
Open in BrowserGenerates random numbers and performs random operations, also with seeded Mulberry RNG.
let num = rand(1, 10);
let arr = ['a', 'b', 'c'];
let choice = choose(arr);
Open in BrowserA library for creating and managing scenes in canvas-based animations. Allows you to generate frames and upload them to a server.
Scene(async function* (time) {
while (true) {
const hue = 360*time.getNow()/10;
context.fillStyle = `hsl(${hue}deg, 10%, 14%)`;
context.fillRect(0, 0, 1920, 1080);
yield canvas;
}
}, {
title: 'example',
width: 1920,
height: 1080,
duration: 10,
fps: 30,
}).render();
Open in BrowserDraw smooth capsule segments between circles for joints, trails, and blobs.
drawCapsule(ctx,
100, 100, 20,
200, 120, 30
);
Open in BrowserThis was mostly just a project to see if I could get the hang of Web Workers. turned out pretty good though.
const shader = Shader(canvas, 4);
shader.shade((width, height) => (pos) => {
return {
r: pos.x/width*255,
g: pos.y/height*255,
b: 0,
a: 255,
}
});
Open in BrowserTransform polygon vertex sets with translation, rotation, scale, and bounds.
const tri = Shape([
{ x: 0, y: 0 },
{ x: 40, y: 0 },
{ x: 20, y: 30 },
]);
tri.rotation = Math.PI / 4;
Open in BrowserApply spring-order smoothing to values and object properties.
const update = Sorder(player, 'x', {
frequency: 2, springiness: 1, response: 1,
});
player.x = 100;
update(1 / 60);
Open in BrowserGenerate, play, and export procedural PCM audio in the browser.
const snd = Sound({ duration: 1 });
snd.data[0][0] = 1;
snd.play();
Open in BrowserA compact utility pack with DOM helpers, random tools, and handy math functions.
const nums = [1, 2, 3, 4];
shuffle(nums);
const id = hash('hello');
Open in BrowserManipulate 2D and 3D vectors, offers a range of operations for vector arithmetic.
const v1 = vec2(1, 2);
const v2 = vec2(3, 4);
const sum = v1.add(v2);
Open in Browser