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

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

Introduction

To get started, download the Void desktop app:

Install the void package:

npm install --save void

Create a new sketch file:

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:

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…

Examples

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.

Documentation

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 <canvas> 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()

License

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.

Thanks

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.