vvvv » Documentation » Learning » Tutorials
» Video Tutorials
This site relies heavily on Javascript. You should enable it if you want the full experience. Learn more.

Video Tutorials

 Our brave member westbam made a bunch of tutorial videos for beginners

There is also a project page with more advanced tutorials and projects. Bonus Video Tutorials

There is also a playlist on YouTube.

For people behind the great firewall of china:
http://v.youku.com/v_playlist/f7996288o1p0.html

Don't miss to check Youtube-channel: v4tutorial by west for new tutorials.

And if you have any questions, or suggestions, please send me a PM, or a message or reply on Youtube.
Be free to use these Tutorials and educate the world!!

vvvv Tutorial 1: Installing vvvv

This video will show you how to install vvvv. Be sure you have Windows and are connected to the internet. Browse to www.vvvv.org to download vvvv_45betaXX.zip and addons_45betaXX.zip, first extract the vvvv zipfile, than put the content of the addon pack in there. Than run setup.exe and be sure there are no Red lights.

vvvv Tutorial 2: Menu, Moving and Scaling and Node creation.

Here I will show how to move and scale your vvvv patch window, getting to the menu and I will show the 3 ways to create a Node (building block) and than delete them. No patching yet, just some basics you will need to know.

Tutorial 3: Inlets, Outlets and Connections

In this tutorial I will show you how to make a node in vvvv, connect some IOBoxes and change the values of them.

Tutorial 4: Save and Open and the XML File

I will show how to save (CTRL-S) and open your vvvv patches, and what the mysterious XML file is.

Tutorial 5: Renderer and show some Text

In this little vvvv tutorial I will be showing how to create a renderer (DX9), what the 4 display styles (ALT-1, ALT-2. ALT-3 and ALT-Enter) are and we are going to show a little text that we transform so it gets a bit smaller.

Tutorial 6: Move and Color some Text

I will show how to make a Circulair Movement of the Text with a Circulairspread (spreads) and an LFO (animation) node. I will also add a green IOBOx (color).

Tutorial 7: Enumeration, Color, String, Toggle and Bang

In this vvvv tutorial I will show you what the other IObox types are for. I will be first showing how you can connect a lot of IOBox (Value Advanced) nodes together and all set them to the same value.

Next we rebuild the Hallo World patch from our previous tutorial and than I will show what enumerations are, how to change the text and color, and what the difference is between a bang and a toggle.

Tutorial 8: Herr Inspektor

Learn what the Herr Inspektor in vvvv is all about. I will show you how to make one (CTRL-I), about hidden and connect-able pins, descriptive names, attaching it to a node and manipulating data, even on multiple nodes. Also not forget the very handy CTRL-T to make it always stay on top.

Tutorial 9: Spreads and Slices

In this part off my vvvv tutorial series I will try and give some basic knowledge about the, at a first glimpse, complex subject of spreads. I will show you what they are, how to generate one, and how there are 2 methods to inspect if we are dealing with multiple slices. And to top it of, see what happens when I apply a Spread to the "Hallo World" Patch of our previous tutorial.

Tutorial 10: IObox, Columns, Rows and Slicecount

In this vvvv tutorial, I will start to explain how IOboxes can be used in relation to spreads.
I will show what Columns and Rows are, and what the great difference is between the Slicecount mode CollsRowsPages and the Slicecount mode Input.

Tutorial 11: Entering Values, Strings and Colors in an IOBox

In this vvvv tutorial, I will show how to set up an IObox so we can manually insert Values, Strings or Colors in them. I will show a few ways on how to fill them with equal values and demonstrates what happens if you the slicecount of an already existing IObox smaller or larger.

Tutorial 12: Helpfiles, F1 and Comments

In this tutorial I will show the best way to learn vvvv, just hit F1 on every node you see!!
I will show you what a comment is and how to make a comment yourself.

Tutorial 13: The Basic 2D XY coordinate system

