masahitojp · January 25, 2011 10:51
diff --git a/gistfile1.html b/gistfile1.html
 <doctype html>
 <html>
  <head>
 	<script src="processing-1.0.0.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">  
 int x=0;                         //x座標の初期値を設定(グローバル変数)
 int speed=10;                    //速度を設定(グローバル変数)

 void setup(){
  size(400, 400);                //ウィンドウのサイズを決定（横幅、縦幅）
  colorMode(RGB,255);            //カラーモードを設定（モード、最大値）
  background(255,255,255);       //背景の色を指定（R,G,B）この場合は白
  frameRate(30);                 //フレームレートを設定(fps:frame per seconds)
 }


 void draw(){
  if(x > width || x < 0){
    speed = (-1) * speed;
  }else{
    noStroke();                    //線をなしに設定

    fill(255,255,255,100);         //塗りの色を白(背景色)に設定
    rect(0,0,width,height);        //背景色でウィンドウを塗りつぶす(ウィンドウをリセット)

    fill(50,50,50,255);
    ellipse(x,height/2,50,50);        //座標(x，height/2)に円を描画
  
  }
  x=x+speed;                     //描画後xをspeed(10)だけ増やす(次に描画する位置を10ピクセル動かす)
 }
 </script>
   </head>
  <body>
 <canvas id="processing-canvas"> </canvas>  
  </body>
 </html>
	<doctype html>
	<html>
	<head>
	<script src="processing-1.0.0.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">
	int x=0; //x座標の初期値を設定(グローバル変数)
	int speed=10; //速度を設定(グローバル変数)

	void setup(){
	size(400, 400); //ウィンドウのサイズを決定（横幅、縦幅）
	colorMode(RGB,255); //カラーモードを設定（モード、最大値）
	background(255,255,255); //背景の色を指定（R,G,B）この場合は白
	frameRate(30); //フレームレートを設定(fps:frame per seconds)
	}


	void draw(){
	if(x > width \|\| x < 0){
	speed = (-1) * speed;
	}else{
	noStroke(); //線をなしに設定

	fill(255,255,255,100); //塗りの色を白(背景色)に設定
	rect(0,0,width,height); //背景色でウィンドウを塗りつぶす(ウィンドウをリセット)

	fill(50,50,50,255);
	ellipse(x,height/2,50,50); //座標(x，height/2)に円を描画

	}
	x=x+speed; //描画後xをspeed(10)だけ増やす(次に描画する位置を10ピクセル動かす)
	}
	</script>
	</head>
	<body>
	<canvas id="processing-canvas"> </canvas>
	</body>
	</html>