intro.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <!-- charset must remain utf-8 to be handled properly by Processing -->
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=800" />

    <title>The Stylogical Map [INTRO]</title>

<link rel="stylesheet" type="text/css" href='stymaps/styles/mapscripts.css'></link>

<script src='scripts/jquery.min.js'></script>

<script type='text/javascript'>
/* Onload: */
var canvasApp=[], drawLoop=[], drawVideo=[], recordGIF={};
var aplayed=0, vplayed=0, adrawing=false, vdrawing=false;

$(function () { 
if (typeof window.addEventListener === 'function') {
  window.addEventListener("load", function init_page() {
    //alert('Start canvasApp');
    if (typeof canvasApp[0] !== 'undefined') {
      for(var i=0,z=canvasApp.length; i<z/*>*/;i++) {
        setTimeout(canvasApp[i],66);
      }
    } else {
      setTimeout(canvasApp,66);
    }
  }, false);
}
});

/* Processing Initializer: 
* Swiped from https://github.com/annasob/processing-js
* This code searches for all the &lt;script type="application/processing" target="canvasid"&gt;
* in your page and loads each script in the target canvas with the proper id.
* It is useful to smooth the process of adding Processing code in your page 
* and starting the Processing.js engine.
*/
var p_offset = -424;
var processing = {};
processing = 'undefined';

function init_processing() {
  if (typeof window.addEventListener === 'function') {
    window.addEventListener("load", function() {
      var scripts = document.getElementsByTagName("script");
      var canvasArray = Array.prototype.slice.call(document.getElementsByTagName("canvas"));
      var canvas;
      for (var i = 0, j = 0; i < scripts.length; i++) {
        if (scripts[i].type == "application/processing") {
          var src = scripts[i].getAttribute("target");
          if (src) {
            //alert("Processing target = "+ src);
            canvas = document.getElementById(src);
            if (canvas) {
              processing = new Processing(canvas, scripts[i].text);
              //alert("Processing started");
              for (var k = 0; k< canvasArray.length; k++)
              {
                if (canvasArray[k] === canvas) {
                  // remove the canvas from the array so we dont override it in the else
                  canvasArray.splice(k,1);
                }
              }
            }
          } else {   
            if (canvasArray.length >= j) {
              processing = new Processing(canvasArray[j], scripts[i].text);
              //alert("Processing started");
            }
            j++;
          }      
        }
      }
    }, false);
  }
}
</script>

  </head>

  <body>
    <div id="header-canvas">
       <canvas id='can23' width='480' height='270' style="image-rendering:optimizespeed ! important;"></canvas>
       <canvas id='cv' width='640' height='360'>
         <div id='main-header'>
           <h1>The Stylogical Map</h1>
           <h4>A presentation of various works-in-progress, 
           <br/>exploring the omni-media vortex of 
           <br/>space, time, love, and perception.</h4>
         </div>
       </canvas>
    </div>


    <p id="vstatus"></p>
	<p id="license" style="color:#fff">
		<img src="http://i.creativecommons.org/l/by-sa/3.0/nz/88x31.png" alt="Creative Commons Licence"><br />
		<em>These demos by <a href="mailto:revlin@uni-sol.org">Revlin John </a> are licensed under the <a href="http://creativecommons.org/licenses/by-sa/3.0/nz/deed.en_GB">Creative Commons Attribution-ShareAlike 3.0 License, 2009-2016</a></em>
	</p>

    <a href="http://www.w3.org/2010/05/video/mediaevents.html" target="_blank">Media Help</a>
    <a href='javascript:recordGIF();'>Record a GIF</a><br />
    <div id="stream">
    <div id="stream">
      <audio id="aud1" preload="auto" >
        <source src="audio/attention.mp3" />
        <source src="audio/attention.ogg" />
      </audio>
      <video id="vid1" style="/*visibility: hidden;*/" preload="auto"  muted="true" ><source src="video/revlin_john.mp4" /><source src="video/revlin_john.ogv" /><iframe src='http://www.youtube.com/embed/6ucGuJjN9w8'></iframe></video>
    </div>     

<!--script src='stymaps/processing-1.0.0.js' type='text/javascript'></script>
<script type='text/javascript'>/*<![CDATA[*/  /*Initiate Processing.js*/ init_processing(); /*]]>*/</script>
<script type="application/processing" target='can23'>/*<![CDATA[*/  /*via Luis Gonzales*/ int w=255,x,y,q,r,s,c; int u[],v[],uPv[],u2lv[],t[]; void setup(){size(w,w); /* Color Mode should be 'HSB'*/ noStroke(); c=0; u=new Int[w*w]; v=new Int[w*w]; uPv=new Int[w*w]; u2lv=new Int[w*w]; t=new Int[w*w*w]; for(y=0;y<w;q=y++-w/2){ for(x=0;x<w;r=x++-w/2){v[y*w+x]=int(w*atan2(q,r)/PI); u[y*w+x]=int(w*32/sqrt(r*r+q*q)); uPv[y*w+x]=u[y*w+x]+v[y*w+x]; u2lv[y*w+x]=u[y*w+x]*2-v[y*w+x];}} for(s=0;s<w;s++){ for(y=0;y<w;y++){ for(x=0;x<w;x++){ t[(s*w*w)+(y*w)+x]=((s+uPv[y*w+x])^u2lv[y*w+x])&w; }}}  s=0;} void draw(){link("javascript:Debugger.log('Color :'+"+ c +");"); s++; for(y=0;y<w;y++){ for(x=0;x<w;x++){  c=t[((s&w)*w*w)+(y*w)+x]; fill(0,0,c); rect(x,y,1,1); /*set(x++,y,c);*/  } /*stroke(0,0,c); line(0,y,w,y);*/ } } /*]]>*/</script-->


<script type="text/javascript" src="scripts/debugger.js"></script>
<script type="text/javascript" src="scripts/b64.js"></script>
<script type="text/javascript" src="jsgif/LZWEncoder.js"></script>
<script type="text/javascript" src="jsgif/NeuQuant.js"></script>
<script type="text/javascript" src="jsgif/GIFEncoder.js"></script>
<script type='text/javascript' src='stymaps/mapscripts.js'></script>
<!--Custom canvasApp-->
<script type='text/javascript' src='stymaps/canvasIntro.js'></script>

  </body>
</html> 