I will explain how the 2D coordinate system works in vvvv.
We are going to make our own simple coordinate system, actually just a cross made with two scaled Quads, that represent the X-axis and the Y-axis.
Than I will show how to connect more than one object to the renderer, and as dessert we are going to make our own vvvv mouse-cursor.

Tutorial 14: Scrolling, Moving, Copy, Paste and Align

In this tutorial I will be showing some of the essential basics for navigating through a patch in vvvv. You can right-click and hold to drag, use your mouse-wheel for scrolling up and down, and holding ALT while scrolling for left and right scrolling, use the CTRL key to speed scrolling.

Use the arrow keys to reposition a node, and hold the SHIFT key to do that faster. Copy (CTRL+C) and Paste (CTRL+V) you nodes or just Duplicate (CTRL+D) them. Use notepad to check your clipboard.

Tutorial 15: Multiple Connections and Style

Making a connection in vvvv is done by left clicking an Inlet, and than to connect to an outlet. To connect one outlet, to multiple inlets, just right click on the outlet, and than you can make multiple connections.

You can switch the connection style to either the Bézier (curved), or HVH (horizontal vertical horizontal) look, by pressing CTRL-Y on a selected connection.

Tutorial 16: Hide Nodes and Lock Patches

First we will make a vvvv patch, so I have something to demonstrate the power of hidden nodes and locked patches, it is going to be a very cool sinus wave, made from some pillows.

You can lock a lock/unlock a patch with CTRL-E, the # sign on the to left in the patch will tell you if it is locked or not. Using CTRL-H (hide) on nodes and connections, will change them to a lighter grey, and when you lock a patch, the hidden nodes are really hidden.

This is an easy way to make other people use your work. It doesn't replace a real GUI, but when you are in hurry, it might just work great.

Tutorial 17: 2D Transform, Scale, Rotate Centre Points and Trapeze

I am going to show some different Transform nodes, to use in a 2D world, what the centre points do in relation with translating and rotating.
The Rotate, Scale and Trapeze node will be introduced, and you will get a first glimpse of animating something using a filter.

Tutorial 18: Quad, Pillow, Segment, Rope and Polygons

A quick introduction on the four shapes, a Quad, Pillow, Segment and a Rope. I will demonstrate a Filetexture, and the Fill (EX9.Renderstate) so you can see the individual polygons every shape consists of.

The Quad and Pillow might look a like, but the Pillow has an Alpha (transparancy) of zero on the edges, and also a bit more polygons. The Segment can be used to draw a triangle, circle, or anything in between, but keep in mind the resolution pin. A Rope needs at least 2 values in the X and Y pins to make it show at all.

Please, always try and aim for a low polygon count for optimal performance of your patch.

Tutorial 19: The IOBox Color

Some basic information on how to use the IOBox Color, the HSVA (hue/saturation/value/alpha) way is the default, use right-clicking drag up/down to change Hue or Value, use CTRL and right drag for saturation and use SHIFT and right drag to change the alpha.

Under the Chooser Style pin, you can also select RGBAslider and HSVAslider, and here you can individual mix the colors by right dragging on the part you want to alter, or you can double left click and type in a value.

Tutorial 20: HSV, HSL, RGB (Color Join) and (Color Split)

Introducing some nodes that let you generate a color by connecting, or entering, values or spreads. I will show the HSV (Color Join), HSL (Color Join) and RGB (Color Join). I will show how to make a color spread, how to reverse your spread, and what the difference is between HSV and HSL.

I will also show you how to split out a color back to its values, and as a dessert, we generate a random generated color spread, using the RandomSpread (Spreads) node.

Tutorial 21: IOBox Value Advanced in Detail Part 1

Since the IOBox (Value Advanced) is one of the most important and powerful nodes, I will take you step by step through all the pins and settings.

