/micropages/release_0_3/index.html
HTML | 161 lines | 148 code | 11 blank | 2 comment | 0 complexity | a1212fdc6865904ce7d4699b8b50eb16 MD5 | raw file
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>Clock Patterns: VVVV.js v0.3.0 Micropage</title>
- <link rel="stylesheet" type="text/css" href="../../vvvv_js/vvvviewer/vvvv.css"/>
- <link rel="stylesheet" type="text/css" href="main.css"/>
- <script language="JavaScript" src="../../vvvv_js/lib/jquery/jquery-1.8.2.min.js"></script>
- <script language="JavaScript" src="../../vvvv_js/lib/underscore/underscore-min.js"></script>
- <script language="JavaScript" src="../../vvvv_js/lib/glMatrix-0.9.5.min.js"></script>
- <script language="JavaScript" src="../../vvvv_js/vvvv.min.js"></script>
- <script language="JavaScript" src="../../vvvv_js/lib/d3-v1.14/d3.min.js"></script>
- <script language="JavaScript" src="../../vvvv_js/vvvviewer/vvvv.vvvviewer.js"></script>
- <script language="JavaScript">
- if (!$.browser.webkit && !$.browser.mozilla) {
- location.href = "../../notsupported.html";
- }
- $(document).ready(function() {
- VVVV.init('../../vvvv_js','full', function() {
- var patchfile = "index.v4p";
- $testcanvas = $('<canvas width="10" height="10"></canvas>');
- $('body').append($testcanvas);
- var webgl_enabled = false;
- try {
- var testctxt = $testcanvas.get(0).getContext("experimental-webgl");
- if (testctxt) {
- patchfile = "index_webgl.v4p";
- $('#the_patch img').attr('src', "index_webgl_v4p_preview.png");
- }
- }
- catch (x) { }
- $testcanvas.remove();
- if (patchfile=="index.v4p") {
- $('.no_webgl').show();
- window.setTimeout(function() {
- $('.no_webgl').fadeOut();
- }, 15000);
- }
-
- $('.loading .label').text("Loading Patches ...");
- patch = new VVVV.Core.Patch(patchfile, function() {
- $('.loading').hide();
- var mainloop = new VVVV.Core.MainLoop(patch, 30);
- mainloop.start();
-
- //var vvvviewer = new VVVV.VVVViewer(patch, '#the_patch');
- var vvvviewer = undefined;
- $('#the_patch').click(function() {
- if (!vvvviewer)
- var vvvviewer = new VVVV.VVVViewer(patch, '#the_patch');
- });
- });
- });
- })
- </script>
- </head>
- <body>
- <div id="main">
- <div id="header">
- <img class="loading default_pattern" src="static_pattern.png"/>
- <canvas id="pattern" width="920" height="320"></canvas>
- <div class="no_webgl">
- You are viewing the light version of this page, because your browser doesn't support WebGL. Find out
- more <a href="http://get.webgl.org">here</a>.
- </div>
- </div>
- <div id="headline">
- <h2>Clock Patterns</h2>
- VVVV.js v0.3.0 Micropage
- <div id="meta_links">
- <a href="../../download/vvvv_js-0.3.0.tar.gz">Download</a>
- <a href="http://github.com/zauner/vvvv.js">Github</a>
- <a href="http://vvvvjs.quasipartikel.at">Project Website</a>
- </div>
- </div>
-
- <p class="intro">
- You know what time it is? Exactly: subpatch time. The introduction of subpatches in this new version of VVVV.js is only one in a row of improvements under VVVV.js' hood. —
- improvements in performance, stability and functionality which bring VVVV.js a step closer to becoming a ready-for-production development tool.
- Here's what's new:
- </p>
-
- <div id="the_patch"><img src="index_v4p_preview.png"/></div>
-
- <h3>Subpatches</h2>
- <p class="left">
- The biggest addition in this version is the support for subpatches. If you are into VVVV or similar software, you already know how valuable these are. For those
- who are not familiar with the subpatch concept: you can now group together a patch and form a 'subpatch', which you can nest as a node into
- another patch. You can think of it as functions or classes/modules, if you like. This is great for modularizing your patches, hiding complexity (aka mess) and increasing
- reusability of your code. Read more about subpatches in the <a href="http://vvvv.org/documentation/subpatches">VVVV Documentation</a>.
- </p>
-
- <div class="patch_caption">
- <h4>The Clock Pattern Example</h4>
- If your browser is supported, you should see a pattern consisting of repeating clock designs at the top of this page (inspired by all the great projects, where
- clocks are mounted next to each other, like <a href="http://florianjenett.de/one-perfect-cube/">here</a> and everything from <a href="http://www.todayandtomorrow.net/?s=clock">here</a>) Click the patch on the right
- to activate the VVVViewer and observe the running patch. It uses subpatches to modularize the five different clock designs, and leaves only switching between
- them to the main patch. This is great for various reasons:
- <ul>
- <li>Clock designs can easily be added or removed</li>
- <li>
- The main patch does not have to deal with the complexity of the single clock implementations (double click on one of the
- subpatches to see what's going on inside)
- </li>
- <li>
- Reusability: there are two versions of this, a WebGL version and a pure canvas version. They only differ in the main patch. The same clock subpatches are
- used in both.
- </li>
- </ul>
- </div>
-
- <h3>Pin Types and "Node" pins</h3>
- <p class="left">
- Until now, VVVV.js was fine without distinguishing different types of pins. The introduction of subpatches raised the need
- for generic "Node" IOBoxes, which led to the decision, that now is the right time to add Pin Types.
- </p>
- <p>This allows us to port all the
- "Node"-nodes (!), like Switch (Node), GetSlice (Node), etc. Also, it's the foundation for type checking, which again is crucial for a future
- in-browser patch editor.
- </p>
-
- <h3>Performance Boost</h2>
- <p>
- VVVV.js uses underscore.js mainly for iterating through hashes. This is really great because it overcomes Javascript's lack
- of ordered hashes, and creates more verbous code.
- </p>
- <p>
- However, if used at a high frequency (as in every frame) it turns
- out to significantly throttle overall shmoofness. Replacing underscore.js calls with native loops at performance critical code locations brought
- a noticable performance boost and should drastically increase the average frame rate in most cases.
- </p>
-
- <h3>Editor Interface</h2>
- <p>
- VVVV.js now provides an interface for "Editors" — this can be any kind of program which manipulates the VVVV patches in
- the browser.
- </p>
- <p>
- In this version, the VVVVJsConnector (which connects classic VVVV and VVVV.js in the browser) has been decoupled from the core,
- and turned into such an "Editor". This paves the way for creating in-browser editors and plug them into VVVV.js effortlessly. In the near future
- there might be a tabular editor which lets you tweak pins during runtime, to begin with. And eventually, this should lead to a full-fledged patch
- editor running inside the browser.
- </p>
- </div>
- <!-- Start of StatCounter Code -->
- <script type="text/javascript">
- var sc_project=7067416;
- var sc_invisible=1;
- var sc_security="cfe91c6a";
- </script>
- <script type="text/javascript"
- src="http://www.statcounter.com/counter/counter.js"></script><noscript><div
- class="statcounter"><a title="free web stats"
- href="http://statcounter.com/" target="_blank"><img
- class="statcounter"
- src="http://c.statcounter.com/7067416/0/cfe91c6a/1/"
- alt="free web stats" ></a></div></noscript>
- <!-- End of StatCounter Code -->
- </body>
- </html>