kit is a collection of tools for creative programming. This project is very much a work in progress, but has been used in production applications.

Tools

math

Tools for working with numbers, geometry, matrices and vertices.

state

Simple, powerful reactive programming primitives that are portable between frameworks.

color

Utilities for working with color, wrapping some functionality from @texel/color

infinity

Minimal primitives for building infinity canvas and map-type interactions.

tools

General purpose Typescript utilities, mainly used internally within this library.

dom

A collection of useful tools for DOM-based interaction, like file handling, clipboard, pointer events.

Notes

This codebase is available as @figureland/kit, distributed on the NPM and Github package registries. It will eventually be available on JSR as well.

bun install @figureland/kit

This project follows the convention of Deno, JSR, and others in that it doesn't use a build step. The library is distributed as the original Typescript source files, meaning you'll need to have a project that is already using TS.

Development guide

Setup

This codebase is based on bun. Bun is a amazing new Javascript runtime that, to some extent, replaces node.

Consumers of this codebase don't need to have bun installed to use the library.

1. If you don't already have bun installed on your machine, follow these instructions need to install bun.

2. Following that you can install the codebase dependencies.

   bun install

Test

bun test

Thoughts on creative programming environments

We live in an amazing era of tools for the web. There are many incredible projects like p5.js, Pts or three.js that provide an amazing palette for creative coding. However, they all lean towards the rendering and graphical parts of projects. That makes a lot of sense, because they are often used for things like data visualisation, animations or prototyping.

It's easy to overlook that they are not just powerful tools but have also had a huge amount of thought and care put into their learning experience. The quality of their learning resources and the openness of their communities is why these projects continue to thrive today.

There's a bit of a gap that emerges when you want to make more complete applications, or do more sophisticated things with data. Modern Javascript development is well equipped with great standard libraries, like Deno's std, but there is still a question of environment. Where and how do I run this? Does it need a server? How do I go from prototype to product?

Normally, that's where tools like React and next.js come in. For creative and design processes, iteration is key, and often you want to be able to test and store lots of different options. React is a wonderful tool and has established a whole load of conventions, many good and some not so good. But it still imposes a 'React' way of thinking.

You could repurpose front-end web environments like Storybook or Histoire, but they are so focussed on isolated front-end components and design systems, which are all together a different stage of software production.

Alternative you could notebooks like Jupyter or Observable's Framework. Framework feels like the best starting point here, because it hints at a blend documentation, narrative and iteration as well as all the best features of the modern web ecosystem.