void

A toolkit for making generative art.

Introduction •
Examples •
Documentation

Void makes it easy to create and explore generative art. It gives you the workflows you know from modern graphics programs, paired with a simple, powerful library for building sketches with HTML's .

- Tweak variables. The traits of a sketch can be changed directly in the UI, so you can experiment quickly, and create a variety of different outputs.

- Export artwork. The output of a sketch can be exported to raster formats like PNG or JPG, as well as vector formats like SVG out of the box!

- Control randomness. Changing the random seed for a sketch allows you to reproduce existing outputs, or create entirely new outputs.

- Customize layout. Use common presets like Letter, A4, or 1080p, or define a custom size, add margins, change orientations, etc.

- Import dependencies. Sketches are just JavaScript (or TypeScript) files, so you can import useful helpers from npm packages or neighboring files as usual.

- Bundle efficiently. The Void library is designed to be completely treeshake-able, so it produces the absolute smallest bundle sizes when packaging up your code.

- Feel familiar. Void's UI is inspired by modern tools like Figma and Blender, its API is inspired by creative coding frameworks like P5.js and canvas-sketch.

$3

To get started, download the Void desktop app:

Install the void package:

``bash
npm install --save void
`

Create a new sketch file:

`js
import { Void } from 'void'

export default function () {
let { width, height } = Void.settings([300, 300, 'px'])
let radius = Void.int('radius', 10, 150)
let ctx = Void.layer()
ctx.beginPath()
ctx.arc(width / 2, height / 2, radius, 0, Math.PI * 2, false)
ctx.fill()
}
`

Then open the sketch file with the Void app:

!A screenshot of the basic sketch in the Void app.

If you see a black circle on the screen, congrats!

The Radius trait has a randomly generated value. You can change it in the sidebar and the sketch will update in real time. This is a simple sketch that draws just one shape, but you can do a lot more…

$3

Void is designed to make it easy to quickly iterate on sketches, so you can explore new ideas quickly. To get a sense for what's possible, here are some examples:

- Basics
- Introduction
- Layers
- Noise
- Animation
- Pointer
- Classics
- Bill Kolomyjec — original
- Ellsworth Kelly — original
- François Morellet — original
- Georg Nees — original
- Vera Molnár — original

Download and open any example file in the Void desktop app to see their output.

$3

Void's API is designed to be extremely simple to use. It gives you a handful of tools that are useful when making generative art, and it delegates the rendering itself to the HTML element.

It's built as a series of helper functions:

- Canvas
- Void.draw()
- Void.layer()
- Void.settings()
- Traits
- Void.bool()
- Void.float()
- Void.int()
- Void.pick()
- Interaction
- Void.event()
- Void.keyboard()
- Void.pointer()
- Utils
- Void.convert()
- Void.fork()
- Void.random()

$3

Void is open-source and MIT-licensed. If you run into issues or think of improvements, all contributions are very welcome! Feel free to open an issue or submit a pull request.

$3

Thanks to Eric Johnson for letting us use the void` package name on NPM! Thanks to Lauren Lee McCarthy and Matt DesLauriers for creating P5.js and canvas-sketch which served as inspiration for the API.