void
v3.0.1
Published
A toolkit for making generative art.
Downloads
76
Readme
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
, or1080p
, 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
- Classics
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:
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.