Skip to content
Browse files

Up to Spreads 2

  • Loading branch information...
1 parent 1722617 commit a286062c5aff13d6e360c463f0988cb2519d1fad @elliotwoods committed Oct 6, 2011
View
24 0. Basic principles.v4p
@@ -1,6 +1,6 @@
<!DOCTYPE PATCH SYSTEM "http://vvvv.org/versions/vvvv45beta26.dtd" >
- <PATCH nodename="C:\kimchiandchips\Workshops\VVVV-basics,mapping\0. Basic principles.v4p" filename="C:\kimchiandchips\Workshops\VVVV-basics,mapping\template.v4p" locked="0" systemname="template">
- <BOUNDS height="13530" left="-9240" top="1005" type="Window" width="8370">
+ <PATCH nodename="C:\kimchiandchips\Workshops\VVVV.Tutorials.Fundamentals\0. Basic principles.v4p" filename="C:\kimchiandchips\Workshops\VVVV-basics,mapping\template.v4p" locked="0" systemname="template">
+ <BOUNDS height="13530" left="12480" top="765" 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">
@@ -384,4 +384,24 @@
<PIN encoded="0" pinname="Descriptive Name" slicecount="1" values="||">
</PIN>
</NODE>
+ <NODE componentmode="InABox" id="38" nodename="IOBox (String)" systemname="IOBox (String)">
+ <BOUNDS height="270" left="5625" top="10980" type="Node" width="2070">
+ </BOUNDS>
+ <BOUNDS height="345" left="5625" top="10980" type="Box" width="2535">
+ </BOUNDS>
+ <PIN encoded="0" pinname="Input String" slicecount="1" visible="0" values="|[9 - Help and tutorials]&cr;&lf;There are some great tutorials to help you out if you&apos;re stuck / get curious:&cr;&lf;&lt;ul&gt;&cr;&lf;&lt;li&gt;If you want help about a node, select it with &lt;click/&gt;&lt;lmb/&gt; and press &lt;key&gt;F1&lt;/key&gt;&lt;/li&gt;&cr;&lf;&lt;li&gt;If you want to see examples of what you can do with VVVV, check the &lt;b&gt;girlpower&lt;/b&gt; folder within the VVVV directory for sample patches&lt;/li&gt;&cr;&lf;&lt;li&gt;Make sure to make a user on the &lt;b&gt;www.vvvv.org&lt;/b&gt; website, and post your queries in the forum&lt;/li&gt;&cr;&lf;&lt;li&gt;Check out West&apos;s VVVV tutorial videos on YouTube&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>
</PATCH>
View
40 2. IOBox 2.html
@@ -0,0 +1,40 @@
+<?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\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>
+<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>
+<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>
+<p> A <concept>String</concept> is another datatype within VVVV. It allows you to deal with text. </p><p> VVVV works with UTF-8 encoded strings (international text) as well as ANSI strings (simple latin english text) + multi-line text. </p><p> Strings can also be used for dealing with URLs, Filenames, Directory names and other text-based assets. In these cases VVVV has some helpful ways of dealing with strings to make life more lovely.</p>
+<h2>6 - Enum</h2>
+<p> An <concept>Enum</concept> is a perculiar datatype in VVVV. It is in general the only data type to learn something from downstream. Almost all other types only send data downstream, and do not feed back any data upstream (this is quite fundamental to how VVVV works). </p><p> An enum is an enumeration of options. The node which an enum is connected to will tell it which options are available. An example of a node with an enum input is <node>Fill (EX9.Renderstate)</node>. </p>
+</body>
+</html>
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
577 2. IOBox 2.v4p
@@ -0,0 +1,577 @@
+<!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">
+ </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="|2. IOBox #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="12705" type="Node" width="2070">
+ </BOUNDS>
+ <BOUNDS height="750" left="105" top="12705" 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="Going further with IOBox&apos;s, different data types" tags="IOBox, Bang, Toggle, Spreads, String, Color">
+ </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="2565" top="3960" type="Node" width="2070">
+ </BOUNDS>
+ <BOUNDS height="345" left="2565" top="3960" type="Box" width="1560">
+ </BOUNDS>
+ <PIN encoded="0" pinname="Input String" slicecount="1" visible="0" values="|[0 - IOBox II]&cr;&lf;The &lt;node&gt;IOBox (Value Advanced)&lt;/node&gt; supports many different ways of dealing with values.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;Try interacting with these IOBox&apos;s. Remember to interact you use the &lt;click/&gt;&lt;rmb/&gt;right mouse button.|">
+ </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="13" nodename="IOBox (Value Advanced)" systemname="IOBox (Value Advanced)">
+ <BOUNDS height="100" left="600" top="4725" type="Node" width="100">
+ </BOUNDS>
+ <BOUNDS height="240" left="600" top="4725" type="Box" width="795">
+ </BOUNDS>
+ <PIN pinname="Y Output Value" visible="1">
+ </PIN>
+ </NODE>
+ <NODE componentmode="InABox" id="14" nodename="IOBox (Value Advanced)" systemname="IOBox (Value Advanced)">
+ <BOUNDS height="100" left="600" top="5835" type="Node" width="100">
+ </BOUNDS>
+ <BOUNDS height="240" left="600" top="5835" type="Box" width="795">
+ </BOUNDS>
+ <PIN pinname="Y Input Value" visible="1">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="14" dstpinname="Y Input Value" srcnodeid="13" srcpinname="Y Output Value">
+ </LINK>
+ <NODE componentmode="InABox" id="15" nodename="IOBox (Value Advanced)" systemname="IOBox (Value Advanced)">
+ <BOUNDS height="100" left="3915" top="4710" type="Node" width="100">
+ </BOUNDS>
+ <BOUNDS height="480" left="3915" top="4710" type="Box" width="480">
+ </BOUNDS>
+ <PIN pinname="Value Type" slicecount="1" values="Boolean">
+ </PIN>
+ <PIN pinname="Behavior" slicecount="1" values="Bang">
+ </PIN>
+ <PIN pinname="Y Output Value" visible="1">
+ </PIN>
+ </NODE>
+ <NODE componentmode="InABox" id="16" nodename="IOBox (Value Advanced)" systemname="IOBox (Value Advanced)">
+ <BOUNDS height="100" left="3900" top="5820" type="Node" width="100">
+ </BOUNDS>
+ <BOUNDS height="240" left="3900" top="5820" type="Box" width="795">
+ </BOUNDS>
+ <PIN pinname="Y Input Value" visible="1">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="16" dstpinname="Y Input Value" srcnodeid="15" srcpinname="Y Output Value">
+ </LINK>
+ <NODE componentmode="InABox" id="17" nodename="IOBox (Value Advanced)" systemname="IOBox (Value Advanced)">
+ <BOUNDS height="100" left="2115" top="4710" type="Node" width="100">
+ </BOUNDS>
+ <BOUNDS height="480" left="2115" top="4710" type="Box" width="480">
+ </BOUNDS>
+ <PIN pinname="Value Type" slicecount="1" values="Boolean">
+ </PIN>
+ <PIN pinname="Behavior" slicecount="1" values="Toggle">
+ </PIN>
+ <PIN pinname="Y Output Value" visible="1">
+ </PIN>
+ <PIN pinname="X Input Value" slicecount="1" values="0">
+ </PIN>
+ <PIN pinname="Y Input Value" slicecount="1" values="0">
+ </PIN>
+ </NODE>
+ <NODE componentmode="InABox" id="18" nodename="IOBox (Value Advanced)" systemname="IOBox (Value Advanced)">
+ <BOUNDS height="100" left="2115" top="5835" type="Node" width="100">
+ </BOUNDS>
+ <BOUNDS height="240" left="2115" top="5835" type="Box" width="795">
+ </BOUNDS>
+ <PIN pinname="Y Input Value" visible="1">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="18" dstpinname="Y Input Value" srcnodeid="17" srcpinname="Y Output Value">
+ </LINK>
+ <NODE componentmode="InABox" id="19" nodename="IOBox (String)" systemname="IOBox (String)">
+ <BOUNDS height="270" left="600" top="4440" type="Node" width="510">
+ </BOUNDS>
+ <BOUNDS height="270" left="600" top="4440" type="Box" width="510">
+ </BOUNDS>
+ <PIN encoded="0" pinname="Input String" slicecount="1" visible="0" values="value">
+ </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 componentmode="InABox" id="20" nodename="IOBox (String)" systemname="IOBox (String)">
+ <BOUNDS height="270" left="3915" top="4425" type="Node" width="495">
+ </BOUNDS>
+ <BOUNDS height="270" left="3915" top="4425" type="Box" width="495">
+ </BOUNDS>
+ <PIN encoded="0" pinname="Input String" slicecount="1" visible="0" values="bang">
+ </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 componentmode="InABox" id="21" nodename="IOBox (String)" systemname="IOBox (String)">
+ <BOUNDS height="270" left="2100" top="4440" type="Node" width="600">
+ </BOUNDS>
+ <BOUNDS height="270" left="2100" top="4440" type="Box" width="600">
+ </BOUNDS>
+ <PIN encoded="0" pinname="Input String" slicecount="1" visible="0" values="toggle">
+ </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 componentmode="InABox" id="22" nodename="IOBox (Value Advanced)" systemname="IOBox (Value Advanced)">
+ <BOUNDS height="100" left="5370" top="4695" type="Node" width="100">
+ </BOUNDS>
+ <BOUNDS height="960" left="5370" top="4695" type="Box" width="795">
+ </BOUNDS>
+ <PIN pinname="Rows" slicecount="1" values="4">
+ </PIN>
+ <PIN pinname="Y Input Value" slicecount="4" values="0,0,0,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>
+ </NODE>
+ <NODE componentmode="InABox" id="23" nodename="IOBox (Value Advanced)" systemname="IOBox (Value Advanced)">
+ <BOUNDS height="100" left="5370" top="5835" type="Node" width="100">
+ </BOUNDS>
+ <BOUNDS height="240" left="5370" top="5835" type="Box" width="795">
+ </BOUNDS>
+ <PIN pinname="Y Input Value" visible="1">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="23" dstpinname="Y Input Value" srcnodeid="22" srcpinname="Y Output Value">
+ </LINK>
+ <NODE componentmode="InABox" id="24" nodename="IOBox (String)" systemname="IOBox (String)">
+ <BOUNDS height="270" left="5400" top="4440" type="Node" width="600">
+ </BOUNDS>
+ <BOUNDS height="270" left="5400" top="4440" type="Box" width="600">
+ </BOUNDS>
+ <PIN encoded="0" pinname="Input String" slicecount="1" visible="0" values="vector">
+ </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 componentmode="InABox" id="25" nodename="IOBox (String)" systemname="IOBox (String)">
+ <BOUNDS height="270" left="3735" top="6300" type="Node" width="2070">
+ </BOUNDS>
+ <BOUNDS height="375" left="3735" top="6300" type="Box" width="1245">
+ </BOUNDS>
+ <PIN encoded="0" pinname="Input String" slicecount="1" visible="0" values="|[2 - Bang]&cr;&lf;A &lt;concept&gt;Bang&lt;/concept&gt; is another very simple message that can be sent around the patch. It generally tells something downstream to &apos;do something&apos;, like &apos;reset&apos; or &apos;start&apos;.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;The message only exists for an instance, then disappears. It&apos;s like poking someone on the shoulder. A bang is &apos;instantaneous&apos;.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;If you&apos;re familiar with bangs from Max/MSP, then you&apos;re likely &lt;b&gt;NOT&lt;/b&gt; going to be very familiar with bangs in VVVV. Watch out! They work very differently!&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;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.&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="26" nodename="IOBox (String)" systemname="IOBox (String)">
+ <BOUNDS height="270" left="2100" top="6315" type="Node" width="2070">
+ </BOUNDS>
+ <BOUNDS height="375" left="2100" top="6315" type="Box" width="1410">
+ </BOUNDS>
+ <PIN encoded="0" pinname="Input String" slicecount="1" visible="0" values="|[1 - Toggle]&cr;&lf;A &lt;concept&gt;Toggle&lt;/concept&gt; is a very simple message that can be sent around the patch. It generally switches something downstream like &apos;enable this&apos;.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;A toggle is simply a Value of either 0 or 1.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf; 0 denotes low or &apos;off&apos;, 1 denotes high or &apos;on&apos;.&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="Hidden" id="27" nodename="Stopwatch (Animation)" systemname="Stopwatch (Animation)">
+ <BOUNDS height="270" left="2610" top="8700" type="Node" width="1485">
+ </BOUNDS>
+ <PIN pinname="Run" visible="1">
+ </PIN>
+ <PIN pinname="Reset" visible="1">
+ </PIN>
+ <PIN pinname="Output" visible="1">
+ </PIN>
+ </NODE>
+ <NODE componentmode="InABox" id="29" nodename="IOBox (Value Advanced)" systemname="IOBox (Value Advanced)">
+ <BOUNDS height="100" left="2625" top="7830" type="Node" width="100">
+ </BOUNDS>
+ <BOUNDS height="480" left="2625" top="7830" type="Box" width="480">
+ </BOUNDS>
+ <PIN pinname="Value Type" slicecount="1" values="Boolean">
+ </PIN>
+ <PIN pinname="Behavior" slicecount="1" values="Toggle">
+ </PIN>
+ <PIN pinname="Y Output Value" visible="1">
+ </PIN>
+ <PIN pinname="X Input Value" slicecount="1" values="0">
+ </PIN>
+ <PIN pinname="Y Input Value" slicecount="1" values="0">
+ </PIN>
+ <PIN encoded="0" pinname="Descriptive Name" slicecount="1" values="Run">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="27" dstpinname="Run" srcnodeid="29" srcpinname="Y Output Value">
+ </LINK>
+ <NODE componentmode="InABox" id="30" nodename="IOBox (Value Advanced)" systemname="IOBox (Value Advanced)">
+ <BOUNDS height="100" left="4035" top="7830" type="Node" width="100">
+ </BOUNDS>
+ <BOUNDS height="480" left="4035" top="7830" type="Box" width="480">
+ </BOUNDS>
+ <PIN pinname="Value Type" slicecount="1" values="Boolean">
+ </PIN>
+ <PIN pinname="Behavior" slicecount="1" values="Bang">
+ </PIN>
+ <PIN pinname="Y Output Value" visible="1">
+ </PIN>
+ <PIN pinname="X Input Value" slicecount="1" values="0">
+ </PIN>
+ <PIN pinname="Y Input Value" slicecount="1" values="0">
+ </PIN>
+ <PIN encoded="0" pinname="Descriptive Name" slicecount="1" values="Reset">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="27" dstpinname="Reset" srcnodeid="30" srcpinname="Y Output Value">
+ </LINK>
+ <NODE componentmode="InABox" id="31" nodename="IOBox (Value Advanced)" systemname="IOBox (Value Advanced)">
+ <BOUNDS height="100" left="2610" top="9540" type="Node" width="100">
+ </BOUNDS>
+ <BOUNDS height="240" left="2610" top="9540" 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="31" dstpinname="Y Input Value" srcnodeid="27" srcpinname="Output">
+ </LINK>
+ <NODE componentmode="InABox" id="32" nodename="IOBox (String)" systemname="IOBox (String)">
+ <BOUNDS height="270" left="1605" top="7470" type="Node" width="2070">
+ </BOUNDS>
+ <BOUNDS height="345" left="1605" top="7470" type="Box" width="3660">
+ </BOUNDS>
+ <PIN encoded="0" pinname="Input String" slicecount="1" visible="0" values="|[3 - Bangs and Toggles example]&cr;&lf;Let&apos;s try out &lt;concept&gt;Bang&lt;/concept&gt;s and &lt;concept&gt;Toggle&lt;/concept&gt;s!&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;Let&apos;s create:&cr;&lf;&lt;ul&gt;&cr;&lf;&lt;li&gt;1 IOBox Toggle + 1 IOBox Bang*&lt;/li&gt;&cr;&lf;&lt;li&gt;1 &lt;node&gt;Stopwatch (Animation)&lt;/node&gt;&lt;/li&gt;&cr;&lf;&lt;li&gt;1 IOBox value &lt;/li&gt;&cr;&lf;&lt;/ul&gt;&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;* To create a toggle IOBox, double right click &lt;click2/&gt;&lt;rmb/&gt; and select &apos;Toggle&apos; from the menu. Do the same for bang, but this time select &apos;Bang&apos;.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;For the bottom IOBox, let&apos;s use another shortcut. First &lt;click/&gt;&lt;lmb/&gt; on the &lt;pin&gt;Output&lt;/pin&gt; pin of &lt;node&gt;Stopwatch&lt;/node&gt;. Move your mouse away and then click the middle mouse button &lt;click/&gt;&lt;mmb/&gt;, this should automatically create a new connected &lt;node&gt;IOBox&lt;/node&gt; for you of the correct type for what it&apos;s connected to. &lt;click/&gt;&lt;mmb/&gt; on the &lt;node&gt;IOBox&lt;/node&gt; again to give it a label.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;Now connect everything up as shown in the diagram.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;We can also give names to IOBox&apos;s very easily. Since they are now connected to the Stopwatch node&apos;s &lt;pin&gt;Run&lt;/pin&gt;, &lt;pin&gt;Reset&lt;/pin&gt; and &lt;pin&gt;Output&lt;/pin&gt; pins respectively, we can copy these names into the IOBox&apos;s. To do this, we middle click &lt;click/&gt;&lt;mmb/&gt; on the 3 IOBox&apos;s one by one.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;Now try to interact with the &apos;Run&apos; and &apos;Reset&apos; boxes that you have created using right click &lt;click/&gt;&lt;rmb/&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="34" nodename="IOBox (Color)" systemname="IOBox (Color)">
+ <BOUNDS height="100" left="330" top="10845" type="Node" width="100">
+ </BOUNDS>
+ <BOUNDS height="480" left="330" top="10845" type="Box" width="2250">
+ </BOUNDS>
+ <PIN pinname="Color Output" visible="1">
+ </PIN>
+ </NODE>
+ <NODE componentmode="InABox" id="35" nodename="IOBox (String)" systemname="IOBox (String)">
+ <BOUNDS height="100" left="2835" top="10845" type="Node" width="100">
+ </BOUNDS>
+ <BOUNDS height="450" left="2835" top="10845" type="Box" width="2355">
+ </BOUNDS>
+ <PIN encoded="0" pinname="Input String" slicecount="1" values="text">
+ </PIN>
+ <PIN pinname="Size" slicecount="1" values="16">
+ </PIN>
+ </NODE>
+ <NODE componentmode="InABox" id="36" nodename="IOBox (Enumerations)" systemname="IOBox (Enumerations)">
+ <BOUNDS height="100" left="6375" top="10860" type="Node" width="100">
+ </BOUNDS>
+ <BOUNDS height="240" left="6375" top="10860" type="Box" width="1200">
+ </BOUNDS>
+ <PIN pinname="Output Enum" visible="1">
+ </PIN>
+ </NODE>
+ <NODE componentmode="InABox" id="39" nodename="IOBox (String)" systemname="IOBox (String)">
+ <BOUNDS height="270" left="6375" top="10425" type="Node" width="2070">
+ </BOUNDS>
+ <BOUNDS height="330" left="6375" top="10425" type="Box" width="1245">
+ </BOUNDS>
+ <PIN encoded="0" pinname="Input String" slicecount="1" visible="0" values="|[6 - Enum]&cr;&lf;An &lt;concept&gt;Enum&lt;/concept&gt; is a perculiar datatype in VVVV. It is in general the only data type to learn something from downstream. Almost all other types only send data downstream, and do not feed back any data upstream (this is quite fundamental to how VVVV works).&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;An enum is an enumeration of options. The node which an enum is connected to will tell it which options are available. An example of a node with an enum input is &lt;node&gt;Fill (EX9.Renderstate)&lt;/node&gt;.&cr;&lf;&cr;&lf;|">
+ </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="40" nodename="IOBox (String)" systemname="IOBox (String)">
+ <BOUNDS height="270" left="2835" top="10425" type="Node" width="2070">
+ </BOUNDS>
+ <BOUNDS height="330" left="2835" top="10425" type="Box" width="1245">
+ </BOUNDS>
+ <PIN encoded="0" pinname="Input String" slicecount="1" visible="0" values="|[5 - String]&cr;&lf;A &lt;concept&gt;String&lt;/concept&gt; is another datatype within VVVV. It allows you to deal with text.&cr;&lf;&lt;br /&gt;&cr;&lf;VVVV works with UTF-8 encoded strings (international text) as well as ANSI strings (simple latin english text) + multi-line text.&cr;&lf;&lt;br /&gt;&cr;&lf;Strings can also be used for dealing with URLs, Filenames, Directory names and other text-based assets. In these cases VVVV has some helpful ways of dealing with strings to make life more lovely.|">
+ </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="41" nodename="IOBox (String)" systemname="IOBox (String)">
+ <BOUNDS height="270" left="330" top="10425" type="Node" width="2070">
+ </BOUNDS>
+ <BOUNDS height="330" left="330" top="10425" type="Box" width="1245">
+ </BOUNDS>
+ <PIN encoded="0" pinname="Input String" slicecount="1" visible="0" values="|[4 - Color]&cr;&lf;A &lt;concept&gt;Color&lt;/concept&gt; is a datatype within VVVV. It allows you to deal with colour values.&cr;&lf;&lt;br /&gt;&cr;&lf;Colours have obvious graphical uses such as determining the colour of objects that you want to render.&cr;&lf;&lt;br /&gt;&cr;&lf;There are many nodes that allow you deal with colours directly, or convert them to other data types.|">
+ </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="42" nodename="RGB (Color Split)" systemname="RGB (Color Split)">
+ <BOUNDS height="270" left="330" top="11505" type="Node" width="2220">
+ </BOUNDS>
+ <PIN pinname="Input" visible="1">
+ </PIN>
+ <PIN pinname="Red" visible="1">
+ </PIN>
+ <PIN pinname="Green" visible="1">
+ </PIN>
+ <PIN pinname="Blue" visible="1">
+ </PIN>
+ <PIN pinname="Alpha" visible="1">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="42" dstpinname="Input" srcnodeid="34" srcpinname="Color Output">
+ </LINK>
+ <NODE componentmode="InABox" id="43" nodename="IOBox (Value Advanced)" systemname="IOBox (Value Advanced)">
+ <BOUNDS height="100" left="330" top="11925" type="Node" width="100">
+ </BOUNDS>
+ <BOUNDS height="240" left="330" top="11925" type="Box" width="495">
+ </BOUNDS>
+ <PIN pinname="Y Input Value" visible="1">
+ </PIN>
+ <PIN encoded="0" pinname="Descriptive Name" slicecount="1" values="Red">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="43" dstpinname="Y Input Value" srcnodeid="42" srcpinname="Red">
+ </LINK>
+ <NODE componentmode="InABox" id="44" nodename="IOBox (Value Advanced)" systemname="IOBox (Value Advanced)">
+ <BOUNDS height="100" left="1050" top="11925" type="Node" width="100">
+ </BOUNDS>
+ <BOUNDS height="240" left="1050" top="11925" type="Box" width="495">
+ </BOUNDS>
+ <PIN pinname="Y Input Value" visible="1">
+ </PIN>
+ <PIN encoded="0" pinname="Descriptive Name" slicecount="1" values="Green">
+ </PIN>
+ </NODE>
+ <NODE componentmode="InABox" id="45" nodename="IOBox (Value Advanced)" systemname="IOBox (Value Advanced)">
+ <BOUNDS height="100" left="1770" top="11925" type="Node" width="100">
+ </BOUNDS>
+ <BOUNDS height="240" left="1770" top="11925" type="Box" width="495">
+ </BOUNDS>
+ <PIN pinname="Y Input Value" visible="1">
+ </PIN>
+ <PIN encoded="0" pinname="Descriptive Name" slicecount="1" values="Blue">
+ </PIN>
+ </NODE>
+ <NODE componentmode="InABox" id="46" nodename="IOBox (Value Advanced)" systemname="IOBox (Value Advanced)">
+ <BOUNDS height="100" left="2490" top="11925" type="Node" width="100">
+ </BOUNDS>
+ <BOUNDS height="240" left="2490" top="11925" type="Box" width="495">
+ </BOUNDS>
+ <PIN pinname="Y Input Value" visible="1">
+ </PIN>
+ <PIN encoded="0" pinname="Descriptive Name" slicecount="1" values="Alpha">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="44" dstpinname="Y Input Value" srcnodeid="42" srcpinname="Green">
+ </LINK>
+ <LINK dstnodeid="45" dstpinname="Y Input Value" srcnodeid="42" srcpinname="Blue">
+ </LINK>
+ <LINK dstnodeid="46" dstpinname="Y Input Value" srcnodeid="42" srcpinname="Alpha">
+ </LINK>
+ <NODE componentmode="Hidden" id="37" nodename="Fill (EX9.RenderState)" systemname="Fill (EX9.RenderState)">
+ <BOUNDS height="100" left="6030" top="11400" type="Node" width="100">
+ </BOUNDS>
+ <PIN pinname="Draw Mode" visible="1">
+ </PIN>
+ <PIN pinname="Fill Mode" visible="1">
+ </PIN>
+ </NODE>
+ <LINK srcnodeid="36" srcpinname="Output Enum" dstnodeid="37" dstpinname="Fill Mode">
+ </LINK>
+ </PATCH>
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
275 3. IOBox 3.v4p
@@ -0,0 +1,275 @@
+<!DOCTYPE PATCH SYSTEM "http://vvvv.org/versions/vvvv45beta26.dtd" >
+ <PATCH nodename="C:\kimchiandchips\Workshops\VVVV-basics,mapping\3. IOBox #3.v4p" filename="C:\kimchiandchips\Workshops\VVVV-basics,mapping\3. IOBox #3.v4p" locked="0" systemname="3. IOBox #3">
+ <BOUNDS height="12555" left="14490" top="885" 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">
+ </BOUNDS>
+ <BOUNDS height="1095" left="225" top="150" type="Box" width="7665">
+ </BOUNDS>
+ <PIN encoded="0" pinname="Input String" slicecount="1" visible="0" values="|3. IOBox #3|">
+ </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="11205" type="Node" width="2070">
+ </BOUNDS>
+ <BOUNDS height="750" left="105" top="11205" 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="Spreaded IOBoxes, the Inspektor" tags="IOBox, Slider, Inspektor, Help patch">
+ </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="2790" top="3660" type="Node" width="2070">
+ </BOUNDS>
+ <BOUNDS height="360" left="2790" top="3660" type="Box" width="2025">
+ </BOUNDS>
+ <PIN encoded="0" pinname="Input String" slicecount="1" visible="0" values="|[0 -The Inspektor]&cr;&lf;Let&apos;s create a set of sliders.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;Create a new &lt;node&gt;IOBox&lt;/node&gt; with &lt;click2/&gt;&lt;rmb/&gt;.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;There are 2 pins on the IOBox at present:&cr;&lf;&lt;ul&gt;&cr;&lf;&lt;li&gt;&lt;pin&gt;Y Input Value&lt;/pin&gt;&lt;/li&gt;&cr;&lf;&lt;li&gt;&lt;pin&gt;Y Output Value&lt;/pin&gt;&lt;/li&gt;&cr;&lf;&lt;/ul&gt;&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;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 &lt;node&gt;Inspektor&lt;/node&gt;.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;To open the &lt;node&gt;Inspektor&lt;/node&gt;:&cr;&lf;&lt;ol&gt;&cr;&lf;&lt;li&gt;Select the &lt;node&gt;IOBox&lt;/node&gt; with a single &lt;click/&gt;&lt;lmb/&gt; (it should now be highlighted. To deselect an object, &lt;click/&gt;&lt;lmb/&gt; in an empty area of the patch).&lt;/li&gt;&cr;&lf;&lt;li&gt;Press &lt;key&gt;Ctrl&lt;/key&gt;+&lt;key&gt;I&lt;/key&gt;. This should bring up the &lt;node&gt;Inspektor&lt;/node&gt; window.&cr;&lf;&lt;/ol&gt;&cr;&lf;&cr;&lf;The &lt;node&gt;Inspektor&lt;/node&gt; will show you hidden properties about whatever you have selected.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;The pins shown in the &lt;node&gt;Inspektor&lt;/node&gt; are split into 3 areas:&cr;&lf;&lt;ul&gt;&cr;&lf;&lt;li&gt;&lt;b&gt;Config pins&lt;/b&gt; - These pins can only be edited using the Inspektor.&lt;/li&gt;&cr;&lf;&lt;li&gt;&lt;b&gt;Input pins&lt;/b&gt;&lt;/li&gt;&cr;&lf;&lt;li&gt;&lt;b&gt;Output pins&lt;/b&gt;&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 systemname="IOBox (Value Advanced)" nodename="IOBox (Value Advanced)" componentmode="InABox" id="47">
+ <BOUNDS type="Node" left="2055" top="4845" width="100" height="100">
+ </BOUNDS>
+ <BOUNDS type="Box" left="2055" top="4845" width="3420" height="1185">
+ </BOUNDS>
+ <PIN pinname="Columns" slicecount="1" values="4">
+ </PIN>
+ <PIN pinname="Minimum" slicecount="1" values="-10000">
+ </PIN>
+ <PIN pinname="Maximum" slicecount="1" values="10000">
+ </PIN>
+ <PIN pinname="SliceCount Mode" slicecount="1" values="ColsRowsPages">
+ </PIN>
+ <PIN pinname="Y Input Value" slicecount="4" values="0,0,0,0">
+ </PIN>
+ <PIN pinname="X Input Value" slicecount="4" values="0,0,0,0">
+ </PIN>
+ </NODE>
+ <NODE componentmode="InABox" id="48" nodename="IOBox (String)" systemname="IOBox (String)">
+ <BOUNDS height="270" left="1995" top="4350" type="Node" width="2070">
+ </BOUNDS>
+ <BOUNDS height="330" left="1995" top="4350" type="Box" width="3765">
+ </BOUNDS>
+ <PIN encoded="0" pinname="Input String" slicecount="1" visible="0" values="|[1 - Configuring a set of sliders I]&cr;&lf;With the &lt;node&gt;Inspektor&lt;/node&gt; open, let&apos;s change some settings of the &lt;node&gt;IOBox&lt;/node&gt;.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;First let&apos;s make our &lt;node&gt;IOBox&lt;/node&gt; work with 8 values at once. We do this by setting the following configuration properties:&cr;&lf;&cr;&lf;&lt;ul&gt;&cr;&lf;&lt;li&gt;Set &lt;pin&gt;SliceCount Mode&lt;/pin&gt; to &apos;ColsRowsPages&apos; (remember to use &lt;click/&gt;&lt;rmb/&gt; to change variables&lt;/li&gt;&cr;&lf;&lt;li&gt;Set &lt;pin&gt;Columns&lt;/pin&gt; to &apos;4&apos;&lt;/li&gt;&cr;&lf;&lt;/ul&gt;&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;Now let&apos;s resize the &lt;node&gt;IOBox&lt;/node&gt;. 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.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;We should have 4 values shown.|">
+ </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 systemname="IOBox (Value Advanced)" nodename="IOBox (Value Advanced)" componentmode="InABox" id="50">
+ <BOUNDS type="Node" left="2055" top="6945" width="100" height="100">
+ </BOUNDS>
+ <BOUNDS type="Box" left="2055" top="6945" width="3420" height="1185">
+ </BOUNDS>
+ <PIN pinname="Columns" slicecount="1" values="4">
+ </PIN>
+ <PIN pinname="Minimum" slicecount="1" values="-10000">
+ </PIN>
+ <PIN pinname="Maximum" slicecount="1" values="10000">
+ </PIN>
+ <PIN pinname="SliceCount Mode" slicecount="1" values="ColsRowsPages">
+ </PIN>
+ <PIN pinname="Show Grid" slicecount="1" values="1">
+ </PIN>
+ <PIN pinname="Show Value" slicecount="1" values="0">
+ </PIN>
+ <PIN pinname="Show Slider" slicecount="1" values="1">
+ </PIN>
+ <PIN pinname="Show Connections" slicecount="1" values="0">
+ </PIN>
+ <PIN pinname="Slider Behavior" slicecount="1" values="Slider">
+ </PIN>
+ <PIN pinname="Y Output Value" visible="1">
+ </PIN>
+ <PIN pinname="X Input Value" slicecount="4" values="0,0,0,1">
+ </PIN>
+ <PIN pinname="Y Input Value" slicecount="4" values="0,0,0,1">
+ </PIN>
+ </NODE>
+ <NODE componentmode="InABox" id="49" nodename="IOBox (String)" systemname="IOBox (String)">
+ <BOUNDS height="270" left="1965" top="6450" type="Node" width="2070">
+ </BOUNDS>
+ <BOUNDS height="330" left="1965" top="6450" type="Box" width="3765">
+ </BOUNDS>
+ <PIN encoded="0" pinname="Input String" slicecount="1" visible="0" values="|[2 - Configuring a set of sliders II]&cr;&lf;Now let&apos;s change the visual style. &lt;br /&gt;&cr;&lf;&cr;&lf;&lt;ul&gt;&cr;&lf;&lt;li&gt;Turn &lt;b&gt;on&lt;/b&gt; &lt;pin&gt;Show Grid&lt;/pin&gt;&lt;/li&gt;&cr;&lf;&lt;li&gt;Turn &lt;b&gt;off&lt;/b&gt; &lt;pin&gt;Show Value&lt;/pin&gt;&lt;/li&gt;&cr;&lf;&lt;li&gt;Turn &lt;b&gt;on&lt;/b&gt; &lt;pin&gt;Show Slider&lt;/pin&gt;&lt;/li&gt;&cr;&lf;&lt;li&gt;Set &lt;pin&gt;Slider Behaviour&lt;/pin&gt; to &lt;b&gt;Slider&lt;/b&gt;&lt;/li&cr;&lf;&lt;/ul&gt;&cr;&lf;&cr;&lf;Let&apos;s visualise the output of this. &lt;click2/&gt;&lt;rmb/&gt; and select &lt;b&gt;4D Vector&lt;/b&gt;. Put this beneath your sliders and connect the &lt;pin&gt;Y Value Output&lt;/pin&gt; of your sliders to the &lt;pin&gt;Y Value Input&lt;/pin&gt; of your 4D Vector &lt;node&gt;IOBox&lt;/node&gt;.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;Now try interacting with your sliders by dragging the right mouse button &lt;hold/&gt;&lt;rmb/&gt; up and down on each slider.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;We find that the sliders can move between -1000 and 1000. We can change this range using the &lt;pin&gt;Minimum&lt;/pin&gt; and &lt;pin&gt;Maximum&lt;/pin&gt; Values in the &lt;node&gt;Inspektor&lt;/node&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 systemname="IOBox (Value Advanced)" nodename="IOBox (Value Advanced)" componentmode="InABox" id="52">
+ <BOUNDS type="Node" left="2040" top="8445" width="100" height="100">
+ </BOUNDS>
+ <BOUNDS type="Box" left="2040" top="8445" width="795" height="960">
+ </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 pinname="Default" slicecount="1" values="|0, 0, 0, 1|" encoded="0">
+ </PIN>
+ </NODE>
+ <LINK srcnodeid="50" srcpinname="Y Output Value" dstnodeid="52" dstpinname="Y Input Value">
+ </LINK>
+ <NODE componentmode="InABox" id="61" nodename="IOBox (String)" systemname="IOBox (String)">
+ <BOUNDS height="270" left="2610" top="10050" type="Node" width="2070">
+ </BOUNDS>
+ <BOUNDS height="345" left="2610" top="10050" type="Box" width="2085">
+ </BOUNDS>
+ <PIN encoded="0" pinname="Input String" slicecount="1" visible="0" values="|[3 - Help patches]&cr;&lf;VVVV has a built in help mechanism for most common nodes. To open a &lt;concept&gt;Help Patch&lt;/concept&gt;, select a node &lt;click/&gt;&lt;lmb/&gt;(e.g. an &lt;node&gt;IOBox&lt;/node&gt;) and press &lt;key&gt;F1&lt;/key&gt;.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;The &lt;node&gt;IOBox&lt;/node&gt; help patch displays a thorough set of information about how that node works.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;Let&apos;s try another one. First create a &lt;node&gt;Homography (Transform 2d)&lt;/node&gt; node. Then select it &lt;click/&gt;&lt;lmb/&gt; and press &lt;key&gt;F1&lt;/key&gt;.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;Try interacting with the top right &lt;node&gt;IOBox&lt;/node&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 systemname="Homography (Transform 2d)" nodename="Homography (Transform 2d)" componentmode="Hidden" id="62">
+ <BOUNDS type="Node" left="3120" top="10530" width="100" height="100">
+ </BOUNDS>
+ </NODE>
+ </PATCH>
View
38 6. Spreads.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\6. Spreads.png" />
+<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>
+<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>
+<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>
+<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>
+<p> 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 <node>Renderer</node>. </p><p> To change the background colour of the <node>Renderer</node>, create a <node>RetroColors (Color)</node> and connect its <pin>Output</pin> to the <pin>Background Color</pin> input pin on the <node>Renderer</node>. Select different colours by changing the <pin>Index</pin> input of <node>RetroColors</node> and/or changing to a different games console colourset using the <pin>Mode</pin> pin. </p><p> On the right hand input of <node>Blend</node> we see < That was fun, but anyway, we can definitely see that the background of the quads are black. Let's change the <concept>Blend Mode</concept> of the quads, (Photoshop users will be familiar with this idea). </p><p> Create a <node>Blend (EX9.RenderState)</node> above <node>Quad</node> and attach the output of <node>Blend</node> to the <pin>Render State</pin> input of <node>Quad</node>. Set the <pin>Draw Mode</pin> of <node>Blend</node> to <b>Add</b>. </p><p> Now when the quads are drawn, their colour is 'added' to whatever is behind them, i.e. since black is <b>0</b> and <b>a + 0 = a</b>, black has no effect when the <pin>Draw Mode</pin> is set to <b>Add</b>.</p>
+</body>
+</html>
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
496 6. Spreads.v4p
@@ -1,5 +1,5 @@
<!DOCTYPE PATCH SYSTEM "http://vvvv.org/versions/vvvv45beta26.dtd" >
- <PATCH nodename="C:\kimchiandchips\Workshops\VVVV-basics,mapping\6. Spreads.v4p" filename="C:\kimchiandchips\Workshops\VVVV-basics,mapping\6. Spreads.v4p" locked="0" systemname="6. Spreads">
+ <PATCH nodename="C:\kimchiandchips\Workshops\VVVV.Tutorials.Fundamentals\6. Spreads.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)">
@@ -68,7 +68,7 @@
<PIN encoded="0" pinname="Descriptive Name" slicecount="1" values="Description">
</PIN>
</NODE>
- <INFO author="Elliot Woods" description="Introduction to Spreads, creating spreads, inspecting spreads. How they act" tags="Spreads, Linear Spread, Random Spread">
+ <INFO author="Elliot Woods" description="Introduction to Spreads, creating spreads, inspecting spreads. How they act" tags="Spreads, Linear Spread, I, FileTexture, Aspect Ratio">
</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">
@@ -129,7 +129,7 @@
</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! A spread is a set of data. An individual item within that set is called a &lt;concept&gt;Slice&lt;/concept&gt;, the number of slices is called the &lt;concept&gt;Spread Count&lt;/concept&gt; or the &lt;concept&gt;Slice Count&lt;/concept&gt;. Each slice has a position within the spread called a &lt;concept&gt;Slice Index&lt;/concept&gt;.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;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;.&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;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;&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;&lt;/li&gt;&cr;&lf;&lt;/ul&gt;|">
+ <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>
@@ -144,34 +144,38 @@
<PIN encoded="0" pinname="Descriptive Name" slicecount="1" values="||">
</PIN>
</NODE>
- <NODE systemname="Renderer (EX9)" nodename="Renderer (EX9)" componentmode="InABox" id="97">
- <BOUNDS type="Node" left="8685" top="2085" width="100" height="100">
+ <NODE componentmode="InABox" id="97" nodename="Renderer (EX9)" systemname="Renderer (EX9)">
+ <BOUNDS height="100" left="8790" top="2355" type="Node" width="100">
</BOUNDS>
- <BOUNDS type="Box" left="8685" top="2085" width="7695" height="3660">
+ <BOUNDS height="3660" left="8790" top="2355" type="Box" width="7695">
</BOUNDS>
- <BOUNDS type="Window" left="15765" top="6165" width="6240" height="5010">
+ <BOUNDS height="5010" left="15765" top="6165" type="Window" width="6240">
</BOUNDS>
<PIN pinname="Layers" visible="1">
</PIN>
<PIN pinname="Actual Backbuffer Width" visible="1">
</PIN>
<PIN pinname="Actual Backbuffer Height" visible="1">
</PIN>
+ <PIN pinname="Background Color" visible="1">
+ </PIN>
</NODE>
- <NODE systemname="Quad (DX9)" nodename="Quad (DX9)" componentmode="Hidden" id="98">
- <BOUNDS type="Node" left="8685" top="1575" width="1245" height="270">
+ <NODE componentmode="Hidden" id="98" nodename="Quad (DX9)" systemname="Quad (DX9)">
+ <BOUNDS height="270" left="8790" top="1845" type="Node" width="1245">
</BOUNDS>
<PIN pinname="Layer" visible="1">
</PIN>
<PIN pinname="Transform" visible="1">
</PIN>
<PIN pinname="Texture" visible="1">
</PIN>
+ <PIN pinname="Render State" visible="1">
+ </PIN>
</NODE>
- <LINK srcnodeid="98" srcpinname="Layer" dstnodeid="97" dstpinname="Layers">
+ <LINK dstnodeid="97" dstpinname="Layers" srcnodeid="98" srcpinname="Layer">
</LINK>
- <NODE systemname="UniformScale (Transform)" nodename="UniformScale (Transform)" componentmode="Hidden" id="99">
- <BOUNDS type="Node" left="8835" top="1080" width="100" height="100">
+ <NODE componentmode="Hidden" id="99" nodename="UniformScale (Transform)" systemname="UniformScale (Transform)">
+ <BOUNDS height="100" left="8955" top="885" type="Node" width="100">
</BOUNDS>
<PIN pinname="Transform Out" visible="1">
</PIN>
@@ -180,36 +184,34 @@
<PIN pinname="Transform In" visible="1">
</PIN>
</NODE>
- <LINK srcnodeid="99" srcpinname="Transform Out" dstnodeid="98" dstpinname="Transform">
- </LINK>
- <NODE systemname="FileTexture (EX9.Texture)" nodename="FileTexture (EX9.Texture)" componentmode="Hidden" id="100">
- <BOUNDS type="Node" left="10125" top="1080" width="100" height="100">
+ <NODE componentmode="Hidden" id="100" nodename="FileTexture (EX9.Texture)" systemname="FileTexture (EX9.Texture)">
+ <BOUNDS height="100" left="10230" top="1350" type="Node" width="100">
</BOUNDS>
<PIN pinname="Texture Out" visible="1">
</PIN>
- <PIN pinname="Filename" slicecount="1" values="|..\..\..\vvvv\vvvv_45beta26\girlpower\images\ring thin.bmp|" encoded="0">
+ <PIN encoded="0" pinname="Filename" slicecount="1" values="|..\..\..\vvvv\vvvv_45beta26\girlpower\images\ring thin.bmp|">
</PIN>
</NODE>
- <LINK srcnodeid="100" srcpinname="Texture Out" dstnodeid="98" dstpinname="Texture" linkstyle="VHV">
- <LINKPOINT x="10125" y="1448">
+ <LINK dstnodeid="98" dstpinname="Texture" linkstyle="VHV" srcnodeid="100" srcpinname="Texture Out">
+ <LINKPOINT x="10230" y="1718">
</LINKPOINT>
- <LINKPOINT x="9090" y="1448">
+ <LINKPOINT x="9195" y="1718">
</LINKPOINT>
</LINK>
- <NODE systemname="Scale (Transform)" nodename="Scale (Transform)" componentmode="Hidden" id="101">
- <BOUNDS type="Node" left="8850" top="675" width="100" height="100">
+ <NODE componentmode="Hidden" id="101" nodename="Scale (Transform)" systemname="Scale (Transform)">
+ <BOUNDS height="100" left="8955" top="1350" type="Node" width="100">
</BOUNDS>
<PIN pinname="Transform Out" visible="1">
</PIN>
<PIN pinname="X" slicecount="1" values="1">
</PIN>
<PIN pinname="Y" visible="1">
</PIN>
+ <PIN pinname="Transform In" visible="1">
+ </PIN>
</NODE>
- <LINK srcnodeid="101" srcpinname="Transform Out" dstnodeid="99" dstpinname="Transform In">
- </LINK>
- <NODE systemname="Divide (Value)" nodename="Divide (Value)" componentmode="Hidden" id="102">
- <BOUNDS type="Node" left="14400" top="6075" width="1035" height="270">
+ <NODE componentmode="Hidden" id="102" nodename="Divide (Value)" systemname="Divide (Value)">
+ <BOUNDS height="270" left="14505" top="6345" type="Node" width="1035">
</BOUNDS>
<PIN pinname="Input" visible="1">
</PIN>
@@ -218,18 +220,16 @@
<PIN pinname="Output" visible="1">
</PIN>
</NODE>
- <LINK srcnodeid="97" srcpinname="Actual Backbuffer Width" dstnodeid="102" dstpinname="Input">
+ <LINK dstnodeid="102" dstpinname="Input" srcnodeid="97" srcpinname="Actual Backbuffer Width">
</LINK>
- <LINK srcnodeid="97" srcpinname="Actual Backbuffer Height" dstnodeid="102" dstpinname="Input 2">
+ <LINK dstnodeid="102" dstpinname="Input 2" srcnodeid="97" srcpinname="Actual Backbuffer Height">
</LINK>
- <LINK srcnodeid="102" srcpinname="Output" dstnodeid="101" dstpinname="Y" hiddenwhenlocked="1">
- </LINK>
- <NODE nodename="IOBox (String)" componentmode="InABox" id="103" systemname="IOBox (String)">
- <BOUNDS type="Node" left="8145" top="3465" width="330" height="270">
+ <NODE componentmode="InABox" id="103" nodename="IOBox (String)" systemname="IOBox (String)">
+ <BOUNDS height="270" left="8145" top="3465" type="Node" width="330">
</BOUNDS>
- <BOUNDS type="Box" left="8145" top="3465" width="345" height="7515">
+ <BOUNDS height="7515" left="8145" top="3465" type="Box" width="345">
</BOUNDS>
- <PIN pinname="Input String" visible="0" slicecount="1" values="||" encoded="0">
+ <PIN encoded="0" pinname="Input String" slicecount="1" visible="0" values="||">
</PIN>
<PIN pinname="Output String" visible="0">
</PIN>
@@ -239,11 +239,11 @@
</PIN>
</NODE>
<NODE componentmode="InABox" id="104" nodename="IOBox (String)" systemname="IOBox (String)">
- <BOUNDS height="270" left="3330" top="4575" type="Node" width="2070">
+ <BOUNDS height="270" left="675" top="4545" type="Node" width="2070">
</BOUNDS>
- <BOUNDS height="330" left="3330" top="4575" type="Box" width="1470">
+ <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;. 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;.&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 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>
@@ -258,8 +258,8 @@
<PIN encoded="0" pinname="Descriptive Name" slicecount="1" values="||">
</PIN>
</NODE>
- <NODE systemname="GetSlice (Spreads)" nodename="GetSlice (Spreads)" componentmode="Hidden" id="105">
- <BOUNDS type="Node" left="3570" top="7815" width="2475" height="270">
+ <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>
@@ -268,18 +268,18 @@
<PIN pinname="Index">
</PIN>
</NODE>
- <NODE systemname="IOBox (Value Advanced)" nodename="IOBox (Value Advanced)" componentmode="InABox" id="106">
- <BOUNDS type="Node" left="3570" top="5490" width="100" height="100">
+ <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 type="Box" left="3570" top="5490" width="1635" height="1920">
+ <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 pinname="Default" slicecount="1" values="|0, 0, 0, 1|" encoded="0">
+ <PIN encoded="0" pinname="Default" slicecount="1" values="|0, 0, 0, 1|">
</PIN>
<PIN pinname="Y Output Value" visible="1">
</PIN>
@@ -292,12 +292,12 @@
<PIN pinname="Show SliceIndex" slicecount="1" values="1">
</PIN>
</NODE>
- <LINK srcnodeid="106" srcpinname="Y Output Value" dstnodeid="105" dstpinname="Input">
+ <LINK dstnodeid="105" dstpinname="Input" srcnodeid="106" srcpinname="Y Output Value">
</LINK>
- <NODE systemname="IOBox (Value Advanced)" nodename="IOBox (Value Advanced)" componentmode="InABox" id="107">
- <BOUNDS type="Node" left="3570" top="8490" width="100" height="100">
+ <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 type="Box" left="3570" top="8490" width="1620" height="555">
+ <BOUNDS height="555" left="915" top="8460" type="Box" width="1620">
</BOUNDS>
<PIN pinname="Y Input Value" visible="1">
</PIN>
@@ -309,37 +309,417 @@
</PIN>
<PIN pinname="Show SliceIndex" slicecount="1" values="1">
</PIN>
- <PIN pinname="Descriptive Name" slicecount="1" values="Output" encoded="0">
+ <PIN encoded="0" pinname="Descriptive Name" slicecount="1" values="Output">
</PIN>
</NODE>
- <LINK srcnodeid="105" srcpinname="Output" dstnodeid="107" dstpinname="Y Input Value">
+ <LINK dstnodeid="107" dstpinname="Y Input Value" srcnodeid="105" srcpinname="Output">
</LINK>
- <NODE nodename="IOBox (Value Advanced)" componentmode="InABox" id="108" systemname="IOBox (Value Advanced)">
- <BOUNDS type="Node" left="5985" top="7125" width="0" height="0">
+ <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 type="Box" left="5985" top="7125" width="795" height="240">
+ <BOUNDS height="240" left="3330" top="7095" type="Box" width="795">
</BOUNDS>
<PIN pinname="Y Input Value" slicecount="1" values="0">
</PIN>
- <PIN pinname="Units" slicecount="1" values="||" encoded="0">
+ <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 pinname="Descriptive Name" slicecount="1" values="Index" encoded="0">
+ <PIN encoded="0" pinname="Descriptive Name" slicecount="1" values="Index">
</PIN>
</NODE>
- <LINK srcnodeid="108" srcpinname="Y Output Value" dstnodeid="105" dstpinname="Index">
+ <LINK dstnodeid="105" dstpinname="Index" srcnodeid="108" srcpinname="Y Output Value">
</LINK>
- <NODE systemname="I (Spreads)" nodename="I (Spreads)" componentmode="Hidden" id="109">
- <BOUNDS type="Node" left="3555" top="5100" width="100" height="100">
+ <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 srcnodeid="109" srcpinname="Output" dstnodeid="106" dstpinname="Y Input Value">
+ <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>
+ <NODE componentmode="InABox" id="115" nodename="IOBox (String)" systemname="IOBox (String)">
+ <BOUNDS height="270" left="10590" top="165" type="Node" width="2070">
+ </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>
+ <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="116" nodename="IOBox (Value Advanced)" systemname="IOBox (Value Advanced)">
+ <BOUNDS height="100" left="14520" top="6870" type="Node" width="100">
+ </BOUNDS>
+ <BOUNDS height="240" left="14520" top="6870" type="Box" width="795">
+ </BOUNDS>
+ <PIN pinname="Y Input Value" visible="1">
+ </PIN>
+ <PIN pinname="Y Output Value" visible="1">
+ </PIN>
+ <PIN encoded="0" pinname="Descriptive Name" slicecount="1" values="|Aspect Ratio|">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="116" dstpinname="Y Input Value" srcnodeid="102" srcpinname="Output">
+ </LINK>
+ <LINK dstnodeid="101" dstpinname="Y" hiddenwhenlocked="1" srcnodeid="116" srcpinname="Y Output Value">
+ </LINK>
+ <LINK dstnodeid="98" dstpinname="Transform" srcnodeid="101" srcpinname="Transform Out">
+ </LINK>
+ <LINK dstnodeid="101" dstpinname="Transform In" srcnodeid="99" srcpinname="Transform Out">
+ </LINK>
+ <NODE componentmode="Hidden" id="117" nodename="Translate (Transform)" systemname="Translate (Transform)">
+ <BOUNDS height="100" left="8955" top="480" type="Node" width="100">
+ </BOUNDS>
+ <PIN pinname="Transform Out" visible="1">
+ </PIN>
+ <PIN pinname="X" visible="1">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="99" dstpinname="Transform In" srcnodeid="117" srcpinname="Transform Out">
+ </LINK>
+ <NODE componentmode="Hidden" id="118" nodename="LinearSpread (Spreads)" systemname="LinearSpread (Spreads)">
+ <BOUNDS height="100" left="9210" top="150" type="Node" width="100">
+ </BOUNDS>
+ <PIN pinname="Output" visible="1">
+ </PIN>
+ <PIN pinname="Spread Count" slicecount="1" values="15">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="117" dstpinname="X" srcnodeid="118" srcpinname="Output">
+ </LINK>
+ <NODE componentmode="InABox" id="119" nodename="IOBox (String)" systemname="IOBox (String)">
+ <BOUNDS height="270" left="10590" top="510" type="Node" width="2070">
+ </BOUNDS>
+ <BOUNDS height="315" left="10590" top="510" type="Box" width="4185">
+ </BOUNDS>
+ <PIN encoded="0" pinname="Input String" 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 encoded="0" pinname="Descriptive Name" slicecount="1" values="||">
+ </PIN>
+ </NODE>
+ <NODE componentmode="Hidden" id="120" nodename="RetroColors (Color)" systemname="RetroColors (Color)">
+ <BOUNDS height="100" left="10485" top="1935" type="Node" width="100">
+ </BOUNDS>
+ <PIN pinname="Output" visible="1">
+ </PIN>
+ <PIN pinname="Wavelength (nm)">
+ </PIN>
+ <PIN pinname="Index" slicecount="1" values="4">
+ </PIN>
+ <PIN pinname="Mode" slicecount="1" values="SinclairZXSpectrum">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="97" dstpinname="Background Color" srcnodeid="120" srcpinname="Output">
+ </LINK>
+ <NODE componentmode="Hidden" id="121" nodename="Blend (EX9.RenderState)" systemname="Blend (EX9.RenderState)">
+ <BOUNDS height="100" left="8310" top="1350" type="Node" width="100">
+ </BOUNDS>
+ <PIN pinname="Render State Out" visible="1">
+ </PIN>
+ <PIN pinname="Draw Mode" slicecount="1" values="Add">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="98" dstpinname="Render State" linkstyle="VHV" srcnodeid="121" srcpinname="Render State Out">
+ <LINKPOINT x="8370" y="1718">
+ </LINKPOINT>
+ <LINKPOINT x="8790" y="1718">
+ </LINKPOINT>
+ </LINK>
+ <NODE componentmode="InABox" id="133" nodename="Renderer (EX9)" systemname="Renderer (EX9)">
+ <BOUNDS height="100" left="8835" top="8940" type="Node" width="100">
+ </BOUNDS>
+ <BOUNDS height="3660" left="8835" top="8940" type="Box" width="7695">
+ </BOUNDS>
+ <BOUNDS height="5010" left="15765" top="6165" type="Window" width="6240">
+ </BOUNDS>
+ <PIN pinname="Layers" visible="1">
+ </PIN>
+ <PIN pinname="Actual Backbuffer Width" visible="1">
+ </PIN>
+ <PIN pinname="Actual Backbuffer Height" visible="1">
+ </PIN>
+ <PIN pinname="Background Color" slicecount="1" visible="1" values="|0.00000,0.00000,0.00000,1.00000|">
+ </PIN>
+ </NODE>
+ <NODE componentmode="Hidden" id="132" nodename="Quad (DX9)" systemname="Quad (DX9)">
+ <BOUNDS height="270" left="8835" top="8430" type="Node" width="1245">
+ </BOUNDS>
+ <PIN pinname="Layer" visible="1">
+ </PIN>
+ <PIN pinname="Transform" visible="1">
+ </PIN>
+ <PIN pinname="Texture" visible="1">
+ </PIN>
+ <PIN pinname="Render State" visible="1">
+ </PIN>
+ <PIN pinname="Color" visible="1">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="133" dstpinname="Layers" srcnodeid="132" srcpinname="Layer">
+ </LINK>
+ <NODE componentmode="Hidden" id="131" nodename="UniformScale (Transform)" systemname="UniformScale (Transform)">
+ <BOUNDS height="100" left="9000" top="7470" type="Node" width="100">
+ </BOUNDS>
+ <PIN pinname="Transform Out" visible="1">
+ </PIN>
+ <PIN pinname="XYZ" slicecount="1" values="0.4">
+ </PIN>
+ <PIN pinname="Transform In" visible="1">
+ </PIN>
+ </NODE>
+ <NODE componentmode="Hidden" id="130" nodename="FileTexture (EX9.Texture)" systemname="FileTexture (EX9.Texture)">
+ <BOUNDS height="100" left="10275" top="7935" type="Node" width="100">
+ </BOUNDS>
+ <PIN pinname="Texture Out" visible="1">
+ </PIN>
+ <PIN encoded="0" pinname="Filename" slicecount="1" values="|..\..\..\vvvv\vvvv_45beta26\girlpower\images\ring thin.bmp|">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="132" dstpinname="Texture" linkstyle="VHV" srcnodeid="130" srcpinname="Texture Out">
+ <LINKPOINT x="10275" y="8303">
+ </LINKPOINT>
+ <LINKPOINT x="9240" y="8303">
+ </LINKPOINT>
+ </LINK>
+ <NODE componentmode="Hidden" id="129" nodename="Scale (Transform)" systemname="Scale (Transform)">
+ <BOUNDS height="100" left="9000" top="7935" type="Node" width="100">
+ </BOUNDS>
+ <PIN pinname="Transform Out" visible="1">
+ </PIN>
+ <PIN pinname="X" slicecount="1" values="1">
+ </PIN>
+ <PIN pinname="Y" visible="1">
+ </PIN>
+ <PIN pinname="Transform In" visible="1">
+ </PIN>
+ </NODE>
+ <NODE componentmode="Hidden" id="128" nodename="Divide (Value)" systemname="Divide (Value)">
+ <BOUNDS height="270" left="14565" top="12660" type="Node" width="1035">
+ </BOUNDS>
+ <PIN pinname="Input" visible="1">
+ </PIN>
+ <PIN pinname="Input 2" visible="1">
+ </PIN>
+ <PIN pinname="Output" visible="1">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="128" dstpinname="Input" srcnodeid="133" srcpinname="Actual Backbuffer Width">
+ </LINK>
+ <LINK dstnodeid="128" dstpinname="Input 2" srcnodeid="133" srcpinname="Actual Backbuffer Height">
+ </LINK>
+ <NODE componentmode="InABox" id="127" nodename="IOBox (Value Advanced)" systemname="IOBox (Value Advanced)">
+ <BOUNDS height="100" left="14565" top="12990" type="Node" width="100">
+ </BOUNDS>
+ <BOUNDS height="240" left="14565" top="12990" type="Box" width="795">
+ </BOUNDS>
+ <PIN pinname="Y Input Value" visible="1">
+ </PIN>
+ <PIN pinname="Y Output Value" visible="1">
+ </PIN>
+ <PIN encoded="0" pinname="Descriptive Name" slicecount="1" values="|Aspect Ratio|">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="127" dstpinname="Y Input Value" srcnodeid="128" srcpinname="Output">
+ </LINK>
+ <LINK dstnodeid="129" dstpinname="Y" srcnodeid="127" srcpinname="Y Output Value">
+ </LINK>
+ <LINK dstnodeid="132" dstpinname="Transform" srcnodeid="129" srcpinname="Transform Out">
+ </LINK>
+ <LINK dstnodeid="129" dstpinname="Transform In" srcnodeid="131" srcpinname="Transform Out">
+ </LINK>
+ <NODE componentmode="Hidden" id="126" nodename="Translate (Transform)" systemname="Translate (Transform)">
+ <BOUNDS height="100" left="9000" top="7065" type="Node" width="100">
+ </BOUNDS>
+ <PIN pinname="Transform Out" visible="1">
+ </PIN>
+ <PIN pinname="X" visible="1">
+ </PIN>
+ <PIN pinname="Y" visible="1">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="131" dstpinname="Transform In" srcnodeid="126" srcpinname="Transform Out">
+ </LINK>
+ <NODE componentmode="Hidden" id="125" nodename="LinearSpread (Spreads)" systemname="LinearSpread (Spreads)">
+ <BOUNDS height="100" left="9255" top="6630" type="Node" width="100">
+ </BOUNDS>
+ <PIN pinname="Output" visible="1">
+ </PIN>
+ <PIN pinname="Spread Count" slicecount="1" values="5">
+ </PIN>
+ <PIN pinname="Width" slicecount="1" values="1.07">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="126" dstpinname="X" srcnodeid="125" srcpinname="Output">
+ </LINK>
+ <NODE componentmode="InABox" id="124" nodename="IOBox (String)" systemname="IOBox (String)">
+ <BOUNDS height="270" left="10635" top="7095" type="Node" width="2070">
+ </BOUNDS>
+ <BOUNDS height="375" left="10635" top="7095" type="Box" width="2670">
+ </BOUNDS>
+ <PIN encoded="0" pinname="Input String" slicecount="1" visible="0" values="|[4 - Olympics 2012?]&cr;&lf;Ok. Let&apos;s make a copy.&cr;&lf;&lt;ol&gt;&cr;&lf;&lt;li&gt;Select that section of the patch we just made.&lt;/li&gt;&cr;&lf;&lt;li&gt;Press &lt;key&gt;Ctrl&lt;/key&gt;+&lt;key&gt;D&lt;/key&gt; to duplicate. Dont press anything else.&lt;/li&gt;&cr;&lf;&lt;li&gt;The bits you&apos;ve duplicated are all mixed up with the old bits, but your new bits are all selected.&lt;/li&gt;&cr;&lf;&lt;li&gt;Use the &lt;key&gt;Down&lt;/key&gt; key on your keyboard to move the nodes down within the patch. To do this quicker, use &lt;key&gt;Shift&lt;/key&gt;+&lt;key&gt;Down&lt;/key&gt;. Do this until you&apos;ve moved the new nodes into a clear section of the patch&lt;/li&gt;&cr;&lf;&lt;/ol&gt;&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;Let&apos;s get rid of the background. Delete &lt;node&gt;RetroColors&lt;/node&gt; by clicking &lt;click/&gt;&lt;lmb/&gt; on it and then pressing &lt;key&gt;Delete&lt;/key&gt;. Right click &lt;click/&gt;&lt;rmb/&gt; on the &lt;pin&gt;Background Color&lt;/pin&gt; pin to reset it to &lt;b&gt;black&lt;/b&gt;.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;Let&apos;s make the rings bigger. Set the &lt;node&gt;UniformSpread&lt;/node&gt; to &lt;b&gt;0.4&lt;/b&gt;. This is a quick way of saying &apos;set the parameter of UniformSpread (in this case &lt;pin&gt;XYZ&lt;/pin&gt;)) to value &lt;b&gt;0.4&lt;/b&gt;&apos;.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;Create a new &lt;node&gt;LinearSpread&lt;/node&gt; and connect it to &lt;node&gt;Translate&lt;/node&gt;&apos;s &lt;pin&gt;Y&lt;/pin&gt; input. Set the &lt;pin&gt;Spread Count&lt;pin&gt; of the 2 &lt;node&gt;LinearSpread&lt;/node&gt;&apos;s to &lt;b&gt;5&lt;/b&gt; and &lt;b&gt;2&lt;/b&gt; respectively.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;Adjust the &lt;b&gt;Width&lt;/b&gt; pins of the &lt;node&gt;LinearSpread&lt;/node&gt;&apos;s until you get the olympic rings.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;For good measure, add some colour to the rings by either using a &lt;node&gt;RetroColors&lt;/node&gt; with an &lt;node&gt;I (Spreads)&lt;/node&gt; on the &lt;pin&gt;Index&lt;/pin pin, or a &lt;node&gt;HSL (Color Join)&lt;/node&gt; with a &lt;node&gt;LinearSpread&lt;/node&gt; on the &lt;pin&gt;Hue&lt;/pin&gt; input pin. Also set the &lt;pin&gt;Draw Mode&lt;/pin&gt; of the &lt;node&gt;Blend&lt;/node&gt; node to &lt;b&gt;ColorAsAlphaBlend&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>
+ <NODE componentmode="Hidden" id="122" nodename="Blend (EX9.RenderState)" systemname="Blend (EX9.RenderState)">
+ <BOUNDS height="100" left="8835" top="6270" type="Node" width="100">
+ </BOUNDS>
+ <PIN pinname="Render State Out" visible="1">
+ </PIN>
+ <PIN pinname="Draw Mode" slicecount="1" values="ColorAsAlphaBlend">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="132" dstpinname="Render State" linkstyle="VHV" srcnodeid="122" srcpinname="Render State Out">
+ <LINKPOINT x="8735" y="7193">
+ </LINKPOINT>
+ <LINKPOINT x="8995" y="7748">
+ </LINKPOINT>
+ </LINK>
+ <NODE componentmode="Hidden" id="134" nodename="LinearSpread (Spreads)" systemname="LinearSpread (Spreads)">
+ <BOUNDS height="100" left="10455" top="6630" type="Node" width="100">
+ </BOUNDS>
+ <PIN pinname="Output" visible="1">
+ </PIN>
+ <PIN pinname="Spread Count" slicecount="1" values="2">
+ </PIN>
+ <PIN pinname="Width" slicecount="1" values="-0.98">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="126" dstpinname="Y" linkstyle="VHV" srcnodeid="134" srcpinname="Output">
+ <LINKPOINT x="10455" y="6968">
+ </LINKPOINT>
+ <LINKPOINT x="9555" y="6968">
+ </LINKPOINT>
+ </LINK>
+ <NODE componentmode="Hidden" id="135" nodename="RetroColors (Color)" systemname="RetroColors (Color)">
+ <BOUNDS height="100" left="11280" top="7935" type="Node" width="100">
+ </BOUNDS>
+ <PIN pinname="Output" visible="1">
+ </PIN>
+ <PIN pinname="Index" visible="1">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="132" dstpinname="Color" linkstyle="VHV" srcnodeid="135" srcpinname="Output">
+ <LINKPOINT x="11310" y="8385">
+ </LINKPOINT>
+ <LINKPOINT x="9885" y="8385">
+ </LINKPOINT>
+ </LINK>
+ <NODE componentmode="Hidden" id="136" nodename="I (Spreads)" systemname="I (Spreads)">
+ <BOUNDS height="100" left="11280" top="7590" type="Node" width="100">
+ </BOUNDS>
+ <PIN pinname="Output" visible="1">
+ </PIN>
+ <PIN pinname=".. To [" slicecount="1" values="6">
+ </PIN>
+ <PIN pinname="[ From .." slicecount="1" values="1">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="135" dstpinname="Index" srcnodeid="136" srcpinname="Output">
</LINK>
</PATCH>
View
36 7. Animation.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\7. Animation.png" />
+<h2>0 - Introduction to animation</h2>
+<p> There are an infinite number of ways to animate things in VVVV. Here are some obvious ones: <ul> <li>Damping between 2 states</li> <li>Using <node>Timeliner</node></li> <li>Using LFO</li> </ul></p>
+<h2>1 - Damper</h2>
+<p> A simple form of animation is 'damping' between 2 states. Examples of nodes which can cause this type of animation are: <ul> <li><node>Damper</node></li> <li><node>Decay</node></li> <li><node>DeNiro</node> (so called because it acts like a 'taxi driver')</li> <li><node>Newton</node></li> </ul> </p><p> These nodes tend to take an <pin>Input</pin> which changes, and give an <pin>Output</pin> which moves smoothly. The speed and type of this movement depends on the type of the node, and the parameters of that node. </p><p> Let's try the following: <ol> <li>Create a <node>Damper (Animation)</node>.</li> <li>Create 2 <node>IOBox</node>'s around the <node>Damper</node>. One attached to its <pin>Input</pin> and one attached to its <pin>Output</pin></li> <li>Create a <b>Toggle</b> <node>IOBox</node> using the <img src="html_resources/click2.png"/><img src="html_resources/rmb.png"/> shortcut menu, and attach its output to the input of the top <node>IOBox</node></li> </ol> </p><p> Now try toggling the <node>IOBox</node> on and off. You will notice the <pin>Input</pin> jumps sharply between values, whilst the output moves smoothly.</p>
+<h2>2 - Decay</h2>
+<p> Try this agan, but with a <node>Decay</node> node instead of a <node>Damper</node> node. </p><p> Set the <pin>Decay</pin> input pin of <node>Decay</node> to <b>1 second</b>. Now when you make the value high it jumps instantly. But when you make it low again it takes 1 second to return back to <b>0</b>.</p>
+<h2>3 - LFO driven animation</h2>
+<p> Firstly let's grab the rendering patch we had from last time. Copy it <key>Ctrl</key>+<key>C</key> there , and paste it <key>Ctrl</key>+<key>V</key>here. Set the <pin>Spread Count</pin> to <b>3</b>. </p><p> To save some space. I've deleted the <b>Aspect Ratio</b> <node>IOBox</node> and connected the <node>/</node> directly to the <node>Scale</node>'s <pin>Y</pin> input. Also I've scaled down the size of the <node>Renderer</node> in my patch. </p><p> First let's manually 'roll' the <pin>Phase</pin> input of the <node>LinearSpread</node>. Just put your mouse over it <img src="html_resources/hold.png"/><img src="html_resources/rmb.png"/> hold the right mouse down and drag up/down. </p><p> Now create a new node <node>LFO (Animation)</node> and add 2 <node>IOBox</node>'s to the <pin>Output</pin> and <pin>Cycles</pin> output pins on it. Set the <pin>Period</pin> input on <node>LFO</node> to <b>3 seconds</b>. Notice how the <pin>Output</pin> and <pin>Cycles</pin> are affected. </p><p> Now connect the <pin>Output</pin> of <node>LFO</node> to the <pin>Phase</pin> input of <node>LinearSpread</node>. You should see the circles marching in a line.</p>
+<h2>3 - RandomSpread animations</h2>
+<p> Now make a copy of that section of the patch, delete the <node>LFO</node> with its <node>IOBox</node>'s. The <pin>Phase</pin> of the <node>LinearSpread</node> will now keep the last value sent to it. </p><p> Create a <node>RandomSpread (Spreads)</node> node above <node>Translate</node>, and attach the <pin>Output</pin> of <node>RandomSpread</node> to the <pin>Y</pin> input of <node>Translate</node> and set the <pin>Spread Count</pin> to <b>3</b>. </p><p> RandomSpread is now outputting a Spread of 3 values, each of which should be random (if you want to get nerdy, pseudo-random). </p><p> If we roll the value of the <pin>Random Seed</pin> input pin of <node>RandomSpread</node>, we'll get a different set of random numbers. </p><p> Create a new <node>LFO</node> and connect the <node>Cycles</node> output to the <pin>Random Seed</pin> input. Now periodically the circles will jump to new positions. </p><p> Aha! We know how to make things move smoothly instead of jumping dont we? Let's stick a <node>Damper</node> in the path between <node>RandomSpread</node> and <node>Translate</node>. Now they should move smoothly! </p><p> To improve this, let's try a few things: <ul> <li>Change the <pin>Width</pin> of the <node>RandomSpread</node> to <b>2</b>. This means that the range of values output will be between <b>-1</b> and <b>+1</b> which is the range of Y values that fit inside the Renderer. The range is defined by the <pin>Width</pin> and the <pin>Input</pin> (i.e. the center) of <node>RandomSpread</node></li> <li>Try increasing the <pin>Filter Time</pin> of <node>Damper</node> to make the circles accelerate more slowly.</li> <li>Try changing the <pin>Period</pin> of the <node>LFO</node>. Note that if the <pin>Period</pin> is too short (i.e. quick), then the input to the <node>Damper</node> might move too quickly for the output to ever catch up.</li> <li>Try increasing the <pin>Spread Count</pin> on <node>RandomSpread</node></li> <li>Try chaning the <pin>Spread Count</pin> and <pin>Width</pin> of the <node>LinearSpread</node></li> </ul></p>
+</body>
+</html>
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
737 7. Animation.v4p
@@ -0,0 +1,737 @@
+<!DOCTYPE PATCH SYSTEM "http://vvvv.org/versions/vvvv45beta26.dtd" >
+ <PATCH nodename="C:\kimchiandchips\Workshops\VVVV.Tutorials.Fundamentals\7. Animation.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="|7. Animation|">
+ </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="Making things move using Animation nodes." tags="Animation, Damper, Decay, Phase, LFO, RandomSpread">
+ </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="2385" top="3630" type="Node" width="2070">
+ </BOUNDS>
+ <BOUNDS height="330" left="2385" top="3630" type="Box" width="3495">
+ </BOUNDS>
+ <PIN encoded="0" pinname="Input String" slicecount="1" visible="0" values="|[0 - Introduction to animation]&cr;&lf;There are an infinite number of ways to animate things in VVVV. Here are some obvious ones:&cr;&lf;&lt;ul&gt;&cr;&lf;&lt;li&gt;Damping between 2 states&lt;/li&gt;&cr;&lf;&lt;li&gt;Using &lt;node&gt;Timeliner&lt;/node&gt;&lt;/li&gt;&cr;&lf;&lt;li&gt;Using LFO&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="104" nodename="IOBox (String)" systemname="IOBox (String)">
+ <BOUNDS height="270" left="3165" top="4230" type="Node" width="2070">
+ </BOUNDS>
+ <BOUNDS height="330" left="3165" top="4230" type="Box" width="1470">
+ </BOUNDS>
+ <PIN encoded="0" pinname="Input String" slicecount="1" visible="0" values="|[1 - Damper]&cr;&lf;A simple form of animation is &apos;damping&apos; between 2 states. Examples of nodes which can cause this type of animation are:&cr;&lf;&lt;ul&gt;&cr;&lf;&lt;li&gt;&lt;node&gt;Damper&lt;/node&gt;&lt;/li&gt;&cr;&lf;&lt;li&gt;&lt;node&gt;Decay&lt;/node&gt;&lt;/li&gt;&cr;&lf;&lt;li&gt;&lt;node&gt;DeNiro&lt;/node&gt; (so called because it acts like a &apos;taxi driver&apos;)&lt;/li&gt;&cr;&lf;&lt;li&gt;&lt;node&gt;Newton&lt;/node&gt;&lt;/li&gt;&cr;&lf;&lt;/ul&gt;&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;These nodes tend to take an &lt;pin&gt;Input&lt;/pin&gt; which changes, and give an &lt;pin&gt;Output&lt;/pin&gt; which moves smoothly. The speed and type of this movement depends on the type of the node, and the parameters of that node.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;Let&apos;s try the following:&cr;&lf;&lt;ol&gt;&cr;&lf;&lt;li&gt;Create a &lt;node&gt;Damper (Animation)&lt;/node&gt;.&lt;/li&gt;&cr;&lf;&lt;li&gt;Create 2 &lt;node&gt;IOBox&lt;/node&gt;&apos;s around the &lt;node&gt;Damper&lt;/node&gt;. One attached to its &lt;pin&gt;Input&lt;/pin&gt; and one attached to its &lt;pin&gt;Output&lt;/pin&gt;&lt;/li&gt;&cr;&lf;&lt;li&gt;Create a &lt;b&gt;Toggle&lt;/b&gt; &lt;node&gt;IOBox&lt;/node&gt; using the &lt;click2/&gt;&lt;rmb/&gt; shortcut menu, and attach its output to the input of the top &lt;node&gt;IOBox&lt;/node&gt;&lt;/li&gt;&cr;&lf;&lt;/ol&gt;&cr;&lf;&lt;br /&gt;&cr;&lf;Now try toggling the &lt;node&gt;IOBox&lt;/node&gt; on and off. You will notice the &lt;pin&gt;Input&lt;/pin&gt; jumps sharply between values, whilst the output moves smoothly.|">
+ </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="139" nodename="Damper (Animation)" systemname="Damper (Animation)">
+ <BOUNDS height="270" left="3465" top="6630" type="Node" width="1740">
+ </BOUNDS>
+ <PIN pinname="Position Out" visible="1">
+ </PIN>
+ <PIN pinname="Go To Position" visible="1">
+ </PIN>
+ </NODE>
+ <NODE componentmode="InABox" id="140" nodename="IOBox (Value Advanced)" systemname="IOBox (Value Advanced)">
+ <BOUNDS height="100" left="3465" top="7200" type="Node" width="100">
+ </BOUNDS>
+ <BOUNDS height="405" left="3465" top="7200" type="Box" width="900">
+ </BOUNDS>
+ <PIN pinname="Y Input Value" visible="1">
+ </PIN>
+ <PIN encoded="0" pinname="Descriptive Name" slicecount="1" values="||">
+ </PIN>
+ <PIN pinname="Size" slicecount="1" values="14">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="140" dstpinname="Y Input Value" srcnodeid="139" srcpinname="Position Out">
+ </LINK>
+ <NODE componentmode="InABox" id="141" nodename="IOBox (Value Advanced)" systemname="IOBox (Value Advanced)">
+ <BOUNDS height="100" left="3465" top="6075" type="Node" width="100">
+ </BOUNDS>
+ <BOUNDS height="405" left="3465" top="6075" type="Box" width="900">
+ </BOUNDS>
+ <PIN pinname="Y Output Value" visible="1">
+ </PIN>
+ <PIN encoded="0" pinname="Descriptive Name" slicecount="1" values="||">
+ </PIN>
+ <PIN pinname="Y Input Value" visible="1">
+ </PIN>
+ <PIN pinname="Size" slicecount="1" values="14">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="139" dstpinname="Go To Position" srcnodeid="141" srcpinname="Y Output Value">
+ </LINK>
+ <NODE componentmode="Hidden" id="142" nodename="Switch (Value Input)" systemname="Switch (Value Input)">
+ <BOUNDS height="270" left="3480" top="5640" type="Node" width="1710">
+ </BOUNDS>
+ <PIN pinname="Output" visible="1">
+ </PIN>
+ <PIN pinname="Switch" visible="1">
+ </PIN>
+ <PIN pinname="Input 2" slicecount="1" values="1">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="141" dstpinname="Y Input Value" srcnodeid="142" srcpinname="Output">
+ </LINK>
+ <NODE componentmode="InABox" id="144" nodename="IOBox (Value Advanced)" systemname="IOBox (Value Advanced)">
+ <BOUNDS height="100" left="3465" top="4785" type="Node" width="100">
+ </BOUNDS>
+ <BOUNDS height="480" left="3465" top="4785" type="Box" width="480">
+ </BOUNDS>
+ <PIN pinname="Value Type" slicecount="1" values="Boolean">
+ </PIN>
+ <PIN pinname="Behavior" slicecount="1" values="Toggle">
+ </PIN>
+ <PIN pinname="Y Output Value" visible="1">
+ </PIN>
+ <PIN pinname="X Input Value" slicecount="1" values="0">
+ </PIN>
+ <PIN pinname="Y Input Value" slicecount="1" values="0">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="142" dstpinname="Switch" srcnodeid="144" srcpinname="Y Output Value">
+ </LINK>
+ <NODE componentmode="InABox" id="148" nodename="IOBox (Value Advanced)" systemname="IOBox (Value Advanced)">
+ <BOUNDS height="100" left="3510" top="11055" type="Node" width="100">
+ </BOUNDS>
+ <BOUNDS height="405" left="3510" top="11055" type="Box" width="900">
+ </BOUNDS>
+ <PIN pinname="Y Input Value" visible="1">
+ </PIN>
+ <PIN encoded="0" pinname="Descriptive Name" slicecount="1" values="||">
+ </PIN>
+ <PIN pinname="Size" slicecount="1" values="14">
+ </PIN>
+ </NODE>
+ <NODE componentmode="InABox" id="147" nodename="IOBox (Value Advanced)" systemname="IOBox (Value Advanced)">
+ <BOUNDS height="100" left="3510" top="10005" type="Node" width="100">
+ </BOUNDS>
+ <BOUNDS height="405" left="3510" top="10005" type="Box" width="900">
+ </BOUNDS>
+ <PIN pinname="Y Output Value" visible="1">
+ </PIN>
+ <PIN encoded="0" pinname="Descriptive Name" slicecount="1" values="||">
+ </PIN>
+ <PIN pinname="Y Input Value" visible="1">
+ </PIN>
+ <PIN pinname="Size" slicecount="1" values="14">
+ </PIN>
+ </NODE>
+ <NODE componentmode="Hidden" id="146" nodename="Switch (Value Input)" systemname="Switch (Value Input)">
+ <BOUNDS height="270" left="3525" top="9570" type="Node" width="1710">
+ </BOUNDS>
+ <PIN pinname="Output" visible="1">
+ </PIN>
+ <PIN pinname="Switch" visible="1">
+ </PIN>
+ <PIN pinname="Input 2" slicecount="1" values="1">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="147" dstpinname="Y Input Value" srcnodeid="146" srcpinname="Output">
+ </LINK>
+ <NODE componentmode="InABox" id="145" nodename="IOBox (Value Advanced)" systemname="IOBox (Value Advanced)">
+ <BOUNDS height="100" left="3510" top="8715" type="Node" width="100">
+ </BOUNDS>
+ <BOUNDS height="480" left="3510" top="8715" type="Box" width="480">
+ </BOUNDS>
+ <PIN pinname="Value Type" slicecount="1" values="Boolean">
+ </PIN>
+ <PIN pinname="Behavior" slicecount="1" values="Toggle">
+ </PIN>
+ <PIN pinname="Y Output Value" visible="1">
+ </PIN>
+ <PIN pinname="X Input Value" slicecount="1" values="0">
+ </PIN>
+ <PIN pinname="Y Input Value" slicecount="1" values="0">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="146" dstpinname="Switch" srcnodeid="145" srcpinname="Y Output Value">
+ </LINK>
+ <NODE componentmode="InABox" id="150" nodename="IOBox (String)" systemname="IOBox (String)">
+ <BOUNDS height="270" left="3210" top="8160" type="Node" width="2070">
+ </BOUNDS>
+ <BOUNDS height="330" left="3210" top="8160" type="Box" width="1470">
+ </BOUNDS>
+ <PIN encoded="0" pinname="Input String" slicecount="1" visible="0" values="|[2 - Decay]&cr;&lf;Try this agan, but with a &lt;node&gt;Decay&lt;/node&gt; node instead of a &lt;node&gt;Damper&lt;/node&gt; node.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;Set the &lt;pin&gt;Decay&lt;/pin&gt; input pin of &lt;node&gt;Decay&lt;/node&gt; to &lt;b&gt;1 second&lt;/b&gt;. Now when you make the value high it jumps instantly. But when you make it low again it takes 1 second to return back to &lt;b&gt;0&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>
+ <NODE componentmode="Hidden" id="149" nodename="Decay (Animation)" systemname="Decay (Animation)">
+ <BOUNDS height="270" left="3510" top="10560" type="Node" width="1740">
+ </BOUNDS>
+ <PIN pinname="Position Out" visible="1">
+ </PIN>
+ <PIN pinname="Go To Position" visible="1">
+ </PIN>
+ <PIN pinname="Input" visible="1">
+ </PIN>
+ <PIN pinname="Output" visible="1">
+ </PIN>
+ <PIN pinname="Decay" slicecount="1" values="1">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="149" dstpinname="Input" srcnodeid="147" srcpinname="Y Output Value">
+ </LINK>
+ <LINK dstnodeid="148" dstpinname="Y Input Value" srcnodeid="149" srcpinname="Output">
+ </LINK>
+ <NODE componentmode="InABox" id="151" nodename="IOBox (String)" systemname="IOBox (String)">
+ <BOUNDS height="270" left="10470" top="225" type="Node" width="2070">
+ </BOUNDS>
+ <BOUNDS height="315" left="10470" top="225" type="Box" width="3255">
+ </BOUNDS>
+ <PIN encoded="0" pinname="Input String" slicecount="1" visible="0" values="|[3 - LFO driven animation]&cr;&lf;Firstly let&apos;s grab the rendering patch we had from last time. Copy it &lt;key&gt;Ctrl&lt;/key&gt;+&lt;key&gt;C&lt;/key&gt; there , and paste it &lt;key&gt;Ctrl&lt;/key&gt;+&lt;key&gt;V&lt;/key&gt;here. Set the &lt;pin&gt;Spread Count&lt;/pin&gt; to &lt;b&gt;3&lt;/b&gt;.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;To save some space. I&apos;ve deleted the &lt;b&gt;Aspect Ratio&lt;/b&gt; &lt;node&gt;IOBox&lt;/node&gt; and connected the &lt;node&gt;/&lt;/node&gt; directly to the &lt;node&gt;Scale&lt;/node&gt;&apos;s &lt;pin&gt;Y&lt;/pin&gt; input. Also I&apos;ve scaled down the size of the &lt;node&gt;Renderer&lt;/node&gt; in my patch.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;First let&apos;s manually &apos;roll&apos; the &lt;pin&gt;Phase&lt;/pin&gt; input of the &lt;node&gt;LinearSpread&lt;/node&gt;. Just put your mouse over it &lt;hold/&gt;&lt;rmb/&gt; hold the right mouse down and drag up/down.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;Now create a new node &lt;node&gt;LFO (Animation)&lt;/node&gt; and add 2 &lt;node&gt;IOBox&lt;/node&gt;&apos;s to the &lt;pin&gt;Output&lt;/pin&gt; and &lt;pin&gt;Cycles&lt;/pin&gt; output pins on it. Set the &lt;pin&gt;Period&lt;/pin&gt; input on &lt;node&gt;LFO&lt;/node&gt; to &lt;b&gt;3 seconds&lt;/b&gt;. Notice how the &lt;pin&gt;Output&lt;/pin&gt; and &lt;pin&gt;Cycles&lt;/pin&gt; are affected.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;Now connect the &lt;pin&gt;Output&lt;/pin&gt; of &lt;node&gt;LFO&lt;/node&gt; to the &lt;pin&gt;Phase&lt;/pin&gt; input of &lt;node&gt;LinearSpread&lt;/node&gt;. You should see the circles marching in a line.|">
+ </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="169" nodename="Renderer (EX9)" systemname="Renderer (EX9)">
+ <BOUNDS height="100" left="8685" top="3345" type="Node" width="100">
+ </BOUNDS>
+ <BOUNDS height="1800" left="8685" top="3345" type="Box" width="7800">
+ </BOUNDS>
+ <BOUNDS height="5010" left="15765" top="6165" type="Window" width="6240">
+ </BOUNDS>
+ <PIN pinname="Layers" visible="1">
+ </PIN>
+ <PIN pinname="Actual Backbuffer Width" visible="1">
+ </PIN>
+ <PIN pinname="Actual Backbuffer Height" visible="1">
+ </PIN>
+ <PIN pinname="Background Color" visible="1">
+ </PIN>
+ </NODE>
+ <NODE componentmode="Hidden" id="168" nodename="Quad (DX9)" systemname="Quad (DX9)">
+ <BOUNDS height="270" left="8685" top="2835" type="Node" width="1245">
+ </BOUNDS>
+ <PIN pinname="Layer" visible="1">
+ </PIN>
+ <PIN pinname="Transform" visible="1">
+ </PIN>
+ <PIN pinname="Texture" visible="1">
+ </PIN>
+ <PIN pinname="Render State" visible="1">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="169" dstpinname="Layers" srcnodeid="168" srcpinname="Layer">
+ </LINK>
+ <NODE componentmode="Hidden" id="167" nodename="UniformScale (Transform)" systemname="UniformScale (Transform)">
+ <BOUNDS height="100" left="8850" top="1875" type="Node" width="100">
+ </BOUNDS>
+ <PIN pinname="Transform Out" visible="1">
+ </PIN>
+ <PIN pinname="XYZ" slicecount="1" values="0.1">
+ </PIN>
+ <PIN pinname="Transform In" visible="1">
+ </PIN>
+ </NODE>
+ <NODE componentmode="Hidden" id="166" nodename="FileTexture (EX9.Texture)" systemname="FileTexture (EX9.Texture)">
+ <BOUNDS height="100" left="10125" top="2340" type="Node" width="100">
+ </BOUNDS>
+ <PIN pinname="Texture Out" visible="1">
+ </PIN>
+ <PIN encoded="0" pinname="Filename" slicecount="1" values="|..\..\..\vvvv\vvvv_45beta26\girlpower\images\ring thin.bmp|">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="168" dstpinname="Texture" linkstyle="VHV" srcnodeid="166" srcpinname="Texture Out">
+ <LINKPOINT x="10125" y="2708">
+ </LINKPOINT>
+ <LINKPOINT x="9090" y="2708">
+ </LINKPOINT>
+ </LINK>
+ <NODE componentmode="Hidden" id="165" nodename="Scale (Transform)" systemname="Scale (Transform)">
+ <BOUNDS height="100" left="8850" top="2340" type="Node" width="100">
+ </BOUNDS>
+ <PIN pinname="Transform Out" visible="1">
+ </PIN>
+ <PIN pinname="X" slicecount="1" values="1">
+ </PIN>
+ <PIN pinname="Y" visible="1">
+ </PIN>
+ <PIN pinname="Transform In" visible="1">
+ </PIN>
+ </NODE>
+ <NODE componentmode="Hidden" id="164" nodename="Divide (Value)" systemname="Divide (Value)">
+ <BOUNDS height="270" left="14490" top="5460" type="Node" width="1005">
+ </BOUNDS>
+ <PIN pinname="Input" visible="1">
+ </PIN>
+ <PIN pinname="Input 2" visible="1">
+ </PIN>
+ <PIN pinname="Output" visible="1">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="164" dstpinname="Input" srcnodeid="169" srcpinname="Actual Backbuffer Width">
+ </LINK>
+ <LINK dstnodeid="164" dstpinname="Input 2" srcnodeid="169" srcpinname="Actual Backbuffer Height">
+ </LINK>
+ <LINK dstnodeid="168" dstpinname="Transform" srcnodeid="165" srcpinname="Transform Out">
+ </LINK>
+ <LINK dstnodeid="165" dstpinname="Transform In" srcnodeid="167" srcpinname="Transform Out">
+ </LINK>
+ <NODE componentmode="Hidden" id="161" nodename="Translate (Transform)" systemname="Translate (Transform)">
+ <BOUNDS height="100" left="8850" top="1470" type="Node" width="100">
+ </BOUNDS>
+ <PIN pinname="Transform Out" visible="1">
+ </PIN>
+ <PIN pinname="X" visible="1">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="167" dstpinname="Transform In" srcnodeid="161" srcpinname="Transform Out">
+ </LINK>
+ <NODE componentmode="Hidden" id="160" nodename="LinearSpread (Spreads)" systemname="LinearSpread (Spreads)">
+ <BOUNDS height="100" left="9090" top="1125" type="Node" width="100">
+ </BOUNDS>
+ <PIN pinname="Output" visible="1">
+ </PIN>
+ <PIN pinname="Spread Count" slicecount="1" values="3">
+ </PIN>
+ <PIN pinname="Phase" visible="1">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="161" dstpinname="X" srcnodeid="160" srcpinname="Output">
+ </LINK>
+ <NODE componentmode="Hidden" id="158" nodename="RetroColors (Color)" systemname="RetroColors (Color)">
+ <BOUNDS height="100" left="10410" top="2865" type="Node" width="100">
+ </BOUNDS>
+ <PIN pinname="Output" visible="1">
+ </PIN>
+ <PIN pinname="Wavelength (nm)">
+ </PIN>
+ <PIN pinname="Index" slicecount="1" values="6">
+ </PIN>
+ <PIN pinname="Mode" slicecount="1" values="SinclairZXSpectrum">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="169" dstpinname="Background Color" srcnodeid="158" srcpinname="Output">
+ </LINK>
+ <NODE componentmode="Hidden" id="157" nodename="Blend (EX9.RenderState)" systemname="Blend (EX9.RenderState)">
+ <BOUNDS height="100" left="8205" top="2340" type="Node" width="100">
+ </BOUNDS>
+ <PIN pinname="Render State Out" visible="1">
+ </PIN>
+ <PIN pinname="Draw Mode" slicecount="1" values="Add">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="168" dstpinname="Render State" linkstyle="VHV" srcnodeid="157" srcpinname="Render State Out">
+ <LINKPOINT x="8265" y="2708">
+ </LINKPOINT>
+ <LINKPOINT x="8685" y="2708">
+ </LINKPOINT>
+ </LINK>
+ <NODE componentmode="Hidden" id="170" nodename="LFO (Animation)" systemname="LFO (Animation)">
+ <BOUNDS height="270" left="11610" top="660" type="Node" width="3075">
+ </BOUNDS>
+ <PIN pinname="Output" visible="1">
+ </PIN>
+ <PIN pinname="Cycles" visible="1">
+ </PIN>
+ <PIN pinname="Period" slicecount="1" values="3">
+ </PIN>
+ </NODE>
+ <NODE componentmode="InABox" id="171" nodename="IOBox (Value Advanced)" systemname="IOBox (Value Advanced)">
+ <BOUNDS height="100" left="11610" top="1170" type="Node" width="100">
+ </BOUNDS>
+ <BOUNDS height="240" left="11610" top="1170" 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="171" dstpinname="Y Input Value" srcnodeid="170" srcpinname="Output">
+ </LINK>
+ <NODE componentmode="InABox" id="173" nodename="IOBox (Value Advanced)" systemname="IOBox (Value Advanced)">
+ <BOUNDS height="0" left="14625" top="1170" type="Node" width="0">
+ </BOUNDS>
+ <BOUNDS height="240" left="14625" top="1170" type="Box" width="795">
+ </BOUNDS>
+ <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="Cycles">
+ </PIN>
+ </NODE>
+ <LINK dstnodeid="173" dstpinname="Y Input Value" srcnodeid="170" srcpinname="Cycles">
+ </LINK>
+ <LINK dstnodeid="160" dstpinname="Phase" linkstyle="VHV" srcnodeid="170" srcpinname="Output">
+ <LINKPOINT x="11605" y="1015">
+ </LINKPOINT>
+ <LINKPOINT x="9875" y="1010">
+ </LINKPOINT>
+ </LINK>
+ <NODE componentmode="InABox" id="188" nodename="IOBox (String)" systemname="IOBox (String)">
+ <BOUNDS height="270" left="10425" top="6375" type="Node" width="2070">
+ </BOUNDS>
+ <BOUNDS height="360" left="10425" top="6375" type="Box" width="3690">
+ </BOUNDS>
+ <PIN encoded="0" pinname="Input String" slicecount="1" visible="0" values="|[3 - RandomSpread animations]&cr;&lf;Now make a copy of that section of the patch, delete the &lt;node&gt;LFO&lt;/node&gt; with its &lt;node&gt;IOBox&lt;/node&gt;&apos;s. The &lt;pin&gt;Phase&lt;/pin&gt; of the &lt;node&gt;LinearSpread&lt;/node&gt; will now keep the last value sent to it.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;Create a &lt;node&gt;RandomSpread (Spreads)&lt;/node&gt; node above &lt;node&gt;Translate&lt;/node&gt;, and attach the &lt;pin&gt;Output&lt;/pin&gt; of &lt;node&gt;RandomSpread&lt;/node&gt; to the &lt;pin&gt;Y&lt;/pin&gt; input of &lt;node&gt;Translate&lt;/node&gt; and set the &lt;pin&gt;Spread Count&lt;/pin&gt; to &lt;b&gt;3&lt;/b&gt;.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;RandomSpread is now outputting a Spread of 3 values, each of which should be random (if you want to get nerdy, pseudo-random).&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;If we roll the value of the &lt;pin&gt;Random Seed&lt;/pin&gt; input pin of &lt;node&gt;RandomSpread&lt;/node&gt;, we&apos;ll get a different set of random numbers.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;Create a new &lt;node&gt;LFO&lt;/node&gt; and connect the &lt;node&gt;Cycles&lt;/node&gt; output to the &lt;pin&gt;Random Seed&lt;/pin&gt; input. Now periodically the circles will jump to new positions.&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;Aha! We know how to make things move smoothly instead of jumping dont we? Let&apos;s stick a &lt;node&gt;Damper&lt;/node&gt; in the path between &lt;node&gt;RandomSpread&lt;/node&gt; and &lt;node&gt;Translate&lt;/node&gt;. Now they should move smoothly!&cr;&lf;&lt;br /&gt;&cr;&lf;&cr;&lf;To improve this, let&apos;s try a few things:&cr;&lf;&lt;ul&gt;&cr;&lf;&lt;li&gt;Change the &lt;pin&gt;Width&lt;/pin&gt; of the &lt;node&gt;RandomSpread&lt;/node&gt; to &lt;b&gt;2&lt;/b&gt;. This means that the range of values output will be between &lt;b&gt;-1&lt;/b&gt; and &lt;b&gt;+1&lt;/b&gt; which is the range of Y values that fit inside the Renderer. The range is defined by the &lt;pin&gt;Width&lt;/pin&gt; and the &lt;pin&gt;Input&lt;/pin&gt; (i.e. the center) of &lt;node&gt;RandomSpread&lt;/node&gt;&lt;/li&gt;&cr;&lf;&lt;li&gt;Try increasing the &lt;pin&gt;Filter Time&lt;/pin&gt; of &lt;node&gt;Damper&lt;/node&gt; to make the circles accelerate more slowly.&lt;/li&gt;&cr;&lf;&lt;li&gt;Try changing the &lt;pin&gt;Period&lt;/pin&gt; of the &lt;node&gt;LFO&lt;/node&gt;. Note that if the &lt;pin&gt;Period&lt;/pin&gt; is too short (i.e. quick), then the input to the &lt;node&gt;Damper&lt;/node&gt; might move too quickly for the output to ever catch up.&lt;/li&gt;&cr;&lf;&lt;li&gt;Try increasing the &lt;pin&gt;Spread Count&lt;/pin&gt; on &lt;node&gt;RandomSpread&lt;/node&gt;&lt;/li&gt;&cr;&lf;&lt;li&gt;Try chaning the &lt;pin&gt;Spread Count&lt;/pin&gt; and &lt;pin&gt;Width&lt;/pin&gt; of the &lt;node&gt;LinearSpread&lt;/node&gt;&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="187" nodename="Renderer (EX9)" systemname="Renderer (EX9)">
+ <BOUNDS height="100" left="8700" top="10095" type="Node" width="100">
+ </BOUNDS>
+ <BOUNDS height="1875" left="8700" top="10095" type="Box" width="7695">
+ </BOUNDS>
+ <BOUNDS height="5010" left="15765" top="6165" type="Window" width="6240">
+ </BOUNDS>
+ <PIN pinname="Layers" visible="1">
+ </PIN>
+ <PIN pinname="Actual Backbuffer Width" visible="1">
+ </PIN>
+ <PIN pinname="Actual Backbuffer Height" visible="1">
+ </PIN>
+ <PIN pinname="Background Color" visible="1">
+ </PIN>
+ </NODE>
+ <NODE componentmode="Hidden" id="186" nodename="Quad (DX9)" systemname="Quad (DX9)">
+ <BOUNDS height="270" left="8700" top="9750" type="Node" width="1245">
+ </BOUNDS>
+ <PIN pinname="Layer" vi