マウスクリックを機能させるには

https://teratail.com/questions/118697
学校で使用しているメールアドレスがメンテナンス中だったため、同じ内容の質問をさせて頂いています。

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>

退会済みユーザー

2018/03/24 14:23

前回の質問でいった階層がおかしいのは調べてないのですか?

退会済みユーザー

2018/03/24 14:33

https://teratail.com/questions/118697

退会済みユーザー

2018/03/24 14:33

https://teratail.com/questions/118451

退会済みユーザー

2018/03/24 15:30

階層が正常に動作しないのでおかしいのは承知です。上記の質問のように、マウスクリック関数について①~③のように理解しています。何度も色々な自分なりの階層にして試してみたのですがその理解自体が間違っているのも分かっています。自分の理解の何処が違うのかがどなたか様に教えていただきたいと思い質問させていただきました。質問の答えは、階層についても調べましたが、調べた結果正常に機能させることが出来ませんでしたので自分の理解のどこが間違っているかをどなたか様に教えていただきたかった、です。

行動規範の内容に同意します

回答1件

ベストアンサー

まずp5.js(というよりProcessingかな...)の思想の基本を理解できてない印象なのでちょっとだけ説明を試みます。Processingのプログラムは次のように動きます。

(A) setup関数が動くのは最初の一回だけ(p5.jsでいえばページがロードされたとき)
(B) draw関数はページが表示されている状態で自動的に何度も呼び出される
(C) mouseClickedはユーザーがマウスをクリックした際に自動的に呼び出される

setupもdrawもmouseClickedも「p5.jsがあなたの代わりに適切なタイミングで自動的に起動する関数」です。関数を定義するのはあなたですが、その関数がどういうタイミングで呼び出されるかをよく把握し、それぞれの関数で何をすべきかをイメージすることが大事です。

上記に着目してご質問の内容にコメントいたしますと・・・

①function setupの上でtrueかfalse指定
②ifで指定したものをfunction setupの中で呼びだして、｛｝の中にクリック後に行いたい処理(今回はy--等)

①のtrue/falseがマウスがクリックされたかどうかを意味するなら、それをsetupでやることに意味はありません。setupは最初に一度しか呼び出されず、ユーザーがマウスをクリックしたときにはsetupの実行はとっくにおわってますので。setupは単に画面の初期化をするためだけの目的に用います。

③function mouseClickedで呼び出した後の処理if (clicked)のあとに書く

mouseClickedは「マウスがクリックしたことをどこかに記録するだけ」しかやらないのが普通です。定期的に呼び出されるのはdrawの方ですので、drawで「今何回マウスがクリックされた状態なのか」あるいは「前回drawが呼び出されてから、今回呼び出されるまでの間にマウスがクリックされたかどうか」をチェックしてそれに応じてしかるべき処理（アニメーションするかどうか）を考えることになります。

投稿2018/03/24 15:06

編集2018/03/24 16:35