zarazum/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<meta name="creator" content="Procoding" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="viewport" id="viewport" content="width=device-width initial-scale=1 maximum-scale=1 user-scalable=no" />

	<title>aa-ekoan.pro</title>															<!-- displayName -->

	<link rel="stylesheet" type="text/css" href="style.css" />							<!-- style.css -->

	<script type="text/javascript" src="http://cloud.github.com/downloads/processing-js/processing-js/processing-1.4.1.min.js"></script>				<!-- libPath -->
	<script type="text/javascript" src="./processing-mobile.js"></script>		<!-- libPath -->
	<script type="text/javascript" src="./pjsinit.js?version=250"></script>	<!-- libPath -->
</head>
<body background="#000">

<canvas id="canvas" data-processing-sources="sketch.pde" resize></canvas>				<!-- sketch.pde -->

<script type="text/javascript">
setTimeout( function() { procoding.runStandalone(); }, 500 );</script>										<!-- export script -->

</body>
</html>

## pjsinit.js
function _procoding_throwError(e){if(procoding.error===0){procoding.error=e.message}else{procoding.error=procoding.error+": "+e.message}if(Processing.logger){Processing.logger.log(procoding.error);if(procoding.error){if(procoding.error.stack){Processing.logger.log(procoding.error.stack)}}}console.debug(procoding.error)}Processing.disableInit();var procoding={};procoding.error=0;procoding.prefs={};procoding.bound=false;procoding.pjs=null;try{procoding.init=function(){procoding.prefs.ignoreRetina=false;var t=document.querySelector("#canvas");var n=t.getAttribute("data-processing-sources");procoding.pjs=Processing.loadSketchFromSources(t,n.split(" "))};procoding.runStandalone=function(){setTimeout(function(){procoding.init();procoding.initSize();window.addEventListener("resize",procoding.resize,false);setTimeout(procoding.run,500)},100)};procoding.run=function(){if(!procoding.pjs){procoding.pjs=Processing.getInstanceById("canvas")}if(procoding.pjs!==undefined){procoding.pjs.externals.sketch.options.pauseOnBlur=false;procoding.pjs.externals.sketch.options.globalKeyEvents=true;procoding.pjs.key=0;procoding.pjs.keyCode=0;procoding.bound=true;window.addEventListener("resize",procoding.resize(),false)}else{procoding.bound=false}if(!procoding.bound){setTimeout(procoding.run,100)}};procoding.start=function(){if(procoding.pjs){procoding.pjs.loop()}};procoding.stop=function(){if(procoding.pjs){procoding.pjs.noLoop()}};procoding.forwardKeyEvent=function(t){procoding._forwardKeyEvent(t,0)};procoding._forwardKeyEvent=function(t,n){if(!procoding.pjs){return}var r=t.length-1;if(t.length>=0){procoding.pjs.key=t.charCodeAt(r);procoding.pjs.keyCode=n;procoding.pjs.keyPressed();procoding.pjs.keyTyped();procoding.pjs.keyReleased()}};procoding.forwardKeyCodeEvent=function(t){var n=t;switch(t){case"LEFT":n=procoding.pjs.LEFT;break;case"RIGHT":n=procoding.pjs.RIGHT;break;case"UP":n=procoding.pjs.UP;break;case"DOWN":n=procoding.pjs.DOWN;break;default:if(t.length){n=t.charCodeAt(0)}break}procoding.pjs.key=65535;procoding.pjs.keyCode=n;procoding.pjs.keyPressed();procoding.pjs.keyTyped()};procoding._initSize=function(){var t=window.devicePixelRatio;if(procoding.prefs.ignoreRetina){t=1}var n=1/t;var r=window.innerWidth*t;var i=window.innerHeight*t;procoding.width=r;procoding.height=i;var s=document.querySelector("#viewport");s.setAttribute("content","width="+r+" initial-scale="+n+" maximum-scale="+n+" user-scalable=no");document.head.removeChild(s);document.head.appendChild(s);if(procoding.pjs){procoding.pjs.size(r,i)}};procoding.initSize=function(){var t=window.devicePixelRatio;if(procoding.prefs.ignoreRetina){t=1}var n=1/t;var r=window.innerWidth*t;var i=window.innerHeight*t;procoding.width=r;procoding.height=i;var s=document.querySelector("#viewport");s.setAttribute("content","width="+r+" initial-scale="+n+" maximum-scale="+n+" user-scalable=no");document.head.removeChild(s);document.head.appendChild(s);if(procoding.pjs){procoding.pjs.size(r,i)}};procoding.resize=function(t){var n=false;if(t==="landscape"){n=true}var r=window.innerWidth;var i=window.innerHeight;if(n){r=procoding.height;i=procoding.width}procoding.width=r;procoding.height=i;if(procoding.pjs){procoding.pjs.size(r,i)}}}catch(e){_procoding_throwError(e)}(function(){var e=console.log;console.log=function(t){Processing.logger.log(t);e.apply(console,arguments)}})();(function(){var e=console.info;console.info=function(t){Processing.logger.log(t);e.apply(console,arguments)}})();(function(){var e=console.warn;console.warn=function(t){Processing.logger.log(t);e.apply(console,arguments)}})();(function(){var e=console.error;console.error=function(t){Processing.logger.log(t);e.apply(console,arguments)}})()

