Processing入門｜アニメーションについて解説

「図形を動かす方法を知りたい」

「作った図形を回転させたい」

この記事は、そんな疑問を持つ方に向けて書いています。

コードや結果を紹介してわかりやすく説明します。

また、図もありますので初心者にも理解しやすいですよ♪

私が大学や本で学んだことを、簡単にまとめてみました！

動かすための前知識
動かし方
1. 図形の座標を変えていくことで動かす方法
2. translate()関数やrotate()関数で座標系を動かす方法
まとめ

動かすための前知識

processingはものを描画するとき、どのようにディスプレイに表示しているのでしょうか。

答えは、「1秒間に60回画面に表示させている」です。

これまで「draw(){}」内で描いてきたものは、全て1秒間に60回表示されていたのです。

void draw(){
   println(frameRate);
}

このコードを書くことで、「draw(){}」内で実行されている速度を表示させることができます。

例えば、「59.87…」だと1秒間に59~60回の速度で画面に表示させていることがわかります。

また、「frameRate()」関数を使うことで、実行するスピードを変更することもできます。

例えば、

void setup(){
frameRate(30);
}

と書くと、1秒ごとに30回表示させ、何も書かなかったときと比べると半分くらいの速度で動くことがわかります。

動かし方

動かし方には基本的に2種類あります。

図形の座標を変えていくことで動かす
translate()関数やrotate()関数で座標系を動かす

図形の座標を変えていくことで動かす方法

それでは先に、図形の座標を変えていくことで動かす方法を紹介します。

配列の際に例として出した魚のコードを、改良して動かし方を説明したいと思います。

void setup(){
  frameRate(10);
  size(600,600);
  noStroke();
  fill(255,200);
  for(int i=0; i<x.length;i++){
   x[i]=random(-100,100);
  }
}

void draw(){
  background(0);
  for(int i=0; i<x.length;i++){
    x[i]=x[i]+0.5;
    float y=i*30;
  triangle(x[i],y,x[i]-20,y-10,x[i]-20,y+10);
  quad(x[i]+60,y,x[i]+30,y-10,x[i],y,x[i]+30,y+10);
  }
}

3つのステップで説明します。

frameRateを決める

まずframeRateを決めて、「void setup」の中に書き込みます。

1秒間に60回表示させるのでよければ、書かなくて大丈夫です。

図形をどのように動かしたいか決める

今回は、左から右に向かって動かしたいので、x座標を変数にします。

「x[I]」で魚一つ一つのx座標を決めます。

図形の速度を決める

変数に足す数値の大きさで動く速さが決まります。

今回は「x[i]=x[i]+0.5;」でx座標を1回表示させるごとに「0.5」だけ増やしています。

実際にどのように動くかは実行してみないとわかりにくいので、一発で思い通りに動くとは思わずに何度も繰り返し実行することで自分の望む動きを探しましょう。

translate()関数やrotate()関数で座標系を動かす方法

次に座標系を動かす方法を紹介します。

まずはtranslate()関数を説明します。

void setup(){
  size(200,200);
  noStroke();
  fill(255,200);
}
int x=1;
void draw(){
  background(0);
  translate(x,20);
  rect(50,50,30,30);
  x=x+1;
}

実行したものが以下になります。

「translate()」関数は、座標系を上下左右に動かす関数です。

簡単に説明すると、映し出しているカメラはそのままで、描かれている紙を上下左右に動かすことによって図形が動くというものです。

今回は右に動かしました。

上は動かす前のものになります。

こちらは動かした後のものになります。

続いて、rotate()関数になります。

void setup(){
  size(200,200);
  noStroke();
  fill(255,200);
}
float x=1;
void draw(){
  background(0);
  rotate(PI/x);
  rect(50,50,30,30);
  x=x+0.01;
}

実行したものが以下になります。