This tutorial will go through the steps required to take code from the Heroku GLSL sandbox website and get it working in Quartz Composer and VDMX.

http://glsl.heroku.com/

1. Go to http://glsl.heroku.com/ and select a shader you wish to convert.

For this tutorial im going to use http://glsl.heroku.com/e#5916.0

2. Open Quartz Composer with a blank patch then add the following patches.

Clear
Sprite
GLSL Shader

3. Cut (cmd + X) the Sprite then double click on the GLSL Shader and paste the Sprite inside.
Resize the sprite to Width 2 Height 1.2
Click Edit Parent in the viewer to go back up a level.

4. Go to the page of your selected shader on glsl.Heroku.com and copy all the code.

You will see the code here has notes which help explain each function. This is going to make it easier for us to create inputs for Quartz Composer

#ifdef GL_ES
precision mediump float;
#endif

}

5. Go back to Quartz Composer click on the GLSL Shader and hit CMD + 2
This will open the settings window of the shader.

6. Click on the Fragment Shader tab and copy your code from Heroku over the existing code.

7. Notice how the shader already has some inputs available on the GLSL patch now we have pasted some new code.

Resolution (X)
Resolution (Y)
Mouse (X)
Mouse (Y)
Time

8. To get things started bring a Patch Time in from the patch library.
In the GLSL SHader change the setting to Resolution X 100, Resolution Y 100, Mouse X 2.5, Mouse Y 2
Attach the Patch Time to The Time of the GLSL Shader Patch.

9. Now we want to play and make some more of the settings available to us.

Click on the GLSL shader and bring up the settings (CMD + 2) and click on the Fragment Shader tab.
The first thing to notice is at the top.

uniform vec2 mouse;
uniform vec2 resolution;
uniform float time;

These match up to our input ports in Quartz Composer. For a input to appear in Quartz we need to declare it first in the GLSL code. So lets add some code to get control of the light color.

Add the following code

uniform float r;
uniform float g;
uniform float b;

This will create 3 values which we will use to control RGB values in the code.

Now your Fragment Shader window in Quartz should look like this.

10. The code has been nicely noted for us so it easy to find what we need to change.

Lines 25 and 26.

/* Basic light color, change it to your likings */
vec3 light_color = vec3(0.2, 1.0, 1.0);

Now we need to match those 3 values to the inputs we created earlier so replace the 3 values with
the values we created earlier.

Code should now look like this.


/* Basic light color, change it to your likings */
vec3 light_color = vec3(r, g, b);

11. The GLSL patch has now gained some new inputs

Bring in a Color to RGB patch from the Library attach to the GLSL Patch and we have control over the color.

12. Again go back to the Fragment Shader and do the same again for different setting remembering to declare each input port first.

13. Here is the final code and Quartz file. There is loads of code over on the glsl.heroku.com Sandbox just waiting to be convetred to Quartz. http://glsl.heroku.com/e#5916.0

http://glsl.heroku.com/

#ifdef GL_ES
precision mediump float;
#endif

}

14. To make all these setting available to VDMX just right click on the GLSL Patch and publish the inputs so they are available to VDMX.

Thanks to Krisztián Szabó for the original code posted to Heroku and Alexandre from Pixiequark for helping explain how parts of this work.

https://dl.dropbox.com/u/16456244/rings.qtz

https://dl.dropbox.com/u/16456244/ringsVDMX.qtz With published inputs for VDMX