## processing-mobile.js
/**
 *  Processing.Mobile Library for Processing.js
 *
 *  This library adds a number of mobile device related APIs to Processing.
 *  These are non-standard, and are done in this library only for demonstration
 *  purposes.
 *
 *  Additional Processing APIs:
 *
 *  orientation: (object) device tilt information in degrees along x, y, z
 *             alpha: the direction the device is facing according to the compass
 *             beta: the angle in degrees the device is tilted front-to-back
 *             gamma the angle in degrees the device is tilted left-to-right.
 *             compassAccuracy the iOS 5 compass accuracy (or -1)
 *             compassHeading the iOS 5 cCompass heading in degrees or -1
 *
 *  acceleration: (object) acceleration data for device along x, y, and z axes:
 *             x: (float) device acceleration in m/s^2 along the X axis (-1.0 to 1.0)
 *             y: (float) device acceleration in m/s^2 along the Y axis (-1.0 to 1.0)
 *             z: (float) device acceleration in m/s^2 along the Z axis (-1.0 to 1.0)
 *
 *  coords: (object) geolocation data for the device, obtained at the start of the
 *          program (i.e., not updated during the lifetime of the program).  The
 *          properties of coords incude:
 *
 *             latitude: (float) current latitude in decimal degrees (or 0 if unknown)
 *             longitude: (float) current longitude in decimal degrees (or 0 if unknown)
 *             altitude: (float) current height in meters above the ellipsoid (or 0 if unknown)
 *             accuracy: (float) accuracy in meters of longitude and latitude
 *             altitudeAccuracy: (float) accurace of the altitude value in meters (or 0 if unknown)
 *             heading: (float) direction of travel, specified in degrees 0-360 (or -1 if unknown)
 *             speed: (float) speed in meters per second (or -1 if unknown)
 *
 *  Updates for coords are available when the locationChanged() callback is fired.
 *
 *  Additional Reading:
 *   http://www.html5rocks.com/en/tutorials/device/orientation/
 *   dev.w3.org/geo/api/spec-source.html
 **/

