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

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

アニメーションに興味がある方、ProcessingでPythonを使ってオリジナルのアニメーションを作ってみませんか？この記事では、基本的なアニメーションの作り方を超初心者向けに解説します。テレビで見るアニメとは少し違うかもしれませんが、プログラムを使った動きの仕組みや表現方法を楽しく学べる内容になっています。アニメーションの基礎から応用までステップごとに紹介していくので、初めての方でも安心して挑戦できます。さらに、最後には「〇裂拳」のような作品例もご用意しているので、ぜひ参考にしてみてください！

Udemy講座はこちらから

アニメーションとは

アニメーション（英語: 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():

text(frameCount, 200, 200)

入力・実行

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

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

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

修正版コード作成

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

def setup():

size(800, 400) #画面のサイズ設定

textSize(200) #文字のサイズ設定

def draw():

background(200) #背景を設定（グレースケールであれば数値は一つ）

text(frameCount, 200, 200)

入力・実行

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

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

修正前と後で何が違う？

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

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

≪修正点≫

・def draw()の部分にbackground()の変数を入れただけです。

これだけ？

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

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

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(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)

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)

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)

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

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

追記　〇裂拳

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

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

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

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

まとめ

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

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

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

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

Pythonを学びたい方はこちらの記事を参考にしてみてください

: プログラミング完全ガイド：基礎からスクレイピング＆API活用までのまとめ
プログラミングの世界に足を踏み入れたばかりの初心者から、さらなるスキルアップを目指す中級者まで、すべての方に向けた完全ガイドです！この記事では、これまでに執筆したプログラミング関連の記事をまとめ、プロ ...

プログラミング学習を進めているけれど、まだ副収入につなげられていない…そんなあなたへ！今こそ、学んだスキルを活かして副業に挑戦する絶好のチャンスです。プログラミングだけでなく、自分のスキルや商品をネットで販売する『ネットショップ』を開設してみませんか？

ネットショップを持つことで、自分の知識やスキルをより多くの人に届け、副収入を得ることが可能です。学んできたプログラミングを活かして、ショップのカスタマイズや運営も自由自在に行えますし、もし商品作成が難しい場合でも、デジタル商品やサービス提供など、いろんな選択肢があります。

このステップで一歩踏み出せば、今学んでいることが副収入に直結し、自分の時間をより有効に使うことができるはずです！一緒にネットショップを開設し、副業の第一歩を踏み出しましょう！

タイトルテキスト

: 【スキルアップ】オンラインショップ開設　おすすめ５選
オンラインショップの開設は、スキルアップと収益の両方を追求する絶好の機会です。特に今の時代、手軽に始められるプラットフォームが増え、初心者でも短期間でショップをオープンできるようになりました。しかし、 ...

プログラミングを学びたいけど、どこから始めたらいいのか分からない、自分に合っているか不安…そんな悩みを持っている方におすすめしたいのが、 無料相談 サービスです！

この無料相談では、あなたの現状や目標に合わせて、最適な学習プランを一緒に考えてくれます。どんなスキルが必要なのか、どうやって学習を進めると効果的かを具体的にアドバイスしてもらえるので、無駄なく効率的にスタートを切ることができます。

さらに、プログラミング学習には同じ目標を持つ仲間がいること、そして頼りになる メンター の存在がとても大きな支えになります。独学ではどうしてもつまずきやすい部分も、メンターがあなたの成長に合わせて親身にサポートしてくれるので、安心して学びを進められます。

まずは 無料相談 で、あなたに合ったプランを見つけて、スキルアップへの第一歩を踏み出してみませんか？今なら、迷っている方でも気軽に相談できるチャンスです！

テックアカデミー無料メンター相談

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

アニメーションとは

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

setup と draw について

def setup()

def draw()

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

コード作成

入力・実行

修正版コード作成

入力・実行

修正前と後で何が違う？

修正前の実行イメージ

修正後の実行イメージ

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

マウスの座標

参考コード

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

参考コード

文字のサイズアップ

参考コード

追記 〇裂拳

まとめ

関連

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

追記　〇裂拳