Skip to content
Search Create account

VJ UNION

VJ UNION is a community of 1,271 amazing users

Through ❤️ And Creativity For Us All

Create account Log in
Cover image for fragment - a web development environment for creative coding
vdmo
vdmo

Posted on

fragment - a web development environment for creative coding

#fragment #coding #web

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

With npx 

npx fragment-tools sketch.js --new
Enter fullscreen mode Exit fullscreen mode

Installing globally with --global 

npm install fragment-tools --global
Enter fullscreen mode Exit fullscreen mode

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

fragment sketch.js --new
Enter fullscreen mode Exit fullscreen mode

Installing locally

npm install fragment-tools
npx fragment sketch.js --new
Enter fullscreen mode Exit fullscreen mode

Usage

# create a new directory for your sketches
mkdir sketches

# move into that folder
cd sketches

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

Learn more about the available flag options in the CLI docs.

Example

This…

View on GitHub

Discussion (0)

Read next

calebhmeyer profile image

Midi Control Change is like using Chunky peanut butter as lube.

calebhmeyer -

calebhmeyer profile image

Free VJ Content: Stage Lighting

calebhmeyer -

zsabbir profile image

Rock VJ Jam | Resolume Arena | Madmapper | Chaser

Zunayed Sabbir Ahmed -

mowglitv profile image

Rotorelief for Resolume Walk Through

Mowgli TV -