(function(Processing, window, navigator) {

  // Cache Processing ctor
  var P5 = Processing,
      Pp = Processing.prototype;

  var mobile = {
    // If we don't have support for devicemotion events, use 0 for these.
    acceleration: {
      x: 0,
      y: 0,
      z: 0
    },

    // Defaults for geolocation data
    coords: {
      latitude: 0,
      longitude: 0,
      accuracy: 0,
      altitude: 0,
      altitudeAccuracy: 0,
      heading: -1,
      speed: -1
    },

    // Defaults for orientation data
    orientation: {
      alpha: 0,
      beta: 0,
      gamma: 0,
      compassAccuracy: -1,
      compassHeading: -1
    }
  };

  function attachLocationCallback(p) {
    // Start a geolocation watch timeout if a locationChanged callback is provided.
    if (p.locationChanged &&
        typeof p.locationChanged === "function" &&
        navigator.geolocation) {

      navigator.geolocation.watchPosition(
        function success(position) {
          var posCoords = position.coords,
            mCoords = mobile.coords;

          mCoords.latitude = posCoords.latitude;
          mCoords.longitude = posCoords.longitude;
          mCoords.altitude = posCoords.altitude || 0; // can be null,
          mCoords.accuracy = posCoords.accuracy;
          mCoords.altitudeAccuracy = posCoords.altitudeAccuracy || 0; // can be null
          mCoords.heading = posCoords.heading || -1; // can be null
          mCoords.speed = posCoords.speed || -1; // can be null

          p.locationChanged();
        },
        function error(e) {
          // Ignore and use defaults already set for coords
          console.log('Unable to get geolocation position data: ' + e);
        }
      );
    }
  }

  // Extend Processing with locationChanged() callback logic.
  window.Processing = function() {
    var p5 = P5.apply(this, arguments);
    attachLocationCallback(p5);
    return p5;
  };
  window.Processing.prototype = Pp;

  // Copy static properties onto new Processing
  for (var prop in P5) {
    if (!P5.hasOwnProperty(prop)) {
      continue;
    }
    window.Processing[prop] = P5[prop];
  }

  // Extend any existing Processing instances with location callback, too.
  document.addEventListener('DOMContentLoaded', function() {
    Processing.instances.forEach(function(instance) {
      attachLocationCallback(instance);
    });
  }, false);

  window.addEventListener('devicemotion', function(event) {
    var acceleration = event.acceleration || event.accelerationIncludingGravity,
      mAcceleration = mobile.acceleration;

    // Values are in m/s^2
    mAcceleration.x = acceleration.x;
    mAcceleration.y = acceleration.y;
    mAcceleration.z = acceleration.z;
  }, false);

  function orientationhandler(evt) {
    // For FF3.6+
    if (!evt.gamma && !evt.beta) {
      evt.gamma = -(evt.x * (180 / Math.PI));
      evt.beta = -(evt.y * (180 / Math.PI));
    }

    var mOrientation = mobile.orientation;
    mOrientation.alpha = evt.alpha;
    mOrientation.beta = evt.beta;
    mOrientation.gamma = evt.gamma;
    mOrientation.compassAccuracy = evt.webkitCompassAccuracy ? evt.webkitCompassAccuracy : -1;
    mOrientation.compassHeading = evt.webkitCompassHeading ? evt.webkitCompassHeading + window.orientation : -1;
  }

  window.addEventListener('deviceorientation',  orientationhandler, false);
  window.addEventListener('MozOrientation',     orientationhandler, false);

  ['orientation', 'acceleration', 'coords'].forEach(function(objName) {
    Pp.__defineGetter__(objName, function() {
      return mobile[objName];
    });
  });

}(Processing, window, window.navigator));

## sketch.pde
int i=0;
int boxCount = 5;

int boxSmin = 50;
int boxSmax = 100;
int[] bx = new int[boxCount];
int[] by = new int[boxCount];
int[] bs = new int[boxCount];

void setup() {  // this is run once, initially.
    int j,ox=0,oy=height/2,dy;
    // background color (0 is black, 255 is white)
    background(0);

    // frames per second
    frameRate(30);
//    colorMode(HSB,2*PI,1.0,1.0,1.0);
    colorMode(RGB,255,255,255,1.0);
    for(j = 0; j < boxCount; j++){
        bs[j] = random(boxSmin,boxSmax);
        ox += bs[j];
        bx[j] = ox + random(-boxSmin/2,boxSmin/2);
        dy = random(-boxSmin*2,boxSmin*2);
        if((oy+dy) < boxSmax || (oy+dy) > (height - boxSmax)){
            dy = -dy;
        }
        by[j] = oy+dy;
    }
}

