[Work/Class/Web基礎/3_P5]

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.5.8/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.5.8/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("画像のURL");」で画像を読み込み,draw()中で「image(格納した変数, 描画するx位置, 描画するy位置);」で指定するだけである.

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

なお画像の読み込みに関しては,Cross-Origin Resource Sharing Policyの問題があるため,Chromeでローカル画像を読み込み可能にする設定を行っておく必要がある.

以下は,画像を描画する例の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.5.8/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;
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の段階で画像を読み込んでおく
    myImage = loadImage("https://www.google.co.jp/images/srpr/logo11w.png");
}

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