【Processing】ifの使い方【動作を無限に再生できるようになって楽しい】

2024年8月22日2024年8月23日

当ブログ記事には広告が含まれている場合があります

【Processing】ifの使い方【動作を無限に再生できるようになって楽しい】

URLをコピーしました！

ワタタク

今回の記事の目的は、Processingの「if」の使い方を調べ、実際に書くこと。そして、どのように使うのか理解すること

記事内のProcessingのバージョンは4.3。

動きのある画像は、GIF画像編集で無限再生されるようにしています。

【Processing】ifについて

Processingのifとは

プログラムを実行する行としない行を決めることができる
特定の条件が満たされている場合に動くようにできる
変数で動作をコントロールする
trueかfalseで結果がでるコードを書く必要がある
trueの場合に動作する
void setupとvoid drawなどと組み合わせ、動きのある作品をつくりたいときに主に使用

trueとfalseは、【Processing】演算子についてとコンソールでの確認方法の演算子で条件が合っていればtrue、間違っていたらfalseになる

ワタタク

ifを使った構文は条件式とも言います。

5 < 10という演算子を使って書き、条件が満たされているのか満たされていないのかで、コードの結果が変わることから条件式と言われているのでしょう。

【Processing】ifの書き方（構文）

ifの構文

if (条件式) {
コード
}

条件式の部分には、x > 10のような演算子を使った条件式を書きます。

【Processing】ifの実際の使い方【画像とコード付き】

ifを1つだけ使う例と、ifを3つ使う例を載せています。

【1】ifを1つだけ使う

ifを使い、楕円が端っこまで行けば、左端に戻るようにしている。

13行目から15行目がifの構文

float x = 0.0;

void setup() {
 size(1000, 1000);
 strokeWeight(30);
 fill(0, 0, 255, 30);
}

void draw() {
  background(255);
  ellipse(x, 700, 100, 150);
  x += 7;
  if(x > width) {
    x = 0;
  }
}

【2】ifを3つ使う

ifを3つ使い、xが0～500の位置では楕円、501～1000の位置では四角形が表示され、右端までいけば左端に戻るようにしている。

12行目～20行目がifの構文。

float x = 0.0;

void setup() {
 size(1000, 1000);
 strokeWeight(30);
 fill(0, 0, 255, 30);
 rectMode(CENTER);
}

void draw() {
  background(255);
  if(x < 500) {
  ellipse(x, 700, 100, 150);
  }
  if(x > 500) {
    rect(x, 700, 200, 200);
  }
  if(x > width) {
    x = 0;
  }
  x += 20;
}