MAGNOGEN

My Socials

Anim

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
});

Colour

Makes colour manipulation a breeze, provides support for RGBA, HSLA, and CMYA formats.
let col = Colour('rgb', 255, 0, 0);
colour.toHex(); // "#ff0000ff"

Dom

Makes DOM manipulation tasks a piece of cake, offering shorthand methods for querying elements and managing events.
$('#myElem').on('click', (event) => {
  console.log('Element clicked!');
});

Iter

Traverse 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);
}

Limit

Ensure 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...

Meal

Feast on strings, perfect for parsing and syntax highlighting tasks.
let food = Meal('Hello, World!');
food.eat('Hello'); // "Hello"
food.first(2); // ", "

Pen

A variety of pen operations for drawing. Inspired by Scratch, of all things.
let pen = Pen(context);
pen.down();
pen.goto(50, 50);
pen.up();

Random

Generates 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);

Scene

A 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();

Shader

This 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,
  }
});

Vec

Manipulate 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);