Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Up to 11th tutorial

  • Loading branch information...
commit 7173241eb011b05b93f1cf6c0a7ee6419b266f2d 1 parent a286062
@elliotwoods authored
View
18 0. Basic principles.html
@@ -18,27 +18,29 @@
document.createElement('hold');
document.createElement('release');
</script>
-<link rel="stylesheet" type="text/css" href="VVVV.Tools.MakeDocumentation/style.css" />
+<link rel="stylesheet" type="text/css" href="html_resources/style.css" />
</head>
<body>
-<img src="C:\jobs\kimchi and chips\workshops\VVVV.Tutorials.Fundamentals-Mapping\0. Basic principles.png" />
+<img src="C:\kimchiandchips\Workshops\VVVV.Tutorials.Fundamentals\0. Basic principles.png" />
<h2>0 - The patch</h2>
<p> When we open VVVV, we get a blank square. </p><p> This blank square is a view of a new blank VVVV document, which is called a <concept>Patch</concept>. </p><p> Patches define 'programs' in VVVV. A patch can perform all sorts of tasks. It can act on its own, or can perform a specific function within a bigger patch. When one patch is nested within another, it is called a <concept>Subpatch</concept>. </p><p> The <concept>Graph</concept> is a term given to everything that VVVV is thinking about. This word can commonly be used interchangeable with the 'Patch', but the Graph is also a more general term which incorporates all running patches and subpatches. </p><p> Patches are made entirely out of <concept>Nodes</concept> and <concept>Links</concept>. </p><p> We donote a Node like this: <node>Node name</node>. </p><p> Almost all of the interface for VVVV is handled by nodes, and therefore there are no toolbars, menu bars, etc. to start with. The main exception to this is the <concept>Main Menu</concept>. </p><p></p>
<h2>1 - Creating nodes</h2>
-<p> <img src="../VVVV.Tools.MakeDocumentation/resources/click.png" 2/> <img src="../VVVV.Tools.MakeDocumentation/resources/lmb.png" /> in an empty space in the patch window. </p><p> This will bring up the <concept>NodeBrowser</concept> which you can use to create new nodes. </p><p> If you start typing, the NodeBrowser will begin searching for new nodes. </p><p> Use <key>Up</key>/<key>Down</key> on the keyboard to select different nodes within the list. Use the <scroll /> scroll on the mouse to scroll the list. Press <key>Enter</key> on the keyboard or click on an item in the list to create the node. </p><p> <img src="../VVVV.Tools.MakeDocumentation/resources/click.png" /><img src="../VVVV.Tools.MakeDocumentation/resources/rmb.png" /> on the text box at the top of the NodeBrowser, to browse for nodes by category. </p><p></p>
+<p> <img src="html_resources/click2.png"/> <img src="html_resources/lmb.png" /> in an empty space in the patch window. </p><p> This will bring up the <concept>NodeBrowser</concept> which you can use to create new nodes. </p><p> If you start typing, the NodeBrowser will begin searching for new nodes. </p><p> Use <key>Up</key>/<key>Down</key> on the keyboard to select different nodes within the list. Use the <img src="html_resources/scroll.png" /> scroll on the mouse to scroll the list. Press <key>Enter</key> on the keyboard or click on an item in the list to create the node. </p><p> <img src="html_resources/click.png" /><img src="html_resources/rmb.png" /> on the text box at the top of the NodeBrowser, to browse for nodes by category. </p><p></p>
<h2>2 - Scrolling</h2>
-<p> There are 2 main ways to scroll around the patch in VVVV. You can either: </p><p> <ol> <li><b>Drag right mouse button <img src="../VVVV.Tools.MakeDocumentation/resources/hold.png" /><img src="../VVVV.Tools.MakeDocumentation/resources/rmb.png" /> </b></p><p> Move your mouse over an empty area of the patch, hold down your right mouse button and then start moving your mouse. Release the mouse <img src="../VVVV.Tools.MakeDocumentation/resources/release.png" /><img src="../VVVV.Tools.MakeDocumentation/resources/rmb.png" /> to stop scrolling</p><p>You will notice that the whole patch will move with respect to the window. This is the most common form of scrolling. But WARNING! Be careful not to <img src="../VVVV.Tools.MakeDocumentation/resources/click.png" /><img src="../VVVV.Tools.MakeDocumentation/resources/rmb.png" />on any links in the patch. It's common for beginners to scroll like this with their mouse over a link. Right clicking on a link deletes it!</li> <li><b>With the scroll wheel <scroll /></b> </p><p> Safer for busy patches (for the link-deleting reason described above). You can scroll up/down using <scroll />. You can scroll left/right with <key>Alt</key>+<scroll /> and using the scroll wheel. You can scroll super-quick using <key>Ctrl</key>+<scroll />.</li> </ol></p>
+<p> There are 2 main ways to scroll around the patch in VVVV. You can either: </p><p> <ol> <li><b>Drag right mouse button <img src="html_resources/hold.png"/><img src="html_resources/rmb.png"/> </b></p><p> Move your mouse over an empty area of the patch, hold down your right mouse button and then start moving your mouse. Release the mouse <img src="html_resources/release.png"/><img src="html_resources/rmb.png"/> to stop scrolling</p><p>You will notice that the whole patch will move with respect to the window. This is the most common form of scrolling. But WARNING! Be careful not to <img src="html_resources/click.png"/><img src="html_resources/rmb.png"/>on any links in the patch. It's common for beginners to scroll like this with their mouse over a link. Right clicking on a link deletes it!</li> <li><b>With the scroll wheel <img src="html_resources/scroll.png" /></b> </p><p> Safer for busy patches (for the link-deleting reason described above). You can scroll up/down using <img src="html_resources/scroll.png" />. You can scroll left/right with <key>Alt</key>+<img src="html_resources/scroll.png" /> and using the scroll wheel. You can scroll super-quick using <key>Ctrl</key>+<img src="html_resources/scroll.png" />.</li> </ol></p>
<h2>3 - Main Menu</h2>
-<p> The main menu contains a set of functions. All except a couple of which can be accessed without using the main menu. </p><p> To open the main menu, move your mouse over an empty area of the patch and click the middle mouse button <img src="../VVVV.Tools.MakeDocumentation/resources/click.png" /><img src="../VVVV.Tools.MakeDocumentation/resources/mmb.png" />. If you dont have a middle mouse button, then use <key>Shift</key>+<img src="../VVVV.Tools.MakeDocumentation/resources/click.png" /><img src="../VVVV.Tools.MakeDocumentation/resources/rmb.png" />. </p><p> The main menu performs common tasks such as Open, Close, Save, Quit, Copy, Paste, etc. as well as some VVVV specific functions which may help you debug your patch, direct you to help, speed up your patch.</p>
+<p> The main menu contains a set of functions. All except a couple of which can be accessed without using the main menu. </p><p> To open the main menu, move your mouse over an empty area of the patch and click the middle mouse button <img src="html_resources/click.png"/><img src="html_resources/mmb.png"/>. If you dont have a middle mouse button, then use <key>Shift</key>+<img src="html_resources/click.png"/><img src="html_resources/rmb.png"/>. </p><p> The main menu performs common tasks such as Open, Close, Save, Quit, Copy, Paste, etc. as well as some VVVV specific functions which may help you debug your patch, direct you to help, speed up your patch.</p>
<h2>4 - IOBoxes</h2>
-<p> An <node>IOBox</node> is a special node. It is the most basic method for inputting data into VVVV (input), and for seeing the data for ourselves (output). We can only edit data inside an IOBox if it has nothing connected to its <pin>input</pin>. </p><p> Try changing the value in a basic way by double clicking <img src="../VVVV.Tools.MakeDocumentation/resources/click.png" 2/><img src="../VVVV.Tools.MakeDocumentation/resources/lmb.png" /> on it, and entering a value manually, then press <key>Enter</key>.</p>
+<p> An <node>IOBox</node> is a special node. It is the most basic method for inputting data into VVVV (input), and for seeing the data for ourselves (output). We can only edit data inside an IOBox if it has nothing connected to its <pin>input</pin>. </p><p> Try changing the value in a basic way by double clicking <img src="html_resources/click2.png"/><img src="html_resources/lmb.png"/> on it, and entering a value manually, then press <key>Enter</key>.</p>
<h2>5 - Pins</h2>
<p> Nodes need a way of communicating with other nodes. </p><p> The 'cable' that connects 2 nodes together is called a <concept>Link</concept>, and the 'socket' where the cable connects to the node is called a <concept>Pin</concept>. </p><p> In this documentation, we demonstrate a pin with the following style: <pin>style</pin>. This could denote either a specific pin such as <node>+ (Value)</node> node's <pin>Input 1</pin>, or more casually refer to a general pin, such as the <pin>input</pin> of an <node>IOBox</node>. Output pins are on the bottom of the nodes Input pins are on the top of the nodes. </p><p> An <pin>input</pin> can only be connected to 1 other node's <pin>output </pin> at any time. </p><p> An <pin>output</pin> can be connected to many other nodes' <pin>input </pin> at any time. </p><p> Roll your mouse over a pin to see what value it has (works for both inputs and outputs). </p><p></p>
<h2>6 - Links</h2>
-<p> As mentioned before, a connection between 2 nodes is called a 'Link'. </p><p> A link is made between an <pin>input</pin> pin (on the top of a node) and an <pin>output</pin> pin (the bottom of another node). </p><p> A pin is denoted like this <pin>Pin name</pin>. </p><p> We can think of the data flowing from the ouput of one node, down the link, and into the input pin of the 'downstream' node. </p><p> To make a link, first select a pin to start making the connection by left clicking <img src="../VVVV.Tools.MakeDocumentation/resources/click.png" /><img src="../VVVV.Tools.MakeDocumentation/resources/lmb.png" /> on the pin. You must remember to click (and not to drag, especially if you're used to Max/MSP style linking). </p><p> Once you have clicked once and made sure to release the mouse button <img src="../VVVV.Tools.MakeDocumentation/resources/release.png" /><img src="../VVVV.Tools.MakeDocumentation/resources/lmb.png" />, you are now ready to select the target pin for your link. Pins that you are allowed to connect to (i.e pins that you can make a meaningful connection with) are highlighted by becoming graphically larger on the screen. Click <img src="../VVVV.Tools.MakeDocumentation/resources/click.png" /><img src="../VVVV.Tools.MakeDocumentation/resources/lmb.png" /> on a target pin to complete the link. </p><p> To delete a link. Right click on it, or select it by left clicking on it, and hit <key>Delete</key>. </p>
+<p> As mentioned before, a connection between 2 nodes is called a 'Link'. </p><p> A link is made between an <pin>input</pin> pin (on the top of a node) and an <pin>output</pin> pin (the bottom of another node). </p><p> A pin is denoted like this <pin>Pin name</pin>. </p><p> We can think of the data flowing from the ouput of one node, down the link, and into the input pin of the 'downstream' node. </p><p> To make a link, first select a pin to start making the connection by left clicking <img src="html_resources/click.png"/><img src="html_resources/lmb.png"/> on the pin. You must remember to click (and not to drag, especially if you're used to Max/MSP style linking). </p><p> Once you have clicked once and made sure to release the mouse button <img src="html_resources/release.png"/><img src="html_resources/lmb.png"/>, you are now ready to select the target pin for your link. Pins that you are allowed to connect to (i.e pins that you can make a meaningful connection with) are highlighted by becoming graphically larger on the screen. Click <img src="html_resources/click.png"/><img src="html_resources/lmb.png"/> on a target pin to complete the link. </p><p> To delete a link. Right click on it, or select it by left clicking on it, and hit <key>Delete</key>. </p>
<h2>7. Input pins</h2>
<p> Data sent via a link is sent from an output pin and received on an input pin. Input pins are the pins across the top of a node. </p><p> Input pins have different names depending on their function. For basic nodes, the main input is called <pin>Input</pin>. Put data in there to get a result. </p><p> There may also be other input pins also called "Input", e.g. a <node>+ (Value)</node> node has by default 2 inputs, <pin>Input 1</pin>, <pin>Input 2</pin> which are the 2 numbers to be added together. </p><p> Sometimes it's appropriate for the input pins to have different names, e.g. a <node>HSL (Color, Join)</node> node has 4 inputs: <pin>Hue</pin>, <pin>Saturation</pin>, <pin>Lightness</pin>, <pin>Alpha</pin>. These are joined together into 1 colour value on the <pin>Output</pin>. </p><p> Input pins can generally store values. If you connect to an input pin, then disconnect, it will store the last value given to it. </p><p> Sometimes the input pins are attributes for how that node should behave, e.g. A <node>Renderer (EX9)</node> node has a <pin>Fullscreen</pin> pin, which allows you to set that renderer's window to be fullscreen.</p>
<h2>8 - Links again</h2>
-<p> 1 output can be linked to several inputs <br/> 1 input can only be linked to 1 output </p><p> Links can be created by either first selecting the output, then the input, or vice versa. (Both times, using <img src="../VVVV.Tools.MakeDocumentation/resources/click.png" /><img src="../VVVV.Tools.MakeDocumentation/resources/lmb.png" /> </p><p> If you want to make a link from 1 output to multiple inputs, then you can either create them all one by one using <img src="../VVVV.Tools.MakeDocumentation/resources/click.png" /><img src="../VVVV.Tools.MakeDocumentation/resources/lmb.png" />, or you can create them more quickly by starting to create the link from the <pin>output</pin> pin using the right mouse button <img src="../VVVV.Tools.MakeDocumentation/resources/click.png" /><img src="../VVVV.Tools.MakeDocumentation/resources/rmb.png" />. Now every time you <img src="../VVVV.Tools.MakeDocumentation/resources/click.png" /><img src="../VVVV.Tools.MakeDocumentation/resources/lmb.png" /> an <pin>input</pin> to make a connection, you will still have the <pin>output</pin> selected and be free to create a new connection to another input using 1 more <img src="../VVVV.Tools.MakeDocumentation/resources/click.png" /><img src="../VVVV.Tools.MakeDocumentation/resources/lmb.png" /> without reselecting the output. Right click <img src="../VVVV.Tools.MakeDocumentation/resources/click.png" /><img src="../VVVV.Tools.MakeDocumentation/resources/rmb.png" /> in blank space to get rid of the link you are creating.. </p><p> If you start to make a link by accident, right click <img src="../VVVV.Tools.MakeDocumentation/resources/click.png" /><img src="../VVVV.Tools.MakeDocumentation/resources/rmb.png" /> in a blank area to clear. </p><p> A common error is to 'miss' when trying to make a connection (this is either through being inaccurate with the mouse, or by selecting the wrong pin to connect to). This means that no link has been made, but you still likely have the link attached to your mouse. Be careful of this, make sure the link is created properly and still exists after you move the mouse away! Otherwise try again. </p><p> To 'smarten up' your links follow these steps: <ol> <li> Select them (either lasso a few of them at once by dragging out a selection box around them, or select them one by one with left mouse button). </li> <li> Press <key>Ctrl</key>+<key>Y</key> until you get the style of your choice (Right angles, Curves, Direct) </li> </ol></p>
+<p> 1 output can be linked to several inputs <br/> 1 input can only be linked to 1 output </p><p> Links can be created by either first selecting the output, then the input, or vice versa. (Both times, using <img src="html_resources/click.png"/><img src="html_resources/lmb.png"/> </p><p> If you want to make a link from 1 output to multiple inputs, then you can either create them all one by one using <img src="html_resources/click.png"/><img src="html_resources/lmb.png"/>, or you can create them more quickly by starting to create the link from the <pin>output</pin> pin using the right mouse button <img src="html_resources/click.png"/><img src="html_resources/rmb.png"/>. Now every time you <img src="html_resources/click.png"/><img src="html_resources/lmb.png"/> an <pin>input</pin> to make a connection, you will still have the <pin>output</pin> selected and be free to create a new connection to another input using 1 more <img src="html_resources/click.png"/><img src="html_resources/lmb.png"/> without reselecting the output. Right click <img src="html_resources/click.png"/><img src="html_resources/rmb.png"/> in blank space to get rid of the link you are creating.. </p><p> If you start to make a link by accident, right click <img src="html_resources/click.png"/><img src="html_resources/rmb.png"/> in a blank area to clear. </p><p> A common error is to 'miss' when trying to make a connection (this is either through being inaccurate with the mouse, or by selecting the wrong pin to connect to). This means that no link has been made, but you still likely have the link attached to your mouse. Be careful of this, make sure the link is created properly and still exists after you move the mouse away! Otherwise try again. </p><p> To 'smarten up' your links follow these steps: <ol> <li> Select them (either lasso a few of them at once by dragging out a selection box around them, or select them one by one with left mouse button). </li> <li> Press <key>Ctrl</key>+<key>Y</key> until you get the style of your choice (Right angles, Curves, Direct) </li> </ol></p>
+<h2>9 - Help and tutorials</h2>
+<p> There are some great tutorials to help you out if you're stuck / get curious: <ul> <li>If you want help about a node, select it with <img src="html_resources/click.png"/><img src="html_resources/lmb.png"/> and press <key>F1</key></li> <li>If you want to see examples of what you can do with VVVV, check the <b>girlpower</b> folder within the VVVV directory for sample patches</li> <li>Make sure to make a user on the <b>www.vvvv.org</b> website, and post your queries in the forum</li> <li>Check out West's VVVV tutorial videos on YouTube</li> </ul></p>
</body>
</html>
View
BIN  0. Basic principles.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
12 1. IOBox.html
@@ -18,23 +18,23 @@
document.createElement('hold');
document.createElement('release');
</script>
-<link rel="stylesheet" type="text/css" href="MakeDocumentation/style.css" />
+<link rel="stylesheet" type="text/css" href="html_resources/style.css" />
</head>
<body>
-<img src="./1. IOBox.png" />
+<img src="C:\kimchiandchips\Workshops\VVVV.Tutorials.Fundamentals\1. IOBox.png" />
<h2>0 - IOBox</h2>
<p> The most basic input / output mechanism in VVVV is the <node>IOBox</node>. </p><p> There are different IOBoxes for different types of data (Value, String, Color, Enum, Node). </p><p> The most basic type of data is called a Value, which means a real number (note for programmers: this is currently represented by a double precision floating point value). </p><p> IOBoxes perform multiple roles: <ol> <li>Give opportunities for user input/output</li> <li>Holds data when no input is connected</li> <li>Perform access to inputs/outputs of subpatches (more on that later!)</li> </ol> </p>
<h2>1 - Drag right mouse button</h2>
-<p> Move your mouse cursor over the IOBox without pressing any buttons. Now hold down the right mouse button <hold/><rmb/>and drag up/down to change the value. </p><p> To move through values more slowly (more accuracy) hold down either <key>Ctrl</key> or <key>Shift</key> whilst dragging the right mouse button: e.g. <key>Ctrl</key>+<hold/><rmb/>. Hold down both to get even more accuracy <key>Ctrl</key>+<key>Shift</key>+<hold/><rmb/>. </p><p> To move through values more quickly hold down <key>Alt</key>+<key>Ctrl</key> or <key>Alt</key>+<key>Shift</key> whilst dragging the right mouse button. Hold <key>Alt</key>+<key>Ctrl</key>+<key>Shift</key> for maximum speed. </p><p> In VVVV, generally we use the right mouse button <rmb/> for interacting with Values and other datatypes. We use the left mouse button <lmb/> to change the patch itself.</p>
+<p> Move your mouse cursor over the IOBox without pressing any buttons. Now hold down the right mouse button <img src="html_resources/hold.png"/><img src="html_resources/rmb.png"/>and drag up/down to change the value. </p><p> To move through values more slowly (more accuracy) hold down either <key>Ctrl</key> or <key>Shift</key> whilst dragging the right mouse button: e.g. <key>Ctrl</key>+<img src="html_resources/hold.png"/><img src="html_resources/rmb.png"/>. Hold down both to get even more accuracy <key>Ctrl</key>+<key>Shift</key>+<img src="html_resources/hold.png"/><img src="html_resources/rmb.png"/>. </p><p> To move through values more quickly hold down <key>Alt</key>+<key>Ctrl</key> or <key>Alt</key>+<key>Shift</key> whilst dragging the right mouse button. Hold <key>Alt</key>+<key>Ctrl</key>+<key>Shift</key> for maximum speed. </p><p> In VVVV, generally we use the right mouse button <img src="html_resources/rmb.png"/> for interacting with Values and other datatypes. We use the left mouse button <img src="html_resources/lmb.png"/> to change the patch itself.</p>
<h2>2 - Double left click</h2>
-<p> The alternative way of changing the value is to double click on the IOBox <click2/><lmb/> to change the value by entering it with the keyboard.</p>
+<p> The alternative way of changing the value is to double click on the IOBox <img src="html_resources/click2.png"/><img src="html_resources/lmb.png"/> to change the value by entering it with the keyboard.</p>
<h2>3 - Editing using input pin</h2>
-<p> In general, we can edit the value of an input pin by right clicking on it <click/><rmb/>. We can also use right click drag <hold/><rmb/>. An IOBox is a very special type of node where the contents can effect the input pin. No other node will affect its input pin.</p>
+<p> In general, we can edit the value of an input pin by right clicking on it <img src="html_resources/click.png"/><img src="html_resources/rmb.png"/>. We can also use right click drag <img src="html_resources/hold.png"/><img src="html_resources/rmb.png"/>. An IOBox is a very special type of node where the contents can effect the input pin. No other node will affect its input pin.</p>
<h2>4 - When connected</h2>
<p> When an <pin>input</pin> is connected, then you cannot edit that input. Since altering the value of an IOBox would alter the value of an input, you cannot interact directly with the value of an IOBox when an input is attached.</p>
<h2>5 - Spreaded IOBoxes</h2>
<p> An <node>IOBox</node> can carry more than one <concept>Value</concept>. VVVV has a special way of dealing with several values at the same time, this is called a <concept>Spread</concept>. </p><p> Here we have an <node>IOBox</node> which works with 4 values. This is sometimes called a '4D vector' <node>IOBox</node></p>
<h2>6 - Shortcut to create IOBox</h2>
-<p> Since you'll be making these all the time, VVVV kindly gives you a shortcut to create a new <node>IOBox</node>. </p><p> To do this double right click <click2/><rmb/> in an empty area of the patch. This will give you a simple <node>IOBox (Value advanced)</node>. </p><p> A menu will also appear allowing you to create different types of <node> IOBox</node>.</p>
+<p> Since you'll be making these all the time, VVVV kindly gives you a shortcut to create a new <node>IOBox</node>. </p><p> To do this double right click <img src="html_resources/click2.png"/><img src="html_resources/rmb.png"/> in an empty area of the patch. This will give you a simple <node>IOBox (Value advanced)</node>. </p><p> A menu will also appear allowing you to create different types of <node> IOBox</node>.</p>
</body>
</html>
View
BIN  1. IOBox.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
32 10. DirectX 2.html
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-16"?>
+<html>
+<head>
+<title>Annotations</title>
+<script>
+ document.createElement('node');
+ document.createElement('pin');
+ document.createElement('key');
+ document.createElement('concept');
+
+ document.createElement('lmb');
+ document.createElement('rmb');
+ document.createElement('mmb');
+ document.createElement('scroll');
+
+ document.createElement('click');
+ document.createElement('click2');
+ document.createElement('hold');
+ document.createElement('release');
+ </script>
+<link rel="stylesheet" type="text/css" href="html_resources/style.css" />
+</head>
+<body>
+<img src="C:\kimchiandchips\Workshops\VVVV.Tutorials.Fundamentals\10. DirectX 2.png" />
+<h2>0 - Quality settings</h2>
+<p> The <node>Renderer (EX9)</node> has plenty of settings hidden away in the <node>Inspektor</node>. Here are some of the ones you definitely want to become familiar with: </p><p> <ul> <li><pin>Fullscreen Depthbuffer</pin> - For 3D scenes you generall want to turn this 'on', i.e. choose a setting other than <b>NONE</b>. The <concept>Depth Buffer</concept> is what that graphics card uses to detect when objects are in front of each other, so it knows how to draw them properly</li> <li><pin>Fullscreen Dimensions</pin> - When you make your renderer fullscreen, this is the resolution that it will use. The renderer will become fullscreen on whatever screen it is on at that time, i.e. if you want it to come up on the second screen, you must drag the renderer window to there before going fullscreen. Also by doing this, you will have the correct list of resolutions for that screen</li> <li><pin>Fullscreen Antialiasing</pin> - This smooths the edges of objects, generally turn this on to make graphics look detailed and smooth. Depending on your graphics card different options will be available.</li> <li><pin>Windowed Depthbuffer</pin> - Same as <pin>Fullscreen Depthbuffer</pin>, but this option applies instead when the renderer is not fullscreen</li> <li><pin>Windowed Antialiasing</pin> - Same as above</li> </ul> </p><p> The most important thing most of the time is to make sure to turn on Antialiasing and Depthbuffer. </p><p> To demonstrate this, I've created 3 renderers at the side which share a common scene and a common camera. They each have different settings for <pin>Windowed Antialiasing</pin> and <pin>Windowed Depthbuffer</pin>. WARNING: The <node>Inspektor</node> locked inside this patch will block you opening up another <node>Inspektor</node>. But if you turn off the <b>Attached</b> button, then it will start acting like a normal <node>Inspektor</node> (albeit inside the patch rather than in a window).</p>
+<h2>1 - Multiple renderers</h2>
+<p> Here we're also demonstraing something that VVVV does effortlessly: </p><p> Rendering the same objects to multiple <node>Renderer</node>'s. </p><p> In fact, with VVVV you can mix and match <node>Renderer</node>'s however you like. It's a real strength of the platform. And something that isn't properly available on any other hardware accelerated platform for media arts use.</p>
+<h2>2 - Perfmeter</h2>
+<p> The <node>PerfMeter (Debug)</node> node gives you vital information about how your computer is performing and what is slowing it down. </p><p> The big number is the <concept>Framerate</concept> which is measured in <concept>Frames Per Second (fps)</concept>. You generally want this to be the same as your <concept>Refresh rate</concept> (commonly 60Hz, therefore 60fps is best). </p><p> The running graph is the history of your framerate, and the other graphs give you more detailed information as to what is taking up your processing time. </p><p> An ideal situation is generally a nice flat line at 60fps.</p>
+</body>
+</html>
View
BIN  10. DirectX 2.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
489 10. DirectX 2.v4p
@@ -0,0 +1,489 @@
+<!DOCTYPE PATCH SYSTEM "http://vvvv.org/versions/vvvv45beta26.dtd" >
+ <PATCH nodename="C:\kimchiandchips\Workshops\VVVV.Tutorials.Fundamentals\10. DirectX 2.v4p" filename="C:\kimchiandchips\Workshops\VVVV.Tutorials.Fundamentals\9. DirectX 2.v4p" locked="0" systemname="9. DirectX 2">
+ <BOUNDS height="13725" left="5310" top="600" type="Window" width="16800">
+ </BOUNDS>
+ <NODE componentmode="InABox" id="0" nodename="IOBox (String)" systemname="IOBox (String)">
+ <BOUNDS height="270" left="225" top="150" type="Node" width="1380">
+ </BOUNDS>
+ <BOUNDS height="1095" left="225" top="150" type="Box" width="7665">
+ </BOUNDS>
+ <PIN encoded="0" pinname="Input String" slicecount="1" visible="0" values="|10. DirectX 2|">
+ </PIN>
+ <PIN pinname="Output String" visible="0">
+ </PIN>
+ <PIN pinname="Show Grid" slicecount="1" values="1">
+ </PIN>
+ <PIN pinname="String Type" slicecount="1" values="MultiLine">
+ </PIN>
+ <PIN pinname="Size" slicecount="1" values="42">
+ </PIN>
+ </NODE>
+ <NODE componentmode="InABox" id="2" nodename="IOBox (String)" systemname="IOBox (String)">
+ <BOUNDS height="270" left="105" top="12405" type="Node" width="2070">
+ </BOUNDS>
+ <BOUNDS height="750" left="105" top="12405" type="Box" width="5325">
+ </BOUNDS>
+ <PIN encoded="0" pinname="Input String" slicecount="1" visible="0" values="|Created by Elliot Woods.&cr;&lf;Distributed under the MIT license (check file LICENSE) for details.&cr;&lf;Generally you can do whatever you want with these files. have fun!|">
+ </PIN>
+ <PIN pinname="Output String" visible="0">
+ </PIN>
+ <PIN pinname="Show Grid" slicecount="1" values="1">
+ </PIN>
+ <PIN pinname="String Type" slicecount="1" values="MultiLine">
+ </PIN>
+ </NODE>
+ <NODE componentmode="InABox" id="5" nodename="IOBox (String)" systemname="IOBox (String)">
+ <BOUNDS height="270" left="5805" top="2640" type="Node" width="1380">
+ </BOUNDS>
+ <BOUNDS height="540" left="5805" top="2640" type="Box" width="2085">
+ </BOUNDS>
+ <PIN encoded="0" pinname="Input String" visible="1">
+ </PIN>
+ <PIN pinname="Output String" visible="0">
+ </PIN>
+ <PIN pinname="Show Grid" slicecount="1" values="0">
+ </PIN>
+ <PIN pinname="String Type" slicecount="1" values="MultiLine">
+ </PIN>
+ <PIN pinname="Size" slicecount="1" values="12">
+ </PIN>
+ <PIN encoded="0" pinname="Descriptive Name" slicecount="1" values="Author">
+ </PIN>
+ </NODE>
+ <NODE componentmode="InABox" id="6" nodename="IOBox (String)" systemname="IOBox (String)">
+ <BOUNDS height="270" left="225" top="1260" type="Node" width="1380">
+ </BOUNDS>
+ <BOUNDS height="1155" left="225" top="1260" type="Box" width="7665">
+ </BOUNDS>
+ <PIN encoded="0" pinname="Input String" visible="1">
+ </PIN>
+ <PIN pinname="Output String" visible="0">
+ </PIN>
+ <PIN pinname="Show Grid" slicecount="1" values="0">
+ </PIN>
+ <PIN pinname="String Type" slicecount="1" values="MultiLine">
+ </PIN>
+ <PIN pinname="Size" slicecount="1" values="12">
+ </PIN>
+ <PIN encoded="0" pinname="Descriptive Name" slicecount="1" values="Description">
+ </PIN>
+ </NODE>
+ <INFO author="Elliot Woods" description="Setting the &apos;Quality settings&apos; of the Renderer, and the VVVV performance meter" tags="Inspektor, Renderer, Antialiasing, Depth buffer, Fullscreen resolutions">
+ </INFO>
+ <NODE componentmode="Hidden" filename="Subpatches\GetMetadata (VVVV).v4p" hiddenwhenlocked="1" id="10" nodename="GetMetadata (VVVV)" systemname="GetMetadata (VVVV)">
+ <BOUNDS height="100" left="5820" top="1800" type="Node" width="100">
+ </BOUNDS>
+ <PIN pinname="Patch" visible="1">
+ </PIN>
+ <BOUNDS height="3465" left="14520" top="5520" type="Window" width="4680">
+ </BOUNDS>
+ <PIN pinname="Author" visible="1">
+ </PIN>
+ <PIN pinname="Description" visible="1">
+ </PIN>
+ <PIN pinname="Tags" visible="1">
+ </PIN>
+ </NODE>
+ <NODE componentmode="Hidden" hiddenwhenlocked="1" id="8" nodename="PatchAlias (VVVV)" systemname="PatchAlias (VVVV)">
+ <BOUNDS height="100" left="5820" top="1350" type="Node" width="100">
+ </BOUNDS>
+ <PIN pinname="Patch" visible="1">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="10" dstpinname="Patch" hiddenwhenlocked="1" srcnodeid="8" srcpinname="Patch">
+ </LINK>
+ <LINK dstnodeid="6" dstpinname="Input String" hiddenwhenlocked="1" linkstyle="VHV" srcnodeid="10" srcpinname="Description">
+ <LINKPOINT x="6445" y="2205">
+ </LINKPOINT>
+ <LINKPOINT x="245" y="2355">
+ </LINKPOINT>
+ </LINK>
+ <NODE componentmode="InABox" id="11" nodename="IOBox (String)" systemname="IOBox (String)">
+ <BOUNDS height="270" left="225" top="2640" type="Node" width="1380">
+ </BOUNDS>
+ <BOUNDS height="540" left="225" top="2640" type="Box" width="5520">
+ </BOUNDS>
+ <PIN encoded="0" pinname="Input String" visible="1">
+ </PIN>
+ <PIN pinname="Output String" visible="0">
+ </PIN>
+ <PIN pinname="Show Grid" slicecount="1" values="0">
+ </PIN>
+ <PIN pinname="String Type" slicecount="1" values="MultiLine">
+ </PIN>
+ <PIN pinname="Size" slicecount="1" values="10">
+ </PIN>
+ <PIN encoded="0" pinname="Descriptive Name" slicecount="1" values="Tags">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="11" dstpinname="Input String" hiddenwhenlocked="1" linkstyle="VHV" srcnodeid="10" srcpinname="Tags">
+ <LINKPOINT x="7015" y="2293">
+ </LINKPOINT>
+ <LINKPOINT x="275" y="2448">
+ </LINKPOINT>
+ </LINK>
+ <LINK dstnodeid="5" dstpinname="Input String" hiddenwhenlocked="1" srcnodeid="10" srcpinname="Author">
+ </LINK>
+ <NODE componentmode="InABox" id="103" nodename="IOBox (String)" systemname="IOBox (String)">
+ <BOUNDS height="270" left="8145" top="3465" type="Node" width="330">
+ </BOUNDS>
+ <BOUNDS height="7515" left="8145" top="3465" type="Box" width="345">
+ </BOUNDS>
+ <PIN encoded="0" pinname="Input String" slicecount="1" visible="0" values="||">
+ </PIN>
+ <PIN pinname="Output String" visible="0">
+ </PIN>
+ <PIN pinname="Show Grid" slicecount="1" values="1">
+ </PIN>
+ <PIN pinname="String Type" slicecount="1" values="MultiLine">
+ </PIN>
+ </NODE>
+ <NODE componentmode="InABox" id="12" nodename="IOBox (String)" systemname="IOBox (String)">
+ <PIN encoded="0" pinname="Input String" slicecount="1" visible="0" values="|[0 - Quality settings]&cr;&lf;&cr;&lf;The &lt;node&gt;Renderer (EX9)&lt;/node&gt; has plenty of settings hidden away in the &lt;node&gt;Inspektor&lt;/node&gt;. Here are some of the ones you definitely want to become familiar with:&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;&lt;ul&gt;&cr;&lf;&lt;li&gt;&lt;pin&gt;Fullscreen Depthbuffer&lt;/pin&gt; - For 3D scenes you generall want to turn this &apos;on&apos;, i.e. choose a setting other than &lt;b&gt;NONE&lt;/b&gt;. The &lt;concept&gt;Depth Buffer&lt;/concept&gt; is what that graphics card uses to detect when objects are in front of each other, so it knows how to draw them properly&lt;/li&gt;&cr;&lf;&lt;li&gt;&lt;pin&gt;Fullscreen Dimensions&lt;/pin&gt; - When you make your renderer fullscreen, this is the resolution that it will use. The renderer will become fullscreen on whatever screen it is on at that time, i.e. if you want it to come up on the second screen, you must drag the renderer window to there before going fullscreen. Also by doing this, you will have the correct list of resolutions for that screen&lt;/li&gt;&cr;&lf;&lt;li&gt;&lt;pin&gt;Fullscreen Antialiasing&lt;/pin&gt; - This smooths the edges of objects, generally turn this on to make graphics look detailed and smooth. Depending on your graphics card different options will be available.&lt;/li&gt;&cr;&lf;&lt;li&gt;&lt;pin&gt;Windowed Depthbuffer&lt;/pin&gt; - Same as &lt;pin&gt;Fullscreen Depthbuffer&lt;/pin&gt;, but this option applies instead when the renderer is not fullscreen&lt;/li&gt;&cr;&lf;&lt;li&gt;&lt;pin&gt;Windowed Antialiasing&lt;/pin&gt; - Same as above&lt;/li&gt;&cr;&lf;&lt;/ul&gt;&cr;&lf;&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;The most important thing most of the time is to make sure to turn on Antialiasing and Depthbuffer.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;To demonstrate this, I&apos;ve created 3 renderers at the side which share a common scene and a common camera. They each have different settings for &lt;pin&gt;Windowed Antialiasing&lt;/pin&gt; and &lt;pin&gt;Windowed Depthbuffer&lt;/pin&gt;.&cr;&lf;&cr;&lf;WARNING: The &lt;node&gt;Inspektor&lt;/node&gt; locked inside this patch will block you opening up another &lt;node&gt;Inspektor&lt;/node&gt;. But if you turn off the &lt;b&gt;Attached&lt;/b&gt; button, then it will start acting like a normal &lt;node&gt;Inspektor&lt;/node&gt; (albeit inside the patch rather than in a window).|">
+ </PIN>
+ <BOUNDS height="270" left="2760" top="3765" type="Node" width="2070">
+ </BOUNDS>
+ <BOUNDS height="375" left="2760" top="3765" type="Box" width="2460">
+ </BOUNDS>
+ <PIN pinname="Output String" visible="0">
+ </PIN>
+ <PIN pinname="Show Grid" slicecount="1" values="0">
+ </PIN>
+ <PIN pinname="String Type" slicecount="1" values="MultiLine">
+ </PIN>
+ <PIN pinname="Font" slicecount="1" values="|Arial Black|">
+ </PIN>
+ <PIN pinname="Size" slicecount="1" values="10">
+ </PIN>
+ <PIN encoded="0" pinname="Descriptive Name" slicecount="1" values="||">
+ </PIN>
+ </NODE>
+ <NODE componentmode="Hidden" id="181" nodename="Renderer (EX9)" systemname="Renderer (EX9)">
+ <BOUNDS height="100" left="1455" top="4470" type="Node" width="100">
+ </BOUNDS>
+ <BOUNDS height="1635" left="1455" top="4470" type="Box" width="3705">
+ </BOUNDS>
+ <BOUNDS height="5010" left="8835" top="6315" type="Window" width="6240">
+ </BOUNDS>
+ <PIN pinname="Layers" visible="1" slicecount="1" values="||">
+ </PIN>
+ <PIN pinname="View" visible="1" slicecount="1" values="||">
+ </PIN>
+ <PIN pinname="Projection" visible="1" slicecount="1" values="||">
+ </PIN>
+ </NODE>
+ <NODE systemname="Inspektor (VVVV)" nodename="Inspektor (VVVV)" componentmode="InABox" id="208">
+ <BOUNDS type="Node" left="3525" top="4260" width="100" height="100">
+ </BOUNDS>
+ <BOUNDS type="Box" left="3525" top="4260" width="4380" height="6555">
+ </BOUNDS>
+ <BOUNDS type="Window" left="10110" top="8490" width="5100" height="8250">
+ </BOUNDS>
+ </NODE>
+ <NODE systemname="Renderer (EX9)" nodename="Renderer (EX9)" componentmode="InABox" id="209">
+ <BOUNDS type="Node" left="8925" top="2010" width="100" height="100">
+ </BOUNDS>
+ <BOUNDS type="Box" left="8925" top="2010" width="3615" height="2790">
+ </BOUNDS>
+ <BOUNDS type="Window" left="14910" top="4560" width="6240" height="5010">
+ </BOUNDS>
+ <PIN pinname="Layers" visible="1">
+ </PIN>
+ <PIN pinname="View" visible="1">
+ </PIN>
+ <PIN pinname="Projection" visible="1">
+ </PIN>
+ </NODE>
+ <NODE systemname="Teapot (EX9.Geometry)" nodename="Teapot (EX9.Geometry)" componentmode="Hidden" id="210">
+ <BOUNDS type="Node" left="9060" top="765" width="100" height="100">
+ </BOUNDS>
+ <PIN pinname="Mesh" visible="1">
+ </PIN>
+ </NODE>
+ <NODE systemname="Camera (Transform Softimage)" filename="%VVVV%\modules\vvvv group\Transform\Camera (Transform Softimage).v4p" nodename="Camera (Transform Softimage)" componentmode="Hidden" id="211" hiddenwhenlocked="1">
+ <BOUNDS type="Node" left="11535" top="1500" width="100" height="100">
+ </BOUNDS>
+ <PIN pinname="View" visible="1">
+ </PIN>
+ <PIN pinname="Projection" visible="1">
+ </PIN>
+ </NODE>
+ <NODE systemname="GouraudDirectional (EX9.Effect)" filename="%VVVV%\effects\GouraudDirectional.fx" nodename="GouraudDirectional (EX9.Effect)" componentmode="Hidden" id="212">
+ <BOUNDS type="Node" left="8925" top="1440" width="100" height="100">
+ </BOUNDS>
+ <PIN pinname="Layer" visible="1">
+ </PIN>
+ <PIN pinname="Render State" visible="1" slicecount="1" values="||">
+ </PIN>
+ <PIN pinname="Mesh" visible="1">
+ </PIN>
+ <PIN pinname="Transform" visible="1">
+ </PIN>
+ </NODE>
+ <LINK srcnodeid="212" srcpinname="Layer" dstnodeid="209" dstpinname="Layers">
+ </LINK>
+ <LINK srcnodeid="210" srcpinname="Mesh" dstnodeid="212" dstpinname="Mesh">
+ </LINK>
+ <LINK srcnodeid="211" srcpinname="View" dstnodeid="209" dstpinname="View" hiddenwhenlocked="1">
+ </LINK>
+ <LINK srcnodeid="211" srcpinname="Projection" dstnodeid="209" dstpinname="Projection" linkstyle="Bezier" hiddenwhenlocked="1">
+ <LINKPOINT x="11910" y="1883">
+ </LINKPOINT>
+ <LINKPOINT x="12090" y="1883">
+ </LINKPOINT>
+ </LINK>
+ <NODE systemname="UniformScale (Transform)" nodename="UniformScale (Transform)" componentmode="Hidden" id="214">
+ <BOUNDS type="Node" left="9240" top="1080" width="100" height="100">
+ </BOUNDS>
+ <PIN pinname="Transform Out" visible="1">
+ </PIN>
+ <PIN pinname="XYZ" slicecount="1" values="10">
+ </PIN>
+ </NODE>
+ <LINK srcnodeid="214" srcpinname="Transform Out" dstnodeid="212" dstpinname="Transform">
+ </LINK>
+ <NODE nodename="IOBox (String)" componentmode="InABox" id="216" systemname="IOBox (String)">
+ <BOUNDS type="Node" left="9060" top="4935" width="1245" height="270">
+ </BOUNDS>
+ <BOUNDS type="Box" left="9060" top="4935" width="1290" height="420">
+ </BOUNDS>
+ <PIN pinname="Input String" visible="0" slicecount="1" values="|Antialiasing: off&cr;&lf;Depth buffer: off|" encoded="0">
+ </PIN>
+ <PIN pinname="Output String" visible="0">
+ </PIN>
+ <PIN pinname="Show Grid" slicecount="1" values="0">
+ </PIN>
+ <PIN pinname="String Type" slicecount="1" values="MultiLine">
+ </PIN>
+ </NODE>
+ <NODE systemname="Renderer (EX9)" nodename="Renderer (EX9)" componentmode="InABox" id="220">
+ <BOUNDS type="Node" left="12675" top="1980" width="100" height="100">
+ </BOUNDS>
+ <BOUNDS type="Box" left="12675" top="1980" width="3615" height="2790">
+ </BOUNDS>
+ <BOUNDS type="Window" left="14910" top="4560" width="6240" height="5010">
+ </BOUNDS>
+ <PIN pinname="Layers" visible="1">
+ </PIN>
+ <PIN pinname="View" visible="1">
+ </PIN>
+ <PIN pinname="Projection" visible="1">
+ </PIN>
+ <PIN pinname="Windowed Depthbuffer Format" slicecount="1" values="D16">
+ </PIN>
+ </NODE>
+ <LINK srcnodeid="212" srcpinname="Layer" dstnodeid="220" dstpinname="Layers" linkstyle="VHV">
+ <LINKPOINT x="8985" y="1830">
+ </LINKPOINT>
+ <LINKPOINT x="12675" y="1830">
+ </LINKPOINT>
+ </LINK>
+ <LINK srcnodeid="211" srcpinname="View" dstnodeid="220" dstpinname="View" hiddenwhenlocked="1" linkstyle="VHV">
+ </LINK>
+ <LINK srcnodeid="211" srcpinname="Projection" dstnodeid="220" dstpinname="Projection" linkstyle="VHV" hiddenwhenlocked="1">
+ <LINKPOINT x="13130" y="2380">
+ </LINKPOINT>
+ <LINKPOINT x="14605" y="1370">
+ </LINKPOINT>
+ </LINK>
+ <NODE systemname="Renderer (EX9)" nodename="Renderer (EX9)" componentmode="InABox" id="222">
+ <BOUNDS type="Node" left="8925" top="5655" width="100" height="100">
+ </BOUNDS>
+ <BOUNDS type="Box" left="8925" top="5655" width="3615" height="2790">
+ </BOUNDS>
+ <BOUNDS type="Window" left="14910" top="4560" width="6240" height="5010">
+ </BOUNDS>
+ <PIN pinname="Layers" visible="1">
+ </PIN>
+ <PIN pinname="View" visible="1">
+ </PIN>
+ <PIN pinname="Projection" visible="1">
+ </PIN>
+ <PIN pinname="Windowed Depthbuffer Format" slicecount="1" values="D16">
+ </PIN>
+ <PIN pinname="Windowed Antialiasing Quality Level" slicecount="1" values="3">
+ </PIN>
+ </NODE>
+ <NODE nodename="IOBox (String)" componentmode="InABox" id="221" systemname="IOBox (String)">
+ <BOUNDS type="Node" left="8985" top="8565" width="1245" height="270">
+ </BOUNDS>
+ <BOUNDS type="Box" left="8985" top="8565" width="1695" height="1575">
+ </BOUNDS>
+ <PIN pinname="Input String" visible="0" slicecount="1" encoded="0" values="|Antialiasing: on&cr;&lf;Depth buffer: on&cr;&lf;&cr;&lf;These settings may not work on NVidia. If not, try turning on the Antialiasing yourself!|">
+ </PIN>
+ <PIN pinname="Output String" visible="0">
+ </PIN>
+ <PIN pinname="Show Grid" slicecount="1" values="0">
+ </PIN>
+ <PIN pinname="String Type" slicecount="1" values="MultiLine">
+ </PIN>
+ </NODE>
+ <LINK srcnodeid="211" srcpinname="View" dstnodeid="222" dstpinname="View" hiddenwhenlocked="1">
+ </LINK>
+ <LINK srcnodeid="211" srcpinname="Projection" dstnodeid="222" dstpinname="Projection" linkstyle="Bezier" hiddenwhenlocked="1">
+ <LINKPOINT x="11880" y="4105">
+ </LINKPOINT>
+ <LINKPOINT x="12105" y="3320">
+ </LINKPOINT>
+ </LINK>
+ <LINK srcnodeid="212" srcpinname="Layer" dstnodeid="222" dstpinname="Layers">
+ </LINK>
+ <NODE componentmode="InABox" id="223" nodename="IOBox (String)" systemname="IOBox (String)">
+ <PIN encoded="0" pinname="Input String" slicecount="1" visible="0" values="|[1 - Multiple renderers]&cr;&lf;Here we&apos;re also demonstraing something that VVVV does effortlessly:&cr;&lf;&lt;br /&gt;&cr;&lf;Rendering the same objects to multiple &lt;node&gt;Renderer&lt;/node&gt;&apos;s.&cr;&lf;&lt;br /&gt;&cr;&lf;In fact, with VVVV you can mix and match &lt;node&gt;Renderer&lt;/node&gt;&apos;s however you like. It&apos;s a real strength of the platform. And something that isn&apos;t properly available on any other hardware accelerated platform for media arts use.|">
+ </PIN>
+ <BOUNDS height="270" left="12915" top="6030" type="Node" width="2070">
+ </BOUNDS>
+ <BOUNDS height="375" left="12915" top="6030" type="Box" width="2775">
+ </BOUNDS>
+ <PIN pinname="Output String" visible="0">
+ </PIN>
+ <PIN pinname="Show Grid" slicecount="1" values="0">
+ </PIN>
+ <PIN pinname="String Type" slicecount="1" values="MultiLine">
+ </PIN>
+ <PIN pinname="Font" slicecount="1" values="|Arial Black|">
+ </PIN>
+ <PIN pinname="Size" slicecount="1" values="10">
+ </PIN>
+ <PIN encoded="0" pinname="Descriptive Name" slicecount="1" values="||">
+ </PIN>
+ </NODE>
+ <NODE systemname="Renderer (EX9)" nodename="Renderer (EX9)" componentmode="InABox" id="224">
+ <BOUNDS type="Node" left="12195" top="9165" width="100" height="100">
+ </BOUNDS>
+ <BOUNDS type="Box" left="12195" top="9165" width="4215" height="3615">
+ </BOUNDS>
+ <BOUNDS type="Window" left="17850" top="10980" width="6240" height="5010">
+ </BOUNDS>
+ <PIN pinname="Layers" visible="1">
+ </PIN>
+ <PIN pinname="View" visible="1">
+ </PIN>
+ <PIN pinname="Projection" visible="1">
+ </PIN>
+ <PIN pinname="Windowed Antialiasing Quality Level" slicecount="1" values="3">
+ </PIN>
+ <PIN pinname="Windowed Depthbuffer Format" slicecount="1" values="D16">
+ </PIN>
+ </NODE>
+ <NODE systemname="Group (EX9)" nodename="Group (EX9)" componentmode="Hidden" id="225">
+ <BOUNDS type="Node" left="12180" top="8640" width="1290" height="270">
+ </BOUNDS>
+ <PIN pinname="Layer" visible="1">
+ </PIN>
+ <PIN pinname="Layer 1" visible="1">
+ </PIN>
+ <PIN pinname="Layer 2" visible="1">
+ </PIN>
+ </NODE>
+ <LINK srcnodeid="225" srcpinname="Layer" dstnodeid="224" dstpinname="Layers">
+ </LINK>
+ <LINK srcnodeid="212" srcpinname="Layer" dstnodeid="225" dstpinname="Layer 1" linkstyle="Bezier" hiddenwhenlocked="1">
+ <LINKPOINT x="8870" y="5300">
+ </LINKPOINT>
+ <LINKPOINT x="12295" y="5050">
+ </LINKPOINT>
+ </LINK>
+ <NODE systemname="PerfMeter (Debug)" filename="%VVVV%\modules\catweasel\Debug\PerfMeter (Debug).v4p" nodename="PerfMeter (Debug)" componentmode="Hidden" id="226">
+ <BOUNDS type="Node" left="12810" top="8205" width="100" height="100">
+ </BOUNDS>
+ <PIN pinname="Layer" visible="1">
+ </PIN>
+ </NODE>
+ <LINK srcnodeid="226" srcpinname="Layer" dstnodeid="225" dstpinname="Layer 2">
+ </LINK>
+ <NODE componentmode="InABox" id="227" nodename="IOBox (String)" systemname="IOBox (String)">
+ <BOUNDS height="270" left="11565" top="8550" type="Node" width="330">
+ </BOUNDS>
+ <BOUNDS height="4335" left="11565" top="8550" type="Box" width="345">
+ </BOUNDS>
+ <PIN encoded="0" pinname="Input String" slicecount="1" visible="0" values="||">
+ </PIN>
+ <PIN pinname="Output String" visible="0">
+ </PIN>
+ <PIN pinname="Show Grid" slicecount="1" values="1">
+ </PIN>
+ <PIN pinname="String Type" slicecount="1" values="MultiLine">
+ </PIN>
+ </NODE>
+ <LINK srcnodeid="211" srcpinname="View" dstnodeid="224" dstpinname="View" linkstyle="Bezier" hiddenwhenlocked="1">
+ <LINKPOINT x="11745" y="5468">
+ </LINKPOINT>
+ <LINKPOINT x="15435" y="5468">
+ </LINKPOINT>
+ </LINK>
+ <LINK srcnodeid="211" srcpinname="Projection" dstnodeid="224" dstpinname="Projection" linkstyle="Bezier" hiddenwhenlocked="1">
+ <LINKPOINT x="11910" y="5468">
+ </LINKPOINT>
+ <LINKPOINT x="15885" y="5468">
+ </LINKPOINT>
+ </LINK>
+ <NODE componentmode="InABox" id="228" nodename="IOBox (String)" systemname="IOBox (String)">
+ <PIN encoded="0" pinname="Input String" slicecount="1" visible="0" values="|[2 - Perfmeter]&cr;&lf;The &lt;node&gt;PerfMeter (Debug)&lt;/node&gt; node gives you vital information about how your computer is performing and what is slowing it down.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;The big number is the &lt;concept&gt;Framerate&lt;/concept&gt; which is measured in &lt;concept&gt;Frames Per Second (fps)&lt;/concept&gt;. You generally want this to be the same as your &lt;concept&gt;Refresh rate&lt;/concept&gt; (commonly 60Hz, therefore 60fps is best).&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;The running graph is the history of your framerate, and the other graphs give you more detailed information as to what is taking up your processing time.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;An ideal situation is generally a nice flat line at 60fps.|">
+ </PIN>
+ <BOUNDS height="270" left="13395" top="7725" type="Node" width="2070">
+ </BOUNDS>
+ <BOUNDS height="390" left="13395" top="7725" type="Box" width="1875">
+ </BOUNDS>
+ <PIN pinname="Output String" visible="0">
+ </PIN>
+ <PIN pinname="Show Grid" slicecount="1" values="0">
+ </PIN>
+ <PIN pinname="String Type" slicecount="1" values="MultiLine">
+ </PIN>
+ <PIN pinname="Font" slicecount="1" values="|Arial Black|">
+ </PIN>
+ <PIN pinname="Size" slicecount="1" values="10">
+ </PIN>
+ <PIN encoded="0" pinname="Descriptive Name" slicecount="1" values="||">
+ </PIN>
+ </NODE>
+ <NODE id="219" nodename="IOBox (String)" componentmode="InABox" systemname="IOBox (String)" hiddenwhenlocked="0" managers="">
+ <BOUNDS type="Node" left="12795" top="4890" width="1245" height="270">
+ </BOUNDS>
+ <BOUNDS type="Box" left="12795" top="4890" width="1290" height="420">
+ </BOUNDS>
+ <PIN pinname="Input String" slicecount="1" visible="0" encoded="0" pintype="Input" values="|Antialiasing: off&cr;&lf;Depth buffer: on|">
+ </PIN>
+ <PIN pinname="Output String" visible="0" pintype="Output">
+ </PIN>
+ <PIN pinname="Show Grid" slicecount="1" pintype="Configuration" values="0">
+ </PIN>
+ <PIN pinname="String Type" slicecount="1" pintype="Configuration" values="MultiLine">
+ </PIN>
+ <BOUNDS type="Window" left="0" top="0" width="0" height="0">
+ </BOUNDS>
+ <PIN pinname="Descriptive Name" pintype="Configuration" slicecount="1" values="||" encoded="0">
+ </PIN>
+ <PIN pinname="Pin Visibility" pintype="Configuration" slicecount="1" values="True">
+ </PIN>
+ <PIN pinname="SliceCount Mode" pintype="Configuration" slicecount="1" values="Input">
+ </PIN>
+ <PIN pinname="Columns" pintype="Configuration" slicecount="1" values="1">
+ </PIN>
+ <PIN pinname="Rows" pintype="Configuration" slicecount="1" values="1">
+ </PIN>
+ <PIN pinname="Pages" pintype="Configuration" slicecount="1" values="1">
+ </PIN>
+ <PIN pinname="Show SliceIndex" pintype="Configuration" slicecount="1" values="0">
+ </PIN>
+ <PIN pinname="Font" pintype="Configuration" slicecount="1" values="|Lucida Sans Unicode|">
+ </PIN>
+ <PIN pinname="Size" pintype="Configuration" slicecount="1" values="7">
+ </PIN>
+ <PIN pinname="Default" pintype="Configuration" slicecount="1" values="||" encoded="0">
+ </PIN>
+ <PIN pinname="File Mask" pintype="Configuration" slicecount="1" values="||" encoded="0">
+ </PIN>
+ <PIN pinname="Maximum Characters" pintype="Configuration" slicecount="1" values="-1">
+ </PIN>
+ <PIN pinname="Character Encoding" pintype="Configuration" slicecount="1" values="ANSI">
+ </PIN>
+ <PIN pinname="Show Characters [#0..#32,#127]" pintype="Configuration" slicecount="1" values="0">
+ </PIN>
+ <PIN pinname="SliceOffset" pintype="Input" visible="-1" slicecount="1" values="0">
+ </PIN>
+ <PIN pinname="ID" pintype="Output" visible="-1">
+ </PIN>
+ </NODE>
+ </PATCH>
View
4 2. IOBox 2.html
@@ -23,13 +23,13 @@
<body>
<img src="C:\kimchiandchips\Workshops\VVVV.Tutorials.Fundamentals\2. IOBox 2.png" />
<h2>0 - IOBox II</h2>
-<p> The <node>IOBox (Value Advanced)</node> supports many different ways of dealing with values. </p><p> Try interacting with these IOBox's. Remember to interact you use the <click/><rmb/>right mouse button.</p>
+<p> The <node>IOBox (Value Advanced)</node> supports many different ways of dealing with values. </p><p> Try interacting with these IOBox's. Remember to interact you use the <img src="html_resources/click.png"/><img src="html_resources/rmb.png"/>right mouse button.</p>
<h2>1 - Toggle</h2>
<p> A <concept>Toggle</concept> is a very simple message that can be sent around the patch. It generally switches something downstream like 'enable this'. </p><p> A toggle is simply a Value of either 0 or 1. </p><p> 0 denotes low or 'off', 1 denotes high or 'on'. </p><p></p>
<h2>2 - Bang</h2>
<p> A <concept>Bang</concept> is another very simple message that can be sent around the patch. It generally tells something downstream to 'do something', like 'reset' or 'start'. </p><p> The message only exists for an instance, then disappears. It's like poking someone on the shoulder. A bang is 'instantaneous'. </p><p> If you're familiar with bangs from Max/MSP, then you're likely <b>NOT</b> going to be very familiar with bangs in VVVV. Watch out! They work very differently! </p><p> 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. </p><p></p>
<h2>3 - Bangs and Toggles example</h2>
-<p> Let's try out <concept>Bang</concept>s and <concept>Toggle</concept>s! </p><p> Let's create: <ul> <li>1 IOBox Toggle + 1 IOBox Bang*</li> <li>1 <node>Stopwatch (Animation)</node></li> <li>1 IOBox value </li> </ul> </p><p> * To create a toggle IOBox, double right click <click2/><rmb/> and select 'Toggle' from the menu. Do the same for bang, but this time select 'Bang'. </p><p> For the bottom IOBox, let's use another shortcut. First <click/><lmb/> on the <pin>Output</pin> pin of <node>Stopwatch</node>. Move your mouse away and then click the middle mouse button <click/><mmb/>, this should automatically create a new connected <node>IOBox</node> for you of the correct type for what it's connected to. <click/><mmb/> on the <node>IOBox</node> again to give it a label. </p><p> Now connect everything up as shown in the diagram. </p><p> We can also give names to IOBox's very easily. Since they are now connected to the Stopwatch node's <pin>Run</pin>, <pin>Reset</pin> and <pin>Output</pin> pins respectively, we can copy these names into the IOBox's. To do this, we middle click <click/><mmb/> on the 3 IOBox's one by one. </p><p> Now try to interact with the 'Run' and 'Reset' boxes that you have created using right click <click/><rmb/>.</p>
+<p> Let's try out <concept>Bang</concept>s and <concept>Toggle</concept>s! </p><p> Let's create: <ul> <li>1 IOBox Toggle + 1 IOBox Bang*</li> <li>1 <node>Stopwatch (Animation)</node></li> <li>1 IOBox value </li> </ul> </p><p> * To create a toggle IOBox, double right click <img src="html_resources/click2.png"/><img src="html_resources/rmb.png"/> and select 'Toggle' from the menu. Do the same for bang, but this time select 'Bang'. </p><p> For the bottom IOBox, let's use another shortcut. First <img src="html_resources/click.png"/><img src="html_resources/lmb.png"/> on the <pin>Output</pin> pin of <node>Stopwatch</node>. Move your mouse away and then click the middle mouse button <img src="html_resources/click.png"/><img src="html_resources/mmb.png"/>, this should automatically create a new connected <node>IOBox</node> for you of the correct type for what it's connected to. <img src="html_resources/click.png"/><img src="html_resources/mmb.png"/> on the <node>IOBox</node> again to give it a label. </p><p> Now connect everything up as shown in the diagram. </p><p> We can also give names to IOBox's very easily. Since they are now connected to the Stopwatch node's <pin>Run</pin>, <pin>Reset</pin> and <pin>Output</pin> pins respectively, we can copy these names into the IOBox's. To do this, we middle click <img src="html_resources/click.png"/><img src="html_resources/mmb.png"/> on the 3 IOBox's one by one. </p><p> Now try to interact with the 'Run' and 'Reset' boxes that you have created using right click <img src="html_resources/click.png"/><img src="html_resources/rmb.png"/>.</p>
<h2>4 - Color</h2>
<p> A <concept>Color</concept> is a datatype within VVVV. It allows you to deal with colour values. </p><p> Colours have obvious graphical uses such as determining the colour of objects that you want to render. </p><p> There are many nodes that allow you deal with colours directly, or convert them to other data types.</p>
<h2>5 - String</h2>
View
BIN  2. IOBox 2.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
6 2. IOBox 2.v4p
@@ -1,6 +1,6 @@
<!DOCTYPE PATCH SYSTEM "http://vvvv.org/versions/vvvv45beta26.dtd" >
- <PATCH nodename="C:\kimchiandchips\Workshops\VVVV-basics,mapping\2. IOBox #2.v4p" filename="C:\kimchiandchips\Workshops\VVVV-basics,mapping\1. IOBox #2.v4p" locked="0" systemname="1. IOBox #2">
- <BOUNDS height="14070" left="-8535" top="0" type="Window" width="8370">
+ <PATCH nodename="C:\kimchiandchips\Workshops\VVVV.Tutorials.Fundamentals\2. IOBox 2.v4p" filename="C:\kimchiandchips\Workshops\VVVV-basics,mapping\1. IOBox #2.v4p" locked="0" systemname="1. IOBox #2">
+ <BOUNDS height="14070" left="13395" top="1080" type="Window" width="8370">
</BOUNDS>
<NODE componentmode="InABox" id="0" nodename="IOBox (String)" systemname="IOBox (String)">
<BOUNDS height="270" left="225" top="150" type="Node" width="1380">
@@ -572,6 +572,6 @@
<PIN pinname="Fill Mode" visible="1">
</PIN>
</NODE>
- <LINK srcnodeid="36" srcpinname="Output Enum" dstnodeid="37" dstpinname="Fill Mode">
+ <LINK dstnodeid="37" dstpinname="Fill Mode" srcnodeid="36" srcpinname="Output Enum">
</LINK>
</PATCH>
View
34 3. IOBox 3.html
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-16"?>
+<html>
+<head>
+<title>Annotations</title>
+<script>
+ document.createElement('node');
+ document.createElement('pin');
+ document.createElement('key');
+ document.createElement('concept');
+
+ document.createElement('lmb');
+ document.createElement('rmb');
+ document.createElement('mmb');
+ document.createElement('scroll');
+
+ document.createElement('click');
+ document.createElement('click2');
+ document.createElement('hold');
+ document.createElement('release');
+ </script>
+<link rel="stylesheet" type="text/css" href="html_resources/style.css" />
+</head>
+<body>
+<img src="C:\kimchiandchips\Workshops\VVVV.Tutorials.Fundamentals\3. IOBox 3.png" />
+<h2>0 -The Inspektor</h2>
+<p> Let's create a set of sliders. </p><p> Create a new <node>IOBox</node> with <img src="html_resources/click2.png"/><img src="html_resources/rmb.png"/>. </p><p> There are 2 pins on the IOBox at present: <ul> <li><pin>Y Input Value</pin></li> <li><pin>Y Output Value</pin></li> </ul> </p><p> However, there are many hidden pins on the IOBox that can configure it in all sorts of ways. To see these hidden pins, we need to use the <node>Inspektor</node>. </p><p> To open the <node>Inspektor</node>: <ol> <li>Select the <node>IOBox</node> with a single <img src="html_resources/click.png"/><img src="html_resources/lmb.png"/> (it should now be highlighted. To deselect an object, <img src="html_resources/click.png"/><img src="html_resources/lmb.png"/> in an empty area of the patch).</li> <li>Press <key>Ctrl</key>+<key>I</key>. This should bring up the <node>Inspektor</node> window. </ol> The <node>Inspektor</node> will show you hidden properties about whatever you have selected. </p><p> The pins shown in the <node>Inspektor</node> are split into 3 areas: <ul> <li><b>Config pins</b> - These pins can only be edited using the Inspektor.</li> <li><b>Input pins</b></li> <li><b>Output pins</b></li> </ul></p>
+<h2>1 - Configuring a set of sliders I</h2>
+<p> With the <node>Inspektor</node> open, let's change some settings of the <node>IOBox</node>. </p><p> First let's make our <node>IOBox</node> work with 8 values at once. We do this by setting the following configuration properties: <ul> <li>Set <pin>SliceCount Mode</pin> to 'ColsRowsPages' (remember to use <img src="html_resources/click.png"/><img src="html_resources/rmb.png"/> to change variables</li> <li>Set <pin>Columns</pin> to '4'</li> </ul> </p><p> Now let's resize the <node>IOBox</node>. To do this move your cursor to the bottom edge of the node on the right hand side, your cursor should change to a resize icon. Now drag out the size of the node. </p><p> We should have 4 values shown.</p>
+<h2>2 - Configuring a set of sliders II</h2>
+<p> Now let's change the visual style. </p><p> <ul> <li>Turn <b>on</b> <pin>Show Grid</pin></li> <li>Turn <b>off</b> <pin>Show Value</pin></li> <li>Turn <b>on</b> <pin>Show Slider</pin></li> <li>Set <pin>Slider Behaviour</pin> to <b>Slider</b></li </ul> Let's visualise the output of this. <img src="html_resources/click2.png"/><img src="html_resources/rmb.png"/> and select <b>4D Vector</b>. Put this beneath your sliders and connect the <pin>Y Value Output</pin> of your sliders to the <pin>Y Value Input</pin> of your 4D Vector <node>IOBox</node>. </p><p> Now try interacting with your sliders by dragging the right mouse button <img src="html_resources/hold.png"/><img src="html_resources/rmb.png"/> up and down on each slider. </p><p> We find that the sliders can move between -1000 and 1000. We can change this range using the <pin>Minimum</pin> and <pin>Maximum</pin> Values in the <node>Inspektor</node>.</p>
+<h2>3 - Help patches</h2>
+<p> VVVV has a built in help mechanism for most common nodes. To open a <concept>Help Patch</concept>, select a node <img src="html_resources/click.png"/><img src="html_resources/lmb.png"/>(e.g. an <node>IOBox</node>) and press <key>F1</key>. </p><p> The <node>IOBox</node> help patch displays a thorough set of information about how that node works. </p><p> Let's try another one. First create a <node>Homography (Transform 2d)</node> node. Then select it <img src="html_resources/click.png"/><img src="html_resources/lmb.png"/> and press <key>F1</key>. </p><p> Try interacting with the top right <node>IOBox</node></p>
+</body>
+</html>
View
BIN  3. IOBox 3.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
34 4. DirectX.html
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-16"?>
+<html>
+<head>
+<title>Annotations</title>
+<script>
+ document.createElement('node');
+ document.createElement('pin');
+ document.createElement('key');
+ document.createElement('concept');
+
+ document.createElement('lmb');
+ document.createElement('rmb');
+ document.createElement('mmb');
+ document.createElement('scroll');
+
+ document.createElement('click');
+ document.createElement('click2');
+ document.createElement('hold');
+ document.createElement('release');
+ </script>
+<link rel="stylesheet" type="text/css" href="html_resources/style.css" />
+</head>
+<body>
+<img src="C:\kimchiandchips\Workshops\VVVV.Tutorials.Fundamentals\4. DirectX.png" />
+<h2>0 - DirectX</h2>
+<p> Now that we have a basic understanding of the VVVV interface, we can start to understand how to generate graphics. </p><p> First lets try the most simple type of drawing. Let's create a <node>Quad</node> and a <node>Renderer (EX9)</node>. Connect them together from <node>Quad</node>'s <pin>Layer</pin> output to <node>Renderer</node>'s <pin>Layers</pin> input.</p>
+<h2>1 - Window modes</h2>
+<p> With the <node>Renderer</node> selected. Try the following key combinations: <ul> <li><b><key>Alt</key>+<key>3</key></b> - Hidden</li> <li><b><key>Alt</key>+<key>2</key></b> - Inside the patch</li> <li><b><key>Alt</key>+<key>1</key></b> - In a seperate window</li> <li><b><key>Alt</key>+<key>Enter</key></b> - Fullscreen</li> </ul> </p><p> You can now press <key>Alt</key>+<key>Enter</key> again to exit fullscreen.</p>
+<h2>2 - Blend mode</h2>
+<p> Let's create a new node above <node>Quad</node> called <node>Fill (EX9.RenderState)</node> </p><p> Connect it's output to <node>Quad</node>'s <pin>Render State</pin> input.</p><p> Now create an enum IOBox above Fill. This time we'll use another shortcut. First <img src="html_resources/click.png"/><img src="html_resources/lmb.png"/> on the top right pin <pin>Fill Mode</pin> to start creating a link. Then move your mouse away and do a <img src="html_resources/click.png"/><img src="html_resources/mmb.png"/> to create a new matching IOBox. </p><p> Try selecting different fill modes in the IOBox (remember to use <img src="html_resources/click.png"/><img src="html_resources/rmb.png"/>).</p>
+<h2>3 - Group</h2>
+<p> The <node>Renderer</node> node has only 1 <pin>Layers</pin> input, and in VVVV, each <pin>input</pin> can only only accept 1 Link. So how do we connect multiple objects to 1 Renderer? </p><p> For this, we use the <node>Group (EX9)</node>. Let's create some nodes, from the top let's create: <ul> <li>A <node>Quad</node> and a <node>Text (EX9)</node></li> <li>A <node>Group (EX9)</node> node</li> <li>A <node>Renderer (EX9)</node></li> </ul> </p><p> First connect the <node>Group</node> to the <node>Renderer</node>, then connect the <node>Text</node> to the <node>Group</node>'s <pin>Layer 2</pin> input pin. Now you should be rendering the text "vvvv". You can change this text using the 3rd input pin <pin>Text</pin> on the <node>Text</node> node. </p><p> Now connect the <node>Quad</node> to the <pin>Layer 1</pin> input of <node>Group</node>. Both objects should now be drawing. </p><p> Since they are both the same colour, it is a little confusing to see. So let's change the colour of the Quad: <ol> <li>Create a new node at the top called <node>HSL (Color Join)</node>. </li> <li>Attach the <pin>Output</pin> of <node>HSL</node> to the <pin>Color</pin> input of <node>Quad</node></li> <li>Change the <pin>Lightness</pin> pin of <node>HSL</node> to around <b>0.2</b></li> <li>Change the <pin>Hue</pin> to <b>0</b></li> </ol> </p><p> You should now have some white text drawn on top of a red quad. </p><p> The order in which inputs are made to the <node>Group</node> node depicts what order the objects are drawn to the screen, i.e. since the <node>Quad</node> is connected to <pin>Layer 1</pin>, we draw this object first, and then the <node>Text</node> which is connected to <pin>Layer 2</pin>. This means that the Text is drawn on top of the Quad, since it is drawn second, and because there is no other depth queues in the scene. </p><p> To change the size of the quad to fit the text, let's make a new node above <node>Quad</node> called <node>Scale (Transform)</node>. Connect the <pin>Transform Out</pin> of <node>Scale</node> to the <pin>Transform</pin> input of <node>Quad</node>. Now try editing the <pin>x</pin>, <pin>y</pin> and <pin>z</pin> inputs of <node>Scale</node></p>
+</body>
+</html>
View
BIN  4. DirectX.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
36 5. Transforms.html
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-16"?>
+<html>
+<head>
+<title>Annotations</title>
+<script>
+ document.createElement('node');
+ document.createElement('pin');
+ document.createElement('key');
+ document.createElement('concept');
+
+ document.createElement('lmb');
+ document.createElement('rmb');
+ document.createElement('mmb');
+ document.createElement('scroll');
+
+ document.createElement('click');
+ document.createElement('click2');
+ document.createElement('hold');
+ document.createElement('release');
+ </script>
+<link rel="stylesheet" type="text/css" href="html_resources/style.css" />
+</head>
+<body>
+<img src="C:\kimchiandchips\Workshops\VVVV.Tutorials.Fundamentals\5. Transforms.png" />
+<h2></h2>
+<p></p>
+<h2>0 - Transforms</h2>
+<p> Let's setup a <node>Quad</node> with a <node>Renderer</node>. </p><p> Now let's add a <node>Transform 2d</node> above the <node>Quad</node>. </p><p> If we try and manipulate the input pins on the <node>Transform</node>, then we can see how we can move, scale and rotate the object in a simple way </p><p></p>
+<h2>1 - Vector transforms</h2>
+<p> The <node>Transform (2d)</node> is good to get started and for a range of tasks, but let's also have a look at a different way of dealing with transforms which can be more elegant. </p><p> Select your <node>Renderer</node> and <node>Quad</node> by dragging <img src="html_resources/hold.png"/><img src="html_resources/lmb.png"/> a selection box around the 2 nodes. Then duplicate these 2 nodes using <key>Ctrl</key>+<key>D</key> to duplicate. You should now have a copy of the <node>Quad</node> and the <node>Renderer</node>. Move these further down the patch. </p><p> Now lets add a <node>Scale (Transform Vector)</node> and a <node>Translate (Transform Vector)</node>. Connect the <pin>Transform Out</pin> of <node>Translate</node> into the <pin>Transform In</pin> of <node>Scale</node> and connect the <pin>Transform Out</pin> of <node>Scale</node> to the <pin>Transform</pin> input of <node>Quad</node>. </p><p> Now create 2 <b>Vector 3D</b> <node>IOBox</node>'s using the double right click <img src="html_resources/click2.png"/><img src="html_resources/rmb.png"/> quick menu. </p><p> Connect these 2 new <node>IOBox</node>'s to the <node>Scale</node> and <node>Transform</node> node's <pin>XYZ</pin> inputs. </p><p> Since your scale's input value is set to <b>0,0,0</b> your quad has no size. Increase this to <b>1,1,1</b>. (Note: a quick way of doing this is to <img src="html_resources/click.png"/><img src="html_resources/rmb.png"/> on the <node>IOBox</node>'s <pin>Input Value Y</pin> and type <key>1</key> then <key>Enter</key>. This will set all slices in the spread to 1.</p>
+<h2>3 - Rotation</h2>
+<p> Now let's add another transform to the <concept>Transform stack</concept>. Let's add a <node>Rotate</node> at the top in the same way we added the <node>Translate</node> and <node>Scale</node>. </p><p> The units of rotation in VVVV are : <ul> <li><b>0</b> = no rotation</li> <li><b>0.25</b> = 90 degrees (quarter rotation)</li> <li><b>0.5</b> = 180 degrees (half rotation)</li> <li><b>1</b> = 360 degrees (full rotation), back to the beginning</li> </ul> </p><p> This normalisation of rotations may seem strange, but it becomes very useful for quickly doing maths with rotations and imagining them yourself. </p><p> In VVVV, simple rotations are about 3 axes (corresponding the input <pin>XYZ</pin> on <node>Rotate (Transform Vector)</node>). These are: <ul> <li>X - Rotation about the positive X axis (the axis pointing right)</li> <li>Y - Rotation about the positive Y axis (the axis pointing up)</li> <li>Z - Rotation about the positive Z axis (the axis pointing out of the screen towards you)</li> </ul> </p><p> For standard 2D rotations, you'll want to spin the object in the axis pointing out of the screen. </p><p></p>
+<h2>4 - Transform order</h2>
+<p> In computer graphics. The order in which transforms are performed is important, e.g.: <ul> <li><b>Rotate then translate</b> - Spin the object around the origin (the center of the object), then move it</li> <li><b>Translate then rotate</b> - Move the object (hence move the center of the object), then spin the object around the origin (This causes the object to orbit around the center of the space).</li> </ul> </p><p> Try to put the transforms in different orders to understand how this works. More on this later. </ul></p>
+</body>
+</html>
View
BIN  5. Transforms.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
6 5. Transforms.v4p
@@ -1,5 +1,5 @@
<!DOCTYPE PATCH SYSTEM "http://vvvv.org/versions/vvvv45beta26.dtd" >
- <PATCH nodename="C:\kimchiandchips\Workshops\VVVV-basics,mapping\5. Transforms.v4p" filename="C:\kimchiandchips\Workshops\VVVV-basics,mapping\5. Transforms.v4p" locked="0" systemname="5. Transforms">
+ <PATCH nodename="C:\kimchiandchips\Workshops\VVVV.Tutorials.Fundamentals\5. Transforms.v4p" filename="C:\kimchiandchips\Workshops\VVVV-basics,mapping\5. Transforms.v4p" locked="0" systemname="5. Transforms">
<BOUNDS height="14025" left="13455" top="600" type="Window" width="8370">
</BOUNDS>
<NODE componentmode="InABox" id="0" nodename="IOBox (String)" systemname="IOBox (String)">
@@ -111,7 +111,7 @@
</PIN>
<PIN pinname="String Type" slicecount="1" values="MultiLine">
</PIN>
- <PIN pinname="Size" slicecount="1" values="12">
+ <PIN pinname="Size" slicecount="1" values="10">
</PIN>
<PIN encoded="0" pinname="Descriptive Name" slicecount="1" values="Tags">
</PIN>
@@ -402,6 +402,6 @@
<PIN encoded="0" pinname="Descriptive Name" slicecount="1" values="||">
</PIN>
</NODE>
- <LINK srcnodeid="86" srcpinname="Layer" dstnodeid="85" dstpinname="Layers">
+ <LINK dstnodeid="85" dstpinname="Layers" srcnodeid="86" srcpinname="Layer">
</LINK>
</PATCH>
View
6 6. Spreads.html
@@ -25,11 +25,11 @@
<h2>0 - Spreads</h2>
<p> <concept>Spreads</concept> are a fundamental tool in VVVV. They are the gift that keeps on giving (metephorically, and quite literally). </p><p> (Note for programmers: It's similar to an <b>Array</b> in normal programming speak, but also very different). </p><p> <ul> <li>A spread is a set of data.</li> <li>An individual item within a Spread is called a <concept>Slice</concept></li> <li>The number of Slices in a Spread is called the <concept>Spread Count</concept> or the <concept>Slice Count</concept></li> <li>Each Slice has a position within the Spread called a <concept>Slice Index</concept></li> <li>The first Slice in the Spread has Slice Index of <b>0</b>.</li> <li>If you try to access a slice index outside of the range (e.g. >= spread count or <0) then the spread 'loops'.</li> <li>A Spread of Spread Count <b>0</b> is a special case called an <concept>Empty Spread</concept> </ul> </p><p> <b>An example</b></p><p> 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: </p><p> <ul> <li>There are a spread of Values (price) and a spread of Strings (description)</li> <li>Both spreads have slice count of 10.</li> <li>At slice index 0 in the Value spread we have <b>2.5</b></li> <li>At slice index 0 in the spread of Strings we have <b>Battered cod</b></li> <li>At slice index 9 in the spread of Strings we have <b>Kimchi</b></li> <li>At slice index 10 in the spread of Strings we have <b>Battered cod</b> (we've looped here back to the beginning of the spread)</li> <li>At slice index -1 in the spread of Strings we have <b>Kimchi</b> (we've looped here back to the end of the spread)</li> </ul></p>
<h2>1 - GetSlice</h2>
-<p> A <node>GetSlice (Spreads)</node> node picks 1 or more slices out of a spread. </p><p> Let's create a <node>GetSlice (Spreads)</node> now, and attach a <b>4D Vector</b> <node>IOBox</node> to its <pin>Input</pin> and a simple <node>IOBox</node> to its <pin>Output</pin>. <img src="html_resources/click.png"/><img src="html_resources/mmb.png"/> on the bottom IOBox to give it a name. </p><p> For readability. Let's go into the <node>Inspektor</node> and change some properties for both <node>IOBox</node>. Set <pin>Value Type</pin> to <b>Integer</b> and <pin>Size</pin> to <b>14</b>. Also turn on <pin>Show Grid</pin> and <pin>Show SliceIndex</pin>. </p><p> Also let's add an <node>IOBox</node> on the <pin>Index</pin> input of <node>GetSlice</node> using our middle button trick <img src="html_resources/click.png"/><img src="html_resources/mmb.png"/>. </p><p> Add a <node>I (Spreads)</node> to the top and connect the output to the input of the 4D vector. Set the input pin <pin>To</pin> on <node>I</node> to <b>4</b>. This node now outputs a spread of <b>0, 1, 2, 3</b> i.e. values <pin>From</pin> <b>0</b> <pin>To</pin> <b>4</b>. </p><p> Now try changing the <b>Index</b> to see which slice is selected by the <node>GetSlice</node> node.</p>
+<p> A <node>GetSlice (Spreads)</node> node picks 1 or more slices out of a spread. </p><p> Let's create a <node>GetSlice (Spreads)</node> now, and attach a <b>4D Vector</b> <node>IOBox</node> to its <pin>Input</pin> and a simple <node>IOBox</node> to its <pin>Output</pin>. <img src="html_resources/click.png"/><img src="html_resources/mmb.png"/> on the bottom IOBox to give it a name. </p><p> For readability. Let's go into the <node>Inspektor</node> and change some properties for both <node>IOBox</node>'s. Set <pin>Value Type</pin> to <b>Integer</b> and <pin>Size</pin> to <b>14</b>. Also turn on <pin>Show Grid</pin> and <pin>Show SliceIndex</pin>. </p><p> Also let's add an <node>IOBox</node> on the <pin>Index</pin> input of <node>GetSlice</node> using our middle button trick <img src="html_resources/click.png"/><img src="html_resources/mmb.png"/>. (first click <img src="html_resources/click.png"/><img src="html_resources/lmb.png"/>on the pin to start a connection and then <img src="html_resources/click.png"/><img src="html_resources/mmb.png"/> to make an <node>IOBox</node> from the connection. </p><p> Add a <node>I (Spreads)</node> to the top and connect the output to the input of the 4D vector. Set the input pin <pin>To</pin> on <node>I</node> to <b>4</b>. This node now outputs a spread of <b>0, 1, 2, 3</b> i.e. values <pin>From</pin> <b>0</b> <pin>To</pin> <b>4</b>. </p><p> Now try changing the <b>Index</b> to see which slice is selected by the <node>GetSlice</node> node.</p>
<h2>2 - Always repeating</h2>
-<p> 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. </p><p> We can test this with a <node>GetSlice</node> with a simple <node>IOBox (Value)</node> input. </p><p> When we run it through a <node>GetSlice</node> and roll the <pin>Index</pin> pin different slices, we get the same value. </p><p> Important note: <b>Every Value, String, Colour, Enum, etc in VVVV is stored as a Spread, and therefore repeats like a Spread.</b> </p><p></p>
+<p> 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. </p><p> We can test this with a <node>GetSlice</node> with a simple <node>IOBox (Value)</node> input. </p><p> When we run it through a <node>GetSlice</node> and roll the <pin>Index</pin> pin different slices, we get the same value. </p><p> Important note: <concept>Every Value, String, Colour, Enum, etc in VVVV is stored as a Spread, and therefore repeats like a Spread.</concept> </p><p></p>
<h2>3 - A visual spread experiment</h2>
-<p> So let's try and visualise what happens with spreads. </p><p> 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. </p><p> Follow these steps: </p><p> <ol> <li>First create a <node>Quad</node> and a <node>Renderer</node> and connect them up. You should get the familiar white square in a black box.</li> <li>Now lets make a new node called <node>FileTexture</node> above <node>Quad</node>. Connect the <pin>Texture Out</pin> output of <node>FileTexture</node> to the <node>Texture</node> input of Quad. </p><p> The <node>FileTexture</node> node loads in an image file, and creates a <concept>Texture</concept> which you can apply to your graphical objects. </p><p> 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). </li> <li><img src="html_resources/rmb.png"/><img src="html_resources/click.png"/> on the <pin>Filename</pin> input of <node>FileTexture</node> and select an image from your own computer. You should now see that image applied to the quad.</li> <li>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 <node>Renderer</node> is square, the circle will be square. But if the <node>Renderer</node> is squashed, so will the circle be.</li> <li>To straighten the circle, we need to counteract the <concept>Aspect Ratio</concept>of the <node>Renderer</node>. We do this with some simple maths. Create a <node>/ (Value)</node> node (this node divides numers. i.e. 4/2 = 2). </p><p> Attach the 2 inputs of the <node>/</node> to the <pin>Width</pin> and <pin>Height</pin> output pins of the <node>Renderer</node> respectively. Create an <node>IOBox</node> and attach it to the <node>IOBox</node>'s output to visualise the output. This number represents the aspect ratio. Go into <node>Inspektor</node> and set the <pin>Descriptive Name</pin> of the IOBox to <b>Aspect Ratio</b> </p><p> Now add a <node>Scale (Transform)</node> (not vector version!) above your <node>Quad</node>. Connect to your <node>Quad</node>'s <pin>Transform</pin> pin. Connect the output of your <b>Aspect Ratio</b> to the <pin>Y</pin> input of <node>Scale</node>. The aspect ratio should now be fixed for your quad, regardless of the <node>Renderer</node>'s aspect ratio. </p><p> 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 <key>Ctrl</key>+<key>Y</key> to curve it, and/or <key>Ctrl</key>+<key>H</key> to 'hide' it. </li> <li> Scale down the quad using a <node>UniformScale (Transform)</node> node. Attach this to the input of your <node>Scale</node> node and reduce the <pin>XYZ</pin> input to <b>0.1</b>. Remember you can edit the value both by <img src="html_resources/click.png"/><img src="html_resources/rmb.png"/> on the pin and then typing a <key>0</key><key>.</key><key>1</key><key>Enter</key>, or <img src="html_resources/hold.png"/><img src="html_resources/rmb.png"/> on the pin and move the mouse up/down. <li>Create a <node>Translate (Transform)</node> node (again, not the vector version!). and attach that to the <node>UniformScale</node>'s input</li> </ol> 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). </p><p> Notice how everthing is wired up for 1 object. There's 1 aspect ratio correcting scale, 1 uniform scale, 1 texture, 1 quad. </p><p> Now let's step it up! Create a <node>LinearSpread</node> node above the <node>Translate</node> and attach the <pin>Output</pin> to <node>Translate</node>'s <pin>X</pin>input. Now check the top right input pin of <node>LinearSpread</node>, <pin>Spread Count</pin>. Let's increase this value. </p><p> As you see you get lots of circles renderered to the screen. Check the <pin>Output</pin> of <node>LinearSpread</node> by rolling your mouse over the output (you dont need to click). It might look something like this: </p><p> <b>Output: (3) -0.3333~</b> </p><p> This means there are 3 slices in the spread, and the first slice has a Value of approximately -0.3333 (the <b>~</b> denotes approximate).</p>
+<p> So let's try and visualise what happens with spreads. </p><p> 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. </p><p> Follow these steps: </p><p> <ol> <li>First create a <node>Quad</node> and a <node>Renderer</node> and connect them up. You should get the familiar white square in a black box.</li> <li>Now lets make a new node called <node>FileTexture</node> above <node>Quad</node>. Connect the <pin>Texture Out</pin> output of <node>FileTexture</node> to the <node>Texture</node> input of Quad. </p><p> The <node>FileTexture</node> node loads in an image file, and creates a <concept>Texture</concept> which you can apply to your graphical objects. </p><p> 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). </li> <li><img src="html_resources/rmb.png"/><img src="html_resources/click.png"/> on the <pin>Filename</pin> input of <node>FileTexture</node> and select an image from your own computer. You should now see that image applied to the quad.</li> <li>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 <node>Renderer</node> is square, the circle will be square. But if the <node>Renderer</node> is squashed, so will the circle be.</li> <li>To straighten the circle, we need to counteract the <concept>Aspect Ratio</concept>of the <node>Renderer</node>. We do this with some simple maths. Create a <node>/ (Value)</node> node (this node divides numers. i.e. 4/2 = 2). </p><p> Attach the 2 inputs of the <node>/</node> to the <pin>Width</pin> and <pin>Height</pin> output pins of the <node>Renderer</node> respectively. Create an <node>IOBox</node> and attach it to the <node>IOBox</node>'s output to visualise the output. This number represents the aspect ratio. Go into <node>Inspektor</node> and set the <pin>Descriptive Name</pin> of the IOBox to <b>Aspect Ratio</b> </p><p> Now add a <node>Scale (Transform)</node> (not vector version!) above your <node>Quad</node>. Connect to your <node>Quad</node>'s <pin>Transform</pin> pin. Connect the output of your <b>Aspect Ratio</b> to the <pin>Y</pin> input of <node>Scale</node>. The aspect ratio should now be fixed for your quad, regardless of the <node>Renderer</node>'s aspect ratio. </p><p> 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 <key>Ctrl</key>+<key>Y</key> to curve it, and/or <key>Ctrl</key>+<key>H</key> to 'hide' it. </li> <li> Scale down the quad using a <node>UniformScale (Transform)</node> node. Attach this to the input of your <node>Scale</node> node and reduce the <pin>XYZ</pin> input to <b>0.1</b>. Remember you can edit the value both by <img src="html_resources/click.png"/><img src="html_resources/rmb.png"/> on the pin and then typing a <key>0</key><key>.</key><key>1</key><key>Enter</key>, or <img src="html_resources/hold.png"/><img src="html_resources/rmb.png"/> on the pin and move the mouse up/down. <li>Create a <node>Translate (Transform)</node> node (again, not the vector version!). and attach that to the <node>UniformScale</node>'s input</li> </ol> </p><p> Ok before going any further. Take some time to figure out what's happening. This are some very common VVVV fundamentals here which are worth understanding (Transforms, Layer, Texture, Maths). </p><p> Notice how everthing is wired up for 1 object. There's 1 aspect ratio correcting scale, 1 uniform scale, 1 texture, 1 quad. </p><p> Now let's step it up! Create a <node>LinearSpread</node> node above the <node>Translate</node> and attach the <pin>Output</pin> to <node>Translate</node>'s <pin>X</pin>input. Now check the top right input pin of <node>LinearSpread</node>, <pin>Spread Count</pin>. Let's increase this value. </p><p> As you see you get lots of circles renderered to the screen. Check the <pin>Output</pin> of <node>LinearSpread</node> by rolling your mouse over the output (you dont need to click). It might look something like this: </p><p> <b>Output: (3) -0.3333~</b> </p><p> This means there are 3 slices in the spread, and the first slice has a Value of approximately -0.3333 (the <b>~</b> denotes approximate).</p>
<h2>4 - Olympics 2012?</h2>
<p> Ok. Let's make a copy. <ol> <li>Select that section of the patch we just made.</li> <li>Press <key>Ctrl</key>+<key>D</key> to duplicate. Dont press anything else.</li> <li>The bits you've duplicated are all mixed up with the old bits, but your new bits are all selected.</li> <li>Use the <key>Down</key> key on your keyboard to move the nodes down within the patch. To do this quicker, use <key>Shift</key>+<key>Down</key>. Do this until you've moved the new nodes into a clear section of the patch</li> </ol> </p><p> Let's get rid of the background. Delete <node>RetroColors</node> by clicking <img src="html_resources/click.png"/><img src="html_resources/lmb.png"/> on it and then pressing <key>Delete</key>. Right click <img src="html_resources/click.png"/><img src="html_resources/rmb.png"/> on the <pin>Background Color</pin> pin to reset it to <b>black</b>. </p><p> Let's make the rings bigger. Set the <node>UniformSpread</node> to <b>0.4</b>. This is a quick way of saying 'set the parameter of UniformSpread (in this case <pin>XYZ</pin>)) to value <b>0.4</b>'. </p><p> Create a new <node>LinearSpread</node> and connect it to <node>Translate</node>'s <pin>Y</pin> input. Set the <pin>Spread Count<pin> of the 2 <node>LinearSpread</node>'s to <b>5</b> and <b>2</b> respectively. </p><p> Adjust the <b>Width</b> pins of the <node>LinearSpread</node>'s until you get the olympic rings. </p><p> For good measure, add some colour to the rings by either using a <node>RetroColors</node> with an <node>I (Spreads)</node> on the <pin>Index</pin pin, or a <node>HSL (Color Join)</node> with a <node>LinearSpread</node> on the <pin>Hue</pin> input pin. Also set the <pin>Draw Mode</pin> of the <node>Blend</node> node to <b>ColorAsAlphaBlend</b>.</p>
<h2>4 - Tidying the blend mode</h2>
View
BIN  6. Spreads.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
2  6. Spreads.v4p
@@ -417,7 +417,7 @@
</BOUNDS>
<BOUNDS height="315" left="10590" top="165" type="Box" width="4185">
</BOUNDS>
- <PIN encoded="0" pinname="Input String" slicecount="1" visible="0" values="|[3 - A visual spread experiment]&cr;&lf;So let&apos;s try and visualise what happens with spreads.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;We&apos;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.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;Follow these steps:&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;&lt;ol&gt;&cr;&lf;&lt;li&gt;First create a &lt;node&gt;Quad&lt;/node&gt; and a &lt;node&gt;Renderer&lt;/node&gt; and connect them up. You should get the familiar white square in a black box.&lt;/li&gt;&cr;&lf;&lt;li&gt;Now lets make a new node called &lt;node&gt;FileTexture&lt;/node&gt; above &lt;node&gt;Quad&lt;/node&gt;. Connect the &lt;pin&gt;Texture Out&lt;/pin&gt; output of &lt;node&gt;FileTexture&lt;/node&gt; to the &lt;node&gt;Texture&lt;/node&gt; input of Quad.&cr;&lf;&lt;br /&gt;&cr;&lf;The &lt;node&gt;FileTexture&lt;/node&gt; node loads in an image file, and creates a &lt;concept&gt;Texture&lt;/concept&gt; which you can apply to your graphical objects.&cr;&lf;&lt;br /&gt;&cr;&lf;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).&cr;&lf;&lt;/li&gt;&cr;&lf;&cr;&lf;&lt;li&gt;&lt;rmb/&gt;&lt;click/&gt; on the &lt;pin&gt;Filename&lt;/pin&gt; input of &lt;node&gt;FileTexture&lt;/node&gt; and select an image from your own computer. You should now see that image applied to the quad.&lt;/li&gt;&cr;&lf;&cr;&lf;&lt;li&gt;Now let&apos;s load a specific texture. We go to the VVVV folder where you have it installed. We go to the &apos;girlpower&apos; folder. Then we go to the &apos;images&apos; folder (vvvv/girlpower/images). Now select the file &quot;ring thin.bmp&quot;. We should now be drawing a circle to the screen. If the &lt;node&gt;Renderer&lt;/node&gt; is square, the circle will be square. But if the &lt;node&gt;Renderer&lt;/node&gt; is squashed, so will the circle be.&lt;/li&gt;&cr;&lf;&cr;&lf;&lt;li&gt;To straighten the circle, we need to counteract the &lt;concept&gt;Aspect Ratio&lt;/concept&gt;of the &lt;node&gt;Renderer&lt;/node&gt;. We do this with some simple maths. Create a &lt;node&gt;/ (Value)&lt;/node&gt; node (this node divides numers. i.e. 4/2 = 2).&cr;&lf;&lt;br /&gt;&cr;&lf;Attach the 2 inputs of the &lt;node&gt;/&lt;/node&gt; to the &lt;pin&gt;Width&lt;/pin&gt; and &lt;pin&gt;Height&lt;/pin&gt; output pins of the &lt;node&gt;Renderer&lt;/node&gt; respectively. Create an &lt;node&gt;IOBox&lt;/node&gt; and attach it to the &lt;node&gt;IOBox&lt;/node&gt;&apos;s output to visualise the output. This number represents the aspect ratio. Go into &lt;node&gt;Inspektor&lt;/node&gt; and set the &lt;pin&gt;Descriptive Name&lt;/pin&gt; of the IOBox to &lt;b&gt;Aspect Ratio&lt;/b&gt;&cr;&lf;&lt;br /&gt;&cr;&lf;Now add a &lt;node&gt;Scale (Transform)&lt;/node&gt; (not vector version!) above your &lt;node&gt;Quad&lt;/node&gt;. Connect to your &lt;node&gt;Quad&lt;/node&gt;&apos;s &lt;pin&gt;Transform&lt;/pin&gt; pin. Connect the output of your &lt;b&gt;Aspect Ratio&lt;/b&gt; to the &lt;pin&gt;Y&lt;/pin&gt; input of &lt;node&gt;Scale&lt;/node&gt;. The aspect ratio should now be fixed for your quad, regardless of the &lt;node&gt;Renderer&lt;/node&gt;&apos;s aspect ratio.&cr;&lf;&lt;br /&gt;&cr;&lf;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 &lt;key&gt;Ctrl&lt;/key&gt;+&lt;key&gt;Y&lt;/key&gt; to curve it, and/or &lt;key&gt;Ctrl&lt;/key&gt;+&lt;key&gt;H&lt;/key&gt; to &apos;hide&apos; it.&cr;&lf;&lt;/li&gt;&cr;&lf;&cr;&lf;&lt;li&gt;&cr;&lf;Scale down the quad using a &lt;node&gt;UniformScale (Transform)&lt;/node&gt; node. Attach this to the input of your &lt;node&gt;Scale&lt;/node&gt; node and reduce the &lt;pin&gt;XYZ&lt;/pin&gt; input to &lt;b&gt;0.1&lt;/b&gt;. Remember you can edit the value both by &lt;click/&gt;&lt;rmb/&gt; on the pin and then typing a &lt;key&gt;0&lt;/key&gt;&lt;key&gt;.&lt;/key&gt;&lt;key&gt;1&lt;/key&gt;&lt;key&gt;Enter&lt;/key&gt;, or &lt;hold/&gt;&lt;rmb/&gt; on the pin and move the mouse up/down.&cr;&lf;&cr;&lf;&lt;li&gt;Create a &lt;node&gt;Translate (Transform)&lt;/node&gt; node (again, not the vector version!). and attach that to the &lt;node&gt;UniformScale&lt;/node&gt;&apos;s input&lt;/li&gt;&cr;&lf;&cr;&lf;&lt;/ol&gt;&cr;&lf;&cr;&lf;Ok before going any further. Take some time to figure out what&apos;s happening. This is some vety common VVVV fundamentals going on (Transforms, Layer, Texture, Maths).&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;Notice how everthing is wired up for 1 object. There&apos;s 1 aspect ratio correcting scale, 1 uniform scale, 1 texture, 1 quad.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;Now let&apos;s step it up! Create a &lt;node&gt;LinearSpread&lt;/node&gt; node above the &lt;node&gt;Translate&lt;/node&gt; and attach the &lt;pin&gt;Output&lt;/pin&gt; to &lt;node&gt;Translate&lt;/node&gt;&apos;s &lt;pin&gt;X&lt;/pin&gt;input. Now check the top right input pin of &lt;node&gt;LinearSpread&lt;/node&gt;, &lt;pin&gt;Spread Count&lt;/pin&gt;. Let&apos;s increase this value.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;As you see you get lots of circles renderered to the screen. Check the &lt;pin&gt;Output&lt;/pin&gt; of &lt;node&gt;LinearSpread&lt;/node&gt; by rolling your mouse over the output (you dont need to click). It might look something like this: &cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;&lt;b&gt;Output: (3) -0.3333~&lt;/b&gt;&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;This means there are 3 slices in the spread, and the first slice has a Value of approximately -0.3333 (the &lt;b&gt;~&lt;/b&gt; denotes approximate).|">
+ <PIN encoded="0" pinname="Input String" slicecount="1" visible="0" values="|[3 - A visual spread experiment]&cr;&lf;So let&apos;s try and visualise what happens with spreads.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;We&apos;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.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;Follow these steps:&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;&lt;ol&gt;&cr;&lf;&lt;li&gt;First create a &lt;node&gt;Quad&lt;/node&gt; and a &lt;node&gt;Renderer&lt;/node&gt; and connect them up. You should get the familiar white square in a black box.&lt;/li&gt;&cr;&lf;&lt;li&gt;Now lets make a new node called &lt;node&gt;FileTexture&lt;/node&gt; above &lt;node&gt;Quad&lt;/node&gt;. Connect the &lt;pin&gt;Texture Out&lt;/pin&gt; output of &lt;node&gt;FileTexture&lt;/node&gt; to the &lt;node&gt;Texture&lt;/node&gt; input of Quad.&cr;&lf;&lt;br /&gt;&cr;&lf;The &lt;node&gt;FileTexture&lt;/node&gt; node loads in an image file, and creates a &lt;concept&gt;Texture&lt;/concept&gt; which you can apply to your graphical objects.&cr;&lf;&lt;br /&gt;&cr;&lf;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).&cr;&lf;&lt;/li&gt;&cr;&lf;&cr;&lf;&lt;li&gt;&lt;rmb/&gt;&lt;click/&gt; on the &lt;pin&gt;Filename&lt;/pin&gt; input of &lt;node&gt;FileTexture&lt;/node&gt; and select an image from your own computer. You should now see that image applied to the quad.&lt;/li&gt;&cr;&lf;&cr;&lf;&lt;li&gt;Now let&apos;s load a specific texture. We go to the VVVV folder where you have it installed. We go to the &apos;girlpower&apos; folder. Then we go to the &apos;images&apos; folder (vvvv/girlpower/images). Now select the file &quot;ring thin.bmp&quot;. We should now be drawing a circle to the screen. If the &lt;node&gt;Renderer&lt;/node&gt; is square, the circle will be square. But if the &lt;node&gt;Renderer&lt;/node&gt; is squashed, so will the circle be.&lt;/li&gt;&cr;&lf;&cr;&lf;&lt;li&gt;To straighten the circle, we need to counteract the &lt;concept&gt;Aspect Ratio&lt;/concept&gt;of the &lt;node&gt;Renderer&lt;/node&gt;. We do this with some simple maths. Create a &lt;node&gt;/ (Value)&lt;/node&gt; node (this node divides numers. i.e. 4/2 = 2).&cr;&lf;&lt;br /&gt;&cr;&lf;Attach the 2 inputs of the &lt;node&gt;/&lt;/node&gt; to the &lt;pin&gt;Width&lt;/pin&gt; and &lt;pin&gt;Height&lt;/pin&gt; output pins of the &lt;node&gt;Renderer&lt;/node&gt; respectively. Create an &lt;node&gt;IOBox&lt;/node&gt; and attach it to the &lt;node&gt;IOBox&lt;/node&gt;&apos;s output to visualise the output. This number represents the aspect ratio. Go into &lt;node&gt;Inspektor&lt;/node&gt; and set the &lt;pin&gt;Descriptive Name&lt;/pin&gt; of the IOBox to &lt;b&gt;Aspect Ratio&lt;/b&gt;&cr;&lf;&lt;br /&gt;&cr;&lf;Now add a &lt;node&gt;Scale (Transform)&lt;/node&gt; (not vector version!) above your &lt;node&gt;Quad&lt;/node&gt;. Connect to your &lt;node&gt;Quad&lt;/node&gt;&apos;s &lt;pin&gt;Transform&lt;/pin&gt; pin. Connect the output of your &lt;b&gt;Aspect Ratio&lt;/b&gt; to the &lt;pin&gt;Y&lt;/pin&gt; input of &lt;node&gt;Scale&lt;/node&gt;. The aspect ratio should now be fixed for your quad, regardless of the &lt;node&gt;Renderer&lt;/node&gt;&apos;s aspect ratio.&cr;&lf;&lt;br /&gt;&cr;&lf;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 &lt;key&gt;Ctrl&lt;/key&gt;+&lt;key&gt;Y&lt;/key&gt; to curve it, and/or &lt;key&gt;Ctrl&lt;/key&gt;+&lt;key&gt;H&lt;/key&gt; to &apos;hide&apos; it.&cr;&lf;&lt;/li&gt;&cr;&lf;&cr;&lf;&lt;li&gt;&cr;&lf;Scale down the quad using a &lt;node&gt;UniformScale (Transform)&lt;/node&gt; node. Attach this to the input of your &lt;node&gt;Scale&lt;/node&gt; node and reduce the &lt;pin&gt;XYZ&lt;/pin&gt; input to &lt;b&gt;0.1&lt;/b&gt;. Remember you can edit the value both by &lt;click/&gt;&lt;rmb/&gt; on the pin and then typing a &lt;key&gt;0&lt;/key&gt;&lt;key&gt;.&lt;/key&gt;&lt;key&gt;1&lt;/key&gt;&lt;key&gt;Enter&lt;/key&gt;, or &lt;hold/&gt;&lt;rmb/&gt; on the pin and move the mouse up/down.&cr;&lf;&cr;&lf;&lt;li&gt;Create a &lt;node&gt;Translate (Transform)&lt;/node&gt; node (again, not the vector version!). and attach that to the &lt;node&gt;UniformScale&lt;/node&gt;&apos;s input&lt;/li&gt;&cr;&lf;&cr;&lf;&lt;/ol&gt;&cr;&lf;&lt;br /&gt;&cr;&lf;Ok before going any further. Take some time to figure out what&apos;s happening. This are some very common VVVV fundamentals here which are worth understanding (Transforms, Layer, Texture, Maths).&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;Notice how everthing is wired up for 1 object. There&apos;s 1 aspect ratio correcting scale, 1 uniform scale, 1 texture, 1 quad.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;Now let&apos;s step it up! Create a &lt;node&gt;LinearSpread&lt;/node&gt; node above the &lt;node&gt;Translate&lt;/node&gt; and attach the &lt;pin&gt;Output&lt;/pin&gt; to &lt;node&gt;Translate&lt;/node&gt;&apos;s &lt;pin&gt;X&lt;/pin&gt;input. Now check the top right input pin of &lt;node&gt;LinearSpread&lt;/node&gt;, &lt;pin&gt;Spread Count&lt;/pin&gt;. Let&apos;s increase this value.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;As you see you get lots of circles renderered to the screen. Check the &lt;pin&gt;Output&lt;/pin&gt; of &lt;node&gt;LinearSpread&lt;/node&gt; by rolling your mouse over the output (you dont need to click). It might look something like this: &cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;&lt;b&gt;Output: (3) -0.3333~&lt;/b&gt;&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;This means there are 3 slices in the spread, and the first slice has a Value of approximately -0.3333 (the &lt;b&gt;~&lt;/b&gt; denotes approximate).|">
</PIN>
<PIN pinname="Output String" visible="0">
</PIN>
View
BIN  7. Animation.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
509 7. Spreads 2.v4p
@@ -1,509 +0,0 @@
-<!DOCTYPE PATCH SYSTEM "http://vvvv.org/versions/vvvv45beta26.dtd" >
- <PATCH nodename="C:\kimchiandchips\Workshops\VVVV.Tutorials.Fundamentals\7. Spreads 2.v4p" filename="C:\kimchiandchips\Workshops\VVVV-basics,mapping\6. Spreads.v4p" locked="0" systemname="6. Spreads">
- <BOUNDS height="14025" left="5310" top="600" type="Window" width="16800">
- </BOUNDS>
- <NODE componentmode="InABox" id="0" nodename="IOBox (String)" systemname="IOBox (String)">
- <BOUNDS height="270" left="225" top="150" type="Node" width="1380">
- </BOUNDS>
- <BOUNDS height="1095" left="225" top="150" type="Box" width="7665">
- </BOUNDS>
- <PIN encoded="0" pinname="Input String" slicecount="1" visible="0" values="|6. Spreads 2|">
- </PIN>
- <PIN pinname="Output String" visible="0">
- </PIN>
- <PIN pinname="Show Grid" slicecount="1" values="1">
- </PIN>
- <PIN pinname="String Type" slicecount="1" values="MultiLine">
- </PIN>
- <PIN pinname="Size" slicecount="1" values="42">
- </PIN>
- </NODE>
- <NODE componentmode="InABox" id="2" nodename="IOBox (String)" systemname="IOBox (String)">
- <BOUNDS height="270" left="105" top="12405" type="Node" width="2070">
- </BOUNDS>
- <BOUNDS height="750" left="105" top="12405" type="Box" width="5325">
- </BOUNDS>
- <PIN encoded="0" pinname="Input String" slicecount="1" visible="0" values="|Created by Elliot Woods.&cr;&lf;Distributed under the MIT license (check file LICENSE) for details.&cr;&lf;Generally you can do whatever you want with these files. have fun!|">
- </PIN>
- <PIN pinname="Output String" visible="0">
- </PIN>
- <PIN pinname="Show Grid" slicecount="1" values="1">
- </PIN>
- <PIN pinname="String Type" slicecount="1" values="MultiLine">
- </PIN>
- </NODE>
- <NODE componentmode="InABox" id="5" nodename="IOBox (String)" systemname="IOBox (String)">
- <BOUNDS height="270" left="5805" top="2640" type="Node" width="1380">
- </BOUNDS>
- <BOUNDS height="540" left="5805" top="2640" type="Box" width="2085">
- </BOUNDS>
- <PIN encoded="0" pinname="Input String" visible="1">
- </PIN>
- <PIN pinname="Output String" visible="0">
- </PIN>
- <PIN pinname="Show Grid" slicecount="1" values="0">
- </PIN>
- <PIN pinname="String Type" slicecount="1" values="MultiLine">
- </PIN>
- <PIN pinname="Size" slicecount="1" values="12">
- </PIN>
- <PIN encoded="0" pinname="Descriptive Name" slicecount="1" values="Author">
- </PIN>
- </NODE>
- <NODE componentmode="InABox" id="6" nodename="IOBox (String)" systemname="IOBox (String)">
- <BOUNDS height="270" left="225" top="1260" type="Node" width="1380">
- </BOUNDS>
- <BOUNDS height="1155" left="225" top="1260" type="Box" width="7665">
- </BOUNDS>
- <PIN encoded="0" pinname="Input String" visible="1">
- </PIN>
- <PIN pinname="Output String" visible="0">
- </PIN>
- <PIN pinname="Show Grid" slicecount="1" values="0">
- </PIN>
- <PIN pinname="String Type" slicecount="1" values="MultiLine">
- </PIN>
- <PIN pinname="Size" slicecount="1" values="12">
- </PIN>
- <PIN encoded="0" pinname="Descriptive Name" slicecount="1" values="Description">
- </PIN>
- </NODE>
- <INFO author="Elliot Woods" description="" tags="">
- </INFO>
- <NODE componentmode="Hidden" filename="Subpatches\GetMetadata (VVVV).v4p" hiddenwhenlocked="1" id="10" nodename="GetMetadata (VVVV)" systemname="GetMetadata (VVVV)">
- <BOUNDS height="100" left="5820" top="1800" type="Node" width="100">
- </BOUNDS>
- <PIN pinname="Patch" visible="1">
- </PIN>
- <BOUNDS height="3465" left="14520" top="5520" type="Window" width="4680">
- </BOUNDS>
- <PIN pinname="Author" visible="1">
- </PIN>
- <PIN pinname="Description" visible="1">
- </PIN>
- <PIN pinname="Tags" visible="1">
- </PIN>
- </NODE>
- <NODE componentmode="Hidden" hiddenwhenlocked="1" id="8" nodename="PatchAlias (VVVV)" systemname="PatchAlias (VVVV)">
- <BOUNDS height="100" left="5820" top="1350" type="Node" width="100">
- </BOUNDS>
- <PIN pinname="Patch" visible="1">
- </PIN>
- </NODE>
- <LINK dstnodeid="10" dstpinname="Patch" hiddenwhenlocked="1" srcnodeid="8" srcpinname="Patch">
- </LINK>
- <LINK dstnodeid="6" dstpinname="Input String" hiddenwhenlocked="1" linkstyle="VHV" srcnodeid="10" srcpinname="Description">
- <LINKPOINT x="6445" y="2205">
- </LINKPOINT>
- <LINKPOINT x="245" y="2355">
- </LINKPOINT>
- </LINK>
- <NODE componentmode="InABox" id="11" nodename="IOBox (String)" systemname="IOBox (String)">
- <BOUNDS height="270" left="225" top="2640" type="Node" width="1380">
- </BOUNDS>
- <BOUNDS height="540" left="225" top="2640" type="Box" width="5520">
- </BOUNDS>
- <PIN encoded="0" pinname="Input String" visible="1">
- </PIN>
- <PIN pinname="Output String" visible="0">
- </PIN>
- <PIN pinname="Show Grid" slicecount="1" values="0">
- </PIN>
- <PIN pinname="String Type" slicecount="1" values="MultiLine">
- </PIN>
- <PIN pinname="Size" slicecount="1" values="12">
- </PIN>
- <PIN encoded="0" pinname="Descriptive Name" slicecount="1" values="Tags">
- </PIN>
- </NODE>
- <LINK dstnodeid="11" dstpinname="Input String" hiddenwhenlocked="1" linkstyle="VHV" srcnodeid="10" srcpinname="Tags">
- <LINKPOINT x="7015" y="2293">
- </LINKPOINT>
- <LINKPOINT x="275" y="2448">
- </LINKPOINT>
- </LINK>
- <LINK dstnodeid="5" dstpinname="Input String" hiddenwhenlocked="1" srcnodeid="10" srcpinname="Author">
- </LINK>
- <NODE componentmode="InABox" id="12" nodename="IOBox (String)" systemname="IOBox (String)">
- <BOUNDS height="270" left="3375" top="3660" type="Node" width="2070">
- </BOUNDS>
- <BOUNDS height="330" left="3375" top="3660" type="Box" width="1470">
- </BOUNDS>
- <PIN encoded="0" pinname="Input String" slicecount="1" visible="0" values="|[0 - Spreads]&cr;&lf;&lt;concept&gt;Spreads&lt;/concept&gt; are a fundamental tool in VVVV. They are the gift that keeps on giving (metephorically, and quite literally).&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;(Note for programmers: It&apos;s similar to an &lt;b&gt;Array&lt;/b&gt; in normal programming speak, but also very different).&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;&lt;ul&gt;&cr;&lf;&lt;li&gt;A spread is a set of data.&lt;/li&gt;&cr;&lf;&lt;li&gt;An individual item within a Spread is called a &lt;concept&gt;Slice&lt;/concept&gt;&lt;/li&gt;&cr;&lf;&lt;li&gt;The number of Slices in a Spread is called the &lt;concept&gt;Spread Count&lt;/concept&gt; or the &lt;concept&gt;Slice Count&lt;/concept&gt;&lt;/li&gt;&cr;&lf;&lt;li&gt;Each Slice has a position within the Spread called a &lt;concept&gt;Slice Index&lt;/concept&gt;&lt;/li&gt;&cr;&lf;&lt;li&gt;The first Slice in the Spread has Slice Index of &lt;b&gt;0&lt;/b&gt;.&lt;/li&gt;&cr;&lf;&lt;li&gt;If you try to access a slice index outside of the range (e.g. &gt;= spread count or &lt;0) then the spread &apos;loops&apos;.&lt;/li&gt;&cr;&lf;&lt;li&gt;A Spread of Spread Count &lt;b&gt;0&lt;/b&gt; is a special case called an &lt;concept&gt;Empty Spread&lt;/concept&gt;&cr;&lf;&lt;/ul&gt;&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;&lt;b&gt;An example&lt;/b&gt;&lt;br /&gt;&cr;&lf;&cr;&lf;A fish and chip shop menu has 10 items, each with a price and a description. The first item on the list is &quot;Battered cod&quot; with a price of 2pounds 50pence. The last item on the list is &quot;Kimchi&quot; at 4 pounds. Therefore we could say the following:&cr;&lf;&lt;br /&gt;&cr;&lf;&lt;ul&gt;&cr;&lf;&lt;li&gt;There are a spread of Values (price) and a spread of Strings (description)&lt;/li&gt;&cr;&lf;&lt;li&gt;Both spreads have slice count of 10.&lt;/li&gt;&cr;&lf;&lt;li&gt;At slice index 0 in the Value spread we have &lt;b&gt;2.5&lt;/b&gt;&lt;/li&gt;&cr;&lf;&lt;li&gt;At slice index 0 in the spread of Strings we have &lt;b&gt;Battered cod&lt;/b&gt;&lt;/li&gt;&cr;&lf;&lt;li&gt;At slice index 9 in the spread of Strings we have &lt;b&gt;Kimchi&lt;/b&gt;&lt;/li&gt;&cr;&lf;&lt;li&gt;At slice index 10 in the spread of Strings we have &lt;b&gt;Battered cod&lt;/b&gt; (we&apos;ve looped here back to the beginning of the spread)&lt;/li&gt;&cr;&lf;&lt;li&gt;At slice index -1 in the spread of Strings we have &lt;b&gt;Kimchi&lt;/b&gt;&cr;&lf; (we&apos;ve looped here back to the end of the spread)&lt;/li&gt;&cr;&lf;&lt;/ul&gt;|">
- </PIN>
- <PIN pinname="Output String" visible="0">
- </PIN>
- <PIN pinname="Show Grid" slicecount="1" values="0">
- </PIN>
- <PIN pinname="String Type" slicecount="1" values="MultiLine">
- </PIN>
- <PIN pinname="Font" slicecount="1" values="|Arial Black|">
- </PIN>
- <PIN pinname="Size" slicecount="1" values="10">
- </PIN>
- <PIN encoded="0" pinname="Descriptive Name" slicecount="1" values="||">
- </PIN>
- </NODE>
- <NODE componentmode="InABox" id="103" nodename="IOBox (String)" systemname="IOBox (String)">
- <BOUNDS height="270" left="8145" top="3465" type="Node" width="330">
- </BOUNDS>
- <BOUNDS height="7515" left="8145" top="3465" type="Box" width="345">
- </BOUNDS>
- <PIN encoded="0" pinname="Input String" slicecount="1" visible="0" values="||">
- </PIN>
- <PIN pinname="Output String" visible="0">
- </PIN>
- <PIN pinname="Show Grid" slicecount="1" values="1">
- </PIN>
- <PIN pinname="String Type" slicecount="1" values="MultiLine">
- </PIN>
- </NODE>
- <NODE componentmode="InABox" id="104" nodename="IOBox (String)" systemname="IOBox (String)">
- <BOUNDS height="270" left="675" top="4545" type="Node" width="2070">
- </BOUNDS>
- <BOUNDS height="330" left="675" top="4545" type="Box" width="1470">
- </BOUNDS>
- <PIN encoded="0" pinname="Input String" slicecount="1" visible="0" values="|[1 - GetSlice]&cr;&lf;A &lt;node&gt;GetSlice (Spreads)&lt;/node&gt; node picks 1 or more slices out of a spread.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;Let&apos;s create a &lt;node&gt;GetSlice (Spreads)&lt;/node&gt; now, and attach a &lt;b&gt;4D Vector&lt;/b&gt; &lt;node&gt;IOBox&lt;/node&gt; to its &lt;pin&gt;Input&lt;/pin&gt; and a simple &lt;node&gt;IOBox&lt;/node&gt; to its &lt;pin&gt;Output&lt;/pin&gt;. &lt;click/&gt;&lt;mmb/&gt; on the bottom IOBox to give it a name.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;For readability. Let&apos;s go into the &lt;node&gt;Inspektor&lt;/node&gt; and change some properties for both &lt;node&gt;IOBox&lt;/node&gt;&apos;s. Set &lt;pin&gt;Value Type&lt;/pin&gt; to &lt;b&gt;Integer&lt;/b&gt; and &lt;pin&gt;Size&lt;/pin&gt; to &lt;b&gt;14&lt;/b&gt;. Also turn on &lt;pin&gt;Show Grid&lt;/pin&gt; and &lt;pin&gt;Show SliceIndex&lt;/pin&gt;.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;Also let&apos;s add an &lt;node&gt;IOBox&lt;/node&gt; on the &lt;pin&gt;Index&lt;/pin&gt; input of &lt;node&gt;GetSlice&lt;/node&gt; using our middle button trick &lt;click/&gt;&lt;mmb/&gt;. (first click &lt;click/&gt;&lt;lmb/&gt;on the pin to start a connection and then &lt;click/&gt;&lt;mmb/&gt; to make an &lt;node&gt;IOBox&lt;/node&gt; from the connection.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;Add a &lt;node&gt;I (Spreads)&lt;/node&gt; to the top and connect the output to the input of the 4D vector. Set the input pin &lt;pin&gt;To&lt;/pin&gt; on &lt;node&gt;I&lt;/node&gt; to &lt;b&gt;4&lt;/b&gt;. This node now outputs a spread of &lt;b&gt;0, 1, 2, 3&lt;/b&gt; i.e. values &lt;pin&gt;From&lt;/pin&gt; &lt;b&gt;0&lt;/b&gt; &lt;pin&gt;To&lt;/pin&gt; &lt;b&gt;4&lt;/b&gt;.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;Now try changing the &lt;b&gt;Index&lt;/b&gt; to see which slice is selected by the &lt;node&gt;GetSlice&lt;/node&gt; node.|">
- </PIN>
- <PIN pinname="Output String" visible="0">
- </PIN>
- <PIN pinname="Show Grid" slicecount="1" values="0">
- </PIN>
- <PIN pinname="String Type" slicecount="1" values="MultiLine">
- </PIN>
- <PIN pinname="Font" slicecount="1" values="|Arial Black|">
- </PIN>
- <PIN pinname="Size" slicecount="1" values="10">
- </PIN>
- <PIN encoded="0" pinname="Descriptive Name" slicecount="1" values="||">
- </PIN>
- </NODE>
- <NODE componentmode="Hidden" id="105" nodename="GetSlice (Spreads)" systemname="GetSlice (Spreads)">
- <BOUNDS height="270" left="915" top="7785" type="Node" width="2475">
- </BOUNDS>
- <PIN pinname="Input" visible="1">
- </PIN>
- <PIN pinname="Output" visible="1">
- </PIN>
- <PIN pinname="Index">
- </PIN>
- </NODE>
- <NODE componentmode="InABox" id="106" nodename="IOBox (Value Advanced)" systemname="IOBox (Value Advanced)">
- <BOUNDS height="100" left="915" top="5460" type="Node" width="100">
- </BOUNDS>
- <BOUNDS height="1920" left="915" top="5460" type="Box" width="1635">
- </BOUNDS>
- <PIN pinname="Rows" slicecount="1" values="4">
- </PIN>
- <PIN pinname="Y Input Value" visible="1">
- </PIN>
- <PIN pinname="Vector Size" slicecount="1" values="4">
- </PIN>
- <PIN encoded="0" pinname="Default" slicecount="1" values="|0, 0, 0, 1|">
- </PIN>
- <PIN pinname="Y Output Value" visible="1">
- </PIN>
- <PIN pinname="Value Type" slicecount="1" values="Integer">
- </PIN>
- <PIN pinname="Size" slicecount="1" values="14">
- </PIN>
- <PIN pinname="Show Grid" slicecount="1" values="1">
- </PIN>
- <PIN pinname="Show SliceIndex" slicecount="1" values="1">
- </PIN>
- </NODE>
- <LINK dstnodeid="105" dstpinname="Input" srcnodeid="106" srcpinname="Y Output Value">
- </LINK>
- <NODE componentmode="InABox" id="107" nodename="IOBox (Value Advanced)" systemname="IOBox (Value Advanced)">
- <BOUNDS height="100" left="915" top="8460" type="Node" width="100">
- </BOUNDS>
- <BOUNDS height="555" left="915" top="8460" type="Box" width="1620">
- </BOUNDS>
- <PIN pinname="Y Input Value" visible="1">
- </PIN>
- <PIN pinname="Value Type" slicecount="1" values="Integer">
- </PIN>
- <PIN pinname="Size" slicecount="1" values="14">
- </PIN>
- <PIN pinname="Show Grid" slicecount="1" values="1">
- </PIN>
- <PIN pinname="Show SliceIndex" slicecount="1" values="1">
- </PIN>
- <PIN encoded="0" pinname="Descriptive Name" slicecount="1" values="Output">
- </PIN>
- </NODE>
- <LINK dstnodeid="107" dstpinname="Y Input Value" srcnodeid="105" srcpinname="Output">
- </LINK>
- <NODE componentmode="InABox" id="108" nodename="IOBox (Value Advanced)" systemname="IOBox (Value Advanced)">
- <BOUNDS height="0" left="3330" top="7095" type="Node" width="0">
- </BOUNDS>
- <BOUNDS height="240" left="3330" top="7095" type="Box" width="795">
- </BOUNDS>
- <PIN pinname="Y Input Value" slicecount="1" values="0">
- </PIN>
- <PIN encoded="0" pinname="Units" slicecount="1" values="||">
- </PIN>
- <PIN pinname="Precision" slicecount="1" values="4">
- </PIN>
- <PIN pinname="Value Type" slicecount="1" values="Integer">
- </PIN>
- <PIN encoded="0" pinname="Descriptive Name" slicecount="1" values="Index">
- </PIN>
- </NODE>
- <LINK dstnodeid="105" dstpinname="Index" srcnodeid="108" srcpinname="Y Output Value">
- </LINK>
- <NODE componentmode="Hidden" id="109" nodename="I (Spreads)" systemname="I (Spreads)">
- <BOUNDS height="100" left="900" top="5070" type="Node" width="100">
- </BOUNDS>
- <PIN pinname=".. To [" slicecount="1" values="4">
- </PIN>
- <PIN pinname="Output" visible="1">
- </PIN>
- </NODE>
- <LINK dstnodeid="106" dstpinname="Y Input Value" srcnodeid="109" srcpinname="Output">
- </LINK>
- <NODE componentmode="Hidden" id="110" nodename="GetSlice (Spreads)" systemname="GetSlice (Spreads)">
- <BOUNDS height="270" left="5115" top="6450" type="Node" width="1605">
- </BOUNDS>
- <PIN pinname="Input" visible="1">
- </PIN>
- <PIN pinname="Output" visible="1">
- </PIN>
- <PIN pinname="Index" visible="1">
- </PIN>
- </NODE>
- <NODE componentmode="InABox" id="111" nodename="IOBox (Value Advanced)" systemname="IOBox (Value Advanced)">
- <BOUNDS height="100" left="5100" top="5760" type="Node" width="100">
- </BOUNDS>
- <BOUNDS height="240" left="5100" top="5760" type="Box" width="795">
- </BOUNDS>
- <PIN pinname="Y Output Value" visible="1">
- </PIN>
- <PIN pinname="Y Input Value" slicecount="1" values="100">
- </PIN>
- <PIN encoded="0" pinname="Descriptive Name" slicecount="1" values="Input">
- </PIN>
- </NODE>
- <LINK dstnodeid="110" dstpinname="Input" srcnodeid="111" srcpinname="Y Output Value">
- </LINK>
- <NODE componentmode="InABox" id="112" nodename="IOBox (Value Advanced)" systemname="IOBox (Value Advanced)">
- <BOUNDS height="100" left="5100" top="6960" type="Node" width="100">
- </BOUNDS>
- <BOUNDS height="240" left="5100" top="6960" type="Box" width="795">
- </BOUNDS>
- <PIN pinname="Y Input Value" visible="1">
- </PIN>
- <PIN encoded="0" pinname="Descriptive Name" slicecount="1" values="Output">
- </PIN>
- </NODE>
- <LINK dstnodeid="112" dstpinname="Y Input Value" srcnodeid="110" srcpinname="Output">
- </LINK>
- <NODE componentmode="InABox" id="113" nodename="IOBox (Value Advanced)" systemname="IOBox (Value Advanced)">
- <BOUNDS height="100" left="6660" top="5760" type="Node" width="100">
- </BOUNDS>
- <BOUNDS height="240" left="6660" top="5760" type="Box" width="795">
- </BOUNDS>
- <PIN pinname="Y Output Value" visible="1">
- </PIN>
- <PIN encoded="0" pinname="Descriptive Name" slicecount="1" values="Index">
- </PIN>
- <PIN pinname="Y Input Value" slicecount="1" values="10">
- </PIN>
- </NODE>
- <LINK dstnodeid="110" dstpinname="Index" srcnodeid="113" srcpinname="Y Output Value">
- </LINK>
- <NODE componentmode="InABox" id="114" nodename="IOBox (String)" systemname="IOBox (String)">
- <BOUNDS height="270" left="4965" top="5145" type="Node" width="2070">
- </BOUNDS>
- <BOUNDS height="345" left="4965" top="5145" type="Box" width="2595">
- </BOUNDS>
- <PIN encoded="0" pinname="Input String" slicecount="1" visible="0" values="|[2 - Always repeating]&cr;&lf;So we&apos;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.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;We can test this with a &lt;node&gt;GetSlice&lt;/node&gt; with a simple &lt;node&gt;IOBox (Value)&lt;/node&gt; input.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;When we run it through a &lt;node&gt;GetSlice&lt;/node&gt; and roll the &lt;pin&gt;Index&lt;/pin&gt; pin different slices, we get the same value.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;Important note: &lt;concept&gt;Every Value, String, Colour, Enum, etc in VVVV is stored as a Spread, and therefore repeats like a Spread.&lt;/concept&gt;&cr;&lf;&lt;br /&gt;|">
- </PIN>
- <PIN pinname="Output String" visible="0">
- </PIN>
- <PIN pinname="Show Grid" slicecount="1" values="0">
- </PIN>
- <PIN pinname="String Type" slicecount="1" values="MultiLine">
- </PIN>
- <PIN pinname="Font" slicecount="1" values="|Arial Black|">
- </PIN>
- <PIN pinname="Size" slicecount="1" values="10">
- </PIN>
- <PIN encoded="0" pinname="Descriptive Name" slicecount="1" values="||">
- </PIN>
- </NODE>
- <LINK srcnodeid="97" srcpinname="Actual Backbuffer Width" dstnodeid="102" dstpinname="Input">
- </LINK>
- <NODE id="97" componentmode="InABox" nodename="Renderer (EX9)" systemname="Renderer (EX9)">
- <PIN pinname="Actual Backbuffer Width" visible="1">
- </PIN>
- <PIN pinname="Actual Backbuffer Height" visible="1">
- </PIN>
- <PIN pinname="Background Color" visible="1">
- </PIN>
- <PIN pinname="Layers" visible="1">
- </PIN>
- <BOUNDS type="Node" height="100" left="8790" top="2355" width="100">
- </BOUNDS>
- <BOUNDS type="Box" height="3660" left="8790" top="2355" width="7695">
- </BOUNDS>
- <BOUNDS type="Window" height="5010" left="15765" top="6165" width="6240">
- </BOUNDS>
- </NODE>
- <NODE id="102" componentmode="Hidden" nodename="Divide (Value)" systemname="Divide (Value)">
- <PIN pinname="Input" visible="1">
- </PIN>
- <PIN pinname="Input 2" visible="1">
- </PIN>
- <PIN pinname="Output" visible="1">
- </PIN>
- <BOUNDS type="Node" height="270" left="14505" top="6345" width="1035">
- </BOUNDS>
- </NODE>
- <LINK srcnodeid="97" srcpinname="Actual Backbuffer Height" dstnodeid="102" dstpinname="Input 2">
- </LINK>
- <LINK srcnodeid="99" srcpinname="Transform Out" dstnodeid="101" dstpinname="Transform In">
- </LINK>
- <NODE id="99" componentmode="Hidden" nodename="UniformScale (Transform)" systemname="UniformScale (Transform)">
- <PIN pinname="Transform Out" visible="1">
- </PIN>
- <PIN pinname="Transform In" visible="1">
- </PIN>
- <BOUNDS type="Node" height="100" left="8955" top="885" width="100">
- </BOUNDS>
- <PIN pinname="XYZ" slicecount="1" values="0.1">
- </PIN>
- </NODE>
- <NODE id="101" componentmode="Hidden" nodename="Scale (Transform)" systemname="Scale (Transform)">
- <PIN pinname="Transform In" visible="1">
- </PIN>
- <PIN pinname="Transform Out" visible="1">
- </PIN>
- <PIN pinname="Y" visible="1">
- </PIN>
- <BOUNDS type="Node" height="100" left="8955" top="1350" width="100">
- </BOUNDS>
- <PIN pinname="X" slicecount="1" values="1">
- </PIN>
- </NODE>
- <LINK srcnodeid="100" srcpinname="Texture Out" dstnodeid="98" dstpinname="Texture" linkstyle="VHV">
- <LINKPOINT x="10230" y="1718">
- </LINKPOINT>
- <LINKPOINT x="9195" y="1718">
- </LINKPOINT>
- </LINK>
- <NODE id="100" componentmode="Hidden" nodename="FileTexture (EX9.Texture)" systemname="FileTexture (EX9.Texture)">
- <PIN pinname="Texture Out" visible="1">
- </PIN>
- <BOUNDS type="Node" height="100" left="10230" top="1350" width="100">
- </BOUNDS>
- <PIN pinname="Filename" encoded="0" slicecount="1" values="|..\..\..\vvvv\vvvv_45beta26\girlpower\images\ring thin.bmp|">
- </PIN>
- </NODE>
- <NODE id="98" componentmode="Hidden" nodename="Quad (DX9)" systemname="Quad (DX9)">
- <PIN pinname="Texture" visible="1">
- </PIN>
- <PIN pinname="Transform" visible="1">
- </PIN>
- <PIN pinname="Render State" visible="1">
- </PIN>
- <BOUNDS type="Node" height="270" left="8790" top="1845" width="1245">
- </BOUNDS>
- <PIN pinname="Layer" visible="1">
- </PIN>
- </NODE>
- <LINK srcnodeid="101" srcpinname="Transform Out" dstnodeid="98" dstpinname="Transform">
- </LINK>
- <LINK srcnodeid="117" srcpinname="Transform Out" dstnodeid="99" dstpinname="Transform In">
- </LINK>
- <NODE id="117" componentmode="Hidden" nodename="Translate (Transform)" systemname="Translate (Transform)">
- <PIN pinname="Transform Out" visible="1">
- </PIN>
- <PIN pinname="X" visible="1">
- </PIN>
- <BOUNDS type="Node" height="100" left="8955" top="480" width="100">
- </BOUNDS>
- </NODE>
- <LINK srcnodeid="118" srcpinname="Output" dstnodeid="117" dstpinname="X">
- </LINK>
- <NODE id="118" componentmode="Hidden" nodename="LinearSpread (Spreads)" systemname="LinearSpread (Spreads)">
- <PIN pinname="Output" visible="1">
- </PIN>
- <BOUNDS type="Node" height="100" left="9210" top="150" width="100">
- </BOUNDS>
- <PIN pinname="Spread Count" slicecount="1" values="15">
- </PIN>
- </NODE>
- <LINK srcnodeid="120" srcpinname="Output" dstnodeid="97" dstpinname="Background Color">
- </LINK>
- <NODE id="120" componentmode="Hidden" nodename="RetroColors (Color)" systemname="RetroColors (Color)">
- <PIN pinname="Output" visible="1">
- </PIN>
- <BOUNDS type="Node" height="100" left="10485" top="1935" width="100">
- </BOUNDS>
- <PIN pinname="Wavelength (nm)">
- </PIN>
- <PIN pinname="Index" slicecount="1" values="4">
- </PIN>
- <PIN pinname="Mode" slicecount="1" values="SinclairZXSpectrum">
- </PIN>
- </NODE>
- <LINK srcnodeid="121" srcpinname="Render State Out" dstnodeid="98" dstpinname="Render State" linkstyle="VHV">
- <LINKPOINT x="8370" y="1718">
- </LINKPOINT>
- <LINKPOINT x="8790" y="1718">
- </LINKPOINT>
- </LINK>
- <NODE id="121" componentmode="Hidden" nodename="Blend (EX9.RenderState)" systemname="Blend (EX9.RenderState)">
- <PIN pinname="Render State Out" visible="1">
- </PIN>
- <BOUNDS type="Node" height="100" left="8310" top="1350" width="100">
- </BOUNDS>
- <PIN pinname="Draw Mode" slicecount="1" values="Add">
- </PIN>
- </NODE>
- <NODE id="119" componentmode="InABox" nodename="IOBox (String)" systemname="IOBox (String)">
- <BOUNDS type="Node" height="270" left="10590" top="510" width="2070">
- </BOUNDS>
- <BOUNDS type="Box" height="315" left="10590" top="510" width="4185">
- </BOUNDS>
- <PIN pinname="Input String" encoded="0" slicecount="1" visible="0" values="|[4 - Tidying the blend mode]&cr;&lf;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 &lt;node&gt;Renderer&lt;/node&gt;.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;To change the background colour of the &lt;node&gt;Renderer&lt;/node&gt;, create a &lt;node&gt;RetroColors (Color)&lt;/node&gt; and connect its &lt;pin&gt;Output&lt;/pin&gt; to the &lt;pin&gt;Background Color&lt;/pin&gt; input pin on the &lt;node&gt;Renderer&lt;/node&gt;. Select different colours by changing the &lt;pin&gt;Index&lt;/pin&gt; input of &lt;node&gt;RetroColors&lt;/node&gt; and/or changing to a different games console colourset using the &lt;pin&gt;Mode&lt;/pin&gt; pin.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;On the right hand input of &lt;node&gt;Blend&lt;/node&gt; we see &lt;&cr;&lf;That was fun, but anyway, we can definitely see that the background of the quads are black. Let&apos;s change the &lt;concept&gt;Blend Mode&lt;/concept&gt; of the quads, (Photoshop users will be familiar with this idea).&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;Create a &lt;node&gt;Blend (EX9.RenderState)&lt;/node&gt; above &lt;node&gt;Quad&lt;/node&gt; and attach the output of &lt;node&gt;Blend&lt;/node&gt; to the &lt;pin&gt;Render State&lt;/pin&gt; input of &lt;node&gt;Quad&lt;/node&gt;. Set the &lt;pin&gt;Draw Mode&lt;/pin&gt; of &lt;node&gt;Blend&lt;/node&gt; to &lt;b&gt;Add&lt;/b&gt;.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;Now when the quads are drawn, their colour is &apos;added&apos; to whatever is behind them, i.e. since black is &lt;b&gt;0&lt;/b&gt; and &lt;b&gt;a + 0 = a&lt;/b&gt;, black has no effect when the &lt;pin&gt;Draw Mode&lt;/pin&gt; is set to &lt;b&gt;Add&lt;/b&gt;.|">
- </PIN>
- <PIN pinname="Output String" visible="0">
- </PIN>
- <PIN pinname="Show Grid" slicecount="1" values="0">
- </PIN>
- <PIN pinname="String Type" slicecount="1" values="MultiLine">
- </PIN>
- <PIN pinname="Font" slicecount="1" values="|Arial Black|">
- </PIN>
- <PIN pinname="Size" slicecount="1" values="10">
- </PIN>
- <PIN pinname="Descriptive Name" encoded="0" slicecount="1" values="||">
- </PIN>
- </NODE>
- <NODE id="115" componentmode="InABox" nodename="IOBox (String)" systemname="IOBox (String)">
- <BOUNDS type="Node" height="270" left="10590" top="165" width="2070">
- </BOUNDS>
- <BOUNDS type="Box" height="315" left="10590" top="165" width="4185">
- </BOUNDS>
- <PIN pinname="Input String" encoded="0" slicecount="1" visible="0" values="|[3 - A visual spread experiment]&cr;&lf;So let&apos;s try and visualise what happens with spreads.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;We&apos;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.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;Follow these steps:&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;&lt;ol&gt;&cr;&lf;&lt;li&gt;First create a &lt;node&gt;Quad&lt;/node&gt; and a &lt;node&gt;Renderer&lt;/node&gt; and connect them up. You should get the familiar white square in a black box.&lt;/li&gt;&cr;&lf;&lt;li&gt;Now lets make a new node called &lt;node&gt;FileTexture&lt;/node&gt; above &lt;node&gt;Quad&lt;/node&gt;. Connect the &lt;pin&gt;Texture Out&lt;/pin&gt; output of &lt;node&gt;FileTexture&lt;/node&gt; to the &lt;node&gt;Texture&lt;/node&gt; input of Quad.&cr;&lf;&lt;br /&gt;&cr;&lf;The &lt;node&gt;FileTexture&lt;/node&gt; node loads in an image file, and creates a &lt;concept&gt;Texture&lt;/concept&gt; which you can apply to your graphical objects.&cr;&lf;&lt;br /&gt;&cr;&lf;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).&cr;&lf;&lt;/li&gt;&cr;&lf;&cr;&lf;&lt;li&gt;&lt;rmb/&gt;&lt;click/&gt; on the &lt;pin&gt;Filename&lt;/pin&gt; input of &lt;node&gt;FileTexture&lt;/node&gt; and select an image from your own computer. You should now see that image applied to the quad.&lt;/li&gt;&cr;&lf;&cr;&lf;&lt;li&gt;Now let&apos;s load a specific texture. We go to the VVVV folder where you have it installed. We go to the &apos;girlpower&apos; folder. Then we go to the &apos;images&apos; folder (vvvv/girlpower/images). Now select the file &quot;ring thin.bmp&quot;. We should now be drawing a circle to the screen. If the &lt;node&gt;Renderer&lt;/node&gt; is square, the circle will be square. But if the &lt;node&gt;Renderer&lt;/node&gt; is squashed, so will the circle be.&lt;/li&gt;&cr;&lf;&cr;&lf;&lt;li&gt;To straighten the circle, we need to counteract the &lt;concept&gt;Aspect Ratio&lt;/concept&gt;of the &lt;node&gt;Renderer&lt;/node&gt;. We do this with some simple maths. Create a &lt;node&gt;/ (Value)&lt;/node&gt; node (this node divides numers. i.e. 4/2 = 2).&cr;&lf;&lt;br /&gt;&cr;&lf;Attach the 2 inputs of the &lt;node&gt;/&lt;/node&gt; to the &lt;pin&gt;Width&lt;/pin&gt; and &lt;pin&gt;Height&lt;/pin&gt; output pins of the &lt;node&gt;Renderer&lt;/node&gt; respectively. Create an &lt;node&gt;IOBox&lt;/node&gt; and attach it to the &lt;node&gt;IOBox&lt;/node&gt;&apos;s output to visualise the output. This number represents the aspect ratio. Go into &lt;node&gt;Inspektor&lt;/node&gt; and set the &lt;pin&gt;Descriptive Name&lt;/pin&gt; of the IOBox to &lt;b&gt;Aspect Ratio&lt;/b&gt;&cr;&lf;&lt;br /&gt;&cr;&lf;Now add a &lt;node&gt;Scale (Transform)&lt;/node&gt; (not vector version!) above your &lt;node&gt;Quad&lt;/node&gt;. Connect to your &lt;node&gt;Quad&lt;/node&gt;&apos;s &lt;pin&gt;Transform&lt;/pin&gt; pin. Connect the output of your &lt;b&gt;Aspect Ratio&lt;/b&gt; to the &lt;pin&gt;Y&lt;/pin&gt; input of &lt;node&gt;Scale&lt;/node&gt;. The aspect ratio should now be fixed for your quad, regardless of the &lt;node&gt;Renderer&lt;/node&gt;&apos;s aspect ratio.&cr;&lf;&lt;br /&gt;&cr;&lf;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 &lt;key&gt;Ctrl&lt;/key&gt;+&lt;key&gt;Y&lt;/key&gt; to curve it, and/or &lt;key&gt;Ctrl&lt;/key&gt;+&lt;key&gt;H&lt;/key&gt; to &apos;hide&apos; it.&cr;&lf;&lt;/li&gt;&cr;&lf;&cr;&lf;&lt;li&gt;&cr;&lf;Scale down the quad using a &lt;node&gt;UniformScale (Transform)&lt;/node&gt; node. Attach this to the input of your &lt;node&gt;Scale&lt;/node&gt; node and reduce the &lt;pin&gt;XYZ&lt;/pin&gt; input to &lt;b&gt;0.1&lt;/b&gt;. Remember you can edit the value both by &lt;click/&gt;&lt;rmb/&gt; on the pin and then typing a &lt;key&gt;0&lt;/key&gt;&lt;key&gt;.&lt;/key&gt;&lt;key&gt;1&lt;/key&gt;&lt;key&gt;Enter&lt;/key&gt;, or &lt;hold/&gt;&lt;rmb/&gt; on the pin and move the mouse up/down.&cr;&lf;&cr;&lf;&lt;li&gt;Create a &lt;node&gt;Translate (Transform)&lt;/node&gt; node (again, not the vector version!). and attach that to the &lt;node&gt;UniformScale&lt;/node&gt;&apos;s input&lt;/li&gt;&cr;&lf;&cr;&lf;&lt;/ol&gt;&cr;&lf;&cr;&lf;Ok before going any further. Take some time to figure out what&apos;s happening. This is some vety common VVVV fundamentals going on (Transforms, Layer, Texture, Maths).&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;Notice how everthing is wired up for 1 object. There&apos;s 1 aspect ratio correcting scale, 1 uniform scale, 1 texture, 1 quad.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;Now let&apos;s step it up! Create a &lt;node&gt;LinearSpread&lt;/node&gt; node above the &lt;node&gt;Translate&lt;/node&gt; and attach the &lt;pin&gt;Output&lt;/pin&gt; to &lt;node&gt;Translate&lt;/node&gt;&apos;s &lt;pin&gt;X&lt;/pin&gt;input. Now check the top right input pin of &lt;node&gt;LinearSpread&lt;/node&gt;, &lt;pin&gt;Spread Count&lt;/pin&gt;. Let&apos;s increase this value.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;As you see you get lots of circles renderered to the screen. Check the &lt;pin&gt;Output&lt;/pin&gt; of &lt;node&gt;LinearSpread&lt;/node&gt; by rolling your mouse over the output (you dont need to click). It might look something like this: &cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;&lt;b&gt;Output: (3) -0.3333~&lt;/b&gt;&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;This means there are 3 slices in the spread, and the first slice has a Value of approximately -0.3333 (the &lt;b&gt;~&lt;/b&gt; denotes approximate).|">
- </PIN>
- <PIN pinname="Output String" visible="0">
- </PIN>
- <PIN pinname="Show Grid" slicecount="1" values="0">
- </PIN>
- <PIN pinname="String Type" slicecount="1" values="MultiLine">
- </PIN>
- <PIN pinname="Font" slicecount="1" values="|Arial Black|">
- </PIN>
- <PIN pinname="Size" slicecount="1" values="10">
- </PIN>
- <PIN pinname="Descriptive Name" encoded="0" slicecount="1" values="||">
- </PIN>
- </NODE>
- <LINK srcnodeid="98" srcpinname="Layer" dstnodeid="97" dstpinname="Layers">
- </LINK>
- <LINK srcnodeid="102" srcpinname="Output" dstnodeid="101" dstpinname="Y" hiddenwhenlocked="1">
- </LINK>
- </PATCH>
View
38 8. Spreads 2.html
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-16"?>
+<html>
+<head>
+<title>Annotations</title>
+<script>
+ document.createElement('node');
+ document.createElement('pin');
+ document.createElement('key');
+ document.createElement('concept');
+
+ document.createElement('lmb');
+ document.createElement('rmb');
+ document.createElement('mmb');
+ document.createElement('scroll');
+
+ document.createElement('click');
+ document.createElement('click2');
+ document.createElement('hold');
+ document.createElement('release');
+ </script>
+<link rel="stylesheet" type="text/css" href="html_resources/style.css" />
+</head>
+<body>
+<img src="C:\kimchiandchips\Workshops\VVVV.Tutorials.Fundamentals\8. Spreads 2.png" />
+<h2>0 - Vectors</h2>
+<p> A <concept>Vector</concept> is represented by a Spread. A Spread of Vectors is represented also by a Spread. </p><p> A Spread with Spread Count <b>6</b> could either be a Spread of 3 2D Vectors, or a Spread of 2 3D Vectors. VVVV is totally agnostic about this. It just sees numbers. </p><p> Let's try this out: <ol> <li>Make 2 <b>Vector 2D</b> <node>IOBox</node>'s. </li> <li>Make a <node>Cons (Spreads)</node> node</li> <li>Make a <b>Vector 4D</b> <node>IOBox</node> </li> </p><p> Connect the 2 2D <node>IOBox</node>'s to the 2 inputs of <node>Cons</node>. And connect the 4D <node>IOBox</node> to the output of <node>Cons</node>. </p><p> If we edit the values in the top boxes, we can see the values change in the bottom box. The 2 2D vectors become a 4D vector. </p><p> The <node>Cons</node> node glues spreads together. It is short for <concept>Concatenate</concept> </p><p></p>
+<h2>1 - Vectors 2</h2>
+<p> Now try this situation: </p><p> <ol> <li>2 <b>3D Vector</b> <node>IOBox</node>'s attached to the inputs of a a <node>Vector (2D Join)</node></li> <li>Create a <node>Vector (3D split)</node> and connect the <pin>XY</pin> output of <node>Vector (2D Join)</node> to the <pin>XYZ</pin> input of <node>Vector (3D Split)</node>.</li> <li>Add 3 <b>Vector 2D</b> <node>IOBox</node>'s to the 3 outputs of <node>Vector (3D Split)</node></li> </ol> </p><p> Here we must embrace that the numbers are free to lose their identity at any point. We've input 2 3D vectors, which arrive at the <node>Vector (2D Join)</node>. At this point all the values on the left become <pin>X</pin> values, and all the values on the right become <pin>Y</pin> values. Therefore the identity of the numbers become <b>3 sets of 2D vectors</b> or in VVVV speak (and specifically, what comes on the output of that node) <b>A Spread of 2D Vectors with Spread Count 3</b>. </p><p> In this case, the <b>Vector 3D</b> <node>IOBox</node>'s simply become convenient input methods for spreads of 3 values. </p><p> Then anyway, we lose our <b>A Spread of 2D Vectors with Spread Count 3</b> identity again, by passing the spread into the <node>Vector (3D Split)</node> node. At this point the spread of 6 values is interpreted as <b>A Spread of 3D Vectors with Spread Count 2</b>. </p><p> This is then split out onto the output <node>IOBox</node>'s</p>
+<h2>2 - Vectors 3</h2>
+<p> OK. Let's keep up :) </p><p> Now try: </p><p> <ol> <li>1 <b>3D Vector</b> <node>IOBox</node> attached to the <pin>X</pin> input of a <node>Vector (2D Join)</node></li> <li>1 ordinary <node>IOBox</node> attached to the <pin>Y</pin> input of the node>Vector (2D Join)</node></li> <li>Create a <node>Vector (2D split)</node> and connect the <pin>XY</pin> output of <node>Vector (2D Join)</node> to the <pin>XY</pin> input of <node>Vector (2D Split)</node>.</li> <li>Add 2 <b>Vector 3D</b> <node>IOBox</node>'s to the <pin>X</pin> and <pin>Y</pin> outputs of <node>Vector (3D Split)</node></li> </ol> </p><p> Here we have a spread of 3 2D vectors. And we see that the Y value is repeated. We can visualise this more by: <ol> <li>Create an <node>IOBox</node></li> <li>Goto the Inspektor <key>Ctrl</key>+<key>I</key></li> <li>Set the <pin>Rows</pin> of the <node>IOBox</node> to 6</li> <li>Connect the <pin>XY</pin> output of <node>Vector (2D Join)</node> to the input of the new <node>IOBox</node></li> </ol> </p><p> Notice how the Y value <concept>Interleaves</concept> the X values in the Spread.</p>
+<h2>3 - Cross</h2>
+<p> Let's grab our rings patch from before. </p><p> Set the <pin>Spread Count</pin> of the <node>LinearSpread</node> to <b>4</b>. Now duplicate the <node>LinearSpread</node> and attach the second one to the <pin>Y</pin> input of <node>Translate</node> </p><p> Ok we've got 2 spreads going in, each of Spread Count <b>4</b>, and we've got 4 rings being rendered. But what if we want a grid of 4x4 rings? Then we use the <node>Cross</node> node! </p><p> Attach the 2 <node>LinearSpread</node>'s to the <pin>X In</pin> and <pin>Y In</pin> inputs of the <node>Cross</node> node respectively. </p><p> Connect the <pin>X Out</pin> and <pin>Y Out</pin> output pins of <node>Cross</node> to the <pin>X</pin> and <pin>Y</pin> inputs of <node>Translate</node>. </p><p> You should now have 16 rings instead of 4. </p><p> You may also notice that it's possible to use the same <node>LinearSpread</node> for both inputs on the <node>Cross</node> as they are giving identical output. </p><p> Otherwise you can make a different grid (e.g. 6x4).</p>
+<h2>4 - CircularSpread</h2>
+<p> Now to keep the patch simple, we will use the <node>GDI (Renderer)</node>: <ol> <li>Create a <node>Renderer (GDI)</node> and use <key>Alt</key>+<key>3</key> to put it into the patch (rather than a seperate window).</li> <li>Create a <node>Point (GDI)</node> and attach its output pin to the <pin>Layers</pin> input pin of <node>Renderer</node></li> </ol> </p><p> Now we should have a small cross rendered the the screen. We can change this graphic by changing the <pin>Type</pin> pin on the <node>Point</node> node. </p><p> Now create a <node>CircularSpread</node> node above the <node>Point</node>, and attach the <pin>Output X</pin> and <pin>Output Y</pin> pins of <node>CircularSpread</node> to the <pin>X</pin> and <pin>Y</pin> inpputs of <node>Points</node> respectively. </p><p> Increase the Spread Count on the <node>CircularSpread</node> (e.g. to <b>10</b>). </p><p> You should now have a circle of circles.</p>
+<h2>5 - And now animate</h2>
+<p> Add an <node>LFO</node> to the <pin>Phase</pin> pin of <node>CircularSpread</node>. </p><p> Reduce the <pin>Period</pin> of the <node>LFO</node> to <b>3 seconds</b>.</p>
+</body>
+</html>
View
BIN  8. Spreads 2.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
747 8. Spreads 2.v4p
@@ -0,0 +1,747 @@
+<!DOCTYPE PATCH SYSTEM "http://vvvv.org/versions/vvvv45beta26.dtd" >
+ <PATCH nodename="C:\kimchiandchips\Workshops\VVVV.Tutorials.Fundamentals\8. Spreads 2.v4p" filename="C:\kimchiandchips\Workshops\VVVV-basics,mapping\6. Spreads.v4p" locked="0" systemname="6. Spreads">
+ <BOUNDS height="14025" left="5310" top="600" type="Window" width="16800">
+ </BOUNDS>
+ <NODE componentmode="InABox" id="0" nodename="IOBox (String)" systemname="IOBox (String)">
+ <BOUNDS height="270" left="225" top="150" type="Node" width="1380">
+ </BOUNDS>
+ <BOUNDS height="1095" left="225" top="150" type="Box" width="7665">
+ </BOUNDS>
+ <PIN encoded="0" pinname="Input String" slicecount="1" visible="0" values="|8. Spreads 2|">
+ </PIN>
+ <PIN pinname="Output String" visible="0">
+ </PIN>
+ <PIN pinname="Show Grid" slicecount="1" values="1">
+ </PIN>
+ <PIN pinname="String Type" slicecount="1" values="MultiLine">
+ </PIN>
+ <PIN pinname="Size" slicecount="1" values="42">
+ </PIN>
+ </NODE>
+ <NODE componentmode="InABox" id="2" nodename="IOBox (String)" systemname="IOBox (String)">
+ <BOUNDS height="270" left="105" top="12405" type="Node" width="2070">
+ </BOUNDS>
+ <BOUNDS height="750" left="105" top="12405" type="Box" width="5325">
+ </BOUNDS>
+ <PIN encoded="0" pinname="Input String" slicecount="1" visible="0" values="|Created by Elliot Woods.&cr;&lf;Distributed under the MIT license (check file LICENSE) for details.&cr;&lf;Generally you can do whatever you want with these files. have fun!|">
+ </PIN>
+ <PIN pinname="Output String" visible="0">
+ </PIN>
+ <PIN pinname="Show Grid" slicecount="1" values="1">
+ </PIN>
+ <PIN pinname="String Type" slicecount="1" values="MultiLine">
+ </PIN>
+ </NODE>
+ <NODE componentmode="InABox" id="5" nodename="IOBox (String)" systemname="IOBox (String)">
+ <BOUNDS height="270" left="5805" top="2640" type="Node" width="1380">
+ </BOUNDS>
+ <BOUNDS height="540" left="5805" top="2640" type="Box" width="2085">
+ </BOUNDS>
+ <PIN encoded="0" pinname="Input String" visible="1">
+ </PIN>
+ <PIN pinname="Output String" visible="0">
+ </PIN>
+ <PIN pinname="Show Grid" slicecount="1" values="0">
+ </PIN>
+ <PIN pinname="String Type" slicecount="1" values="MultiLine">
+ </PIN>
+ <PIN pinname="Size" slicecount="1" values="12">
+ </PIN>
+ <PIN encoded="0" pinname="Descriptive Name" slicecount="1" values="Author">
+ </PIN>
+ </NODE>
+ <NODE componentmode="InABox" id="6" nodename="IOBox (String)" systemname="IOBox (String)">
+ <BOUNDS height="270" left="225" top="1260" type="Node" width="1380">
+ </BOUNDS>
+ <BOUNDS height="1155" left="225" top="1260" type="Box" width="7665">
+ </BOUNDS>
+ <PIN encoded="0" pinname="Input String" visible="1">
+ </PIN>
+ <PIN pinname="Output String" visible="0">
+ </PIN>
+ <PIN pinname="Show Grid" slicecount="1" values="0">
+ </PIN>
+ <PIN pinname="String Type" slicecount="1" values="MultiLine">
+ </PIN>
+ <PIN pinname="Size" slicecount="1" values="12">
+ </PIN>
+ <PIN encoded="0" pinname="Descriptive Name" slicecount="1" values="Description">
+ </PIN>
+ </NODE>
+ <INFO author="Elliot Woods" description="Looking at what happens when spreads meet other spreads." tags="Vector, Interleave, Cons, Cross">
+ </INFO>
+ <NODE componentmode="Hidden" filename="Subpatches\GetMetadata (VVVV).v4p" hiddenwhenlocked="1" id="10" nodename="GetMetadata (VVVV)" systemname="GetMetadata (VVVV)">
+ <BOUNDS height="100" left="5820" top="1800" type="Node" width="100">
+ </BOUNDS>
+ <PIN pinname="Patch" visible="1">
+ </PIN>
+ <BOUNDS height="3465" left="14520" top="5520" type="Window" width="4680">
+ </BOUNDS>
+ <PIN pinname="Author" visible="1">
+ </PIN>
+ <PIN pinname="Description" visible="1">
+ </PIN>
+ <PIN pinname="Tags" visible="1">
+ </PIN>
+ </NODE>
+ <NODE componentmode="Hidden" hiddenwhenlocked="1" id="8" nodename="PatchAlias (VVVV)" systemname="PatchAlias (VVVV)">
+ <BOUNDS height="100" left="5820" top="1350" type="Node" width="100">
+ </BOUNDS>
+ <PIN pinname="Patch" visible="1">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="10" dstpinname="Patch" hiddenwhenlocked="1" srcnodeid="8" srcpinname="Patch">
+ </LINK>
+ <LINK dstnodeid="6" dstpinname="Input String" hiddenwhenlocked="1" linkstyle="VHV" srcnodeid="10" srcpinname="Description">
+ <LINKPOINT x="6445" y="2205">
+ </LINKPOINT>
+ <LINKPOINT x="245" y="2355">
+ </LINKPOINT>
+ </LINK>
+ <NODE componentmode="InABox" id="11" nodename="IOBox (String)" systemname="IOBox (String)">
+ <BOUNDS height="270" left="225" top="2640" type="Node" width="1380">
+ </BOUNDS>
+ <BOUNDS height="540" left="225" top="2640" type="Box" width="5520">
+ </BOUNDS>
+ <PIN encoded="0" pinname="Input String" visible="1">
+ </PIN>
+ <PIN pinname="Output String" visible="0">
+ </PIN>
+ <PIN pinname="Show Grid" slicecount="1" values="0">
+ </PIN>
+ <PIN pinname="String Type" slicecount="1" values="MultiLine">
+ </PIN>
+ <PIN pinname="Size" slicecount="1" values="12">
+ </PIN>
+ <PIN encoded="0" pinname="Descriptive Name" slicecount="1" values="Tags">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="11" dstpinname="Input String" hiddenwhenlocked="1" linkstyle="VHV" srcnodeid="10" srcpinname="Tags">
+ <LINKPOINT x="7015" y="2293">
+ </LINKPOINT>
+ <LINKPOINT x="275" y="2448">
+ </LINKPOINT>
+ </LINK>
+ <LINK dstnodeid="5" dstpinname="Input String" hiddenwhenlocked="1" srcnodeid="10" srcpinname="Author">
+ </LINK>
+ <NODE componentmode="InABox" id="12" nodename="IOBox (String)" systemname="IOBox (String)">
+ <BOUNDS height="270" left="3375" top="3660" type="Node" width="2070">
+ </BOUNDS>
+ <BOUNDS height="330" left="3375" top="3660" type="Box" width="1470">
+ </BOUNDS>
+ <PIN encoded="0" pinname="Input String" slicecount="1" visible="0" values="|[0 - Vectors]&cr;&lf;A &lt;concept&gt;Vector&lt;/concept&gt; is represented by a Spread. A Spread of Vectors is represented also by a Spread.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;A Spread with Spread Count &lt;b&gt;6&lt;/b&gt; could either be a Spread of 3 2D Vectors, or a Spread of 2 3D Vectors. VVVV is totally agnostic about this. It just sees numbers.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;Let&apos;s try this out:&cr;&lf;&lt;ol&gt;&cr;&lf;&lt;li&gt;Make 2 &lt;b&gt;Vector 2D&lt;/b&gt; &lt;node&gt;IOBox&lt;/node&gt;&apos;s. &lt;/li&gt;&cr;&lf;&lt;li&gt;Make a &lt;node&gt;Cons (Spreads)&lt;/node&gt; node&lt;/li&gt;&cr;&lf;&lt;li&gt;Make a &lt;b&gt;Vector 4D&lt;/b&gt; &lt;node&gt;IOBox&lt;/node&gt; &lt;/li&gt;&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;Connect the 2 2D &lt;node&gt;IOBox&lt;/node&gt;&apos;s to the 2 inputs of &lt;node&gt;Cons&lt;/node&gt;. And connect the 4D &lt;node&gt;IOBox&lt;/node&gt; to the output of &lt;node&gt;Cons&lt;/node&gt;.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;If we edit the values in the top boxes, we can see the values change in the bottom box. The 2 2D vectors become a 4D vector.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;The &lt;node&gt;Cons&lt;/node&gt; node glues spreads together. It is short for &lt;concept&gt;Concatenate&lt;/concept&gt;&cr;&lf;&lt;br /&gt;|">
+ </PIN>
+ <PIN pinname="Output String" visible="0">
+ </PIN>
+ <PIN pinname="Show Grid" slicecount="1" values="0">
+ </PIN>
+ <PIN pinname="String Type" slicecount="1" values="MultiLine">
+ </PIN>
+ <PIN pinname="Font" slicecount="1" values="|Arial Black|">
+ </PIN>
+ <PIN pinname="Size" slicecount="1" values="10">
+ </PIN>
+ <PIN encoded="0" pinname="Descriptive Name" slicecount="1" values="||">
+ </PIN>
+ </NODE>
+ <NODE componentmode="InABox" id="103" nodename="IOBox (String)" systemname="IOBox (String)">
+ <BOUNDS height="270" left="8145" top="3465" type="Node" width="330">
+ </BOUNDS>
+ <BOUNDS height="7515" left="8145" top="3465" type="Box" width="345">
+ </BOUNDS>
+ <PIN encoded="0" pinname="Input String" slicecount="1" visible="0" values="||">
+ </PIN>
+ <PIN pinname="Output String" visible="0">
+ </PIN>
+ <PIN pinname="Show Grid" slicecount="1" values="1">
+ </PIN>
+ <PIN pinname="String Type" slicecount="1" values="MultiLine">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="102" dstpinname="Input" srcnodeid="97" srcpinname="Actual Backbuffer Width">
+ </LINK>
+ <NODE componentmode="InABox" id="97" nodename="Renderer (EX9)" systemname="Renderer (EX9)">
+ <PIN pinname="Actual Backbuffer Width" visible="1">
+ </PIN>
+ <PIN pinname="Actual Backbuffer Height" visible="1">
+ </PIN>
+ <PIN pinname="Background Color" visible="1">
+ </PIN>
+ <PIN pinname="Layers" visible="1">
+ </PIN>
+ <BOUNDS height="100" left="8910" top="3990" type="Node" width="100">
+ </BOUNDS>
+ <BOUNDS height="3480" left="8910" top="3990" type="Box" width="7365">
+ </BOUNDS>
+ <BOUNDS height="5010" left="15765" top="6165" type="Window" width="6240">
+ </BOUNDS>
+ </NODE>
+ <NODE componentmode="Hidden" id="102" nodename="Divide (Value)" systemname="Divide (Value)">
+ <PIN pinname="Input" visible="1">
+ </PIN>
+ <PIN pinname="Input 2" visible="1">
+ </PIN>
+ <PIN pinname="Output" visible="1">
+ </PIN>
+ <BOUNDS height="270" left="14385" top="7560" type="Node" width="975">
+ </BOUNDS>
+ </NODE>
+ <LINK dstnodeid="102" dstpinname="Input 2" srcnodeid="97" srcpinname="Actual Backbuffer Height">
+ </LINK>
+ <LINK dstnodeid="101" dstpinname="Transform In" srcnodeid="99" srcpinname="Transform Out">
+ </LINK>
+ <NODE componentmode="Hidden" id="99" nodename="UniformScale (Transform)" systemname="UniformScale (Transform)">
+ <PIN pinname="Transform Out" visible="1">
+ </PIN>
+ <PIN pinname="Transform In" visible="1">
+ </PIN>
+ <BOUNDS height="100" left="9075" top="2520" type="Node" width="100">
+ </BOUNDS>
+ <PIN pinname="XYZ" slicecount="1" values="0.1">
+ </PIN>
+ </NODE>
+ <NODE componentmode="Hidden" id="101" nodename="Scale (Transform)" systemname="Scale (Transform)">
+ <PIN pinname="Transform In" visible="1">
+ </PIN>
+ <PIN pinname="Transform Out" visible="1">
+ </PIN>
+ <PIN pinname="Y" visible="1">
+ </PIN>
+ <BOUNDS height="100" left="9075" top="2985" type="Node" width="100">
+ </BOUNDS>
+ <PIN pinname="X" slicecount="1" values="1">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="98" dstpinname="Texture" linkstyle="VHV" srcnodeid="100" srcpinname="Texture Out">
+ <LINKPOINT x="10350" y="3353">
+ </LINKPOINT>
+ <LINKPOINT x="9315" y="3353">
+ </LINKPOINT>
+ </LINK>
+ <NODE componentmode="Hidden" id="100" nodename="FileTexture (EX9.Texture)" systemname="FileTexture (EX9.Texture)">
+ <PIN pinname="Texture Out" visible="1">
+ </PIN>
+ <BOUNDS height="100" left="10350" top="2985" type="Node" width="100">
+ </BOUNDS>
+ <PIN encoded="0" pinname="Filename" slicecount="1" values="|..\..\..\vvvv\vvvv_45beta26\girlpower\images\ring thin.bmp|">
+ </PIN>
+ </NODE>
+ <NODE componentmode="Hidden" id="98" nodename="Quad (DX9)" systemname="Quad (DX9)">
+ <PIN pinname="Texture" visible="1">
+ </PIN>
+ <PIN pinname="Transform" visible="1">
+ </PIN>
+ <PIN pinname="Render State" visible="1">
+ </PIN>
+ <BOUNDS height="270" left="8910" top="3480" type="Node" width="1245">
+ </BOUNDS>
+ <PIN pinname="Layer" visible="1">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="98" dstpinname="Transform" srcnodeid="101" srcpinname="Transform Out">
+ </LINK>
+ <LINK dstnodeid="99" dstpinname="Transform In" srcnodeid="117" srcpinname="Transform Out">
+ </LINK>
+ <NODE componentmode="Hidden" id="117" nodename="Translate (Transform)" systemname="Translate (Transform)">
+ <PIN pinname="Transform Out" visible="1">
+ </PIN>
+ <PIN pinname="X" visible="1">
+ </PIN>
+ <BOUNDS height="270" left="9075" top="2115" type="Node" width="4125">
+ </BOUNDS>
+ <PIN pinname="Y" visible="1">
+ </PIN>
+ </NODE>
+ <NODE componentmode="Hidden" id="118" nodename="LinearSpread (Spreads)" systemname="LinearSpread (Spreads)">
+ <PIN pinname="Output" visible="1">
+ </PIN>
+ <BOUNDS height="100" left="10425" top="1020" type="Node" width="100">
+ </BOUNDS>
+ <PIN pinname="Spread Count" slicecount="1" values="8">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="97" dstpinname="Background Color" srcnodeid="120" srcpinname="Output">
+ </LINK>
+ <NODE componentmode="Hidden" id="120" nodename="RetroColors (Color)" systemname="RetroColors (Color)">
+ <PIN pinname="Output" visible="1">
+ </PIN>
+ <BOUNDS height="100" left="10530" top="3600" type="Node" width="100">
+ </BOUNDS>
+ <PIN pinname="Wavelength (nm)">
+ </PIN>
+ <PIN pinname="Index" slicecount="1" values="11">
+ </PIN>
+ <PIN pinname="Mode" slicecount="1" values="Commodore64">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="98" dstpinname="Render State" linkstyle="VHV" srcnodeid="121" srcpinname="Render State Out">
+ <LINKPOINT x="8490" y="3353">
+ </LINKPOINT>
+ <LINKPOINT x="8910" y="3353">
+ </LINKPOINT>
+ </LINK>
+ <NODE componentmode="Hidden" id="121" nodename="Blend (EX9.RenderState)" systemname="Blend (EX9.RenderState)">
+ <PIN pinname="Render State Out" visible="1">
+ </PIN>
+ <BOUNDS height="100" left="8430" top="2985" type="Node" width="100">
+ </BOUNDS>
+ <PIN pinname="Draw Mode" slicecount="1" values="Add">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="97" dstpinname="Layers" srcnodeid="98" srcpinname="Layer">
+ </LINK>
+ <LINK dstnodeid="101" dstpinname="Y" hiddenwhenlocked="1" srcnodeid="102" srcpinname="Output">
+ </LINK>
+ <NODE componentmode="Hidden" filename="%VVVV%\plugins\SpreadOperations.dll" id="138" nodename="Cons (Spreads)" systemname="Cons (Spreads)">
+ <BOUNDS height="270" left="3015" top="4980" type="Node" width="1950">
+ </BOUNDS>
+ <PIN pinname="Input 1" visible="1">
+ </PIN>
+ <PIN pinname="Input 2" visible="1">
+ </PIN>
+ <PIN pinname="Output" visible="1">
+ </PIN>
+ </NODE>
+ <NODE componentmode="InABox" id="139" nodename="IOBox (Value Advanced)" systemname="IOBox (Value Advanced)">
+ <BOUNDS height="100" left="3030" top="4260" type="Node" width="100">
+ </BOUNDS>
+ <BOUNDS height="480" left="3030" top="4260" type="Box" width="795">
+ </BOUNDS>
+ <PIN pinname="Rows" slicecount="1" values="2">
+ </PIN>
+ <PIN pinname="Y Input Value" slicecount="2" values="0,0.1">
+ </PIN>
+ <PIN pinname="Vector Size" slicecount="1" values="2">
+ </PIN>
+ <PIN encoded="0" pinname="Default" slicecount="1" values="|0, 0|">
+ </PIN>
+ <PIN pinname="Y Output Value" visible="1">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="138" dstpinname="Input 1" srcnodeid="139" srcpinname="Y Output Value">
+ </LINK>
+ <NODE componentmode="InABox" id="140" nodename="IOBox (Value Advanced)" systemname="IOBox (Value Advanced)">
+ <BOUNDS height="100" left="4920" top="4245" type="Node" width="100">
+ </BOUNDS>
+ <BOUNDS height="480" left="4920" top="4245" type="Box" width="795">
+ </BOUNDS>
+ <PIN pinname="Rows" slicecount="1" values="2">
+ </PIN>
+ <PIN pinname="Y Input Value" slicecount="2" values="0.11,0.15">
+ </PIN>
+ <PIN pinname="Vector Size" slicecount="1" values="2">
+ </PIN>
+ <PIN encoded="0" pinname="Default" slicecount="1" values="|0, 0|">
+ </PIN>
+ <PIN pinname="Y Output Value" visible="1">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="138" dstpinname="Input 2" srcnodeid="140" srcpinname="Y Output Value">
+ </LINK>
+ <NODE componentmode="InABox" id="141" nodename="IOBox (Value Advanced)" systemname="IOBox (Value Advanced)">
+ <BOUNDS height="100" left="3015" top="5535" type="Node" width="100">
+ </BOUNDS>
+ <BOUNDS height="960" left="3015" top="5535" type="Box" width="795">
+ </BOUNDS>
+ <PIN pinname="Rows" slicecount="1" values="4">
+ </PIN>
+ <PIN pinname="Y Input Value" visible="1">
+ </PIN>
+ <PIN pinname="Vector Size" slicecount="1" values="4">
+ </PIN>
+ <PIN encoded="0" pinname="Default" slicecount="1" values="|0, 0, 0, 1|">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="141" dstpinname="Y Input Value" srcnodeid="138" srcpinname="Output">
+ </LINK>
+ <NODE componentmode="InABox" id="142" nodename="IOBox (Value Advanced)" systemname="IOBox (Value Advanced)">
+ <BOUNDS height="100" left="705" top="7485" type="Node" width="100">
+ </BOUNDS>
+ <BOUNDS height="720" left="705" top="7485" type="Box" width="795">
+ </BOUNDS>
+ <PIN pinname="Rows" slicecount="1" values="3">
+ </PIN>
+ <PIN pinname="Y Input Value" slicecount="3" values="0.04,0.01,0.09">
+ </PIN>
+ <PIN pinname="Vector Size" slicecount="1" values="3">
+ </PIN>
+ <PIN encoded="0" pinname="Default" slicecount="1" values="|0, 0, 0|">
+ </PIN>
+ <PIN pinname="Y Output Value" visible="1">
+ </PIN>
+ </NODE>
+ <NODE componentmode="InABox" id="143" nodename="IOBox (Value Advanced)" systemname="IOBox (Value Advanced)">
+ <BOUNDS height="100" left="1845" top="7470" type="Node" width="100">
+ </BOUNDS>
+ <BOUNDS height="720" left="1845" top="7470" type="Box" width="795">
+ </BOUNDS>
+ <PIN pinname="Rows" slicecount="1" values="3">
+ </PIN>
+ <PIN pinname="Y Input Value" slicecount="3" values="0.08,0.16,0.12">
+ </PIN>
+ <PIN pinname="Vector Size" slicecount="1" values="3">
+ </PIN>
+ <PIN encoded="0" pinname="Default" slicecount="1" values="|0, 0, 0|">
+ </PIN>
+ <PIN pinname="Y Output Value" visible="1">
+ </PIN>
+ </NODE>
+ <NODE componentmode="Hidden" id="144" nodename="Vector (2d Join)" systemname="Vector (2d Join)">
+ <BOUNDS height="270" left="705" top="8520" type="Node" width="1215">
+ </BOUNDS>
+ <PIN pinname="X" visible="1">
+ </PIN>
+ <PIN pinname="Y" visible="1">
+ </PIN>
+ <PIN pinname="XY" visible="1">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="144" dstpinname="X" srcnodeid="142" srcpinname="Y Output Value">
+ </LINK>
+ <LINK dstnodeid="144" dstpinname="Y" srcnodeid="143" srcpinname="Y Output Value">
+ </LINK>
+ <NODE componentmode="Hidden" id="145" nodename="Vector (3d Split)" systemname="Vector (3d Split)">
+ <BOUNDS height="270" left="705" top="9075" type="Node" width="2550">
+ </BOUNDS>
+ <PIN pinname="XYZ" visible="1">
+ </PIN>
+ <PIN pinname="X" visible="1">
+ </PIN>
+ <PIN pinname="Y" visible="1">
+ </PIN>
+ <PIN pinname="Z" visible="1">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="145" dstpinname="XYZ" srcnodeid="144" srcpinname="XY">
+ </LINK>
+ <NODE componentmode="InABox" id="146" nodename="IOBox (Value Advanced)" systemname="IOBox (Value Advanced)">
+ <BOUNDS height="100" left="690" top="9570" type="Node" width="100">
+ </BOUNDS>
+ <BOUNDS height="480" left="690" top="9570" type="Box" width="795">
+ </BOUNDS>
+ <PIN pinname="Rows" slicecount="1" values="2">
+ </PIN>
+ <PIN pinname="Y Input Value" visible="1">
+ </PIN>
+ <PIN pinname="Vector Size" slicecount="1" values="2">
+ </PIN>
+ <PIN encoded="0" pinname="Default" slicecount="1" values="|0, 0|">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="146" dstpinname="Y Input Value" srcnodeid="145" srcpinname="X">
+ </LINK>
+ <NODE componentmode="InABox" id="147" nodename="IOBox (Value Advanced)" systemname="IOBox (Value Advanced)">
+ <BOUNDS height="100" left="1950" top="9570" type="Node" width="100">
+ </BOUNDS>
+ <BOUNDS height="480" left="1950" top="9570" type="Box" width="795">
+ </BOUNDS>
+ <PIN pinname="Rows" slicecount="1" values="2">
+ </PIN>
+ <PIN pinname="Y Input Value" visible="1">
+ </PIN>
+ <PIN pinname="Vector Size" slicecount="1" values="2">
+ </PIN>
+ <PIN encoded="0" pinname="Default" slicecount="1" values="|0, 0|">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="147" dstpinname="Y Input Value" srcnodeid="145" srcpinname="Y">
+ </LINK>
+ <NODE componentmode="InABox" id="148" nodename="IOBox (Value Advanced)" systemname="IOBox (Value Advanced)">
+ <BOUNDS height="100" left="3195" top="9570" type="Node" width="100">
+ </BOUNDS>
+ <BOUNDS height="480" left="3195" top="9570" type="Box" width="795">
+ </BOUNDS>
+ <PIN pinname="Rows" slicecount="1" values="2">
+ </PIN>
+ <PIN pinname="Y Input Value" visible="1">
+ </PIN>
+ <PIN pinname="Vector Size" slicecount="1" values="2">
+ </PIN>
+ <PIN encoded="0" pinname="Default" slicecount="1" values="|0, 0|">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="148" dstpinname="Y Input Value" srcnodeid="145" srcpinname="Z">
+ </LINK>
+ <NODE componentmode="InABox" id="149" nodename="IOBox (String)" systemname="IOBox (String)">
+ <BOUNDS height="270" left="780" top="7020" type="Node" width="2070">
+ </BOUNDS>
+ <BOUNDS height="360" left="780" top="7020" type="Box" width="1725">
+ </BOUNDS>
+ <PIN encoded="0" pinname="Input String" slicecount="1" visible="0" values="|[1 - Vectors 2]&cr;&lf;Now try this situation:&cr;&lf;&lt;br /&gt;&cr;&lf;&lt;ol&gt;&cr;&lf;&lt;li&gt;2 &lt;b&gt;3D Vector&lt;/b&gt; &lt;node&gt;IOBox&lt;/node&gt;&apos;s attached to the inputs of a a &lt;node&gt;Vector (2D Join)&lt;/node&gt;&lt;/li&gt;&cr;&lf;&lt;li&gt;Create a &lt;node&gt;Vector (3D split)&lt;/node&gt; and connect the &lt;pin&gt;XY&lt;/pin&gt; output of &lt;node&gt;Vector (2D Join)&lt;/node&gt; to the &lt;pin&gt;XYZ&lt;/pin&gt; input of &lt;node&gt;Vector (3D Split)&lt;/node&gt;.&lt;/li&gt;&cr;&lf;&lt;li&gt;Add 3 &lt;b&gt;Vector 2D&lt;/b&gt; &lt;node&gt;IOBox&lt;/node&gt;&apos;s to the 3 outputs of &lt;node&gt;Vector (3D Split)&lt;/node&gt;&lt;/li&gt;&cr;&lf;&lt;/ol&gt;&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;Here we must embrace that the numbers are free to lose their identity at any point. We&apos;ve input 2 3D vectors, which arrive at the &lt;node&gt;Vector (2D Join)&lt;/node&gt;. At this point all the values on the left become &lt;pin&gt;X&lt;/pin&gt; values, and all the values on the right become &lt;pin&gt;Y&lt;/pin&gt; values. Therefore the identity of the numbers become &lt;b&gt;3 sets of 2D vectors&lt;/b&gt; or in VVVV speak (and specifically, what comes on the output of that node) &lt;b&gt;A Spread of 2D Vectors with Spread Count 3&lt;/b&gt;.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;In this case, the &lt;b&gt;Vector 3D&lt;/b&gt; &lt;node&gt;IOBox&lt;/node&gt;&apos;s simply become convenient input methods for spreads of 3 values.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;Then anyway, we lose our &lt;b&gt;A Spread of 2D Vectors with Spread Count 3&lt;/b&gt; identity again, by passing the spread into the &lt;node&gt;Vector (3D Split)&lt;/node&gt; node. At this point the spread of 6 values is interpreted as &lt;b&gt;A Spread of 3D Vectors with Spread Count 2&lt;/b&gt;.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;This is then split out onto the output &lt;node&gt;IOBox&lt;/node&gt;&apos;s|">
+ </PIN>
+ <PIN pinname="Output String" visible="0">
+ </PIN>
+ <PIN pinname="Show Grid" slicecount="1" values="0">
+ </PIN>
+ <PIN pinname="String Type" slicecount="1" values="MultiLine">
+ </PIN>
+ <PIN pinname="Font" slicecount="1" values="|Arial Black|">
+ </PIN>
+ <PIN pinname="Size" slicecount="1" values="10">
+ </PIN>
+ <PIN encoded="0" pinname="Descriptive Name" slicecount="1" values="||">
+ </PIN>
+ </NODE>
+ <NODE componentmode="InABox" id="165" nodename="IOBox (Value Advanced)" systemname="IOBox (Value Advanced)">
+ <BOUNDS height="100" left="4455" top="7485" type="Node" width="100">
+ </BOUNDS>
+ <BOUNDS height="720" left="4455" top="7485" type="Box" width="795">
+ </BOUNDS>
+ <PIN pinname="Rows" slicecount="1" values="3">
+ </PIN>
+ <PIN pinname="Y Input Value" slicecount="3" values="1,1.1,1.2">
+ </PIN>
+ <PIN pinname="Vector Size" slicecount="1" values="3">
+ </PIN>
+ <PIN encoded="0" pinname="Default" slicecount="1" values="|0, 0, 0|">
+ </PIN>
+ <PIN pinname="Y Output Value" visible="1">
+ </PIN>
+ </NODE>
+ <NODE componentmode="Hidden" id="163" nodename="Vector (2d Join)" systemname="Vector (2d Join)">
+ <BOUNDS height="270" left="4455" top="8520" type="Node" width="1215">
+ </BOUNDS>
+ <PIN pinname="X" visible="1">
+ </PIN>
+ <PIN pinname="Y" visible="1">
+ </PIN>
+ <PIN pinname="XY" visible="1">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="163" dstpinname="X" srcnodeid="165" srcpinname="Y Output Value">
+ </LINK>
+ <NODE componentmode="InABox" id="158" nodename="IOBox (String)" systemname="IOBox (String)">
+ <BOUNDS height="270" left="4530" top="7020" type="Node" width="2070">
+ </BOUNDS>
+ <BOUNDS height="360" left="4530" top="7020" type="Box" width="1725">
+ </BOUNDS>
+ <PIN encoded="0" pinname="Input String" slicecount="1" visible="0" values="|[2 - Vectors 3]&cr;&lf;OK. Let&apos;s keep up :)&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;Now try:&cr;&lf;&lt;br /&gt;&cr;&lf;&lt;ol&gt;&cr;&lf;&lt;li&gt;1 &lt;b&gt;3D Vector&lt;/b&gt; &lt;node&gt;IOBox&lt;/node&gt; attached to the &lt;pin&gt;X&lt;/pin&gt; input of a &lt;node&gt;Vector (2D Join)&lt;/node&gt;&lt;/li&gt;&cr;&lf;&lt;li&gt;1 ordinary &lt;node&gt;IOBox&lt;/node&gt; attached to the &lt;pin&gt;Y&lt;/pin&gt; input of the node&gt;Vector (2D Join)&lt;/node&gt;&lt;/li&gt;&cr;&lf;&lt;li&gt;Create a &lt;node&gt;Vector (2D split)&lt;/node&gt; and connect the &lt;pin&gt;XY&lt;/pin&gt; output of &lt;node&gt;Vector (2D Join)&lt;/node&gt; to the &lt;pin&gt;XY&lt;/pin&gt; input of &lt;node&gt;Vector (2D Split)&lt;/node&gt;.&lt;/li&gt;&cr;&lf;&lt;li&gt;Add 2 &lt;b&gt;Vector 3D&lt;/b&gt; &lt;node&gt;IOBox&lt;/node&gt;&apos;s to the &lt;pin&gt;X&lt;/pin&gt; and &lt;pin&gt;Y&lt;/pin&gt; outputs of &lt;node&gt;Vector (3D Split)&lt;/node&gt;&lt;/li&gt;&cr;&lf;&lt;/ol&gt;&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;Here we have a spread of 3 2D vectors. And we see that the Y value is repeated. We can visualise this more by:&cr;&lf;&lt;ol&gt;&cr;&lf;&lt;li&gt;Create an &lt;node&gt;IOBox&lt;/node&gt;&lt;/li&gt;&cr;&lf;&lt;li&gt;Goto the Inspektor &lt;key&gt;Ctrl&lt;/key&gt;+&lt;key&gt;I&lt;/key&gt;&lt;/li&gt;&cr;&lf;&lt;li&gt;Set the &lt;pin&gt;Rows&lt;/pin&gt; of the &lt;node&gt;IOBox&lt;/node&gt; to 6&lt;/li&gt;&cr;&lf;&lt;li&gt;Connect the &lt;pin&gt;XY&lt;/pin&gt; output of &lt;node&gt;Vector (2D Join)&lt;/node&gt; to the input of the new &lt;node&gt;IOBox&lt;/node&gt;&lt;/li&gt;&cr;&lf;&lt;/ol&gt;&cr;&lf;&lt;br /&gt;&cr;&lf;Notice how the Y value &lt;concept&gt;Interleaves&lt;/concept&gt; the X values in the Spread.|">
+ </PIN>
+ <PIN pinname="Output String" visible="0">
+ </PIN>
+ <PIN pinname="Show Grid" slicecount="1" values="0">
+ </PIN>
+ <PIN pinname="String Type" slicecount="1" values="MultiLine">
+ </PIN>
+ <PIN pinname="Font" slicecount="1" values="|Arial Black|">
+ </PIN>
+ <PIN pinname="Size" slicecount="1" values="10">
+ </PIN>
+ <PIN encoded="0" pinname="Descriptive Name" slicecount="1" values="||">
+ </PIN>
+ </NODE>
+ <NODE componentmode="Hidden" id="166" nodename="Vector (2d Split)" systemname="Vector (2d Split)">
+ <BOUNDS height="270" left="4470" top="9075" type="Node" width="1200">
+ </BOUNDS>
+ <PIN pinname="XY" visible="1">
+ </PIN>
+ <PIN pinname="X" visible="1">
+ </PIN>
+ <PIN pinname="Y" visible="1">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="166" dstpinname="XY" srcnodeid="163" srcpinname="XY">
+ </LINK>
+ <NODE componentmode="InABox" id="167" nodename="IOBox (Value Advanced)" systemname="IOBox (Value Advanced)">
+ <BOUNDS height="100" left="4485" top="9570" type="Node" width="100">
+ </BOUNDS>
+ <BOUNDS height="720" left="4485" top="9570" type="Box" width="795">
+ </BOUNDS>
+ <PIN pinname="Rows" slicecount="1" values="3">
+ </PIN>
+ <PIN pinname="Y Input Value" visible="1">
+ </PIN>
+ <PIN pinname="Vector Size" slicecount="1" values="3">
+ </PIN>
+ <PIN encoded="0" pinname="Default" slicecount="1" values="|0, 0, 0|">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="167" dstpinname="Y Input Value" srcnodeid="166" srcpinname="X">
+ </LINK>
+ <NODE componentmode="InABox" id="169" nodename="IOBox (Value Advanced)" systemname="IOBox (Value Advanced)">
+ <BOUNDS height="100" left="5610" top="9570" type="Node" width="100">
+ </BOUNDS>
+ <BOUNDS height="720" left="5610" top="9570" type="Box" width="795">
+ </BOUNDS>
+ <PIN pinname="Rows" slicecount="1" values="3">
+ </PIN>
+ <PIN pinname="Y Input Value" visible="1">
+ </PIN>
+ <PIN pinname="Vector Size" slicecount="1" values="3">
+ </PIN>
+ <PIN encoded="0" pinname="Default" slicecount="1" values="|0, 0, 0|">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="169" dstpinname="Y Input Value" srcnodeid="166" srcpinname="Y">
+ </LINK>
+ <NODE componentmode="InABox" id="170" nodename="IOBox (Value Advanced)" systemname="IOBox (Value Advanced)">
+ <BOUNDS height="100" left="5625" top="7950" type="Node" width="100">
+ </BOUNDS>
+ <BOUNDS height="240" left="5625" top="7950" type="Box" width="795">
+ </BOUNDS>
+ <PIN pinname="Y Output Value" visible="1">
+ </PIN>
+ <PIN pinname="Y Input Value" slicecount="1" values="0.04">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="163" dstpinname="Y" srcnodeid="170" srcpinname="Y Output Value">
+ </LINK>
+ <NODE componentmode="InABox" id="171" nodename="IOBox (Value Advanced)" systemname="IOBox (Value Advanced)">
+ <BOUNDS height="100" left="7035" top="8895" type="Node" width="100">
+ </BOUNDS>
+ <BOUNDS height="1440" left="7035" top="8895" type="Box" width="825">
+ </BOUNDS>
+ <PIN pinname="Rows" slicecount="1" values="6">
+ </PIN>
+ <PIN pinname="Y Input Value" visible="1">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="171" dstpinname="Y Input Value" linkstyle="VHV" srcnodeid="163" srcpinname="XY">
+ <LINKPOINT x="4495" y="8838">
+ </LINKPOINT>
+ <LINKPOINT x="7055" y="8818">
+ </LINKPOINT>
+ </LINK>
+ <NODE componentmode="InABox" id="172" nodename="IOBox (String)" systemname="IOBox (String)">
+ <BOUNDS height="270" left="11100" top="510" type="Node" width="2070">
+ </BOUNDS>
+ <BOUNDS height="360" left="11100" top="510" type="Box" width="1725">
+ </BOUNDS>
+ <PIN encoded="0" pinname="Input String" slicecount="1" visible="0" values="|[3 - Cross]&cr;&lf;Let&apos;s grab our rings patch from before.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;Set the &lt;pin&gt;Spread Count&lt;/pin&gt; of the &lt;node&gt;LinearSpread&lt;/node&gt; to &lt;b&gt;4&lt;/b&gt;.&cr;&lf;&cr;&lf;Now duplicate the &lt;node&gt;LinearSpread&lt;/node&gt; and attach the second one to the &lt;pin&gt;Y&lt;/pin&gt; input of &lt;node&gt;Translate&lt;/node&gt;&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;&cr;&lf;Ok we&apos;ve got 2 spreads going in, each of Spread Count &lt;b&gt;4&lt;/b&gt;, and we&apos;ve got 4 rings being rendered. But what if we want a grid of 4x4 rings? Then we use the &lt;node&gt;Cross&lt;/node&gt; node!&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;Attach the 2 &lt;node&gt;LinearSpread&lt;/node&gt;&apos;s to the &lt;pin&gt;X In&lt;/pin&gt; and &lt;pin&gt;Y In&lt;/pin&gt; inputs of the &lt;node&gt;Cross&lt;/node&gt; node respectively.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;Connect the &lt;pin&gt;X Out&lt;/pin&gt; and &lt;pin&gt;Y Out&lt;/pin&gt; output pins of &lt;node&gt;Cross&lt;/node&gt; to the &lt;pin&gt;X&lt;/pin&gt; and &lt;pin&gt;Y&lt;/pin&gt; inputs of &lt;node&gt;Translate&lt;/node&gt;.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;You should now have 16 rings instead of 4.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;You may also notice that it&apos;s possible to use the same &lt;node&gt;LinearSpread&lt;/node&gt; for both inputs on the &lt;node&gt;Cross&lt;/node&gt; as they are giving identical output.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;Otherwise you can make a different grid (e.g. 6x4).|">
+ </PIN>
+ <PIN pinname="Output String" visible="0">
+ </PIN>
+ <PIN pinname="Show Grid" slicecount="1" values="0">
+ </PIN>
+ <PIN pinname="String Type" slicecount="1" values="MultiLine">
+ </PIN>
+ <PIN pinname="Font" slicecount="1" values="|Arial Black|">
+ </PIN>
+ <PIN pinname="Size" slicecount="1" values="10">
+ </PIN>
+ <PIN encoded="0" pinname="Descriptive Name" slicecount="1" values="||">
+ </PIN>
+ </NODE>
+ <NODE componentmode="Hidden" id="173" nodename="LinearSpread (Spreads)" systemname="LinearSpread (Spreads)">
+ <PIN pinname="Output" visible="1">
+ </PIN>
+ <BOUNDS height="100" left="11775" top="1020" type="Node" width="100">
+ </BOUNDS>
+ <PIN pinname="Spread Count" slicecount="1" values="4">
+ </PIN>
+ </NODE>
+ <NODE componentmode="Hidden" id="174" nodename="Cross (2d)" systemname="Cross (2d)">
+ <BOUNDS height="270" left="10425" top="1710" type="Node" width="1440">
+ </BOUNDS>
+ <PIN pinname="X In" visible="1">
+ </PIN>
+ <PIN pinname="Y In" visible="1">
+ </PIN>
+ <PIN pinname="X Out" visible="1">
+ </PIN>
+ <PIN pinname="Y Out" visible="1">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="174" dstpinname="X In" srcnodeid="118" srcpinname="Output">
+ </LINK>
+ <LINK dstnodeid="174" dstpinname="Y In" linkstyle="VHV" srcnodeid="173" srcpinname="Output">
+ <LINKPOINT x="11775" y="1485">
+ </LINKPOINT>
+ <LINKPOINT x="10830" y="1485">
+ </LINKPOINT>
+ </LINK>
+ <LINK dstnodeid="117" dstpinname="X" srcnodeid="174" srcpinname="X Out">
+ </LINK>
+ <LINK dstnodeid="117" dstpinname="Y" srcnodeid="174" srcpinname="Y Out">
+ </LINK>
+ <NODE componentmode="InABox" id="175" nodename="IOBox (String)" systemname="IOBox (String)">
+ <BOUNDS height="270" left="11010" top="8055" type="Node" width="2070">
+ </BOUNDS>
+ <BOUNDS height="345" left="11010" top="8055" type="Box" width="2355">
+ </BOUNDS>
+ <PIN encoded="0" pinname="Input String" slicecount="1" visible="0" values="|[4 - CircularSpread]&cr;&lf;Now to keep the patch simple, we will use the &lt;node&gt;GDI (Renderer)&lt;/node&gt;:&cr;&lf;&cr;&lf;&lt;ol&gt;&cr;&lf;&lt;li&gt;Create a &lt;node&gt;Renderer (GDI)&lt;/node&gt; and use &lt;key&gt;Alt&lt;/key&gt;+&lt;key&gt;3&lt;/key&gt; to put it into the patch (rather than a seperate window).&lt;/li&gt;&cr;&lf;&lt;li&gt;Create a &lt;node&gt;Point (GDI)&lt;/node&gt; and attach its output pin to the &lt;pin&gt;Layers&lt;/pin&gt; input pin of &lt;node&gt;Renderer&lt;/node&gt;&lt;/li&gt;&cr;&lf;&lt;/ol&gt;&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;Now we should have a small cross rendered the the screen. We can change this graphic by changing the &lt;pin&gt;Type&lt;/pin&gt; pin on the &lt;node&gt;Point&lt;/node&gt; node.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;Now create a &lt;node&gt;CircularSpread&lt;/node&gt; node above the &lt;node&gt;Point&lt;/node&gt;, and attach the &lt;pin&gt;Output X&lt;/pin&gt; and &lt;pin&gt;Output Y&lt;/pin&gt; pins of &lt;node&gt;CircularSpread&lt;/node&gt; to the &lt;pin&gt;X&lt;/pin&gt; and &lt;pin&gt;Y&lt;/pin&gt; inpputs of &lt;node&gt;Points&lt;/node&gt; respectively.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;Increase the Spread Count on the &lt;node&gt;CircularSpread&lt;/node&gt; (e.g. to &lt;b&gt;10&lt;/b&gt;).&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;You should now have a circle of circles.|">
+ </PIN>
+ <PIN pinname="Output String" visible="0">
+ </PIN>
+ <PIN pinname="Show Grid" slicecount="1" values="0">
+ </PIN>
+ <PIN pinname="String Type" slicecount="1" values="MultiLine">
+ </PIN>
+ <PIN pinname="Font" slicecount="1" values="|Arial Black|">
+ </PIN>
+ <PIN pinname="Size" slicecount="1" values="10">
+ </PIN>
+ <PIN encoded="0" pinname="Descriptive Name" slicecount="1" values="||">
+ </PIN>
+ </NODE>
+ <NODE componentmode="InABox" id="176" nodename="Renderer (GDI)" systemname="Renderer (GDI)">
+ <BOUNDS height="100" left="10110" top="10035" type="Node" width="100">
+ </BOUNDS>
+ <BOUNDS height="2850" left="10110" top="10035" type="Box" width="3555">
+ </BOUNDS>
+ <BOUNDS height="5010" left="16425" top="10530" type="Window" width="6240">
+ </BOUNDS>
+ <PIN pinname="Layers" visible="1">
+ </PIN>
+ </NODE>
+ <NODE componentmode="Hidden" id="177" nodename="Point (GDI)" systemname="Point (GDI)">
+ <BOUNDS height="270" left="10125" top="9525" type="Node" width="4380">
+ </BOUNDS>
+ <PIN pinname="Layer" visible="1">
+ </PIN>
+ <PIN pinname="Type" slicecount="1" values="Circle">
+ </PIN>
+ <PIN pinname="Y" visible="1">
+ </PIN>
+ <PIN pinname="X" visible="1">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="176" dstpinname="Layers" srcnodeid="177" srcpinname="Layer">
+ </LINK>
+ <NODE componentmode="Hidden" id="178" nodename="CircularSpread (Spreads)" systemname="CircularSpread (Spreads)">
+ <BOUNDS height="270" left="10140" top="9045" type="Node" width="1125">
+ </BOUNDS>
+ <PIN pinname="Output X" visible="1">
+ </PIN>
+ <PIN pinname="Output Y" visible="1">
+ </PIN>
+ <PIN pinname="Phase" visible="1">
+ </PIN>
+ <PIN pinname="Spread Count" slicecount="1" values="10">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="177" dstpinname="Y" srcnodeid="178" srcpinname="Output Y">
+ </LINK>
+ <LINK dstnodeid="177" dstpinname="X" srcnodeid="178" srcpinname="Output X">
+ </LINK>
+ <NODE componentmode="Hidden" id="179" nodename="LFO (Animation)" systemname="LFO (Animation)">
+ <BOUNDS height="100" left="11010" top="8565" type="Node" width="100">
+ </BOUNDS>
+ <PIN pinname="Output" visible="1">
+ </PIN>
+ <PIN pinname="Period" slicecount="1" values="10">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="178" dstpinname="Phase" srcnodeid="179" srcpinname="Output">
+ </LINK>
+ <NODE componentmode="InABox" id="180" nodename="IOBox (String)" systemname="IOBox (String)">
+ <BOUNDS height="270" left="11865" top="8535" type="Node" width="2070">
+ </BOUNDS>
+ <BOUNDS height="360" left="11865" top="8535" type="Box" width="2580">
+ </BOUNDS>
+ <PIN encoded="0" pinname="Input String" slicecount="1" visible="0" values="|[5 - And now animate]&cr;&lf;Add an &lt;node&gt;LFO&lt;/node&gt; to the &lt;pin&gt;Phase&lt;/pin&gt; pin of &lt;node&gt;CircularSpread&lt;/node&gt;.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;Reduce the &lt;pin&gt;Period&lt;/pin&gt; of the &lt;node&gt;LFO&lt;/node&gt; to &lt;b&gt;3 seconds&lt;/b&gt;.|">
+ </PIN>
+ <PIN pinname="Output String" visible="0">
+ </PIN>
+ <PIN pinname="Show Grid" slicecount="1" values="0">
+ </PIN>
+ <PIN pinname="String Type" slicecount="1" values="MultiLine">
+ </PIN>
+ <PIN pinname="Font" slicecount="1" values="|Arial Black|">
+ </PIN>
+ <PIN pinname="Size" slicecount="1" values="10">
+ </PIN>
+ <PIN encoded="0" pinname="Descriptive Name" slicecount="1" values="||">
+ </PIN>
+ </NODE>
+ </PATCH>
View
36 9. Transforms 2.html
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-16"?>
+<html>
+<head>
+<title>Annotations</title>
+<script>
+ document.createElement('node');
+ document.createElement('pin');
+ document.createElement('key');
+ document.createElement('concept');
+
+ document.createElement('lmb');
+ document.createElement('rmb');
+ document.createElement('mmb');
+ document.createElement('scroll');
+
+ document.createElement('click');
+ document.createElement('click2');
+ document.createElement('hold');
+ document.createElement('release');
+ </script>
+<link rel="stylesheet" type="text/css" href="html_resources/style.css" />
+</head>
+<body>
+<img src="C:\kimchiandchips\Workshops\VVVV.Tutorials.Fundamentals\9. Transforms 2.png" />
+<h2>0 - Object, World, View, Projection</h2>
+<p> Within the 3D world of computer graphics, there are many spaces. The most general ones are: <ul> <li><concept>Object</concept> - The coordinates within the object</li> <li><concept>World</concept> - The coordinates with the world containing all the objects. When we transformed our quads before, we were transforming them in the world space. This is a <concept>Euclidean</concept> coordinate system, i.e. right angles are preserved </li> <li><concept>View</concept> - The World transformed from a particular viewpoint's position (trasforming a position is commonly called a translation) and rotation. This space is still Euclidean</li> <li><concept>Projection</concept> - This is the coordinate system of the camera onto the scene. When a perspective transform is applied to the scene, then this space is non-Euclidean, and is instead <concept>Projective</concept> </p><p> Alternatively we can also think of Projection Space (especially when projection mapping) as the coordinate system of the projector. This then becomes the coordinate system which has to match up with real world objects that we are projecting onto</li> </ul></p>
+<h2>1 - 3D Camera</h2>
+<p> It may be difficult to admit, but much of our lives are 2D. Our eyes see fundamentally in 2D, and its only by having a pair of them that we get a sense of 3D. But it is only a sense, and in truth, we are always limited to seeing 2D projections of things. This is generally true in computer graphics, especially when displayed on a monitor. </p><p> So how do we see something in 3D? Well, we get a camera that we can move! </p><p> Create: <ol> <li>A <node>Renderer (EX9)</node> and put it into the patch using <key>Alt</key>+<key>2</key></li> <li>An <node>AxisAndGrid (DX9)</node>. Connect this to the <node>Renderer</node></li> <li>A <node>Camera (Transform Softimage)</node>.</li> </ol> </p><p> Now hook up the camera. <ul> <li>Connect the <pin>View</pin> output of <node>Camera</node> (2nd output) to the <pin>View</pin> input of <node>Renderer</node>.</li> <li>Do the same for <pin>Projection</pin></li> </ul> </p><p> Now we can see the axis and grid from a perspective viewpoint. </p><p> You can use the following controls to manipulate the camera: </p><p> <ul> <li><key>O</key>+<img src="html_resources/hold.png"/><img src="html_resources/lmb.png"/> - Orbit</li> <li><key>P</key>+<img src="html_resources/hold.png"/><img src="html_resources/rmb.png"/> - Dolly (fast)</li> <li><key>P</key>+<img src="html_resources/hold.png"/><img src="html_resources/lmb.png"/> - Dolly (slow)</li> <li><key>Z</key>+<img src="html_resources/hold.png"/><img src="html_resources/lmb.png"/> - Move</li> <li><key>Z</key>+<img src="html_resources/hold.png"/><img src="html_resources/rmb.png"/> - Zoom</li> <li>Hold <key>R</key> to reset the view</li> </ul> </p><p> Be careful not to destroy your patch with all those mouse actions!</p>
+<h2>2 - Modules</h2>
+<p> Bits of code that you want to use all the time can be wrapped up in packages called <concept>Modules</concept>. </p><p> Modules are in fact simply subpatches that you use quite often. This <node>Camera</node> node is in fact a module made by a VVVV user. To see inside it, <img src="html_resources/click.png"/><img src="html_resources/rmb.png"/> on it. </p><p> Press <key>Alt</key>+<key>3</key> when you're done to hide the patch.</p>
+<h2>3 - 3D vector transforms</h2>
+<p> Create a copy of the patch we just made, and insert a <node>Group (EX9)</node> between the <node>AxisAndGrid</node> and your <node>Renderer</node> </p><p> Create a <node>Sphere (DX9)</node> and attach it to the <pin>Layer 2</pin> input of <node>Group</node>. </p><p> Add a <node>Translate (Transform Vector)</node> and attach the output to <node>Sphere</node>'s <pin>Transform</pin> input. </p><p> Create a <node>RandomSpread</node> and attach its <pin>Output</pin> to the <node>Translate</node>'s <pin>XYZ</pin> input. </p><p> Add an <node>IOBox</node> to <node>RandomSpread</node>'s <pin>Spread Count</pin> input. </p><p> Give that <node>IOBox</node> a value of <b>120</b>. This means you have 40 3D vectors, and therefore 40 spheres. </p><p> To make them look less blocky. Increase the <pin>Resolution X</pin> and <pin>Resolution Y</pin> pins on the <node>Sphere</node> node. Be careful not to go too high, especially on older graphics cards!</p>
+<h2>3 - More</h2>
+<p> Now try to give the spheres some colour, and make them move.</p>
+</body>
+</html>