I will show how to change the look by Font, Size, Grid and Background. I will show how to change the way to input data with the Sticky Slider and MouseOffset, and I will demonstrate that the Minimum and Maximum values are only there to limit manual input of values by sliding, they don't apply for typing in values or when you connect another node to them.

This is a lot of dry information, but you might just pick up a thing or two.

Tutorial 22: IOBox Value Advanced in Detail Part 2

In this second part of the vvvv tutorial on the IOBox (Value Advanced) I will show what the X and Y pins do for the input and output.

We begin with creating a simple slider, than we make it a vertical slider, by changing the slider constraint. When we change the Slider Constrain pin to none, we can change the X and Y value of the IOBox in one go. After this it should become a bit more clear what the Slider Alignment pin does.

Tutorial 23: Cool thing to make with a Segment

This is more a demonstration than a tutorial, but a cool one for that, see how easy it is to produce something great looking in vvvv. We make an arch out of a Segment node, and than we spread the Scale and the Rotation, the rotation gets animated, and than than we add some color.

We generate a colorspread, or gradient, to black, next we lower the alpha and saturation a bit, and with the Blend (render state) node, we set to blend mode to add, to make it look spectacular.

The patch can be downloaded here: tiki-download_file.php?fileId=2046WickedSegmentNr2.v4p (7.08 Kb)</a>

Tutorial 24: The Sound-Reactive Rope Part 1

This little 2 part vvvv tutorial will demonstrate how easy it is to make an interesting Rope shape that can react to sound.

We use a Circularspread to generate a spread of X and Y values that can make a circle out of the rope. Set the Closed pin to 1 to close the gab.

The Circularspread multiplied by a Randomspread is what generates the freaky spiky look. The change of the Random Seed is what is changing the shape. This is changed by banging the enable pin of the Random (value) node.

In the next tutorial I am going to connect the beat detector so the change occurs with some sound.

The patch can be downloaded here: tiki-download_file.php?fileId=2098RopeFun.v4p (10.07 Kb)</a>

Tutorial 25: The Sound-Reactive Rope Part 2

In this second part of the tutorial we are going to connect some beat detection to our previous prepared Rope node.

We are creating a Beatdetector (Value), press F1 to go to the helpfile, select our audio source in the AudioRecordSelector node, select what we want to copy, than hit CTRL-C, to copy the help patch to the clipboard. Move over to the original patch, hoover above a suited location, and hit CTRL-V to paste.

All we need to do now is make the connection from BangOUT to the IOBox (value) that is triggering the random (value) node.

When we are finished I will quickly show you a few options you have to modify this patch.

Tutorial 26: Combining 2 or more Spread with different Slicecounts

This vvvv tutorial is a bit abstract, but it tries to explain what happens if you combine 2 or more spreads, that have a different amount of slices.

Combining can mean many things, and this tutorial does not only apply for values, but also for strings, textures, colors, transforms and all the other things that can form a spread.

When you combine 2 or more spreads, the output will have the same slicecount as the input spread with the highest slicecount.

At the end I will demonstrate the Cross (2D) node, to create 20 quads in a grid.

In the video I mix up the words spreadcount and slicecount, but I always mean the amount of slices in the spread.

Tutorial 27: Introducing Beta 26 and a Quick Crash course

The beginning of a new series of tutorial, I will introduce some new features for Beta26, and than a quick crash course vvvv, so you know the very very basics.

If you know what nodes, input pins, connections and patches are, please skip this one,

Tutorial 28: Resample and Count

In this vvvv tutorial I will show how to deal with the internal repeating of slices when you combine 2 or more spreads with different slicecount.

The powerful resample node, combined with a count node will resample the values that are used to generate a color spread.

Tutorial 29: Use a Boolean to switch a Color.

In this tutorial I will be showing you, how we can color quads that are placed in random on the renderer. This is an introduction in very basic logic.

The coloring will be done, depending on the location of each quad in comparison with the Y-axis. To accomplish this, we need to do some boolean logic, and than switch the color according to its outcome.

