A web development environment for creative coding
npm install fragment-toolsfragment provides a simple API to work with .
- 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
``bash`
npx fragment-tools sketch.js --new
`bash`
npm install fragment-tools --global
You should now be able to run fragment from your command line.
`bash`
fragment sketch.js --new
`bash`
npm install fragment-tools
npx fragment sketch.js --new
`bashCreate a new directory for your sketches
mkdir sketches
Learn more about the available flag options in the CLI docs.
Example
This is an example of a sketch drawing a blue circle on a black background with a custom control for the radius of the circle.
`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
git clone https://github.com/raphaelameaume/fragment.gitMove to the root of the repository
cd fragmentRun the command line locally
node ./bin/index.js examples/shape-2d.js --devor from your sketch folder
node [path-to-root]/bin/index.js sketch.js --dev
`> 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
npm link
`You should be able the command as before, only this time it will point to the repository instead of the globally installed package.
`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.- 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.
See LICENSE.md for details.