takai · August 15, 2011 14:48
diff --git a/gistfile1.html b/gistfile1.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Hello, Processing.js.</title>
    <script type="application/javascript" src="processing-1.2.3.min.js">
    </script>
    <script type="application/javascript">  
 /* 
 * This code searches for all the <script type="application/processing" target="canvasid">
 * 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.
 */

 if (window.addEventListener) {
  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 && src.indexOf("#") > -1) {
          canvas = document.getElementById(src.substr(src.indexOf("#") + 1));
          if (canvas) {
            new Processing(canvas, scripts[i].text);
            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) {
            new Processing(canvasArray[j], scripts[i].text);
          }
          j++;
        }
      }
    }
  }, false);
 }
    </script>
    <script type="application/processing" target="processing-canvas">
 void setup() {
  size(800, 450);
  background(255);
  frameRate(15);
  stroke(1, 50);
  strokeWeight(2);
  smooth();
 }

 int len = 40;
 int x = 400;
 int y = 225;
 int c = 0;

 void draw(){
  float rad = randomRadians();
  x2 = x + len * cos(rad);
  y2 = y + len * sin(rad);

  if(x2 > 0 && x2 < width && y2 > 0 && y2 < height) {
    line(fuzzy(x), fuzzy(y), fuzzy(x2), fuzzy(y2));

    x = x2;
    y = y2;
  }

  c += 1;
  if(c > 500) {
    background(255);
    x = random(200, 600)
    y = random(100, 300)
    c = 0;
  }
 }

 int deg = 60;

 float randomRadians() {
  if(random(1) > 0.5) {
    deg -= 60;
  } else {
    deg += 60;
  }
  return radians(deg);
 }

 int rmin = len * -0.1;
 int rmax = len * 0.1;

 int fuzzy(int i) {
  return i + random(rmin, rmax);
 }
    </script> 
    <style type="text/css">
      * { margin: 0px; padding: 0px; }
      body { text-align: center; }
    </style>
  </head>
  <body>
    <canvas id="processing-canvas"></canvas>
    <p>Applicaiton </p>
  </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Hello, Processing.js.</title>
	<script type="application/javascript" src="processing-1.2.3.min.js">
	</script>
	<script type="application/javascript">
	/*
	* This code searches for all the <script type="application/processing" target="canvasid">
	* 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.
	*/

	if (window.addEventListener) {
	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 && src.indexOf("#") > -1) {
	canvas = document.getElementById(src.substr(src.indexOf("#") + 1));
	if (canvas) {
	new Processing(canvas, scripts[i].text);
	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) {
	new Processing(canvasArray[j], scripts[i].text);
	}
	j++;
	}
	}
	}
	}, false);
	}
	</script>
	<script type="application/processing" target="processing-canvas">
	void setup() {
	size(800, 450);
	background(255);
	frameRate(15);
	stroke(1, 50);
	strokeWeight(2);
	smooth();
	}

	int len = 40;
	int x = 400;
	int y = 225;
	int c = 0;

	void draw(){
	float rad = randomRadians();
	x2 = x + len * cos(rad);
	y2 = y + len * sin(rad);

	if(x2 > 0 && x2 < width && y2 > 0 && y2 < height) {
	line(fuzzy(x), fuzzy(y), fuzzy(x2), fuzzy(y2));

	x = x2;
	y = y2;
	}

	c += 1;
	if(c > 500) {
	background(255);
	x = random(200, 600)
	y = random(100, 300)
	c = 0;
	}
	}

	int deg = 60;

	float randomRadians() {
	if(random(1) > 0.5) {
	deg -= 60;
	} else {
	deg += 60;
	}
	return radians(deg);
	}

	int rmin = len * -0.1;
	int rmax = len * 0.1;

	int fuzzy(int i) {
	return i + random(rmin, rmax);
	}
	</script>
	<style type="text/css">
	* { margin: 0px; padding: 0px; }
	body { text-align: center; }
	</style>
	</head>
	<body>
	<canvas id="processing-canvas"></canvas>
	<p>Applicaiton </p>
	</body>
	</html>