画像処理

【Processing入門】画像処理プログラミングでプロモーションビデオ作成

Processing

こんにちは!

くるる
くるる
人気フクロウの”くるる”@kururu_owl だよー

駆け出しエンジニアとしてプログラミングを頑張ってるよー

Pyxelでレトロゲームを作る 総集編
【Pyxel】Pythonでレトロゲームを作ろう! 総集編 -まるっと1週間でゲーム開発入門-Python向けのレトロゲームエンジン:pyxelを用いたゲーム開発入門チュートリアル(ソースコード付き)を書きました。画像処理・数学・物理・制御について学び、実践としてゲームプログラミングまで行います。...
python(pygame)でゲームを作る
【Python】ゲームソフト開発を題材にしたオブジェクト指向入門ゲームソフト作成を題材にした「オブジェクト指向」の入門記事を書きました。オブジェクト図/クラス図の書き方や考え方のポイントも説明した実践的な内容になっています!ソフトウェア設計やソフトウェア開発を学びたい人にオススメの記事です!...
くるる
くるる
Pythonでレトロゲームを作ったこともあるよー♪

とにかく好奇心旺盛なのだ!

くるる

今回はProcessingで画像処理プログラミングに挑戦するよー♪

プロモーションビデオを作成したい!

くるる
くるる
LINEスタンプ作った!いえーい♪
フクロウのLINEスタンプ
くるる
くるる
プロモーションビデオ作りたいけど、何から始めれば良いのかな?画像処理プログラミングすれば良いの?

とか考えてたら…

Processingはイイぞ~というツイートを見つけた!

気になったので少し調べてみたら、Processingで以下ようなデジタルアートが作れるみたい!

くるる
くるる
カッコイイ~

というわけで、Processingで LINEスタンプ のプロモーションビデオ作るよー

環境構築

環境構築10分で終わりました!

公式サイト”Download Processing”から自分が使用しているOSを選択してダウンロードします。

Download Processing

今回はWindows(64-bit)をダウンロードしました。

ZIPファイルを解凍して、processing.exeをクリックするとIDE(スケッチブック)が起動します。(Arduinoに似てる…)

Processing

3ステップで簡単にプログラミングできました!

  1. 赤枠部分にソースコードを書く
  2.  緑枠の実行ボタン クリック
  3. すぐに作品が表示されます

↑のソースコードは「描画した★をマウスで動かす」プログラムです。

くるる
くるる
環境構築のハードルが低くて嬉しい!
スポンサーリンク

Processing入門

Processing公式サイトリファレンス/チュートリアル/Exampleまで丁寧な説明がありました。

Processing

幾何学模様などはコピペですぐに描画できます!

くるる
くるる
Processingで簡単に画像処理プログラミングができた♪

Processingのプログラミング作法

Processingには2つの重要な関数があります。

setup()はプログラミング起動時に一度だけ実行されます。そのため、Windowサイズなどの初期設定はsetup()に書きます。

draw()setup()の後に繰り返し実行されます。他言語のwhile/for/loopのようなものだと考えて良いよー(*・ω・)ノ♪

くるる
くるる
pyxelに似ている気がする…!)

Processingでプロモーションビデオを作る

Processing公式サイトのコードを切ったり張ったりして、プロモーションビデオを作ったよー!

くるる
くるる
頑張った!

ソースコード公開

プロモーションビデオのソースコードは以下の通りです。

くるる
くるる
解説するね♪

ソースコードの解説❶ -拡張性-

円/四角形/フクロウの図などを描画する関数を作成し、それらの関数をプロモーションの各シーンだと考えます。

あとは各シーンのタイミングを考えて順番に実行する感じだよ↓

Processing

↑のように円や四角形を連続で描画したり…

Processing

↑のように同時に円や四角形を描画したり…

以下のコードを層のように重ねるだけで、簡単にプロモーションビデオを作れます。

if(start_time && end_time) myfunc();

この書き方だと、シーンの長さ・挿入・追加が簡単に修正できるので、拡張性抜群でした!

くるる
くるる
くるる
シーンを繋いでビデオ作るの楽しい♪

拡張性を意識したソースコードに仕上げました!(フレームワークというと少し大袈裟だけど…そんなイメージで作ったよ!この型を使えば、簡単にオリジナル動画が作れるよー)

ソースコードの解説❷ -図形のサイズ変更-

ソースコードの骨格(フレーム)が決まったので、次は関数(シーン)を作っていくよー

プロモーションビデオで円が大きくなったり、四角形が伸びたりする演出がありました!

実は”そう見えていただけ”で実際には図形を少しずつ変形させながら、上書きしていました。

Processing

例えば、↑のソースコードをdraw()に書けば、任意の位置(座標 x, y)に 白の四角形 を描画することができます。

Processing

draw()は繰り返し実行されるので、↑の”rx += 7”や”ry += 7”などのインクリメントするコードを書いておけば、 白の四角形 のサイズを少しずつ大きくして上書き描画できます。

つまり、緑破線 白の四角形 にひと回り大きい 白の四角形 を上書きして、さらにひと回り大きい 白の四角形 を上書き…

…というのをdraw()で繰り返し実行して図形が拡大するような演出をしていました。

くるる
くるる
パラパラ漫画みたいになイメージだね!