void draw() { // this is run repeatedly
    int j, a, fx, fy, tx, ty;

    // rainbow lines

    strokeWeight(width/50);
    for(j=0;j<20;j++){
        a=random(0.001,0.1);
    // draw the line top down
    stroke(random(255), random(255), random(255), a);
    line(i,0, random(i-20,i+20), height);

    // draw the line bottom up
    stroke(random(255), random(255), random(255), a);
    line(random(i-20,i+20),0,i,height);

    // loop when finished.
    if (i<width) {
        i++;
    } else {
        i=0;
    }
    }

    // noise lines
    strokeWeight(1.0);
    for (j = 0; j < 101; j++) {
        fx = random(0,width);
        fy = random(0,height);
        tx = width;
        ty = random(0,height);
            stroke(255,random(0.001,0.2));
        line(fx, fy, tx, ty);
    }

    //draw boxes
    fill(255, 0.1);
    noStroke();

    for(j = 0; j < boxCount; j++){
        rect(bx[j]-bs[j]/2,by[j]-bs[j]/2, bs[j],bs[j]);
        bx[j]-=5;
        if(bx[j]<(bs[j]/2)){
            bx[j] = bx[boxCount-1]+bs[j]+random()
        }
    }

    //blank every 5 frames
    //if(frameCount%5+1){

        noStroke();
        fill(0,0,0,0.1);
        rect(0, 0, width, height);

    //}
}

## style.css
* {
	-webkit-touch-callout: none;						/* Disable Open/Copy/Cancel */
	-webkit-user-select: none;							/* Prevent selection of any element */
	-webkit-tap-highlight-color: rgba(0,0,0,0);			/* set highlight color to transparant */
}

body {
	background-color:#000;
	font-family:Arial,Verdana;
	font-size:1em;
	margin: 0;
	padding: 0;
	overflow: hidden;	/* hide scrollbar scroll */
}

