Skip to content

Commit

Permalink
moved MakeDocumentation out
Browse files Browse the repository at this point in the history
  • Loading branch information
@elliotwoods
elliotwoods committed Oct 5, 2011
1 parent 53e1640 commit 0187e68
Show file tree
Hide file tree
Showing 2 changed files with 9 additions and 10 deletions.
18 changes: 9 additions & 9 deletions 0. Basic principles.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,27 +18,27 @@
document.createElement('hold');
document.createElement('release');
</script>
<link rel="stylesheet" type="text/css" href="MakeDocumentation/style.css" />
<link rel="stylesheet" type="text/css" href="VVVV.Tools.MakeDocumentation/style.css" />
</head>
<body>
<img src="./0. Basic principles.png" />
<img src="C:\jobs\kimchi and chips\workshops\VVVV.Tutorials.Fundamentals-Mapping\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> 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>
<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> <click2/> <lmb /> 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> <click /><rmb /> on the text box at the top of the NodeBrowser, to browse for nodes by category. </p><p></p>
<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>
<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 <hold/><rmb/> </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 <release/><rmb/> 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 <click/><rmb/>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="../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>
<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 <click/><mmb/>. If you dont have a middle mouse button, then use <key>Shift</key>+<click/><rmb/>. </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="../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>
<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 <click2/><lmb/> 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="../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>
<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> (on the top of a node) and an <pin>output</pin> (the bottom of another node). 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 <click/><lmb/> 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 <release/><lmb/>, 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 <click/><lmb/> 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="../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>
<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 <click/><lmb/> </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 <click/><lmb/>, or you can create them more quickly by starting to create the link from the <pin>output</pin> pin using the right mouse button <click/><rmb/>. Now every time you <click/><lmb/> 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 <click/><lmb/> without reselecting the output. Right click <click/><rmb/> 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 <click/><rmb/> 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="../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>
</body>
</html>
1 change: 0 additions & 1 deletion MakeDocumentation
Submodule MakeDocumentation deleted from 47e0cc

0 comments on commit 0187e68

Please sign in to comment.