hiroshi/processing_png.html

## processing_png.html
<!DOCTYPE html>
<html>
<head>
  <title>processing png</title>
  <script src="http://processingjs.org/content/download/processing-js-1.1.0/processing-1.1.0.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
</head>
<body>
  <div>
    <canvas width="0" height="0"></canvas> (Canvas)
  </div>
  <div>
    <img class="png" /> &lt;- Save or drag and drop this image as a file.
  </div>
  <form class="preview" action="javascript:void(0);">
    <div>
      <textarea rows="12" cols="60">
void setup() {
  int m = 4; // mergin
  int s = 16; // size
  size(s, s);
  // smooth(); // This can have meaning with orignal Java implementation of Processing
  strokeWeight(2);
  background(200);
  stroke(100);
  line(m, m, s - m, s - m);
  line(s - m, m, m, s - m);
  //save("close.png");
}
      </textarea>
    </div>
    <div>
      <input type="submit" value="update" />
    </div>
  </form>

  <script>
    function updateCanvasAndImg () {
      var canvas = $("canvas")[0];
      new Processing(canvas, $("textarea")[0].value);
      $("img.png").attr("src", canvas.toDataURL());
    }
    $("form").live("submit", updateCanvasAndImg);
    $(updateCanvasAndImg);
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>processing png</title>
	<script src="http://processingjs.org/content/download/processing-js-1.1.0/processing-1.1.0.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
	</head>
	<body>
	<div>
	<canvas width="0" height="0"></canvas> (Canvas)
	</div>
	<div>
	<img class="png" /> <- Save or drag and drop this image as a file.
	</div>
	<form class="preview" action="javascript:void(0);">
	<div>
	<textarea rows="12" cols="60">
	void setup() {
	int m = 4; // mergin
	int s = 16; // size
	size(s, s);
	// smooth(); // This can have meaning with orignal Java implementation of Processing
	strokeWeight(2);
	background(200);
	stroke(100);
	line(m, m, s - m, s - m);
	line(s - m, m, m, s - m);
	//save("close.png");
	}
	</textarea>
	</div>
	<div>
	<input type="submit" value="update" />
	</div>
	</form>

	<script>
	function updateCanvasAndImg () {
	var canvas = $("canvas")[0];
	new Processing(canvas, $("textarea")[0].value);
	$("img.png").attr("src", canvas.toDataURL());
	}
	$("form").live("submit", updateCanvasAndImg);
	$(updateCanvasAndImg);
	</script>
	</body>
	</html>