Fragment

!Screen capture of Fragment, splitted in two columns, the left one has a centered canvas displaying squares arranged in a grid, the right column contains various controls for colors, variables and exports

fragment provides a simple API to work with .

Features

- Multiple rendering modes: Canvas 2D, p5.js, three.js, WebGL fragment shaders
- Built-in GUI from sketch files
- Export to images (.png, .webm, .jpg) or videos (.mp4, .webm, .gif) on the fly
- Hot shader reloading & glslify support
- Interactive sketches using _triggers_
- Static build for production deployment
- TypeScript support

Installation

$3

``bash
npx fragment-tools sketch.js --new
`

$3

`bash
npm install fragment-tools --global
`

You should now be able to run fragment from your command line.

`bash
fragment sketch.js --new
`

$3

`bash
npm install fragment-tools
npx fragment sketch.js --new
`

Usage

`bash


Create a new directory for your sketches

`js
export let props = {
radius: {
value: 10,
params: {
min: 4,
max: 30,
},
},
};

export let update = ({ context, width, height }) => {
// draw background
context.fillStyle = '#000000';
context.fillRect(0, 0, width, height);

// draw circle
const radius = props.radius.value;

context.fillStyle = '#0000ff';
context.beginPath();
context.arc(width 0.5, height 0.5, radius, 0, 2 * Math.PI, false);
context.fill();
};
`

Learn how to write your own sketch by following the Getting started guide, reading the API docs or the examples.

Contributing

If you find issues, please file one with details on how to reproduce it.

Feel free to reach out on Twitter if you want to discuss the project.

Running it locally

`bash


Clone or fork the project

> The --dev flag only enables Vite info logLevel, helpful for development. Otherwise it will work the same as when you're running from the npm package.

Alternatively, you can tell npm to point the fragment command to the newly cloned folder.

`


at the root of the repo

`bash
fragment sketch.js
`

If that's not the case, try to uninstall fragment-tools globally first, make sure the fragment` command is not found anymore, then retry to link the project from the root of the repo.

Credits

- Vite
- Svelte
- The font used for display is the JetBrains Mono.
- Icons are from Iconic
- A special thanks to Matt Deslauriers for canvas-sketch and his multiple projects around generative-art tools.

License

See LICENSE.md for details.