# elliotwoods/VVVV.Tutorials.Fundamentals

1 parent 1722617 commit a286062c5aff13d6e360c463f0988cb2519d1fad committed Oct 6, 2011
24 0. Basic principles.v4p
 @@ -1,6 +1,6 @@ - - + + @@ -384,4 +384,24 @@ + + + + + + + + + + + + + + + + + + + +
40 2. IOBox 2.html
 @@ -0,0 +1,40 @@ + + + +Annotations + + + + + +

0 - IOBox II

+

The IOBox (Value Advanced) supports many different ways of dealing with values.

Try interacting with these IOBox's. Remember to interact you use the right mouse button.

+

1 - Toggle

+

A Toggle is a very simple message that can be sent around the patch. It generally switches something downstream like 'enable this'.

A toggle is simply a Value of either 0 or 1.

0 denotes low or 'off', 1 denotes high or 'on'.

+

2 - Bang

+

A Bang is another very simple message that can be sent around the patch. It generally tells something downstream to 'do something', like 'reset' or 'start'.

The message only exists for an instance, then disappears. It's like poking someone on the shoulder. A bang is 'instantaneous'.

If you're familiar with bangs from Max/MSP, then you're likely NOT going to be very familiar with bangs in VVVV. Watch out! They work very differently!

A bang is also represented by a Value. The substance of that Value is either 0 or 1 for a bang. The Value is 1 to denote a bang being sent. A bang lasts for 1 frame, after which the value returns back down to 0.

+

3 - Bangs and Toggles example

+

Let's try out Bangs and Toggles!

Let's create:

• 1 IOBox Toggle + 1 IOBox Bang*
• 1 Stopwatch (Animation)
• 1 IOBox value

* To create a toggle IOBox, double right click and select 'Toggle' from the menu. Do the same for bang, but this time select 'Bang'.

For the bottom IOBox, let's use another shortcut. First on the Output pin of Stopwatch. Move your mouse away and then click the middle mouse button , this should automatically create a new connected IOBox for you of the correct type for what it's connected to. on the IOBox again to give it a label.

Now connect everything up as shown in the diagram.

We can also give names to IOBox's very easily. Since they are now connected to the Stopwatch node's Run, Reset and Output pins respectively, we can copy these names into the IOBox's. To do this, we middle click on the 3 IOBox's one by one.

Now try to interact with the 'Run' and 'Reset' boxes that you have created using right click .

+

4 - Color

+

A Color is a datatype within VVVV. It allows you to deal with colour values.

Colours have obvious graphical uses such as determining the colour of objects that you want to render.

There are many nodes that allow you deal with colours directly, or convert them to other data types.

+

5 - String

+

A String is another datatype within VVVV. It allows you to deal with text.

VVVV works with UTF-8 encoded strings (international text) as well as ANSI strings (simple latin english text) + multi-line text.

Strings can also be used for dealing with URLs, Filenames, Directory names and other text-based assets. In these cases VVVV has some helpful ways of dealing with strings to make life more lovely.

+

6 - Enum

+

An Enum is a perculiar datatype in VVVV. It is in general the only data type to learn something from downstream. Almost all other types only send data downstream, and do not feed back any data upstream (this is quite fundamental to how VVVV works).

An enum is an enumeration of options. The node which an enum is connected to will tell it which options are available. An example of a node with an enum input is Fill (EX9.Renderstate).

+ +
BIN 2. IOBox 2.png
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
577 2. IOBox 2.v4p
 @@ -0,0 +1,577 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
BIN 3. IOBox 3.png
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
275 3. IOBox 3.v4p
 @@ -0,0 +1,275 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 @@ -0,0 +1,38 @@ + + + +Annotations + + + + + +

+

Spreads are a fundamental tool in VVVV. They are the gift that keeps on giving (metephorically, and quite literally).

