Nigerian Prince Meme

    void
    TypeScript icon, indicating that this package has built-in type declarations

    3.0.1 • Public • Published

    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.

    Dependents (0)

    Install

    npm i void

    DownloadsWeekly Downloads

    6

    Version

    3.0.1

    License

    MIT

    Unpacked Size

    607 kB

    Total Files

    24

    Last publish

    Collaborators

    • ianstormtaylor
    • edjboston