I will be showing you the Equal, Smaller Than and Larger Than nodes. Than I will show how to use a Switch to switch the colors. The epsilon pin, for the equal node, will also be handled.

Tutorial 30: Combining Switches and the AND and NOT node.

In this vvvv tutorial I continue the previous lesson on Boolean logic. The patch I begin with is the one that is made in Tutorial 29, so please check that one out.

I will be introducing the AND (boolean) and the NOT (boolean) nodes.

We are going to chain multiple color switches, one after the other, so we can color some quads, depending on the position in the renderer.

The resulting patch is a very big mess, so please watch the next tutorial, where I will introduce the power of spreads, and show you how to do this clean and nice.

Tutorial 31: Gridpick and Getslice.

In this vvvv tutorial, I am showing how to use the gridpick node to recreate our previous tutorial. Now we are using spreads, and that IS the correct way in vvvv.

We create a colorspread using a Linearspread and an HSV node, and than the powerfull Getslice is used to generate the correct color spread to color our quads.

Tutorial 32: The Spectral Nodes, Bounds, Mean, OR and AND.

In this vvvv tutorial, I will explain what the spectral nodes are and how to use them.

The Bounds and Mean spectral nodes will give you information about a spread, like the center, mean, highest and lowest value. Next we will see how we can use the OR and AND spectral nodes to color all the quads if one (OR) or all (AND) quads are above a baseline.

As a cool extra, I show a nice little GUI function to get IOboxes with names the easy way.

Tutorial 33: Framerates and Bangs

In this vvvv tutorial, I will explain what it means that vvvv runs in a certain framerate, or FPS, frames per second. I show you how to see your FPS, using Timing (Debug). I will also show you some hints on how to improve your FPS, with the Mainloop (VVVV) node and the Debug Mode (CTRL+F9).

Once you understand frames, you understand what a Bang is. A value of 1 during 1 vvvv frame. This tutorial is only an introduction for Bangs.

Tutorial 34: Create Bangs with Change and Togedge

In this little vvvv tutorial I will talk about the 2 most common nodes to create a bang: the Change and the TogEdge. A Change node will give a bang on the slightest input change. A TogEdge nodes will give a bang when a value either goes from 0 to 1, or UpEdge, or if a value goes from 1 to 0, or DownEdge.

I will also show you a way to lower the framerate, using the mainloop node, and how to detect mouse clicks inside the renderer using the Mouse (System Windows) node.

Once you understand these 2 nodes, you got some powerful tools to work with bangs, in the next few lessons I will be dealing with some nodes that are using bangs to do stuff.

Tutorial 35: The Counter in Detail

In this vvvv tutorial, I will demonstrate how the Counter (Animation) node works. I will go through all the pins and show what they do.

I always use the counter to know if I am receiving my bangs, and that is why this little tutorial is about this node. I will also show how to make some Quads run, using nothing but a mouse.

Tutorial 36: S+H, Sample and Hold, Freeze Values

In this vvvv tutorial, I will show you what the S+H (animation) node does, and how to use it. If you bang the set pin, you can freeze the value that is connected to input pin.

I also show what the hidden "set on create" pin does. Use Herr Inspector (CTRL+I) to reach the pin.

Next a little demonstration on how to make a line follow the mouse, between 2 clicks, and a scratch on the surface about the Vector (2D join) and Vector (2D split) nodes.

Tutorial 37: Toggle, Flipflop and Monoflop, switching logic

In this vvvv tutorial, I will introduce the 3 nodes, that when combined, are capable of making many complex ways to produce a boolean, a one or zero, so you can switch other values, or turn nodes on or off.

The nodes are Toggle (animation), FlipFlop (animation) and the MonoFlop (animation). Next we will see some examples on how to use them and I will also show the existence of the advanced Automata (animation).

Tutorial 38: The LFO, Waveshaper and Gamma

