[Work/Class/ES2015で動的Webアプリ/es2015_basic]

ES2015準拠でP5.jsのインスタンスモード

P5.jsのインスタンスモード

P5.jsは強制的にsetup()やdraw()などの名前のついた関数をグローバルの名前空間に作ってしまうため，せっかくES2015で追加されたローカルスコープを有効に使えない．そこでP5.jsにあるインスタンスモード(P5.jsのインスタンスを生成するためグローバルの名前空間を汚さない)を使う．

コード例

BallはJava版Processingと同じく，単体のクラスとして宣言し，そのインスタンスを生成し表示している．

ES2015準拠でP5.jsのインスタンスモード - 動作確認ページ 

<!DOCTYPE html>
<!-- P5InstanceMode.html -->
<html lang="ja">
<head>
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta charset="utf-8" />
   <title>ES2015準拠でP5.jsのインスタンスモード</title>

   <!-- 絶対パス指定でネットから直接ライブラリを読み込む -->
   <script type="text/javascript"
              src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.8/p5.js">
   </script>
   
   <!-- 自分のP5.jsコードを読み込む -->
   <script type="text/javascript" src="./P5InstanceMode.js">
   </script>
   </head>
   <body>
     <div id="P5Canvas">
     </div>
   </body>
</html>
// P5InstanceMode.js
class Ball{
    constructor(width, height){
	this.canvasWidth = width;
	this.canvasHeight = height;

	this.xPos = Math.floor(Math.random() * this.canvasWidth);
	this.yPos = Math.floor(Math.random() * this.canvasHeight);

	if(Math.random() > 0.5)
	    this.xDirection = 1;
	else
	    this.xDirection = -1;

	if(Math.random() > 0.5)
	    this.yDirection = 1;
	else
	    this.yDirection = -1;
    }

    updateParameter(){
	this.xPos += this.xDirection * 5;
	this.yPos += this.yDirection * 5;

	if(this.xPos > this.canvasWidth)
	    this.xDirection = -1;
	else if(this.xPos < 0)
	    this.xDirection = 1;

	if(this.yPos > this.canvasHeight)
	    this.yDirection = -1;
	else if(this.yPos < 0)
	    this.yDirection = 1;
    }

    getPosition(){
	return [this.xPos, this.yPos];
    }
}

window.addEventListener('load', function(){
    let myP5Functions = function(p5js){
        let ballArray = [];
	
	p5js.setup = function(){
	    p5js.canvas = p5js.createCanvas(640, 480);
	    p5js.canvas.parent("P5Canvas");
	    
	    p5js.colorMode(p5js.RGB, 255);
	    
	    for(let i=0; i<10; i++)
	       ballArray.push(new Ball(p5js.width, p5js.height));
	 };

	 p5js.draw = function(){
	     p5js.fill(255, 255, 255, 60);
	     p5js.rect(0, 0, p5js.width, p5js.height);
	
	     for(let i=0; i<10; i++){
	         p5js.fill(60, 60, 60);
		 ballArray[i].updateParameter();
		 let point = ballArray[i].getPosition();
		 p5js.ellipse(point[0], point[1], 30, 30);
	     }
	 };
    }
    const myP5Instance = new p5(myP5Functions);
}, false);