Skip to content

A toolkit for making generative art.

License

Notifications You must be signed in to change notification settings

ianstormtaylor/void

Repository files navigation

Void

A toolkit for making generative art.

IntroductionExamplesDocumentation


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:

Download for Mac (Apple Silicon) Download for Mac (Intel) Download for Windows Download for Linux

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:

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…


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:

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.