canvas {
	image-rendering: optimizespeed !important;
	overflow: hidden;	/* hide scrollbar scroll */

	-webkit-transform-origin: left top;
	-webkit-transform: scale(1,1);
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8" />
	<meta name="creator" content="Procoding" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="viewport" id="viewport" content="width=device-width initial-scale=1 maximum-scale=1 user-scalable=no" />

	<title>aa-ekoan.pro</title> <!-- displayName -->

	<link rel="stylesheet" type="text/css" href="style.css" /> <!-- style.css -->

	<script type="text/javascript" src="http://cloud.github.com/downloads/processing-js/processing-js/processing-1.4.1.min.js"></script> <!-- libPath -->
	<script type="text/javascript" src="./processing-mobile.js"></script> <!-- libPath -->
	<script type="text/javascript" src="./pjsinit.js?version=250"></script> <!-- libPath -->
	</head>
	<body background="#000">

	<canvas id="canvas" data-processing-sources="sketch.pde" resize></canvas> <!-- sketch.pde -->

	<script type="text/javascript">
	setTimeout( function() { procoding.runStandalone(); }, 500 );</script> <!-- export script -->

	</body>
	</html>
	/**
	* Processing.Mobile Library for Processing.js
	*
	* This library adds a number of mobile device related APIs to Processing.
	* These are non-standard, and are done in this library only for demonstration
	* purposes.
	*
	* Additional Processing APIs:
	*
	* orientation: (object) device tilt information in degrees along x, y, z
	* alpha: the direction the device is facing according to the compass
	* beta: the angle in degrees the device is tilted front-to-back
	* gamma the angle in degrees the device is tilted left-to-right.
	* compassAccuracy the iOS 5 compass accuracy (or -1)
	* compassHeading the iOS 5 cCompass heading in degrees or -1
	*
	* acceleration: (object) acceleration data for device along x, y, and z axes:
	* x: (float) device acceleration in m/s^2 along the X axis (-1.0 to 1.0)
	* y: (float) device acceleration in m/s^2 along the Y axis (-1.0 to 1.0)
	* z: (float) device acceleration in m/s^2 along the Z axis (-1.0 to 1.0)
	*
	* coords: (object) geolocation data for the device, obtained at the start of the
	* program (i.e., not updated during the lifetime of the program). The
	* properties of coords incude:
	*
	* latitude: (float) current latitude in decimal degrees (or 0 if unknown)
	* longitude: (float) current longitude in decimal degrees (or 0 if unknown)
	* altitude: (float) current height in meters above the ellipsoid (or 0 if unknown)
	* accuracy: (float) accuracy in meters of longitude and latitude
	* altitudeAccuracy: (float) accurace of the altitude value in meters (or 0 if unknown)
	* heading: (float) direction of travel, specified in degrees 0-360 (or -1 if unknown)
	* speed: (float) speed in meters per second (or -1 if unknown)
	*
	* Updates for coords are available when the locationChanged() callback is fired.
	*
	* Additional Reading:
	* http://www.html5rocks.com/en/tutorials/device/orientation/
	* dev.w3.org/geo/api/spec-source.html
	**/

	(function(Processing, window, navigator) {

	// Cache Processing ctor
	var P5 = Processing,
	Pp = Processing.prototype;

	var mobile = {
	// If we don't have support for devicemotion events, use 0 for these.
	acceleration: {
	x: 0,
	y: 0,
	z: 0
	},

	// Defaults for geolocation data
	coords: {
	latitude: 0,
	longitude: 0,
	accuracy: 0,
	altitude: 0,
	altitudeAccuracy: 0,
	heading: -1,
	speed: -1
	},

	// Defaults for orientation data
	orientation: {
	alpha: 0,
	beta: 0,
	gamma: 0,
	compassAccuracy: -1,
	compassHeading: -1
	}
	};

	function attachLocationCallback(p) {
	// Start a geolocation watch timeout if a locationChanged callback is provided.
	if (p.locationChanged &&
	typeof p.locationChanged === "function" &&
	navigator.geolocation) {

	navigator.geolocation.watchPosition(
	function success(position) {
	var posCoords = position.coords,
	mCoords = mobile.coords;

	mCoords.latitude = posCoords.latitude;
	mCoords.longitude = posCoords.longitude;
	mCoords.altitude = posCoords.altitude \|\| 0; // can be null,
	mCoords.accuracy = posCoords.accuracy;
	mCoords.altitudeAccuracy = posCoords.altitudeAccuracy \|\| 0; // can be null
	mCoords.heading = posCoords.heading \|\| -1; // can be null
	mCoords.speed = posCoords.speed \|\| -1; // can be null

	p.locationChanged();
	},
	function error(e) {
	// Ignore and use defaults already set for coords
	console.log('Unable to get geolocation position data: ' + e);
	}
	);
	}
	}

	// Extend Processing with locationChanged() callback logic.
	window.Processing = function() {
	var p5 = P5.apply(this, arguments);
	attachLocationCallback(p5);
	return p5;
	};
	window.Processing.prototype = Pp;

	// Copy static properties onto new Processing
	for (var prop in P5) {
	if (!P5.hasOwnProperty(prop)) {
	continue;
	}
	window.Processing[prop] = P5[prop];
	}

	// Extend any existing Processing instances with location callback, too.
	document.addEventListener('DOMContentLoaded', function() {
	Processing.instances.forEach(function(instance) {
	attachLocationCallback(instance);
	});
	}, false);

	window.addEventListener('devicemotion', function(event) {
	var acceleration = event.acceleration \|\| event.accelerationIncludingGravity,
	mAcceleration = mobile.acceleration;

	// Values are in m/s^2
	mAcceleration.x = acceleration.x;
	mAcceleration.y = acceleration.y;
	mAcceleration.z = acceleration.z;
	}, false);

	function orientationhandler(evt) {
	// For FF3.6+
	if (!evt.gamma && !evt.beta) {
	evt.gamma = -(evt.x * (180 / Math.PI));
	evt.beta = -(evt.y * (180 / Math.PI));
	}

	var mOrientation = mobile.orientation;
	mOrientation.alpha = evt.alpha;
	mOrientation.beta = evt.beta;
	mOrientation.gamma = evt.gamma;
	mOrientation.compassAccuracy = evt.webkitCompassAccuracy ? evt.webkitCompassAccuracy : -1;
	mOrientation.compassHeading = evt.webkitCompassHeading ? evt.webkitCompassHeading + window.orientation : -1;
	}

	window.addEventListener('deviceorientation', orientationhandler, false);
	window.addEventListener('MozOrientation', orientationhandler, false);

	['orientation', 'acceleration', 'coords'].forEach(function(objName) {
	Pp.__defineGetter__(objName, function() {
	return mobile[objName];
	});
	});

	}(Processing, window, window.navigator));
	int i=0;
	int boxCount = 5;

	int boxSmin = 50;
	int boxSmax = 100;
	int[] bx = new int[boxCount];
	int[] by = new int[boxCount];
	int[] bs = new int[boxCount];

	void setup() { // this is run once, initially.
	int j,ox=0,oy=height/2,dy;
	// background color (0 is black, 255 is white)
	background(0);

	// frames per second
	frameRate(30);
	// colorMode(HSB,2*PI,1.0,1.0,1.0);
	colorMode(RGB,255,255,255,1.0);
	for(j = 0; j < boxCount; j++){
	bs[j] = random(boxSmin,boxSmax);
	ox += bs[j];
	bx[j] = ox + random(-boxSmin/2,boxSmin/2);
	dy = random(-boxSmin2,boxSmin2);
	if((oy+dy) < boxSmax \|\| (oy+dy) > (height - boxSmax)){
	dy = -dy;
	}
	by[j] = oy+dy;
	}
	}

	void draw() { // this is run repeatedly
	int j, a, fx, fy, tx, ty;

	// rainbow lines

	strokeWeight(width/50);
	for(j=0;j<20;j++){
	a=random(0.001,0.1);
	// draw the line top down
	stroke(random(255), random(255), random(255), a);
	line(i,0, random(i-20,i+20), height);

	// draw the line bottom up
	stroke(random(255), random(255), random(255), a);
	line(random(i-20,i+20),0,i,height);

	// loop when finished.
	if (i<width) {
	i++;
	} else {
	i=0;
	}
	}

	// noise lines
	strokeWeight(1.0);
	for (j = 0; j < 101; j++) {
	fx = random(0,width);
	fy = random(0,height);
	tx = width;
	ty = random(0,height);
	stroke(255,random(0.001,0.2));
	line(fx, fy, tx, ty);
	}

	//draw boxes
	fill(255, 0.1);
	noStroke();

	for(j = 0; j < boxCount; j++){
	rect(bx[j]-bs[j]/2,by[j]-bs[j]/2, bs[j],bs[j]);
	bx[j]-=5;
	if(bx[j]<(bs[j]/2)){
	bx[j] = bx[boxCount-1]+bs[j]+random()
	}
	}

	//blank every 5 frames
	//if(frameCount%5+1){

	noStroke();
	fill(0,0,0,0.1);
	rect(0, 0, width, height);

	//}
	}
	* {
	-webkit-touch-callout: none; /* Disable Open/Copy/Cancel */
	-webkit-user-select: none; /* Prevent selection of any element */
	-webkit-tap-highlight-color: rgba(0,0,0,0); /* set highlight color to transparant */
	}

	body {
	background-color:#000;
	font-family:Arial,Verdana;
	font-size:1em;
	margin: 0;
	padding: 0;
	overflow: hidden; /* hide scrollbar scroll */
	}

	canvas {
	image-rendering: optimizespeed !important;
	overflow: hidden; /* hide scrollbar scroll */

	-webkit-transform-origin: left top;
	-webkit-transform: scale(1,1);
	}