(Note for programmers: It's similar to an Array in normal programming speak, but also very different).

• A spread is a set of data.
• An individual item within a Spread is called a Slice
• The number of Slices in a Spread is called the Spread Count or the Slice Count
• Each Slice has a position within the Spread called a Slice Index
• The first Slice in the Spread has Slice Index of 0.
• If you try to access a slice index outside of the range (e.g. >= spread count or <0) then the spread 'loops'.

An example

A fish and chip shop menu has 10 items, each with a price and a description. The first item on the list is "Battered cod" with a price of 2pounds 50pence. The last item on the list is "Kimchi" at 4 pounds. Therefore we could say the following:

• There are a spread of Values (price) and a spread of Strings (description)
• Both spreads have slice count of 10.
• At slice index 0 in the Value spread we have 2.5
• At slice index 0 in the spread of Strings we have Battered cod
• At slice index 9 in the spread of Strings we have Kimchi
• At slice index 10 in the spread of Strings we have Battered cod (we've looped here back to the beginning of the spread)
• At slice index -1 in the spread of Strings we have Kimchi (we've looped here back to the end of the spread)

+

1 - GetSlice

+

A GetSlice (Spreads) node picks 1 or more slices out of a spread.

Let's create a GetSlice (Spreads) now, and attach a 4D Vector IOBox to its Input and a simple IOBox to its Output. on the bottom IOBox to give it a name.

For readability. Let's go into the Inspektor and change some properties for both IOBox. Set Value Type to Integer and Size to 14. Also turn on Show Grid and Show SliceIndex.

Also let's add an IOBox on the Index input of GetSlice using our middle button trick .

Add a I (Spreads) to the top and connect the output to the input of the 4D vector. Set the input pin To on I to 4. This node now outputs a spread of 0, 1, 2, 3 i.e. values From 0 To 4.

Now try changing the Index to see which slice is selected by the GetSlice node.

+

2 - Always repeating

+

So we've seen how the data in a spread is repeated to satisfy the slice which is being asked for. This is even the case when we have 1 value.

We can test this with a GetSlice with a simple IOBox (Value) input.

When we run it through a GetSlice and roll the Index pin different slices, we get the same value.

Important note: Every Value, String, Colour, Enum, etc in VVVV is stored as a Spread, and therefore repeats like a Spread.

+

3 - A visual spread experiment

+

So let's try and visualise what happens with spreads.

We're going to setup a simple graphical patch to use in a number of experiments. This patch will help us to visualise some spread mechanics, but also introduces a few graphical concepts as well.

1. First create a Quad and a Renderer and connect them up. You should get the familiar white square in a black box.
2. Now lets make a new node called FileTexture above Quad. Connect the Texture Out output of FileTexture to the Texture input of Quad.

The FileTexture node loads in an image file, and creates a Texture which you can apply to your graphical objects.

Textures are stored on the graphics card, and can be used in all sorts of ways to manipulate your objects with image data (e.g. image maps, height maps, bump maps, etc).

3. on the Filename input of FileTexture and select an image from your own computer. You should now see that image applied to the quad.
4. Now let's load a specific texture. We go to the VVVV folder where you have it installed. We go to the 'girlpower' folder. Then we go to the 'images' folder (vvvv/girlpower/images). Now select the file "ring thin.bmp". We should now be drawing a circle to the screen. If the Renderer is square, the circle will be square. But if the Renderer is squashed, so will the circle be.
5. To straighten the circle, we need to counteract the Aspect Ratioof the Renderer. We do this with some simple maths. Create a / (Value) node (this node divides numers. i.e. 4/2 = 2).

Attach the 2 inputs of the / to the Width and Height output pins of the Renderer respectively. Create an IOBox and attach it to the IOBox's output to visualise the output. This number represents the aspect ratio. Go into Inspektor and set the Descriptive Name of the IOBox to Aspect Ratio

Now add a Scale (Transform) (not vector version!) above your Quad. Connect to your Quad's Transform pin. Connect the output of your Aspect Ratio to the Y input of Scale. The aspect ratio should now be fixed for your quad, regardless of the Renderer's aspect ratio.

Because you now have a link going upwards in the graph, it looks a little messy. Feel free to select it and tidy it up using either Ctrl+Y to curve it, and/or Ctrl+H to 'hide' it.

6. Scale down the quad using a UniformScale (Transform) node. Attach this to the input of your Scale node and reduce the XYZ input to 0.1. Remember you can edit the value both by on the pin and then typing a 0.1Enter, or on the pin and move the mouse up/down.
7. Create a Translate (Transform) node (again, not the vector version!). and attach that to the UniformScale's input
Ok before going any further. Take some time to figure out what's happening. This is some vety common VVVV fundamentals going on (Transforms, Layer, Texture, Maths).

Notice how everthing is wired up for 1 object. There's 1 aspect ratio correcting scale, 1 uniform scale, 1 texture, 1 quad.

Now let's step it up! Create a LinearSpread node above the Translate and attach the Output to Translate's Xinput. Now check the top right input pin of LinearSpread, Spread Count. Let's increase this value.

As you see you get lots of circles renderered to the screen. Check the Output of LinearSpread by rolling your mouse over the output (you dont need to click). It might look something like this:

Output: (3) -0.3333~

This means there are 3 slices in the spread, and the first slice has a Value of approximately -0.3333 (the ~ denotes approximate).

+

4 - Olympics 2012?

+

Ok. Let's make a copy.

1. Select that section of the patch we just made.
2. Press Ctrl+D to duplicate. Dont press anything else.
3. The bits you've duplicated are all mixed up with the old bits, but your new bits are all selected.
4. Use the Down key on your keyboard to move the nodes down within the patch. To do this quicker, use Shift+Down. Do this until you've moved the new nodes into a clear section of the patch

Let's get rid of the background. Delete RetroColors by clicking on it and then pressing Delete. Right click on the Background Color pin to reset it to black.

Let's make the rings bigger. Set the UniformSpread to 0.4. This is a quick way of saying 'set the parameter of UniformSpread (in this case XYZ)) to value 0.4'.

Create a new LinearSpread and connect it to Translate's Y input. Set the Spread Count of the 2 LinearSpread's to 5 and 2 respectively.

Adjust the Width pins of the LinearSpread's until you get the olympic rings.

For good measure, add some colour to the rings by either using a RetroColors with an I (Spreads) on the IndexHSL (Color Join) with a LinearSpread on the Hue input pin. Also set the Draw Mode of the Blend node to ColorAsAlphaBlend.

+

4 - Tidying the blend mode

+

If we have too many circles, they will start to overlap. Since the textures have an opaque black background, they will interfere with each other. We can see that the circles are opaque by changing the background colour of the Renderer.

To change the background colour of the Renderer, create a RetroColors (Color) and connect its Output to the Background Color input pin on the Renderer. Select different colours by changing the Index input of RetroColors and/or changing to a different games console colourset using the Mode pin.

On the right hand input of Blend we see < That was fun, but anyway, we can definitely see that the background of the quads are black. Let's change the Blend Mode of the quads, (Photoshop users will be familiar with this idea).

Create a Blend (EX9.RenderState) above Quad and attach the output of Blend to the Render State input of Quad. Set the Draw Mode of Blend to Add.

Now when the quads are drawn, their colour is 'added' to whatever is behind them, i.e. since black is 0 and a + 0 = a, black has no effect when the Draw Mode is set to Add.

+ +
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
 @@ -1,5 +1,5 @@ - + @@ -68,7 +68,7 @@ - + @@ -129,7 +129,7 @@ - + @@ -144,34 +144,38 @@ - - + + - + - + + + - - + + + + - + - - + + @@ -180,36 +184,34 @@ - - - - + + - + - - + + - + - - + + + + - - - - + + @@ -218,18 +220,16 @@ - + - + - - - - + + - + - + @@ -239,11 +239,11 @@ - + - + - + @@ -258,8 +258,8 @@ - - + + @@ -268,18 +268,18 @@ - - + + - + - + @@ -292,12 +292,12 @@ - + - - + + - + @@ -309,37 +309,417 @@ - + - + - - + + - + - + - + - + - - + + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
36 7. Animation.html
 @@ -0,0 +1,36 @@ + + + +Annotations + + + + + +

0 - Introduction to animation

+

There are an infinite number of ways to animate things in VVVV. Here are some obvious ones:

• Damping between 2 states
• Using Timeliner
• Using LFO

+

1 - Damper

+

A simple form of animation is 'damping' between 2 states. Examples of nodes which can cause this type of animation are:

• Damper
• Decay
• DeNiro (so called because it acts like a 'taxi driver')
• Newton

These nodes tend to take an Input which changes, and give an Output which moves smoothly. The speed and type of this movement depends on the type of the node, and the parameters of that node.

Let's try the following:

1. Create a Damper (Animation).
2. Create 2 IOBox's around the Damper. One attached to its Input and one attached to its Output
3. Create a Toggle IOBox using the shortcut menu, and attach its output to the input of the top IOBox

Now try toggling the IOBox on and off. You will notice the Input jumps sharply between values, whilst the output moves smoothly.

+

2 - Decay

+

Try this agan, but with a Decay node instead of a Damper node.

Set the Decay input pin of Decay to 1 second. Now when you make the value high it jumps instantly. But when you make it low again it takes 1 second to return back to 0.

+

3 - LFO driven animation

+

Firstly let's grab the rendering patch we had from last time. Copy it Ctrl+C there , and paste it Ctrl+Vhere. Set the Spread Count to 3.

To save some space. I've deleted the Aspect Ratio IOBox and connected the / directly to the Scale's Y input. Also I've scaled down the size of the Renderer in my patch.

First let's manually 'roll' the Phase input of the LinearSpread. Just put your mouse over it hold the right mouse down and drag up/down.

Now create a new node LFO (Animation) and add 2 IOBox's to the Output and Cycles output pins on it. Set the Period input on LFO to 3 seconds. Notice how the Output and Cycles are affected.

Now connect the Output of LFO to the Phase input of LinearSpread. You should see the circles marching in a line.

+

+

Now make a copy of that section of the patch, delete the LFO with its IOBox's. The Phase of the LinearSpread will now keep the last value sent to it.

Create a RandomSpread (Spreads) node above Translate, and attach the Output of RandomSpread to the Y input of Translate and set the Spread Count to 3.

RandomSpread is now outputting a Spread of 3 values, each of which should be random (if you want to get nerdy, pseudo-random).

If we roll the value of the Random Seed input pin of RandomSpread, we'll get a different set of random numbers.

Create a new LFO and connect the Cycles output to the Random Seed input. Now periodically the circles will jump to new positions.

Aha! We know how to make things move smoothly instead of jumping dont we? Let's stick a Damper in the path between RandomSpread and Translate. Now they should move smoothly!

To improve this, let's try a few things:

• Change the Width of the RandomSpread to 2. This means that the range of values output will be between -1 and +1 which is the range of Y values that fit inside the Renderer. The range is defined by the Width and the Input (i.e. the center) of RandomSpread
• Try increasing the Filter Time of Damper to make the circles accelerate more slowly.
• Try changing the Period of the LFO. Note that if the Period is too short (i.e. quick), then the input to the Damper might move too quickly for the output to ever catch up.