Q&A
あなたが質問している内容はJavaScriptのものであり, Javaではありません. またjQueryを使ってもいません. タグの修正をお願いいたします.
p5.jsを利用しています。
mouseClicked関数についてです。
最終的にはマウスクリックで点(アニメーション)が止まり、もう一度クリックすると動きだすプログラムを完成させたいです。
mouseClickedで機能させるには
①function setupの上でtrueかfalse指定
②ifで指定したものをfunction setupの中で呼びだして、｛｝の中にクリック後に行いたい処理(今回はy--等)
③function mouseClickedで呼び出した後の処理if (clicked)のあとに書く
と理解しています。
今回の目的ではないですが、
文字を増やすことは出来ました。
var x = 10, clicked = false function setup() { createCanvas(100, 100); } function draw() { if (clicked) { text("clicked", x, 10) y += 30 clicked = false } } function mouseClicked() { clicked = true }
ここからは、以下のプログラムについてですが、コメントの★の部分mouseClicked関数を制御している箇所だと私は思っています。
エラーは出ないですが、mouseClicked関数が理解しきれていなくて間違った階層になっているため以下ではまだ機能しないです。
今理解している①〜③の何処が違うのでしょうか？または、以下のプログラムの中ではなぜ機能しないのですか？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.min.js"> /*p5.js使用*/ </script> </head> <body> <script> var x, y, stage, photo; //グローバル関数にしておく x = 350; y = 250; clicked = true; //はじめに指定★ function setup() { //はじめの1回だけ実行 createCanvas(640, 480); photo = loadImage("siro.jpg"); //背景 frameRate(100); //速さ10 ugoki = 1; } function draw() { if (ugoki <= 3) { //動き(ugoki)が3になるまで image(photo, 0, 0, width, height); //背景 line(50, 250, 350, 250); line(350, 250, 350, 100); line(350, 100, 250, 100); line(250, 100, 50, 250); //四角ライン fill(100); //三角形の背景(灰色) triangle(50, 250, 350, 250, x, y); //三角形 switch (ugoki) { case 1: //1回目の動き if (y >= 100) { if (clicked) { // if (clicked==true)と同じ★ y--; } break; ugoki++; //1→2 } case 2: //2回目の動き if (x >= 250) { x--; break; } ugoki++; //2→3 case 3: //3回目の動き if (x >= 50 && y <= 250) { x = x - 1.3; y++; break; } ugoki++; //3→4(上のifで3までの条件指定のため動か ない) } } } function mouseClicked() { //クリックで呼び出される★ if (clicked) { clicked = false; } else { clicked = true; } } </script> </body> </html>
かしこまりました。教えて頂きありがとうございます。
回答3件
0
Processingでは時々遊んでいるのですが、P5.jsはいじったことがなくてこの機会に初めて突っついてみました。
p5.js
1var x, y, stage, photo; 2//グローバル関数にしておく 3x = 350; 4y = 250; 5clicked = true; //はじめに指定★ 6 7function setup() { //はじめの1回だけ実行 8 createCanvas(640, 480); 9 photo = loadImage("https://i1.wp.com/dognoie.com/blog/sagamihara/wp-content/uploads/sites/34/2017/06/IMG_6411-640x480.jpg"); //背景 //変更// 10 frameRate(100); //速さ10 11 ugoki = 1; 12} 13 14function draw() { 15 if (ugoki <= 3) { //動き(ugoki)が3になるまで 16 image(photo, 0, 0, width, height); //背景 17 line(50, 250, 350, 250); 18 line(350, 250, 350, 100); 19 line(350, 100, 250, 100); 20 line(250, 100, 50, 250); //四角ライン 21 fill(100); //三角形の背景(灰色) 22 triangle(50, 250, 350, 250, x, y); //三角形 23 24 switch (ugoki) { 25 case 1: //1回目の動き 26 if (y >= 100) { 27 if (clicked) { // if (clicked==true)と同じ★ 28 y--; 29 } 30 break; 31 ugoki++; //1→2 32 } 33 34 case 2: //2回目の動き 35 if (x >= 250) { 36 x--; 37 38 break; 39 } 40 ugoki++; //2→3 41 case 3: //3回目の動き 42 if (x >= 50 && y <= 250) { 43 x = x - 1.3; 44 y++; 45 46 break; 47 } 48 ugoki++; //3→4(上のifで3までの条件指定のため動か//連結//ない) 49 } 50 } 51} 52//独立// 53function mouseClicked() { //クリックで呼び出される★ 54 if (clicked) { 55 clicked = false; 56 } else { 57 clicked = true; 58 } 59}
3箇所いじっています。
・私の環境で動かすために画像ファイル名を変えた(Googleで'犬 640x480'で画像検索して最初にヒットしたもの)
・既に指摘があったmouseClickedを独立
・後半のコメント
//3→4(上のifで3までの条件指定のため動か
ない)
が途中で改行になっていたのを一体化
で動いている様子。(完全にあなたの意図通りかはわかりませんが)
途中で問題があってもエラーメッセージとか全然出ないのかなぁ。
さて。話が前に戻りますけれど、
mouseClickedで機能させるには
<略>
と理解しています。
う～ん、「理解」出来てますか? 理解できているのなら、クリック毎に変化の速度が変わるとか、三角形が赤->青->緑と色が変わるようにしてみる、とか出来ます?
プログラムが始まったら、適切に変数を配置し、必要なら初期化します。
このプログラムにおいて
①function setupの上でtrueかfalse指定
それも一つの方法ですが、例えば最初の変数をいくつか宣言しているところにclickedも加えて、setup関数の中で最初にそうであって欲しい値を設定してもかまいません。プログラム全体としての値を保持できるように宣言して、draw()の中で最初に値を参照するまでに適切な値が設定されていればOKです。
mouseClicked()は、(ちゃんと宣言すれば)とにかくマウスがクリックされたら呼び出されます。そこで、必要に応じて変数を変化させます。
③function mouseClickedで呼び出した後の処理if (clicked)のあとに書く
mouseClicedの中でif(clicked)としているのは、つまりマウスがクリックされたらclicked変数の値を反転させたいからです。それまでtrueだったらfalse,falseだったらtrueに変えたい...「たら」という言葉が出てきましたからif文の出番。
②ifで指定したものをfunction setupの中で呼びだして、｛｝の中にクリック後に行いたい処理(今回はy--等)
if文がなにかを「指定」することはありません。プログラムに「岐れ路」を提供するだけ。また、setup関数は全体の起動時に1度だけ呼び出されるものですから、あとの方にあるif文がsetupの動作に影響することはありません。
もうちょっと知識の整理が必要に思います。
投稿2018/03/25 04:55
編集2018/03/25 04:59退会済みユーザー
総合スコア0
知識を整理して、もう一度基礎からやりなおしてみます。すみません、全く知識がないままに学校でプログラミングの課題が出て、無理やり理解してたつもりでした。とてもわかりやすい回答ありがとうございます。
0
ベストアンサー
追加で気になったところを書きます。
switch文のbreak;の書いてある位置の問題もあるかもしれません。
break; は処理が終了しますので、その後ろは一切動かないですし、
break; が無い場合、次のcaseの中も処理が動きます。
想定されている処理通りになっているのか、不明な部分にコメントを入れました。
念の為に、switch文について補足です。
swich文は、最初に渡した「値」を判定して動作します。 ※変数ではなく、値です。変数を渡してもその「値」だけが判定されます。
ですので、switch文の処理の中で、渡した変数(ugoki)の値が変わったとしても、判定される「値」には影響しません。
javascript
1switch (ugoki) { 2 case 1: //1回目の動き 3 if (y >= 100) { 4 if (clicked) { // if (clicked==true)と同じ★ 5 y--; 6 } 7 break; 8 //※ ここを通ることはありません 9 ugoki++; //1→2 10 } 11 12 case 2: //2回目の動き 13 //※ ugoki == 1 でも、y > 100 だと、ここを通ります。 14 if (x >= 250) { 15 x--; 16 17 break; 18 } 19 ugoki++; //2→3 20 case 3: //3回目の動き 21 //※ ugoki == 1 でも、y > 100 かつ、x<250 だとここを通ります。 22 //※ ugoki == 2 でも、x<250 だとここを通ります。 23 if (x >= 50 && y <= 250) { 24 x = x - 1.3; 25 y++; 26 27 break; 28 } 29 ugoki++; //3→4(上のifで3までの条件指定のため動か 30ない) 31 }
投稿2018/03/25 02:43
編集2018/03/25 02:44
総合スコア1910
なるほど、実はswitch文が微妙な絡み方をして、かなりアクロバティックな動作ををしてます。よく動いたなぁ...
case 1: //1回目の動き
if (y >= 100) {
if (clicked) { // if (clicked==true)と同じ★
y--;
}
break;
}
ugoki++; //1→2
というところでしょうか。}の位置が違ってるんですね。
その通りですね。
間違っている箇所を教えて頂いた上、説明もわかり易く解説して頂き本当にありがとうございました。
想定していた処理通りになっています。コメントを入れてくださりありがとうございます。switch文、理解することが出来ました。
そうですか。ugokiが1のとき(つまり三角形の頂点が右端を移動している時)しかマウスクリックが効かなかったりするのはどうかなぁ? と思ったのですが、それで期待通りならそれでいいですね。
0
コードをぱっと見ただけで書きます！（p5.min.js は利用したことがありません^^;）
function draw() {}
の中に
function mouseClicked(){}
がいるから、ではないでしょうか？
投稿2018/03/23 06:10
総合スコア1910
それが1つの原因みたいです！
ありがとうございます。
ちなみにそれは質問者が別アカウントでしている別の質問で指摘してるが一向に直さない人なのである
気になる点が他にも見つけたのですが、コメントでコードをうまく表示する方法が分からなかったので。。。回答に書かせてもらいました・・！
あらま(´ﾟーﾟ｀)
確かに質問のコードも、インデントが変わっただけなので直ってはいないなぁとは思ったんですが・・ｗ
本当に自分の力不足で申し訳ないのですが、具体的にどこを直せばいいのかも理解が出来ていません。
すみません。理解できました。
ありがとうございます。
あなたの回答
tips
プレビュー