In this vvvv tutorial I will show you all the pins of the LFO (Animation). The LFO is one of the most used nodes in vvvv, it does nothing else than counting up from 0 to 1 in one period.

The 2 nodes that are used a lot to change the output of the LFO are the Waveshaper (Value) and Gamma (Value). The helppatch (F1) will show what they do.

Next I will make spread of different, random LFO's, to rotate some quads in a circle.

Tutorial 39: Framedelay, create Loops or Delay a Value

In this vvvv tutorial I will introduce the FrameDelay (animation). We can use it to make feedback or a loop. The helpfile (F1) will give an example of a feedback loop.

I will show you how to use the Max (value) with a framedelay, so we can figure out what the highest value is the max ever received on one pin. Next I will show how and why, you want to delay a Bang for 1 frame, while resetting an LFO (animation) and sample and holding (S+H) animation, it at the same time.

Tutorial 40: Mapping Values, the Basics

In this vvvv tutorial, I will be explaining 2 equal nodes, the Map (value) and the MapRange (value).

First I will show you what we mean with mapping values, and next we are going to take a look at both nodes and their different mapping modes.

Tutorial 41: Mapping Values, some examples

In this vvvv tutorial I will demonstrate a few uses of the Map (Value) node, after a quick refresher of the previous tutorial, we are going to map a RandomSpread (Spreads), so that we can see all the coordinates, as quads, inside the renderer.

The node that helps us with this will be the Bounds (Spectral) node, and I talked about this node in Tutorial 32.

Tutorial 42: ApplyTransform, Transforming Values

In this vvvv tutorial, I will show how the ApplyTransform (Transform) node works, so we can use all the transform nodes, and apply them on values.

The node is specially suited for XYZ coordinates, so we can do translations, scaling and rotations on values. A bit like using the mapping nodes in 3 dimensions.

Tutorial 43: Morphing Spreads using Map Range Interval

In this vvvv tutorial I will show you ways to Switch and Morph Spreads. For switching values there is a Switch (Value), but to switch from a spread, use the GetSlice (Spreads) node.

To Morph 2 Values or Colors, there is the InputMorph (Value), but morph a spread we have to make our own little spread using the Map (Value Interval).

Bonus Tutorials

This is a collecting of video tutorials for little projects I did, and are really suited to learn beyond the very basics that I am dealing with in the beginners series. Each project comes with its own page posted under contributions.

Please take a look here: Bonus Video Tutorials

anonymous user login

Shoutbox

~6d ago

joreg: vvvvTv S02E00 is out: Sensors & Servos with Arduino: https://visualprogramming.net/blog/2024/vvvvtv-is-back-with-season-2/

~7d ago

fleg: hey there! What's the best tool for remote work? Teamviewer feels terrible. Thanks!

~20d ago

joreg: Last call: 6-session vvvv beginner course starting November 4: https://thenodeinstitute.org/courses/ws24-5-vvvv-beginners-part-i/

~1mth ago

joreg: Missed the last meetup? You can rewatch it here: https://www.youtube.com/live/MdvTa58uxB0?si=Fwi-9hHoCmo794Ag

~1mth ago

theurbankind: When is the next big event, like node festival ?

~1mth ago

joreg: Introducing: Support for RPLidar devices by Slamtec: https://visualprogramming.net/blog/2024/introducing-support-for-rplidar-devices-by-slamtec/

~1mth ago

joreg: Join us for the next vvvv meetup on Oktober 17th: https://visualprogramming.net/blog/2024/25.-vvvv-worldwide-meetup/

~1mth ago

joreg: 6 session beginner course part 2 "Deep Dive" starts January 13th: https://thenodeinstitute.org/courses/ws24-5-vvvv-beginners-part-ii/

~1mth ago

joreg: 6 session beginner course part 1 "Playground" starts November 4th: https://thenodeinstitute.org/courses/ws24-5-vvvv-beginners-part-i/
read more
follow on twitter