Processingで描いた絵を動かそう！

今回やること

Processingで描いた絵を動かそう！

今回はProcessingで描いた絵を動かします！

動かすためには変数はもちろん、ずっとプログラムが動き続けるようにコーディングしなければなりません。
Processingでは絵を動かすために便利な書き方があるので、使いこなせるようにしましょう！

今回のポイント

今回のポイントは以下の3つです！

• void setup(){ }、void draw() {} の使い方
• Processingで用意されている変数
• 図形を描く前に行うべき処理

投稿主

1つ目のポイントがいきなり難しそうですが安心してください！
一緒に見ていきましょう！

ずっとプログラムを動かす

今までのプログラムと今回からの違い

今までのプログラムは、1回動かせば終わり。といったプログラムでした。
ですが、今回は停止させるまでずっと動くプログラムを書きます！

注意点として、⚠️プログラムを実行した後は、必ず停止するようにしてください！！
なぜなら、ずっとプログラムを動かすと、PCに負荷がかかって動作が重くなるためです。

Processingでプログラムを停止するには、「停止ボタン」を押せば大丈夫です！

setupとdraw

以下のコードを見てください。

println("setup"); は 一回だけ処理されていますが、
println("draw"); は何回も処理されていることがわかります。

ずっと動かしたいプログラムを書くときは、これらの書き方をしなければなりません。

なお、void や () 、{}の書き方は全く同じようにしてください！
後日解説しますが、これらは関数というものになります。
今は、ふ〜んこんな風に書くんだぁ。と思っておけば大丈夫です！

Processingの便利な変数

ここでProcessingで用意されている便利な変数をご紹介します。
これらを使うことで、柔軟にプログラムを書くことができるのでメモしておくことを推奨します！

上記の変数は宣言をしなくても使えます。
これらは後々使うので、覚えておきましょう！

実際に絵を動かす

必要な説明は一通り終えました。
最後に実際に絵を動かすプログラムを書いてみましょう！

準備

今回はひとまず円や四角形を動かしてみましょう！

円は、ellipse(x , y , 横幅 , 縦幅 )
四角形は、rect( 左上の頂点のx , 左上の頂点のy , 横幅 , 縦幅 )
でしたね。

描写位置を変えられるように int型の変数 x,yを用意し、以下のように書くと、
今まで通りの動かないプログラムができます。

int x = 10;
int y = 10;

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

void draw(){
  ellipse(x,y,20,20);
  rect(x-10,y+10,20,20);
}

動かす①

x,yの値を変えると、円と四角形の描写位置が変化しますね。
これらの値をプログラム上で動かすようにすると、無事に動くようになります。

x++;
y++;
のインクリメントの処理を追加してみましょう！

実際に動かしてみると、円と四角形が動いていきます。

しかし、円と四角形が動いた跡が残ってしまいますね。
プログラムの処理として、円と四角形を書くのみの処理なので、書いた後の処理は書いていないわけです。

したがって、跡を消したければ、新たに図形を描く前に、今まで描いた図形を消す処理を追加しなければなりません。

動かす②

draw(){}の先頭に、以下の処理を追加します。

background(0);

これは背景を指定した色で塗りつぶす処理です。
この処理を追加すると前に書いた図形を上から指定した色で塗りつぶすことができます。
プログラムは上から処理されるので、先頭に書かないと、描いた図形も塗りつぶしてしまうので注意です！

跡が消えましたね。
図形を描写する際は、背景で上書きする必要があることを覚えておきましょう！
※余談ですが、この方法はマリオ系の2Dゲームではメジャーな手法です。

おまけ

プログラムで値を変化させることができるので、動かす以外に色々な変化をさせることができます。
おまけとして一部載せておきます。

まとめ

いかがでしたでしょうか？
今回は絵を動かすためのコーディングをご紹介しました。
ポイントをおさらいしましょう！

特に3つ目はゲーム等を作るなら必須の考え方です！

これでかなりプログラムの幅が広がりました！
色々遊べると思うので、ぜひご自身でも遊んでみてくださいね！

投稿主

Take it easy！
お疲れ様でした！