vvvv illustrated beta_ENG

illustrated guide to vvvv for newbies in computer arts Linear Spread 2. table of contents 3. vvvv a multipurpose toolkit 4. about this guide 5. vvvv is real time 6. multipurpose and fast 7. some extra propaganda 8. vvvv basics 9. Renderer (EX9) 10. primitives.dx9 11. textures 12. nodes categories 13. the power of vvvv is in spreads 14. vectors 15. controling spreads 16. io boxes 17. subpatches 18. S and R nodes 19. coordinate system 20. 3d space 21. 3d models in vvvv 22. vvvv e�ects aka shaders 23. logic 24. timebased logic 25. loops and feedback 26. red nodes and other bugs 27. boygroup 28. external protocols 29. girlpower 30. user interface 31. changing values 32. Inspektor example IOBox 33. Inspektor example Renderer (EX9) 34. CodeEditor 35. how to read vvvv patches 36. vvvv links introduction bla-bla-bla why should I use vvvv? call yourself a ‘media artist’ enough to make complex things enough to make beautiful things in 3d space before becoming much more advanced, you may want to spend 20 minutes to print pages 37-43 and keep them near you to you. pages appendix table of contents introduction bla-bla-bla vvvv is a graphical programming environment for easy prototyping and fast development. It is designed to facilitate the handling of large media environments with physical interfaces, real-time motion graphics and audio and video that can interact with many users simultaneously. vvvv not suitable for following tasks: you can not force vvvv to run patches inside a web browser, and you cannot compile vvvv projects into self-running .exe �les. You always need a copy of vvvv itself running. If this is a requirement for you, then you should consider searching for other tools. vvvv is for Windows only Because it is using the power of DirectX, to run vvvv you need either WindowsXP, Vista or 7, the lastest DirectX Redistributable and .net3.5 installed . To run vvvv on Mac, you need to run Windows via BootCamp. The vvvv channel on Vimeo is a showcase of work produced by vvvv users. Seeing the power of vvvv will explain it better than a thousand words ever can vvvv a multipurpose toolkit http://vvvv.org/ The VVVV Group is responsible for its continuous development. http://vimeo.com/channels/vvvv This is very �rst o�ine and experimental version of a vvvv guide. It made for people who have never used any programming languages before to create motion design, generative art objects or user interaction installations. We have made a very brief overview of vvvv. By reading this guide you will understand the main concepts of vvvv, but not in detail, or advanced usage. To �nd a more complete explanation and learn vvvv in detail, please follow the links provided on most pages. Reading this guide should take about 20 minutes. It’s all time you need to understand one of most powerful software packages for createing interactive installations and generative art. Please note, this is not o�cial guide. The vvvv group is not response for any contents of this guide. For any questions about this guide, please feel free to contact me directly: Proofreading: Elliot Woods http://www.kimchiandchips.com René Westhof Illustrations: Georg Michri Design: Nata Suntsova Thanks to: vdmokstati, ain, alg, Kalle, m4d, vvvv group and to my family Nadya and Dominika about this guide skype: andrey.bo.27 Credits and many thanks to: why should I use vvvv? Compiling Command ?!?! sorry, I didn’t have time to compile the brakes.... thank God, my car is controlled in realtime! *#%!?! vvvv is real time Patching in vvvv is like driving a car. Get results immediately when you want it. Where many other programming languages have distinct modes for developing and runtime, vvvv has only one mode - runtime. In other words, vvvv is constantly performing calculations and rendering graphics while you're editing the patch. Why am I choosing the wrong club... always? One stick for all clicks!You do not need many programms running multipurpose and fast vvvv is suitable for many tasks involving common computer media types like: video, audio, 3d animation, the internet, interactive multi-users interactions, multiscreen setups...... to name only a few. To deal with 3d models, audio analysis and network connections at the same time, you do not need many programms running, but only the one. And the most imortant thing, vvvv is still realtime even when you are working with all those things at the same time. vvvv is more like hockey, not golf. vvv is as cool as Leonardo and as simple as Robin Hood vvvv is a powerful graphical environment with built-in C# and HLSL code editors and many input/output nodes for all types of external protocols such as TCP, UDP, DMX, MIDI, TUIO, OSC, RS232 and so on... Thanks to the community, you can also interact with Wii, PSP, Kinect and many more devices. vvvv is free for evaluation and non-commercial use. You can start using vvvv right now without any restrictions. http://vvvv.org/downloads For all commercial applications, you need to buy a license. http://vvvv.org/licensing call yourself a ‘media artist’ vvvv basics Incoming data Outgoing data vvvv stores most datas in node pins, so links are necessary for transfering data only Node Node calculates some magic Output Pin(s) sends outgoing data via link(s) Input Pin(s) store settled data or receive incoming data via a link In most cases a node has more options than you can see. All options are availiable in the Inspektor. You can open it by selecting a node with a left click, and pressing Ctrl-i Incoming data Outgoing data Node Link Link vvvv uses graphical objects for programming instead of a textual programming interface. Programs are created within patches. Individual operations and functions are represented as nodes. Connections between nodes are called links, and are drawn and modi�ed with the mouse. Links create a structure that sends data from one node to another. To create your very �rst patch, run vvvv, double-left click into the empty grey window and select any node from the list. Welcome to vvvv. http://vvvv.org/documentation/tutorial-introduction Renderer (EX9) Most things you are patching end up going to the Renderer The Renderer node has an external window named "DirectX Renderer" Click on the window and press Alt-Enter to force FullScreen mode. Before do so, you can check resolution settings in the Inspektor. Please refer to the Renderer's Inspektor screenshot on page 40 You can either hide the window into a node by pressing Alt-3 To view any output we need a renderer node. There are several di�erent renderer nodes in vvvv (with possibilities to visualize di�erent kinds of data). We generally use the Renderer.EX9 node for most types of visual data. The Renderer node has an external window named DirectXRenderer and, of course, it may be FullScreen with any resolution that your graphic card supports. http://vvvv.org/documentation/dx9-rendering#starting-with-directx or show the renderer window as a block in your patch by pressing Alt-2. /girlpower/(Halo Ball) patches by roman primitives (DX9) The most simple thing that you can draw in the Renderer window is a Quad(DX9) node. But understanding Quad will open many doors in the world of computer media art for you. Don’t let the EX9-DX9 naming disparity puzzle you - they communicate each other perfectly. So let’s connect Quad (DX9) to the Renderer(EX9) To introduce basic pins and save your printer ink, we draw results below as you should see them in the Renderer (EX9) window: Feel free to play with following nodes: Other DX9 nodes work in the same manner. Since pin names speaks for themselves, we do not explain them carefully now. http://vvvv.org/documentation/quad-%28dx9%29 by default It's ok even if it is not perfectly square - you can read more about this when you learn about the coordinate system on page 24 using Color pin using Texture pinusing Transfrom pin textures Group.EX9 node is very similar to Layers in your favourite graphical editing software You can apply the same texture to many di�erent objects at the same time The Renderer node has masses of settings. You should check them in the Inspektor. Same with the Texture nodes. You can customize the texture transform independently with the Texture Transfrom pins Anything you see in the Renderer window can be later used as a texture http://vvvv.org/documentation/dx9-rendering#texturing vvvv supports many more textures formats than most people can imagine would exist. For us, it is a pleasure to know, that by using only Renderer, Quad, Transfrom and Textures, we can call ourselves contemporary media artists. http://vvvv.org/documentation/howto-prepare-textures nodes categories A screwdriver �ts bolts wherever they are. Same with node categories. On starting every new link, vvvv highlights for you pins that can accept that link's data type There are many nodes to convert one data type to another. With them you can achive very interesting and complex interactions. NodeBrowser with node list sorted by text input Pressing Ctrl-N opens the NodeBrowser in an external window. From it you can drag-n-drop nodes into patches. http://vvvv.org/documentation/pins-and-data-types vvvv supports many types of data, e.g. values, strings, textures, transforms, meshes etc... Nodes dealing with same data type are grouped into categories and subcategories. The NodeBrowser is the central access point to all nodes that exist within vvvv. Simply doubleclick inside an empty area of a patch to bring up the NodeBrowser. Rightclick into the text �eld of the NodeBrowser to switch to a categorized tree view of the node list. Same data connected to various places http://vvvv.org/documentation/nodelist enough to make complex things the power of vvvv is in spreads Slice Spread The word Spread actually denotes nothing more than a list. A list of arbitrary data. Be it values, strings, colors,... and a signle entry in such a list we call a Slice. In almost all cases where you want to deal with multiple instances of data, be it values, colors, �les, textures, geometries... you can keep your patch pretty simple by thinking in spreads. Custom spread I (Node) creates spread by range from # to # CircularSpread outputs circlular values instead of you having to undertand sin/cos Set of random values vectors A spread will never end. When a node gets to the last slice, it goes back to the �rst one and simply repeats again. A node looks �rst at the slicecounts of all spreads it receives. The maximum slicecount of the inputs is used as that node's output slicecount. Well. Nevermind. Thinking in vectors is very similar to thinking in spreads. vvvv has many vector oriented nodes, like Translate (Transform Vector) etc. Vectors are not only maths tool but they are the most frequently used spreads. In many cases, using vectors is easier than using separated values. controling spreads Every slice has an Index number. Using the Index, you can select any custom slice. The BinSize determines how many slices the node will take from the spread Of course, there are a lot of good reasons to access individual slices. http://vvvv.org/documentation/spreads Stallone is a very �exible node, which allows you to merge slices from any number of inputs and distribute them to any number of slices on any number of outputs. You can select not only one slice, but spread of slices. Either you may sort and shift them by using special nodes from the Spread category, applying custom spreads to Index pins or useing BinSize pins. io boxes Use Double right click in an empty space within the patch window to get to the IOBox shortcut menu If you are looking for interface elements like sliders and buttons, then IOBoxes are also all what you want. Please take a look at the IOBox Inspektor screenshot on page 39. http://vvvv.org/documentation/tutorial-ioboxes IOBox means Input/Output Box, meaning that these nodes are useful for both purposes: As a means for the user to input data into the running program. On the other hand they can be used to output/display data from the running program. We have used many IOBoxes for the screenshots of this guide, to make important data visible. However, these IOBoxes are generally not vital for the functioning of the patches in the examples. subpatches Right clicking on the subpatch node opens it in an external window (or hide it again if it is already opened). Alt-1 Alt-2 Alt-3 shortcuts also work. Ctrl-W - close subpatch window and REMOVE subpatch from the patch. http://vvvv.org/documentation/subpatches ??? !!! A Subpatch is nothing special at all: it is just a node containg a patch. The term Subpatch describes only the way you view the patch: it is a standard patch which has been placed inside another one. Creating a Subpatch is extremely easy. Pins can be added to the subpatch node by entering a Descriptive Name to IOBoxes within the subpatch. You can give these names in the Inspektor or by making a middle-mouse-click on a connected IOBox. In this case, the IOBox acts as a parameter, and appears as a pin on the subpatch node. Now, just save your patch that you want to become a subpatch, close it, and then drag-and-drop the .v4p �le from Windows into another patch. A pull-down menu for R nodes is automatically generated from the all descriptions of SendString pins of all S nodes Sometimes you need to transfer data, but you don’t want to create new links. S and R nodes are for that. You may want to use them to keep your patches clean when one piece of data goes to many-many places, or the 'deepness' of your subputching means that making links is not comfortable at all. Of course, there are also other reasons to use S/R Nodes. S and R nodes Futuristic machine, to immediately transfer from one place to many other places is availiable now in vvvv R nodes can be placed anywhere in currently open patches. enough to make beautiful things in 3d space The Earth is rotatin around the Sun... Where is my �relight? The Renderer window area has a default range of -1 to +1 in both dimensions (XY). The origin has coordinates 0,0 and is in the middle of the window. There is also a z-coordinate, which is not shown in the diagram. There are naturally no pixels, inches or millimetres in the coordinate system of vvvv, but only four digits values (0.0000). Actually this works well, because coordinates do not depend on the window size or screen resolution. We call this normalised coordinates. Of course, you may want a square to always look like a square, or have a di�erent range of coordinate in some cases. You can do so by applying Transfrom nodes to transfrom pins of the Renderer node. Scale by 0.1 maps the Renderer coordinates range to -10 to +10 The AspectRatio node helps by making coordinates depend on your window size, you may also force aspect ratio e.g. 4:3 or 16:9 aspects -1,-1 1,-1 1,1 0,0 -1,1 The Renderer window area has a default range of -1 to +1 So, if you want a Quad to �ll the whole Renderer you need to scale it by 2 -1,-1 1,-1 1,1 0,0 -1,1 http://vvvv.org/documentation/dx9-rendering#coordinate-systems coordinate system 3d space The world you see, always depends on point of view. http://vvvv.org/documentation/ex9.spaces The coordinate system in 3d space will be generally be transformed by our view onto the 3D scene, this will create some distortion of the coordinates. The easiest way to look around a 3d space is to connect the Camera (TransfromSoftimage) module to the View and Projection pins of a Renderer.EX9 node. Keep in mind that the world you see in 3d space always depends on your point of view. Orbit press O and hold while dragging to Orbit Zoom press Z and hold while dragging to.. [left mousebutton:] pan [right mousebutton:] zoom Position press P and hold while dragging to dolly [left mousebutton:] slow [right mousebutton:] fast Reset press R and hold for a moment to reset the viewport View pin is for camera position or rotation Projection pin is for perspective Since these pins accept transform data, you can apply any custom transfrorm here. Z 0,0,0 X Y Easy to use virtual camera for day to day work with the Renderer (EX9). Keyboard & Mouse Usage: http://vvvv.org/documentation/ex9.geometry 3d models in vvvv Each vertex is a container for data like position, orientation (normal), texture coordinates and so on. Since vvvv gives direct access to the vertex data, there are no limits to how you can deform 3d models. In vvvv there are several ways to create a 3d model, aka Mesh: use a basic primitives like Grid, Box, Sphere from the EX9.Geometry node category; load an .x �le from a 3d modelling application using XFile (EX9.Geometry Load); load a .dae collada �le from a 3d modelling / animation application using the COLLADA plugin; create generative geometry with VertexBu�er (EX9.Geometry Join) and Mesh (EX9.GeometryJoin). EX9.Geometry primitive Model in xFile format .x �le Animated model in Collada format .dae �le Wireframed sphere, deformed within VertexBu�er nodes /girlpower/�uidynamicshere.v4p patch by defetto&thedoctor astroBoy_walk.dae Copyright 2008 Sony Computer Entertainment Inc. Licensed under the Creative Commons Attribution vvvv e�ects aka shaders circle sphere globe ball apple evil liquid robot from future Help worm to �nd food http://vvvv.org/documentation/tutorial-of-e�ects-and-shaders http://vvvv.org/contributions Actually, all we give our worm to eat is the same sphere, but our shader determines how that sphere will appear. Shaders are nothing but good news. Firstly, without knowing anything about them, you can use them as usual nodes. Simply look in the EX9.E�ects category in the NodeBrowser. The single thing you must always remember is that you must apply a mesh to the shader, to give it an object to visualise. Second, since vvvv has a built-in HLSL textual editor, you may edit and create original e�ects yourself. Simply right-click on an e�ect node to open the CodeEditor window, or start your own shader by cloning a template. Select Template (EX9.E�ect) from NodeBrowser and press Ctrl-Enter to start editing a new shader. And third, there are plenty of lovely shaders developed and shared by the community: You must apply a mesh to a shader. As you see, a shader usually has lots of option becoming much more advanced, you may want to spend 20 minutes logic http://vvvv.org/documentation/logic Classic if, else, then logic can be easly recreated with boolean nodes like OR, AND, NOT. When programming sequences, interaction logic or any other more complex tasks, you should try NOT to interweave the logic parts of your patch deep into the graphical parts of your patch. It is generally best to have a 'central command' station where you handle all the locical states in an abstract way, and then send only the relevant data to other places in your patch. You can also achieve the same results with simple value nodes like Equal You must stop on red light, and you can go on green. vvvv has switch nodes which can do this in your patches. You can also create complex algorithms with the boolean category nodes. Hard switch between values, strings, colors,nodes Smooth morph between values or colors A slightly more complex case: type ‘box’ to see box insteed of teapot Set was hit withing the last 2 seconds If processes in your patch are going to be concerned with time (like a count down from 10 to 0), or you need timebased loops (like an animated wal