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

P5.jsで日本語文字列を表示する

P5.jsは日本語文字列をそのまま表示可能

Java版Processingに対して，P5.jsの最大のメリットとして「日本語テキストをそのまま表示可能」というという特徴がある．

コード例

前項で行った，P5.jsのインスタンスモードとES2015のクラス定義を使って，BounceTextというクラスを作り，BounceBallと同じように動かしている．

P5.jsで日本語文字列を表示する - 動作確認ページ 

<!DOCTYPE html>
<!-- TextInP5.html -->
<html lang="ja">
<head>
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta charset="utf-8" />
   <title>P5.jsでCanvas上にテキストを表示する</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="./TextInP5.js">
   </script>
   </head>
   <body>
     <div id="P5Canvas">
     </div>
   </body>
</html>
// TextInP5.js

class BounceText{
    constructor(width, height, textString, textSize){
	this.canvasWidth = width;
	this.canvasHeight = height;
	this.textString = textString;
	this.textSize = textSize;

	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];
    }

    getTextString(){
	return this.textString;
    }

    getTextSize(){
	return this.textSize;
    }
}

window.addEventListener('load', function(){
    let myP5Functions = function(p5js){
        let textArray = [];	
	
	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++)
		textArray.push(
		    new BounceText(p5js.width, p5js.height, 
				  "テキスト"+i, 20+i*2));
	 };
	
	 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);
		 textArray[i].updateParameter();
		 p5js.textSize(textArray[i].getTextSize());
		 let point = textArray[i].getPosition();
		 p5js.text(textArray[i].getTextString(), point[0], point[1]);
	     }
	 };
    }
    const myP5Instance = new p5(myP5Functions);
}, false);