[Work/Class/Web基礎/p5_basic]

P5.jsの基礎

P5.jsの基礎

P5.jsとは，ProcessingをJavaScriptで書けるようにしたものである．

ProcessingのコードをP5.jsに移植する

移植する際に注意するのは以下の3点である．

  1. JavaScriptには変数の型がないので，intやfloatを「var」に直す．
  2. 関数ブロックの頭の返り値の型を示す「void」を，JavaScriptの関数定義である「function」に直す．
  3. コード内でHTMLのCanvasを生成して，その中にProcessingを描画する仕組みのため，setup()の中でCanvasタグを生成する．

基本の基本 canvasタグを生成してclass名をつける．

JavaScriptファイルにsetup()とdraw()の関数を定義する．Processingでは， 

void setup(){ 関数の中身 }

と書いていたが，これを， 

function setup(){ 関数の中身 }

に直す．

setupの中では，Processingでの「size(横幅, 縦幅);」の代わりに， 

createCanvas(横幅, 縦幅);

を使い，canvasタグを生成する．

実際には，class名を指定するために，canvasを格納する何らかの変数(以下のコード例ではcanvasという名前の変数)を定義して，createCanvasの戻り値を格納しておき，その後 

canvas.class("myCanvas");

を実行して，生成したcanvasにクラス名をつけている．

以下がhtmlファイル「311_P5js_FirstP5.html」である．→動作確認ページ 

<!DOCTYPE html>
<!-- 311_P5js_FirstP5.html -->
<html lang="ja">
<head>
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta charset="utf-8" />
   <title>P5.jsの基本の基本</title>

   <!-- 絶対パス指定でネットから直接ライブラリを読み込む -->
   <script type="text/javascript"
              src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js">
   </script>
   
   <!-- 自分のP5.jsコードを読み込む -->
   <script type="text/javascript" src="./311_P5js_FirstP5.js">
   </script>
   </head>
   <body>

   </body>
</html>

以下がP5.jsを使って書いた対応するJavaScriptファイル「311_P5js_FirstP5.js」である． 

/* 311_P5js_FirstP5.js */

//canvasを格納する変数の定義
var canvas;

function setup(){
    // size(640, 480);に相当する
    canvas = createCanvas(640, 480);
    // この命令でhtml上にcanvasタグが自動的に挿入される．
    // 場所の指定ができない

    //Canvasのclassを指定する．
    canvas.class("myCanvas");

}

function draw(){
    if(mouseIsPressed){
	fill(0);
    }
    else{
	fill(255);
    }
    ellipse(mouseX, mouseY, 80, 80);
}

HTMLファイルの中でのcanvasの位置を指定

先の例では，htmlの全体にcanvasを生成したが，実際のWebサイトではP5を適用するcanvasの位置を決めたいことがほとんどである．

そこでhtmlファイルでcanvasを生成したい場所をdivで囲みidを振っておき，それをP5側で読んでそこにcanvasを生成するように指定する．具体的には， 

var canvas = createCanvas(640, 480);
canvas.parent("html側で指定したdivの名前");

以下がhtmlファイル「312_P5js_withDiv.html」である．→動作確認ページ 

<!DOCTYPE html>
<!-- 312_P5js_withDiv.html -->
<html lang="ja">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta charset="utf-8" />
    <title>P5.jsのCanvasの位置をDivで指定</title>
    
    <!-- 絶対パス指定でネットから直接ライブラリを読み込む -->
    <script type="text/javascript"
               src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js">
  </script>
    
    <!-- 自分のP5.jsコードを読み込む -->
    <script type="text/javascript" src="./312_P5js_withDiv.js">
    </script>
  </head>
  <body>
    <div id="header">
      <h1>ここはヘッダです</h1>
    </div>
    
    <!-- DivタグでCanvasの親となる要素を指定 -->
    <div id="P5Canvas">
      <p>
	ここがキャンバスになるdivです．
      </p>
    </div>
    
    
    <div id="footer">
      <p>
	ここがフッタです．
      </p>
    </div>
    
  </body>
