index.html | searchcode

/micropages/release_0_3/index.html

https://github.com/zauner/vvvv.js-website
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.  &mdash; 
    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" &mdash; 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>