Examples

Here is some help, coming along with three example styles included in the Soundbild-download, to have a start anyway. The first one covers important node-items and the script-language. The second explains the trick of double buffering and the last example shows how to insert an OpenGL Pixelshader.

The first style

In the first example we'll create 40 small dots, place them in a circle and set a color depending on the current Audio-Spectrum-Values.

Example 1, item types

The audio group contains all needed audio nodes for this example. The item
"audio" represents the current audio data like Volume and Spectrum-Values.
"AudioEQ" is a simple row of numbers. These Numbers are mapped and multiplied automatically to the Spectrum-Values of the audio-item due to audio.EqualizerValues
"shortSpec" cuts the Spectrum-Values down to 40 Values.
"specMem" is fading out the shortSpec Values so the visualization has a smoother appearance.

The item "bufMain" is the main graphicbuffer and needed to be named exactly like it is.
"sceneMain1" sets up the graphic scene, this one is 2D and sized 1920x1080, like the main buffer.
"posDots" is a PositionNode, all Visual-Node-Childs are affected by it's position, size and rotation.
"duplDots" is a Duplicator-Node and duplicates the following PictureNode 40 times
"picDot" is a PictureNode and uses the file "dot.png"

The last two items are
"timerUpdate" which runs the script "updateData.txt" each time the timer Updates. Because it's interval is set to 0 milliseconds it'll be at least for every frame-draw.
"initThings" runs the script "initData.txt" befor the style starts.

Example 1, scriptfiles

In the "initData.txt" we want to initialize the dot's positions in a circle: First we define a radius (400 pixels) and we need Pi.
In the skript-function we create a helper variable to map the dot number from 0-39 to 0.0-1.0, the we loop through all dots and do the mapping.
Still in the for-loop we calculate the dot.Position in the circle.

In the "updateData.txt" the realtime-things happens. We define dot's size and a base color which each dot have nevertheless there's a peak in the spectrum value or not.
In the script-function we loop through all dots again and get the relevant spectrum-value first. Then we set for each dot the defined size, multiplied with a base value and add an extra spectrum-based portion.
The same for the color. Because we defined the base-color blueish, we can add an orange spectrum-based color with negativ blue-value.

Thanks to the added overall PositionNode, we can rotate all dots at once clockwise to have a more dynamic style.

Example 2, a double buffer

For this example we set the bufMain.DoubleBuffered property true. This way we have two graphicbuffers: "fbT1_bufMain" is the current drawing buffer and "fbT2_bufMain" is the buffer which was used last frame. This means, we can draw the rendered Picture from last frame to the current frame. It's getting interesting when we do this with small modifications in size, position or rotation (or other things when using it in a shader).

We do this by adding the pictureNode "picBuffer" and set it's PicFile property to "fbT2_bufMain". Finally we set the initial size of this pictureNode a little bit smaller then the buffer itself. The color is kind of a multiplicator, we want to get it more red, don't touch green, less blue and a bit less alpha (transparency).

Example 3, Pixelshader

In this example we use example 1 again, replace the dot-PictureNode with a CustomPixel item and set it's mesh-property to a standard picture-mesh and it's ShaderFile-property to our own pixelShader file "pixDot.txt".
The shader defines the expected and needed variables first. In addition we define a vSpecValue which we'll pass in our updateData script, a vTime because it's always good to know what time it is and a fNumber, representing which dot we are (0-39 but mapped to 0.0-1.0).

In the shader we calc the mid-Point and distort it a little bit (and thanks to the fNumber, each dot has a unique distortion). We use this as a shape and calc the color in dependence of the current spectrum-peak.
Finally we mix the output color.

Because fNumber doesn't change, we set it in the initData script. In the updateData.txt we set the remaining shader variables "vTime" and "vSpecValue" for each dot.

Keep in mind that shader-variables begin with a "dic_" and normal item.properties with a "did_". You can define sampler2D variables in your shader, too. Set them in any script called by an initialization item in quotes:
pixItem.dic_myTexture1 = "pic1.png"; // for pictures
pixItem.dic_myTexture1 = "fbT1_myFramebuffer"; // for framebuffers
pixItem.dic_myTexture1 = "fbT2_myFramebuffer"; // for the second buffer of double buffered framebuffer