※初心者 複数の図形を同時に動かす方法が知りたいです

Question

実現したいこと

超簡易的なロボットをつくったのですが、このロボットを左上端から右上端までまっすぐ移動し、そのまま右下端まで下がるというのをしてみたいのですがどのようにすればいいのでしょうか。
複数の図形を動かす方法が、調べても難しくてわからないです。
よろしくお願いいたします。

ロボット
size(500,500);
rect(1,1,10,8);
rect(3,9,5,5);
rect(1,14,10,15);
rect(1,29,3,10);
rect(8,29,3,10);

発生している問題・分からないこと

上記の通りです。宜しくお願い致します。

該当のソースコード

特になし

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

上記の通りです。宜しくお願い致します。

補足

特になし

Answer 1

複数の図形を同時に動かす方法が知りたいです

まず動きのあるスケッチ（コード）は、setupとdrawが必要です。
setupは初回に１回だけ、drawは毎フレーム（１秒間に60回）実行されます。
Processing Overview / Processing.org

こういう形になります。

void setup() {
  size(500, 500);
}

void draw() {
  background(255); // パラパラまんがのようにぜんぶけす

  rect(1, 1, 10, 8);
  rect(3, 9, 5, 5);
  rect(1, 14, 10, 15);
  rect(1, 29, 3, 10);
  rect(8, 29, 3, 10);
}

このロボットを左上端から右上端までまっすぐ移動

動くということは変化する値を覚えておく変数が必要です。
変数の値を徐々に増やしていき、図形のＸ座標に足していけば右に移動しているように見えます。

int x; // へんすう（はじめはゼロ）

void setup() {
  size(500, 500);
}

void draw() {
  background(255);
  
  rect(1 + x, 1, 10, 8); // しかくをかくＸざひょうにへんすうをたす
  rect(3 + x, 9, 5, 5);
  rect(1 + x, 14, 10, 15);
  rect(1 + x, 29, 3, 10);
  rect(8 + x, 29, 3, 10);
  
  x++; // xを１ふやす
}

そのまま右下端まで下がるというのをしてみたいのですがどのようにすればいいのでしょうか。

↑ではそのまま行き過ぎてしまうので、どこかで止めなくてはなりません。
xを増やすのをやめた時、今度はyを増やしていきます。

int x, y;

void setup() {
  size(500, 500);
}

void draw() {
  background(255);

  rect(1 + x, 1 + y, 10, 8);
  rect(3 + x, 9 + y, 5, 5);
  rect(1 + x, 14 + y, 10, 15);
  rect(1 + x, 29 + y, 3, 10);
  rect(8 + x, 29 + y, 3, 10);

  if (x < 488) // xが488いかなら...
    x++;
  else // そう（xが488いか）でなければ...
    y++;
}

今度は下に行き過ぎてしまいました。
yもどこかで止めるように条件を追加します。

int x, y; // へんすう

void setup() {
  size(500, 500);
}

void draw() {
  background(255);

  rect(1 + x, 1 + y, 10, 8);
  rect(3 + x, 9 + y, 5, 5);
  rect(1 + x, 14 + y, 10, 15);
  rect(1 + x, 29 + y, 3, 10);
  rect(8 + x, 29 + y, 3, 10);

  if (x < 488)
    x++;
  else if (y < 460) // そう（xが488いか）でなく  yも460いかなら...
    y++; // yを１ふやす
}

複数の図形を動かす方法が、調べても難しくてわからないです。

すべての四角にx・yを足すのは面倒なので、translateを使うと１回で済みます。
translate() / Reference / Processing.org
2D Transformations / Processing.org

---

図形がぐるぐる回るようにするにはどうしたらいいでしょうか？

ヒントは２つの条件を満たしたときに、上下左右どこに動かすか決めることです。
&& (logical AND) / Reference / Processing.org

?にどんな数字を入れればいいか考えてみてください^^

int x, y;

void setup() {
  size(500, 500);
}

void draw() {
  background(255);

  translate(x, y);

  rect(1, 1, 10, 8);
  rect(3, 9, 5, 5);
  rect(1, 14, 10, 15);
  rect(1, 29, 3, 10);
  rect(8, 29, 3, 10);

  if (x < 488 && y == ?)
    x++;
  else if (y < 460 && x == ?)
    y++;
  else if (0 < x && y == ?)
    x--;
  else if (0 < y && x == ?)
    y--;
}

---

もっと複雑な動きや直感的な記述をしたい場合は、ライブラリの使用も検討してください（使い方を調べる等別の難しさはありますが^^;

1. メニューの「スケッチ」ー「ライブラリをインポート...」ー「Manage Libraries…」を選択
2. Contribution Managerで「Ani | A lightweight library」を選択
3. Installボタンを押す

Ani - An animation library for Processing

import de.looksgood.ani.*; // Aniライブラリを使う

int x, y;
AniSequence seq; // 一連のアニメーション

void setup() {
  size(500, 500);

  Ani.init(this); // Aniライブラリの初期化
  Ani.setDefaultEasing(Ani.LINEAR); // 等速運動
  Ani.setDefaultTimeMode(Ani.FRAMES); // 基準をフレーム単位に

  seq = new AniSequence(this); // 一連のアニメーション作成

  seq.beginSequence(); // 一連のアニメーション設定開始
  seq.add(Ani.to(this, 488, "x", 488)); // 488フレームかけてxを488に近づける
  seq.add(Ani.to(this, 460, "y", 460)); // ↑が終わったら次の動作
  seq.add(Ani.to(this, 488, "x", 0));
  seq.add(Ani.to(this, 460, "y", 0));

  // 斜めに動かしたいようなときはこう書いてもｏｋ
  //seq.add(Ani.to(this, 488, "x:488,y:0"));
  //seq.add(Ani.to(this, 460, "x:488,y:460"));
  //seq.add(Ani.to(this, 488, "x:0,y:460"));
  //seq.add(Ani.to(this, 460, "x:0,y:0"));
  seq.endSequence(); // 一連のアニメーション設定終了

  seq.start(); // 一連のアニメーション動作開始
}

void draw() {
  if (seq.isEnded()) // 一連のアニメーションが動作終了していたら...
    seq.start(); // 再スタート

  background(255);
  translate(x, y);
  rect(1, 1, 10, 8);
  rect(3, 9, 5, 5);
  rect(1, 14, 10, 15);
  rect(1, 29, 3, 10);
  rect(8, 29, 3, 10);
}

Comments

[1203kana]

こんなにわかりやすく解説してくださりありがとうございます！
他のことにも繋がりそうな基礎をしっかり学べて嬉しい限りです。
ありがとうございました！