{"id":16368554,"url":"https://github.com/ianstormtaylor/void","last_synced_at":"2025-03-16T15:32:57.803Z","repository":{"id":66056747,"uuid":"537272668","full_name":"ianstormtaylor/void","owner":"ianstormtaylor","description":"A toolkit for making generative art.","archived":false,"fork":false,"pushed_at":"2022-12-01T17:11:07.000Z","size":2058,"stargazers_count":61,"open_issues_count":34,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-04-28T09:43:17.841Z","etag":null,"topics":["art","canvas","editor","generative","sketch","studio","svg"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ianstormtaylor.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"license.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2022-09-16T02:07:24.000Z","updated_at":"2024-04-24T15:30:05.000Z","dependencies_parsed_at":"2023-02-21T08:31:19.804Z","dependency_job_id":null,"html_url":"https://github.com/ianstormtaylor/void","commit_stats":{"total_commits":65,"total_committers":1,"mean_commits":65.0,"dds":0.0,"last_synced_commit":"6a8ea52664af9b97a70e377355d80077c95bb74e"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ianstormtaylor%2Fvoid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ianstormtaylor%2Fvoid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ianstormtaylor%2Fvoid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ianstormtaylor%2Fvoid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ianstormtaylor","download_url":"https://codeload.github.com/ianstormtaylor/void/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221665575,"owners_count":16860282,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["art","canvas","editor","generative","sketch","studio","svg"],"created_at":"2024-10-11T02:53:04.885Z","updated_at":"2024-10-27T10:51:29.001Z","avatar_url":"https://github.com/ianstormtaylor.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\n  \u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"./docs/images/banner-dark.png\"\u003e\n    \u003cimg alt=\"Void\" src=\"./docs/images/banner-light.png\"\u003e\n  \u003c/picture\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  A toolkit for making generative art.\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#introduction\"\u003eIntroduction\u003c/a\u003e •\n  \u003ca href=\"#examples\"\u003eExamples\u003c/a\u003e •\n  \u003ca href=\"#documentation\"\u003eDocumentation\u003c/a\u003e\n\u003c/p\u003e\n\u003cbr/\u003e\n\nVoid 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 `\u003ccanvas\u003e`](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API).\n\n- **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.\n\n- **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!\n\n- **Control randomness.** Changing the random seed for a sketch allows you to reproduce existing outputs, or create entirely new outputs.\n\n- **Customize layout.** Use common presets like `Letter`, `A4`, or `1080p`, or define a custom size, add margins, change orientations, etc.\n\n- **Import dependencies.** Sketches are just JavaScript (or TypeScript) files, so you can import useful helpers from [npm](https://www.npmjs.com/) packages or neighboring files as usual.\n\n- **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.\n\n- **Feel familiar.** Void's UI is inspired by modern tools like [Figma](https://www.figma.com/) and [Blender](https://www.blender.org/), its API is inspired by creative coding frameworks like [P5.js](https://p5js.org/) and [canvas-sketch](https://github.com/mattdesl/canvas-sketch).\n\n\u003cbr/\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./docs/images/recording.gif\" /\u003e\n\u003c/p\u003e\n\u003cbr/\u003e\n\n### Introduction\n\nTo get started, download the Void desktop app:\n\n\u003ca href=\"https://github.com/ianstormtaylor/void/releases/latest/download/Void-macOS-arm64.dmg\"\u003e\n  \u003cimg width=\"248\" height=\"44\" alt=\"Download for Mac (Apple Silicon)\" src=\"./docs/images/download-mac-silicon.png\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://github.com/ianstormtaylor/void/releases/latest/download/Void-macOS-x64.dmg\"\u003e\n  \u003cimg width=\"182\" height=\"44\" alt=\"Download for Mac (Intel)\" src=\"./docs/images/download-mac-intel.png\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://github.com/ianstormtaylor/void/releases/latest/download/Void-Windows-Setup-x64.exe\"\u003e\n  \u003cimg width=\"133\" height=\"44\" alt=\"Download for Windows\" src=\"./docs/images/download-windows.png\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://github.com/ianstormtaylor/void/releases/latest/download/Void-Linux-x86_64.AppImage\"\u003e\n  \u003cimg width=\"133\" height=\"44\" alt=\"Download for Linux\" src=\"./docs/images/download-linux.png\" /\u003e\n\u003c/a\u003e\n\u003cbr/\u003e\n\u003cbr/\u003e\n\nInstall the `void` package:\n\n```bash\nnpm install --save void\n```\n\nCreate a new sketch file:\n\n```js\nimport { Void } from 'void'\n\nexport default function () {\n  let { width, height } = Void.settings([300, 300, 'px'])\n  let radius = Void.int('radius', 10, 150)\n  let ctx = Void.layer()\n  ctx.beginPath()\n  ctx.arc(width / 2, height / 2, radius, 0, Math.PI * 2, false)\n  ctx.fill()\n}\n```\n\nThen open the sketch file with the Void app:\n\n![A screenshot of the basic sketch in the Void app.](./docs/images/introduction.png)\n\nIf you see a black circle on the screen, congrats!\n\nThe \u003ckbd\u003eRadius\u003c/kbd\u003e 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…\n\n\u003cbr/\u003e\n\n### Examples\n\nVoid 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:\n\n- **Basics**\n  - [Introduction](./examples/basics/introduction.js)\n  - [Layers](./examples/basics/layers.js)\n  - [Noise](./examples/basics/noise.js)\n  - [Animation](./examples/basics/animation.js)\n  - [Pointer](./examples/basics/pointer.js)\n- **Classics**\n  - [Bill Kolomyjec](./examples/classics/bill-kolomyjec.js) — [original](http://recodeproject.com/artwork/v2n3random-squares)\n  - [Ellsworth Kelly](./examples/classics/ellsworth-kelly.js) — [original](https://www.moma.org/collection/works/35484)\n  - [François Morellet](./examples/classics/francois-morellet.js) — [original](https://www.wikiart.org/en/francois-morellet/tirets-neon-0-90-avec-4-rythmes-interferents-191)\n  - [Georg Nees](./examples/classics/georg-nees.js) — [original](https://collections.vam.ac.uk/item/O221321/schotter-print-nees-georg/)\n  - [Vera Molnár](./examples/classics/vera-molnar.js) — [original](https://pratiques-picturales.net/article63.html)\n\nDownload and open any example file in the Void desktop app to see their output.\n\n\u003cbr/\u003e\n\n### Documentation\n\nVoid'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 [`\u003ccanvas\u003e`](https://www.google.com/search?client=firefox-b-1-d\u0026q=mdn+canvas) element.\n\nIt's built as a series of helper functions:\n\n- [**Canvas**](./docs/void.md#canvas)\n  - [`Void.draw()`](./docs/void.md#voiddraw)\n  - [`Void.layer()`](./docs/void.md#voidlayer)\n  - [`Void.settings()`](./docs/void.md#voidsettings)\n- [**Traits**](./docs/void.md#traits)\n  - [`Void.bool()`](./docs/void.md#voidbool)\n  - [`Void.float()`](./docs/void.md#voidfloat)\n  - [`Void.int()`](./docs/void.md#voidint)\n  - [`Void.pick()`](./docs/void.md#voidpick)\n- [**Interaction**](./docs/void.md#interaction)\n  - [`Void.event()`](./docs/void.md#voidevent)\n  - [`Void.keyboard()`](./docs/void.md#voidkeyboard)\n  - [`Void.pointer()`](./docs/void.md#voidpointer)\n- [**Utils**](./docs/void.md#utils)\n  - [`Void.convert()`](./docs/void.md#voidconvert)\n  - [`Void.fork()`](./docs/void.md#voidfork)\n  - [`Void.random()`](./docs/void.md#voidrandom)\n\n\u003cbr/\u003e\n\n### License\n\nVoid is open-source and [MIT-licensed](./License.md). If you run into issues or think of improvements, all contributions are very welcome! Feel free to [open an issue](https://github.com/ianstormtaylor/void/issues) or [submit a pull request](https://github.com/ianstormtaylor/void/pulls).\n\n\u003cbr/\u003e\n\n### Thanks\n\nThanks to [Eric Johnson](https://github.com/edj-boston) for letting us use the `void` package name on NPM! Thanks to [Lauren Lee McCarthy](https://github.com/lmccart) and [Matt DesLauriers](https://github.com/mattdesl) for creating P5.js and canvas-sketch which served as inspiration for the API.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fianstormtaylor%2Fvoid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fianstormtaylor%2Fvoid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fianstormtaylor%2Fvoid/lists"}