[Work/Class/Web基礎/p5_basic]

P5.jsとJavaScriptの機能の連携とJavaScriptの関数

P5.jsとJavaScript

P5.jsはただのJavaScriptのライブラリなので，Processingの機能からJavaScriptの機能を使うことができる．

Processingで使っていたマウスイベントを取得する関数ブロック「void mousePressed(){ }」も，そのまま「function mousePressed(){ }」として利用でき，またその時点でのマウス座標を示す変数「mouseX」「mouseY」もそのまま利用できる．

以下の例では，JavaScriptの強制リンク飛ばし機能「location.href = "飛ばしたいURL";」を，mousePressed内から呼び出して，P5でのリンクを実現させている．

以下は「P5js21_withJSFunction.html」である． 

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta charset="utf-8" />
   <title>P5.jsからJavaScriptの機能を呼び出す</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="./P5js21_withJSFunction.js">
   </script>
</head>
<body>

   <div id="P5Canvas">
   </div>

</body>
</html>

以下は対応する「P5js21_withJSFunction.js」である． 

//グローバル変数
window.canvas;

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

    //カラーモードはRGBにして値の範囲を0~255に設定する．透過度も最大値255．
    colorMode(RGB, 255, 255, 255, 255);
}

function draw(){
    noStroke(); //枠線なしの描画モード

    fill(255, 255, 255); //白
    rect(0, 0, 640, 480); //画面のリフレッシュ(アニメーションの時のお約束)

    fill(255, 0, 0); //左半分を赤の四角で埋める
    rect(0, 0, 320, 480);

    fill(0, 255, 0); //右半分を緑の四角で埋める
    rect(320, 0, 640, 480);
}

function mousePressed(){
    //クリックイベントが発生した時
    if(mouseX > 320){
	//もしクリックした場所が右半分(緑の場所)だったら
	location.href = "http://www.yahoo.co.jp";
	//Yahooジャパンのトップページに飛ばす
    }
    else{//それ以外の場所をクリックしたら
	location.href = "http://www.google.com";
	//Googleに飛ばす
    }

    //ただしマウスイベントはCanvasサイズの外でも有効になってしまうことに注意．
}

JavaScriptの関数

これまでも「function」は使ってきたが，これはJavaScriptで処理をまとめて記述するブロックで「関数」と呼ぶ．

関数は以下のように定義し， 

function 任意でつける関数の名前(){ 処理のまとまり }

以下のように呼び出す． 

任意でつける関数の名前();

以下の例では，Yahooに飛ばす関数gotoYahooと，Googleに飛ばす関数gotoGoogleを定義し，mousePressedで呼び出している．

この例のhtml「P5js22_withJSFunction_DefFunc.html」は以下の通り． 

<!DOCTYPE html>
<!-- P5js22_withJSFunction_DefFunc.html -->
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta charset="utf-8">
      <title>P5.jsからJavaScriptで定義した関数を呼び出す</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="./P5js22_withJSFunction_DefFunc.js">
      </script>
  </head>
  <body>

    <div id="P5Canvas">
    </div>

  </body>
</html>

対応する「P5js22_withJSFunction_DefFunc.js」は以下の通り． 

var canvas;

function gotoYahoo(){
    //Yahooに飛ばす関数を定義する
    location.href = "http://www.yahoo.co.jp";
}

function gotoGoogle(){
    //Googleに飛ばす関数を定義する
    location.href = "http://www.google.com";
}


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

    //カラーモードはRGBにして値の範囲を0~255に設定する．透過度も最大値255．
    colorMode(RGB, 255, 255, 255, 255);
}

function draw(){
    noStroke(); //枠線なしの描画モード

    fill(255, 255, 255); //白
    rect(0, 0, 640, 480); //画面のリフレッシュ(アニメーションの時のお約束)

    fill(255, 0, 0); //左半分を赤の四角で埋める
    rect(0, 0, 320, 480);

    fill(0, 255, 0); //右半分を緑の四角で埋める
    rect(320, 0, 640, 480);
}

function mousePressed(){
    //クリックイベントが発生した時
    if(mouseX > 320){
	//もしクリックした場所が右半分(緑の場所)だったら
	//Yahooジャパンのトップページに飛ばす関数を呼び出す
	gotoYahoo();
    }
    else{//それ以外の場所をクリックしたら
	//Googleに飛ばす関数を呼び出す
	gotoGoogle();
    }

    //ただしマウスイベントはCanvasサイズの外でも有効になってしまうことに注意．
}

画像をマウスクリックでDivを書き換え

document.getElementByIdを使って，マウスイベントクリックした場所に対応するメッセージを，特定のdivの中身を書き換えて表示する．

→画像をマウスクリックでDivを書き換える動作確認ページ 

<!DOCTYPE html>
<!-- image_ajax_rewrite_div.html -->
<html lang="ja">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta charset="utf-8" />
    <title>P5.jsで画像をAJAX的に読み込み，マウスイベントをマッピングする</title>

    <!-- ネットから直接P5.jsのライブラリを読み込む -->
    <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="./image_ajax_rewrite_div.js">
    </script>

  </head>
  <body>
    <!-- ここにキャンバスが来る -->
    <div id="P5Canvas">
    </div>

    <div id="MessageDiv">
      <p>
	ここのDivの中身が書き換わる．
      </p>
    </div>
  </body>
