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
の中身を書き換えて表示する.
<!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);
}