overview
What is modfield.js?
modfield.js is a small, expressive library for creating two-dimensional patterns with local spatial similarity. It combines distance fields, modulo operations, and grouping strategies to produce a wide variety of interesting outputs for creative coding applications.
As an alternative to noise
I created modfield.js as an alternative to noise-based composition in my generative art (read below). While it sometimes lacks the smooth consistency of noise at any position in space, it offers unique compositional possibilities, especially over a limited space like a canvas. I've attempted to make it as easy as possible to use modfield.js as a drop-in replacement for 2D noise in creative coding projects; anywhere you'd sample noise in two dimensions, you can instead sample a modfield group.
Background
I, Sam Webster, created modfield.js as a tool for my generative art, which I produce under the artist alias ten twentythree. I felt limited by my reliance on noise for random spatial variation and wanted a way to create unique patterns with local similarity. Though I'm sure I'm not the first person to do this, I independently stumbled upon the idea of using modulo operations on distance fields during Genuary 2025. I applied some variations on this technique in my day 14, 15, 19, 27, and 29 projects. Safe to say I was enjoying using it!
In early 2026, I was reminded of this technique and wanted to create something more fleshed out than the quick versions used in the Genuary sketches. The modfield.js library was created using code from a generative art project I am currently working on. I added more distance functions, strategies for modulating distance values, and field grouping to create a useful, versatile creative coding library.
Acknowledgments
This library was created with reference to Andrew Walpole's guide to building JavaScript libraries with Vite.
The demo and documentation visualizations use the Rampensau library for nice color generation.