</html>
// image_ajax_rewrite_div.js

// これから使うグローバル変数
window.canvas;
window.myImage;

function setup(){
    window.canvas = createCanvas(640, 480);
    window.canvas.parent("P5Canvas");

    colorMode(RGB, 255);

    // 画像をAJAXで読み込む
    // 画像はこのJSファイルを読み込んで実行するhtmlと同じ階層にある
    // ちなみにこの画像は640*480サイズに既に整えてある
    window.myImage = loadImage("./mini_kurone.png");
}

function draw(){
    noStroke();
    
    // 画像を左上0, 0を基準に描画
    image(window.myImage, 0, 0);

    // マウスポインタ用の半透明の丸を表示
    fill(255, 255, 255, 127);
    ellipse(mouseX, mouseY, 20, 20);
}


function mousePressed(){
    if(mouseY < 120){
	document.getElementById("MessageDiv").innerHTML = 
	    "<p>2歳まで野良だったので，耳カットがあるよ</p>";
    }
    else if(mouseY < 300){
	document.getElementById("MessageDiv").innerHTML =
	    "<p>つぶらなおめめがとってもキュート！</p>";
    }
    else{
	document.getElementById("MessageDiv").innerHTML = 
	    "<p>1本だけ白のおひげがあるのがキュート！</p>";
    }
}

関数の引数と返り値

関数には，引数(ひきすう，ひきかず)と呼ばれるオプションを与えることができる．この引数は「変数」である．

定義の時点で， 

function 関数の名前(引数1, 引数2, 引数3....){ }

とし，functionの中でその引数の変数をそのまま用いることができる．引数の数は任意である(全く指定しない時は今までのように括弧の中を空にし，任意の数まで増やすことができる)．関数を呼び出すときに， 

関数の名前(引数1, 引数2, 引数3....);

と指定することで，引数を与えた状態で関数を呼び出すことができる．

また，関数の最後に「return 変数名;」と書くことで，関数の中で処理した値を，呼び出し元に返すことができる．これを「返り値」または「戻り値」と呼称する．

以下の例では，「gotoOtherWebSiteWithAlert」という，引数を二つ取る関数を一つ定義し，そこに与えられる引数siteFlagが0か1かでYahooに飛ばすかを決めている．

さらに飛ばしたサイトの名前を，変数「goingSiteName」に入れておき，関数の最後で，"に飛ばしました！"という文字列と連結し，変数「returnValue」に入れて，呼び出し元に返している．

以下がhtml「P5js23_withJSFunction_Argument.html」である． 

<!DOCTYPE html>
<!-- P5js23_withJSFunction_Argument.html -- >
  <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="./P5js23_withJSFunction_Argument.js">
    </script>
  </head>
  <body>

    <div id="P5Canvas">
    </div>

  </body>
</html>

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

var canvas;

function gotoOtherWebSiteWithAlert(siteFlag, alertString){
    //alertString引数で渡された文字列のAlertを表示してから
    alert(alertString);

    //返り値を格納する変数．
    var goingSiteName; 
    if(siteFlag == 0){
	//もしsiteFlag引数が0だったらYahooに飛ばす
	location.href = "http://www.yahoo.co.jp";

	//返り値に文字列を入れる
	goingSiteName = "Yahoo";
    }
    else{
	//siteFlag関数が0以外だったらGoogleに飛ばす
	location.href = "http://www.google.com";

	//返り値に文字列を入れる
	goingSiteName = "Googl";
    }

    //返り値を返す

    var returningValue = goingSiteName + "に飛ばしました！";
    return returningValue;
}

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

    //カラーモードはRGBにして値の範囲を0~255に設定する．透過度も最大値255．
    colorMode(RGB, 255, 255, 255, 255);
}

function draw(){
    noStroke(); //枠線なしの描画モード

    fill(255, 255, 255); //白
    rect(0, 0, 640, 480); //画面のリフレッシュ(アニメーションの時のお約束)

    fill(255, 0, 0); //左半分を赤の四角で埋める
    rect(0, 0, 320, 480);

    fill(0, 255, 0); //右半分を緑の四角で埋める
    rect(320, 0, 640, 480);
}

function mousePressed(){
    //クリックイベントが発生した時

    //どこのサイトに飛ばすかのフラグ変数を宣言する．
    var siteFlag = 0;
    //返り値を格納する変数を宣言
    var returnedValue;

    if(mouseX > 320){
	//引数を0と"Yahooへ飛ばします"という文字数にして，関数を呼び出す．
	returnedValue = gotoOtherWebSiteWithAlert(0, "Yahooへ飛ばします");
	//戻り値をreturnedValue変数の中に格納
    }
    else{//それ以外の場所をクリックしたら
	//引数を1と"Googleへ飛ばします"という文字数にして，関数を呼び出す．
	returnedValue = gotoOtherWebSiteWithAlert(1, "Googleへ飛ばします");
	//戻り値をreturnedValue変数の中に格納
    }

    //returnValueの中身をalertで表示
    alert(returnedValue);
}