Live Code Graphics via GLSL Fragment Shaders
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



Fragment is an open source design tool that utilizes GLSL and live coding to allow anyone to create spectacular imagery with math(s)!

Similar to,, and Fragment is a constrained design tool for content creation within the boundaries of two triangles. If none of that made any sense, please visit

Unlike shadertoy, Fragment is a native macOS app, that allows you to edit your GLSL code with which ever text editor you prefer. Fragment allows you to render out high resolution prints, and png sequences (with transparency if you want it)! Also, you can VJ with Fragment by sending it OSC :)

Fragment allows you to create playable real-time visual instruments. It does this by creating UI elements (sliders, buttons, etc) from comments in your glsl code, i.e. uniform float foobar; //slider:0.0,1.0,0.5.

More info here:


Check out some things made with Fragment:

Build Fragment:

1. Clone Cinder

git clone --recursive Cinder

2. Clone Fragment:

cd Cinder/samples
mkdir _reza
cd _reza
git clone

3. Clone Dependencies

cd ../../blocks/
git clone SaveLoadCamera
git clone EasyCamera
git clone MovieSaver
git clone SequenceSaver
git clone LiveCode
git clone ImageSaver
git clone GlslParams
git clone UI
git clone Tiler
git clone AppUI
git clone AppPaths
git clone Watchdog

4. Build Cinder

cd ../proj/xcode/ && ./

5. Open Fragment Xcode project

cd ../samples/_reza/Fragment/xcode
open Fragment.xcodeproj/

6. Run

In Xcode, go to the Product Menu and then Run or press Apple + R

Using Fragment:

  1. Arrange Windows (Apple + w)
  2. Set your code editor (Click SET EDITOR button) & navigate to your favorite text editor app
  3. Open the editor (Click OPEN EDITOR button or Apple + Shift + E). This will open the folder containing the code you should edit (shader.frag)
  4. Edit the code and save, Fragment will recompile the shaders and show you hottness.
  5. Save your live code session by clicking SAVE AS.
  6. Load a live code session by clicking LOAD.
  7. Try rendering a high res print (EXPORTER > SAVE IMAGE AS)
  8. Try rendering a movie (EXPORTER > RENDER): Select MOVIE Option, unselect PNG and click RENDER
  9. Change the total number of frames for your movie (this effects the iAnimationTime, which goes from 0 -> 1). The number dialer for this is next to EXPORTER > PNG.
  10. Try rendering a sequence of pngs (EXPORTER > RENDER) Select PNG Option, unselect MOVIE and click RENDER.

Improving Fragment:

  1. Make this readme better and submit a pull request!
  2. Point out things I'm doing wrong or could be better.
  3. Submit an example.
  4. Refactor something to make it easier to understand.
  5. Share Fragment with your friends.