VJ UNION

Cover image for fragment - 
a web development environment for creative coding
vdmo
vdmo

Posted on

fragment - a web development environment for creative coding

fragment provides a simple API to work with .

fragment

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

Installation

npm install fragment-tools -g
You should now be able to run fragment from your command line.

Read More

GitHub logo raphaelameaume / fragment

[alpha] A web development environment for creative coding

Fragment

A web development environment for creative coding

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 <canvas>.

Features

  • Multiple rendering modes: Canvas 2D, p5.js, three.js, WebGL fragment shaders
  • Built-in GUI from sketch files
  • Export <canvas> 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

Installation

npm install fragment-tools -g

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

Usage

# create a new directory for your sketches
mkdir sketches
# move into that folder
cd sketches

# create a sketch from a template
fragment ./sketch.js --new --template=2d

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…

Discussion (0)