Summary
SLIMSHADER is an Open Source Raspberry PI(a) project based on glslViewer(b) and capable of displaying plain images and OpenGL/GLSL shader files.
Shaders are small programs that leverage the power of the GPU to display modern graphics simulations. Visit www.glslsandbox.com to view shaders created by hundreds of artists(c).
SLIMSHADER can display these shaders(d) and modulate them by means of;
▪ Audio
▪ MIDI
▪ Manually tweaking dials
▪ Built-in LFOs (Low frequency Oscillators)
▪ Control Voltage (0 to 5V or 0 to 1V)
SLIMSHADER is a Eurorack format design with HDMI and Analog video output for people who like to add visuals to their music, for video-synth enthusiasts or anyone looking to learn and play with shaders files.
(a) Tested with the Raspberry PI Zero W, Zero 2 W and 3b (v1.2).
(b) Patricio Gonzalez Vivo & Jen Lowe, authors of The book of shaders.
(c) Please note that the SLIMSHADER Raspberry PI image file comes with hundreds of shader files. Credits go out to all the makers of these shaders; their names can often be found in the header of the shader file itself.
(d) Complicated shaders typically require much more CPU/GPU power and a Raspberry PI is not always able to deliver unfortunately - please keep that in mind.
The Slimshader Module on GitHub
Fancy building the Slimshader Module yourself? - then please visit the Slimshader GitHub project page.
The Slimshader Raspberry PI image
Download the latest Slimshader Raspberr PI image file from Google Drive.
You'll need a 16GB Micro SD card (or better 32GB as some 16GB SD cards are actually less than 15GB and the image won't fit).
Specs
Demos
The background visuals in the playlist below are all generated with the help of the Slimshader module.
User Guide
Index
Front Panel
The image below is showing the SLIMSHADER's front panel.
Mode Switch
The Mode Switch allows for the Slimshader module to operate in 7 different settings. There's Images, (just) Shaders, Audio, MIDI, Manual, LFO and Control Voltage.
Before going through each mode, please have a look at the Raspberry PI's directory structure of the Slimshader module. The directories shown below are locations where you can find the images and shaders used for each of the 7 modes.
Note: here you can download the fulll zipped slimshader directory structure (3mb) if you want to have a look at the slimshader.py main program and all shaders files etc. without having to download the full 16GB image file.
The Mode 1 images directory contains .jpg image files. The directories for Modes 2 to 7 all contain .frag files - or so called Fragment Shader files.
Note that in order to select shaders from the CustX, CustY and CustZ directories, refer to the setting of the X, Y and Z Control-dials. Any combination of the control-dials not shown here, results in shaders shown from the justshaders directory.
On final thing; it's helpful to have some understanding as to how shader files are controlled from "the outside" (i.e. Audio, MIDI etc.). In the diagram below
(1) "outside" measures and protocols such as MIDI are translated, by the
(2) Slimshader Python program to up to three variables called
u_slimshader_x
u_slimshader_y
u_slimshader_z
The values of these variables are between 0.0 and 1.0 (between 0.000000 and 1.000000 to be precise).
(3) The variables are passed on via OSC to the glslViewer OpenGL application. glslViewer is the program that takes a .frag shader file and displays it on screen.
(4) In doing so, glslViewer passes the variables on from the Slimshader program to the shader file itself.
(5) Inside the shader file, which is just a plain editable text file, these passed-on variables are called "Uniforms". In order for the shader to "understand" these incoming 0.0 to 1.0 values, we define them as uniforms (i.e. "uniform float u_slimshader_x;" etc.).
(6) we can now add these uniforms throughout the shader file code and influence/control/modulate various aspects of what the shader file is showing on screen like motion, colour, size, brightness etc. - the sky is the limit!
Ok, now lets look at the Mode switch
Using the Module
The directories shown in the Switch Mode section all have shader files - some more than others. The Slimshader module, therefore, can be used as is. If, however, you want to add, delete and/or modify (your own) shaders, then the following sections are worth reading.
Logon
You can logon to the Slimshader by either connecting a USB keyboard or via WIFI (Raspberry PI Zero W / 2 W). This section describes how to setup the Slimshader for remote logon (WIFI).
Navigating Slimshader
Now that we have remote connectivity, let's have a look at the directories holding images and shaders.
Before we do though, let's make sure that there are no Slimshader processes are running:
Ok, great, all Slimshader related processes are shutdown. We can now launch shaders from the prompt and make modifications.
Enter cd slimshader to go to the Slimshader home directory
The home directory contains the main Slimshader Python script; this file is called slimshader.py. The workings of the script is not part of the scope of this page.
Enter cd images to go to the images directory. In Mode 1, The Slimshader module displays images from this directory.
Enter fim 2_TestScreen.jpg to see the Slimshader's test screen image:
Press CTRL+C to exit the image viewer (called fim)
You can view any of the other images in this directory. Just enter ls -l to see what other .jpg files there are.
Now, let's look at some shader files.
Enter cd .. to go back to the Slimshader home directory.
Enter cd shaders to go to the root directory of all available shaders files.
Enter cd justshaders to go to the directory used in Mode 2.
Enter ls -l to see a list of all .frag shader files stored in this directory.
To see a shader in action, enter glslViewer frag_386.frag
Press CTRL+C to exit the shader viewer (called glslViewer).
Try the same glslViewer command again but for other .frag files. Pick a few at random.
You can now navigate the other directories shown in the Mode Switch section and try out those .frag shaders as well. Have a look at the shaders in the CustX, CustY and CustZ directories for example.
Adding a new shader for manual modulation (Mode 5)
This section runs you through the steps of copying and modifying a shader file for use in Manual Mode (Mode 5).
The example shader-code below comes from www.glslsandbox.com; it's a great source for browsing shaders.
Notice the three lines that start with "uniform"? - you'll see these uniforms re-appear all the time. We'll need to rename these to make it work with glslViewer; and we'll be adding our own slimshader uniforms (u_slimshader_x, ..._y and ..._z). Follow the steps!
#ifdef GL_ES precision highp float; #endif #extension GL_OES_standard_derivatives : enable uniform float time; uniform vec2 mouse; uniform vec2 resolution; float dist(vec2 a, vec2 b){ return sqrt(pow(a.x-b.x,2.) + pow(a.y-b.y,2.)); } void main( void ) { vec2 uv = vec2(gl_FragCoord.x/resolution.x*1.9, gl_FragCoord.y/resolution.y); float s = 20.; float c = fract(time+sin(cos(uv.y*s)*sin(uv.x*s))); float d = sin(dist(uv,vec2(mouse.x*1.9,mouse.y))*20.); vec4 outC = vec4(c-d,c-d,c-d,1.); gl_FragColor = outC; }
Leave the shader running. In this next part we will finally make the shader respond to the three dials X, Y and Z.
Now we have to look for parts in the code where we can add the three uniforms. This process is of an experimental nature - trial and error basically ... and it can be a lot of fun!
The following steps are just an example of what is possible. The more you understand shaders, the more targeted your approach will be.
First we'll explore what happens to the visuals still running on screen when we make a change to the code.
Now, logon to the Raspberryo once more and find a spot for u_slimshader_y and u_slimshader_z
... or just create a new shader file and copy/paste the code below.
Before you do all this, you may want to kill and Slimshader processes - see section Navigating Slimshader. PS: as you become more familiar with the workings of the Raspbian Operating System, you'll find various other -better & faster- ways of modifying shaders. This manual sets out to be consistent in doing things - in perhaps not always the most efficient way.
#ifdef GL_ES precision highp float; #endif #extension GL_OES_standard_derivatives : enable uniform float u_time; uniform vec2 u_mouse; uniform vec2 u_resolution; uniform float u_slimshader_x; uniform float u_slimshader_y; uniform float u_slimshader_z; float dist(vec2 a, vec2 b){ return sqrt(pow(a.x-b.x,2.) + pow(a.y-b.y,2.)); } void main( void ) { vec2 uv = vec2(gl_FragCoord.x/u_resolution.x*1.9, gl_FragCoord.y/u_resolution.y); float s = 1.0 + (u_slimshader_x * 49.0); float c = fract(u_time+sin(cos(uv.y*s)*sin(uv.x*s))) + u_slimshader_z * 1.25; float d = sin(dist(uv,vec2(u_mouse.x*1.9,u_mouse.y)) * (0.25 + (u_slimshader_y * 100.))); vec4 outC = vec4(c-d,c-d,c-d,1.); gl_FragColor = outC; }
Wrapping it up
The process of adding and modifying shaders is the same for the other modes. In fact, you can move a shader from the "manual" directory to "lfo" directory, for example, and it will work there as well.
The one thing you have to keep in mind is that the shaders in the "audio" directory use u_slimshader_x and u_slimshader_y only; so, if you coded u_slimshader_z into your shader, then that part of the shader won't be modulated by the incoming audio.
MIDI Jumper Settings
The Slimshader module has one MIDI IN and two MIDI THRUs. Each MIDI socket can be set to operate as MIDI Type A or MIDI Type B.
Below are two examples. Simply copy the PCB's printed diagram to switch between MIDI Type A or B. MIDI Types A and B are functionally identical; it's just that source/sink (i.e. Tip/Ring) are reversed. Please don't try any other combination as this may result in damaging your MIDI connection.
Quick User Guide
As with any Eurorack module, it's wise to do a quick visual check on arrival. See below.
A. Ensure that the Raspberry PI board is fully inserted and at a 90 degrees angle with its socket.
B. Ensure that both the USB- and HDMI- plugs are firmly connected (in a straight line).
C. Ensure that the enclosure (Eurorack case or desktop enclosure) is NOT powered on. Plug in the power flat-cable. Always support the printed circuit board (PCB) with your fingers when pressing down the 16 pin header socket do avoid accidentally bending/breaking the PCB.
D. Mount the module in place. Ensure that the enclosure has a depth of 50mm to 55mm (about 2+ inches).
Set all toggle switches, dails and rotary switch as shown below. The momentary toggle flick +/- switch remains in the center position when released. Select MODE 1 on the rotary switch.
E. It's time to connect up a monitor. You can use the Analog Video BNC out or the HDMI socket. We are using HDMI in this quick user guide.
F. Switch on the power. The "ON/Booting", "OFF/PROG RUN" Blue LED should light up. When the LED turns off, the main Slimshader program has succesfully started.
G. During the boot up you should see the standard Raspberry rainbow screen after which you should see the Slimshader splash screen - and finally the text "Slimshader", which is in fact a shader file.
H. Use the +/- switch to browse through the default images. You can upload your own jpegs. In the "Mode Switch" section you can find more info as to where the .jpg images are stored.
Switch to MODE 2. In this mode, the module has access to over 500 shaders located in the "justshaders" directory. You can run through these manually with the +/- switch or if you set the 1st switch to "auto", switching will take place automatically every 30 or 60 seconds depending on the setting of the 2nd switch. The 3rd switch allows for running in "running mode", which means in alphabetical order or "random"; in this setting, the module selects a random shader file everytime you select + or - (so you can't go back an forth between the same random shaders but instead it's a different shader at every switch). The +/- switch always works regardless of the setting of the "auto/manual" switch.
Switch to MODE 3. In this mode, shaders will react to incoming audio. See below; (a) connect the line- or headphones output of a stereo device to (b) the audio input of the Slimshader module. (c) connect the stereo output, which is simply the same audio signal that goes into the module, to an amplifier or mixing console. Set dail (d) as such that the three LEDs (Green, Amber and Red) light up with Red flashing occasionally when the audio peaks. Essentially here we are aiming for a nice incoming audio level (not too low and not constantly too high). Dail (e) sets the sensitivity to bass sounds and dail (f) sets the sensitivity to high pichted sounds. Dail (g) boosts the module's internal X- and Y- values coming from dails (e) and (f) - this way you can get some extreme -over the top- looking visuals.
Switch to MODE 4t. In this mode, shaders will react to incoming MIDI (on MIDI channel 10). The "t" in 4t means Trigger. Connect the MIDI out of a keyboard, DAW or drum machine to MIDI in of the Slimshader module.
See video below (no sound); only three notes are used in Trigger mode: C, C# & D (MIDI Note Numbers 60, 61 and 62). C triggers the module's internal X value. C# the Y value and D the Z value. How fast each value drops for 1.0 to 0.0 depends on the setting of the X, Y and Z dails (0% = Fast, 100%, = slow). Look for the subsection "Mode 4t & Mode 4k (MIDI CH10)" to read more about trigger mode.