p5.jsのtriangleの座標移動

Question

Javaのp5.jsを使って、

triangleを用いて
底辺のライン(50, 250, 350, 250)は変えずに三角形の1つの頂点(x,y)をvarで指定。

①y座標が250→100のところに上移動
②xが350→250のところに真左移動
③xが250→50、yが100→250のところに左下に斜め移動させ
最後は一本線に戻るようにしたいです。
xとyはグローバル関数で既に指定してます。

function draw{

triangle(50, 250, 350, 250, x, y);

        if (y >= 100) {
            y--;
        } else if (x >= 250) {
            x--;
        } else if (x >= 50 && y <= 250) {
            x--;
            ★y++; //++だとなぜ動かないの
        }

★この辺りをどう変えれば最後左下斜めに移動させもとの(50, 250)の線に戻すことが出来るのでしょうか。

Answer 1

javascriptも逐次実行型の言語の御多分にもれず「書いてある順番に上から下へ実行される」というのが基本的な動きです。p5.jsはProcessingのjavascript版ですね。Processingはアニメーションを簡単に実装できるよう、draw関数をある間隔で自動的に呼び出してくれます。呼び出される度にdraw関数の定義内容は「上から下へ順番に実行される」という点を把握しておかなければならないのが本件のポイントかなと思います。

最後のif文の条件が成立したときのx, yの動きを考えてみてください。
初めてこのif文が実行される際にはx = 250, y = 100になっているはずです。ここでx--, y++とするとx = 249, y = 101になります。それゆえ次のdrawの実行では最初のif文の判定が成立してしまい意図した動きにはなりません。

こういう論理を作る際には

「まず第一段階ではyを100へ移動」その段階が終わったら次の段階へ進む
「第二段階ではxを250へ移動」その段階が終わったら次の段階へ進む
・・・

という具合に「段階を進めながらその段階ですべきことだけをする」と考えます。

コーディングの仕方は様々ですが一例を挙げます。(switch文のbreakの書き方が気持ち悪いと感じる向きが多いと思います。我ながら気持ち悪いです)

// requies p5.min.js
let x, y, stage

function setup() {
  createCanvas(400, 400);
  [x, y] = [50, 250]
  stage = 1
}

function draw() {
  if (stage <= 3) {
    // 背景をクリア
    fill(220)
    noStroke()
    rect(0, 0, 400, 400)

    // 三角形を描画
    stroke(0)
    triangle(50, 250, 350, 250, x, y)

    // 頂点座標を段階に応じて移動
    switch (stage) {
      case 1:
        if (y >= 100) {
          y--
          break
        }
        stage++
      case 2:
        if (x <= 200) {
          x++
          break
        }
        stage++
      case 3:
        if (x >= 50 && y <= 250) {
          x--
          y++
          break
        }
        stage++
    }
  }
}

(ES2015前提)

なお元のコードのif文の条件では「もとの(50, 250)の線に戻す」というふうにはならないので、移動の仕方を適当に変えてます。

---

switch文は使わず各段階ですべきことを関数にすると考えた方がスッキリする場合もあると思います。

const operations = [stage1, stage2, stage3]
let x, y, stage = 0

...

function draw() {
  if (stage < operations.length) {
    // 描画など
    ...
    if (!operations[stage]()) {
      stage++
    }
  }
}

function stage1() {
  if (y >= 100) {
    y--
    return false // 現在の段階がまだ続くならfalse
  } else {
    return true  // 次の段階へ移行するならtrue
  }
}

Comments

[退会済みユーザー]

帰省していたためパソコンが使えず、返事が遅くなってしまいました。申し訳ないです(TT)
解決しました。感謝致します！
ありがとうございました。