</html>

以下が対応するJavaScriptファイル「312_P5js_withDiv.js」である． 

/* 312_P5js_withDiv.js */
var canvas;
function setup(){
    //size(640, 480);に相当する
    canvas = createCanvas(640, 480);
    //ただしこの命令でhtml上にcanvasタグが挿入される．
    canvas.parent("P5Canvas");
}

function draw(){
    if(mouseIsPressed){
	fill(0);
    }
    else{
	fill(255);
    }
    ellipse(mouseX, mouseY, 80, 80);
}

画像の描画

P5での画像の描画は，Processingと同じく，画像を格納する変数を用意しておいて，setup()で「loadImage("画像のの相対パス");」で画像を読み込み，draw()中で「image(格納した変数, 描画するx位置, 描画するy位置);」で指定するだけである．

相対パスは，JavaScriptファイルからの相対パスではなく，そのJavaScriptファイルを読み込むHTMLファイルからの相対パスであることに注意．

「tint(グレイスケールの値(通常最大値), 半透明の値);」でそれ以降に描画する画像の透明度を指定することができる． (tintは引数を様々指定でき，画像の色変更全体を指定することができるが，ここでは透明化のみに使用している)

画像は基本的にAJAXを使って読み込むため，Cross-Originの問題などから同じドメインに限定される．またhttpやhttps経由でWebサーバから読み込み実行しないと，読み込まれない．（要するにコンピュータの中のHTMLファイルをブラウザで開くと，実行されない．Webサーバに設置すること）

以下は，画像を描画する例のhtml「313_P5js_drawImage.html」である．→動作確認ページ 

<!DOCTYPE html>
<!-- 313_P5js_drawImage.html -->
<html lang="ja">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta charset="utf-8" />
    <title>P5.jsで画像を描画する</title>

    <!-- 絶対パス指定でネットから直接ライブラリを読み込む -->
    <script type="text/javascript" 
               src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js">
    </script>
    
    <!-- 自分のP5.jsコードを読み込む -->
    <script type="text/javascript" src="./313_P5js_drawImage.js">
    </script>
  </head>
  <body>
    
    <div id="P5Canvas">
    </div>
    
  </body>
</html>

以下は対応するJavaScriptファイル「313_P5js_drawImage.js」である． 

/* 313_P5js_drawImage.js */
var canvas;
// グローバル変数として画像ファイルを読み込む変数を宣言しておく
// ProcessingのPImage型
var myImage;

function setup(){
    //size(640, 480);に相当する
    canvas = createCanvas(640, 480);
    //ただしこの命令でhtml上にcanvasタグが挿入される．
    canvas.parent("P5Canvas");

    //RGB透過度をそれぞれ0~255の値に設定する．
    colorMode(RGB, 255, 255, 255, 255); 


    // setupの段階で画像を読み込んでおく
    // このjsファイルを読み込むhtmlファイルからの相対パスで記述
    // ここではhtmlファイルと同じフォルダ内にpng画像ファイルがあるという意味
    myImage = loadImage("./313_P5js_drawImage_kuroneko.png");

    // この画像の読み込み部分は基本的にAJAXを使っているので，
    // Webサーバに置かないと実行できない
}

function draw(){
    //枠線なし設定
    noStroke();

    //アニメーションのお約束 透明度0の白の四角で全体を描画する．
    fill(255, 255, 255, 0);
    rect(0, 0, width, height);

    //画像を読み込んだ変数名，左上の座標のx, y
    image(myImage, 0, 0);

    tint(255, 127); //これから描画する画像を半透過にする
    image(myImage, width/2, 0); //右に半分ずらして半透明の画像を描画


    fill(255, 255, 255, 127); //これから描画する図形を白で半透明にする．
    ellipse(mouseX, mouseY, 50, 50);
}