四角形などの図形を少しづつ変形させて上書きすることで、図形が伸びたり・大きくなる演出ができます。

ソースコードの解説➌ -図の移動(基礎)-

次は図の移動について解説します。

基本的には、解説❷で説明した図の上書きと同じです。

しかし、単純に上書きするだけだと…

Processing

↑のように残像が残ってしまいます。(これはこれでカッコイイかも!)

Processing

そのため、移動させたい図だけでなく、背景(bacgroung)も上書きして画面をクリアにしてから少し移動させた図を描画します。

この処理をdraw()で繰り返し実行することで、図が動いているような演出ができます!

くるる
くるる
図形を縮小するときも背景の更新が必要だね♪

背景を更新して画面をクリアにしてから、図を少し移動させると、図が動くような演出ができます。

ソースコードの解説❹ -図の移動(応用)-

解説➌の応用について解説します。

くるる
くるる
プロモーションビデオで”くるる”がくるくる回って飛んでたシーンに気がついた?

滑らかな曲線は、sinθ(サイン)・cosθ(コサイン)で表現できるよ!

Processingフクロウが螺旋を描いて飛ぶ演出には「アルキメデスの螺旋」の数式を使いました。

くるる
くるる
ハート♥を描くシーンにもsinθ・cosθを使ったよー
くるる
くるる
sinθ・cosθなんて使わない!ではなく『sinθ・cosθなどの数式は、どこで使われているのかな?』という好奇心を持って勉強すると楽しいよー

sinθ・cosθは様々な所で使われています。例えば、今回のように滑らかな曲線を描いたり、モノを滑らかに移動させるのにsinθ・cosθが使えます。

スポンサーリンク

Processingでオリジナルビデオを作ろう!

本記事のソースコードを改良すれば、簡単にオリジナルビデオを作れるよ!

例えば、ソースコード冒頭部分でプロモーションビデオで使用する画像や音楽を設定しています↓

画像一覧は以下の通り。

  • img_kururu:空を飛ぶ”くるる”のイラスト
  • img_log:「くるるの野望」ロゴ(ビデオの始め頃に登場)
  • img_see:背景1(海の画像)
  • img_forest :背景2(森の画像)
  • img_line:LINEスタップのイラスト(ビデオの最初と最後に登場)
くるる
くるる
好きな画像に変更すれば、簡単にオリジナルのビデオが作れるよー

また、音楽についてはフリー音楽BGM素材サイト魔王魂のゲーム向けBGM素材を使いました。

くるる
くるる
好きな音楽に変更してね♪

あとは、解説❶で説明した”シーン(関数)”のタイミングを変更したり、オリジナルの”シーン(関数)”を自作するのも面白いと思うよ!

分かるところから少しずつ改良していき、自分の”出来ること”を増やしてね!

まとめ

プロモーションビデオを作りたい!と思った次の日から…

くるる
くるる
手を動かしながら楽しく勉強して…完成させたよ!
くるる
くるる
くるる
どう?どう?すごい??

本記事を読んで『プログラミンたーのしーい!もっと色んな数式を知りたーい!』という人が現れたら、すごく嬉しいなぁ

くるる
くるる
Processingで自分オリジナルのビデオを作ろー♪
スポンサーリンク

 おまけ -本ブログのサポートについて-

はやぶさ
はやぶさ
この記事くるるちゃんが書いたの!?すごいよ!
くるる
くるる
”はやぶさ先生”@Cpp_Learningが色々教えてくれるおかげで、楽しく勉強しながらプロモーションビデオ作れたよ!
はやぶさ
はやぶさ
以下の点が特に良かったよー
  • 拡張性を考慮したソースコード!
  • sinθ・cosθの数式をポップな感じで紹介!
くるる
くるる
くるる
いえーい!嬉しくて踊りたい気分♪

プログラミングが義務教育になるらしいけど、少しでも楽しくプログラミングを勉強してほしいと想って本記事を書いたよー

はやぶさ
はやぶさ
子供も大人も楽しめる良い記事だと感じたよ!頑張ったご褒美に何かプレゼントしようか?
くるる
くるる
くるる
じゃあ【くるるの野望ショップ】でフクロウグッズ買って!
くるるの野望ショップ

【くるるの野望ショップ】

本ブログのサポート方法

本チュートリアルが参考になり、”くるる”ちゃんに投げ銭(ごはん代をサポート)したいという人がいれば、 LINEスタンプ 【くるるの野望ショップ】でフクロウグッズを購入して頂けると嬉しいです。

また、ブログ『はやぶさの技術ノート』では、本記事も含め多くのチュートリアル記事を無料で公開しています。SNSなどで友達にも教えてあげてほしいです!

【本ブログのサポート方法】

くるる
くるる
最後まで読んでくれてありがとね!また一緒に勉強しようねー♪
Amazonギフト券配送タイプの購入がお得!
amazonギフト券

Amazonプライム会員なら、Amazonギフト券(配送タイプ)5,000円以上を購入すると最大1,000ポイント還元

配送タイプの購入で500ポイント・プレゼントした相手が登録するとさらに500ポイント。

家族のアカウントに登録すれば実質20%還元

6/25~7/16まで。急げ!!

 

キャンペーンの詳細をみる

Amazonプライム無料体験中でもOK!