【超初心者向け】Processingでプログラミング言語pythonを使ったアニメーション作成方法

こんにちはダダです

Processingで線、図形、配色などの基本的な内容がわかってきたので少し変わったことをしてみませんか？

または、アニメーションに興味がある方は、Processingでプログラミング言語Pythonを使ったアニメーションを作ってみませんか？

この記事ではアニーメーションをプログラムで作成していく過程がわかるようになっているので参考にしてもらえると嬉しいです

なので、若干テレビで放映されているアニメのイメージとは少し違うかもしれませんが、作り方の基礎という部分でアニメーションをこれから作っていきたいという方にも参考になる内容になるよう作っています

最後の方に〇裂拳のようなアニメーション作品があるので少し興味があれば見てみてください

タイトルは〇裂拳です

アニメーションとは

アニメーション（英語: animation）は、動画（どうが）とも呼ばれ、コマ撮りなどによって、複数の静止画像により動きを作る技術。連続して変化する絵や物により発生する仮現運動を利用した映像手法である。略語はアニメ。

引用；Wikipediaより

アニメーションの仕組みについて

アニメーションは複数の静止画をコマ送りにする技法

Processingではフレームごとに画像の内容を

少しずつ変化させることでアニメーションを実行していきます。

Processingではアニメーションを作成する際に、必ず必要となってくるsetup関数とdraw関数

setup関数とdraw関数についてみていきましょう

＼＼関数って何という方はこちらの他記事を参考にしてみてください／／

【初心者向け】Processingでプログラミング言語pythonの関数を使ってみよう

setup と draw について

Processingでは動きのあるプログラムを作成するために必要となる関数がsetupとdraw

動きのあるプログラムを作成したい人は必ず必要になってくる関数です

def setup()

最初に一度だけ実行される命令

ウィンドウのサイズや画像のロードなど1度だけ必要な処理のこの中に書く

def draw()

フレームを描写するたびに実行される命令

コンピュータで、あらかじめ設定されている標準の状態・動作条件・初期設定・初期値（デフォルト）。では一秒間に60回呼び出されます。プログラムが終了されるまで繰り返し実行されます。

数値が増える　プログラムの作成

実際にdef draw()関数がどのようにフレームを実行しているのか

frameCount変数を使用してどのように実行されているのか確認

＼＼＼変数って何という方はこちらの他記事参考に／／／

【超初心者向け】Processingを使ってプログラミング言語Pythonの変数について

コード作成

def setup():
    size(800, 400)  #画面のサイズ設定
    textSize(200)  #文字のサイズ設定
    
def draw():
    text(frameCount, 200, 200)

入力・実行

実行してみると数字がカウントさせる予定で作ったのに何か違うぐちゃぐちゃな何かが出てきた

それに少し待ってるとなんか増えた

これじゃ、ちゃんとした数字ではないので修正を加えていきます

修正版コード作成

def setup():
    size(800, 400)  #画面のサイズ設定
    textSize(200)  #文字のサイズ設定
    
def draw():
    background(200)  #背景を設定（グレースケールであれば数値は一つ）
    text(frameCount, 200, 200)

入力・実行

今度はちゃんとわかりやすく数値が出てきてくれました

でも、修正する前と修正する後では何が違うのでしょうか？

修正前と後で何が違う？

実際に数字が増えるプログラムを実行しましたが、実行結果の修正前と修正後では画面に出てきた内容は全然違いました

しかし、修正した点は以下の部分のみです

これだけ？

と思うかもしれませんが、これの違いがすごく大きなものとなります

実際にイメージ図で見ていきましょう

draw関数は実行した内容を繰り返していきます

draw関数を実行して出力される内容のイメージが以下の図のようになります

修正前の実行イメージ

上記のように数字を次々実行して画像を積み重ねていくので

こんな感じの不思議な文字が出来上がります

ちなみにこの文字は０～9までを重ね合わせた文字です。

修正後の実行イメージ

修正後は数字を出力した後に、グレーの背景を実行します

すると、数字を消すような形になるので新しい数字が出力されても重ならないのできれいに見える

こんな感じでわかりやすく出力できました。

カウントアップされるだけのプログラムでは少し面白くないのでマウスの動きに合わせて数値が変更するプログラムを作成していきましょう

マウスの座標を数値で出すプログラム

マウスの座標を変数に置き換えて

マウスの座標に合わせた数値が出てくるプログラムを作成してみます

＼＼＼変数って何という方はこちらの他記事参考に／／／

【超初心者向け】Processingを使ってプログラミング言語Pythonの変数について

マウスの座標

こんな感じでマウスの動きに合わせて数値を出力してくれます。

参考コード

def setup():
    size(700, 400)
    textSize(70)

def draw():
    background(200)
    text("mouseX=", 100, 150)
    text("mouseY=", 100, 300)
    text(mouseX, 500, 150)
    text(mouseY, 500, 300)
    

こんな感じのコードとなりました。

でも、なんか味気ないので少しコードをいじってみます。

次は色も変更させていきます

座標に合わせて変色させてみる

座標の数値に合わせて変色するプログラムです。

これはこれでありかも…

参考コード

def setup():
    size(700, 400)
    textSize(70)

def draw():
    background(0, 0, 255)
    fill(255)
    text("mouseX=", 100, 150)
    text("mouseY=", 100, 300)
    
    fill(mouseX/3, 255, mouseY/2)
    text(mouseX, 500, 150)
    text(mouseY, 500, 300)
    

でも、もう少しパンチが欲しいのでもう少し改良をしていきましょう。

文字のサイズアップ

参考コード

def setup():
    size(700, 400)

def draw():
    background(0, 0, 255)
    textSize(70+(mouseY/3))
    fill(255)
    text("mouseX=", 100, 150)
    text("mouseY=", 100, 300)
    
    fill(mouseX/3, 255, mouseY/2)
    text(mouseX, 500, 150)
    text(mouseY, 500, 300)

この感じめっちゃ好きで面白い

ただただ面白くてデザイン、アート要素が少しあってテンションあげあげです

追記　〇裂拳

実際にアニメーションの作成方法について話をしてきました

しかし、皆さんが思っているアニメーションの内容とは少し違うかもしれないので…

最近できたアニメーションっぽい作品を載せてみます

〇裂拳のようなものができました

作り方が気になる方は

まとめ

ただ出力画面映し出すだけではなく、一度背景をクリアにすることで動きのある映像となります。

パラパラ漫画のような感じですね

静止画の作成の方法については、以前の内容でやってみましたがアニメーションが作れるのは少し面白そうです。

グラフィックのデザインやアートをしていく中で技術を習得していくと、表現の幅が広がってくるので今後も継続して学んでいきます。