初めまして講師のダダです
今回は、アニメーション作品を作ったけど保存の方法がわからない方へ向けて書いています
この記事を見ることで、簡単なGIFアニメーションが作れるようになります
![](https://i0.wp.com/dsdiary.blog/wp-content/uploads/2023/02/count.gif?resize=900%2C550&ssl=1)
↓↓↓アニメーションの作り方についてはこちらから
ポイント
![](https://i0.wp.com/dsdiary.blog/wp-content/uploads/2023/02/john-schnobrich-FlPc9_VocJ4-unsplash.jpg?resize=920%2C614&ssl=1)
・アニメーションの作成
まずは簡単なアニメーションを作成していきます
・frameCountをif文でフレームの数を指定
1 |
if (frameCount <= 160): |
・各フレームをPNG画像として新しくファイルを作成し保存
####部分でフレームの数に合わせて数を入れてくれます
1 |
saveFrame("frames/####.png") |
・Processing付属のムービーメーカーで一つの動画にしていきます
![](https://i0.wp.com/dsdiary.blog/wp-content/uploads/2023/02/2023-02-03_21h05_25-3.png?resize=636%2C653&ssl=1)
↑↑↑画像をクリックすると翻訳ページに飛びます
アニメーションを作成
今回はアニメーションのフレームをカウントする物を作っていきます
1 2 3 4 5 6 7 |
def setup(): size(900, 550) textSize(100) def draw(): text("frameCounter", 100, 250) text(frameCount, 300, 350) |
これでフレームのカウントをしてくれるアニメーションができました
![スゥちゃん](https://i0.wp.com/dsdiary.blog/wp-content/uploads/2022/06/S__561971280.jpg?resize=150%2C150&ssl=1)
実行してみても終了するまでカウントし続けるだけなんだけど?
![ダダ](https://i0.wp.com/dsdiary.blog/wp-content/uploads/2023/01/S__58163232.jpg?resize=150%2C150&ssl=1)
そんな時はif文で条件を付けてみよう
if文を使ってフレームに条件を付ける
1 |
if (frameCount <= 160): |
このコードを先ほど作ったアニメーションに追加していきます
1 2 3 4 5 6 7 8 9 |
def setup(): size(900, 550) textSize(100) def draw(): background(0) if (frameCount <= 160): text("frameCounter", 100,250) text(frameCount, 300, 350) |
![ダダ](https://i0.wp.com/dsdiary.blog/wp-content/uploads/2022/07/S__58163233.jpg?resize=150%2C150&ssl=1)
このままでは終わりがないので
終わりの条件をコードで入力します
1 2 |
else: exit() |
if文についてはこちらの記事を参考にしてください
PNG画像として1枚ずつ保存していきます
保存のためのコードはこちら
1 |
saveFrame("frames/####.png") |
saveFrame("ファイル作成/フレーム数を入力.png)
saveFrameを入力することで、画像を保存してくれるファイルを作成し
保存したPNG画像に番号を入力してくれます
完成コードはこちら
1 2 3 4 5 6 7 8 9 10 11 12 |
def setup(): size(900, 550) textSize(100) def draw(): background(0) if (frameCount <= 160): text("frameCounter", 100,250) text(frameCount, 300, 350) else: exit() saveFrame("frames/####.png") |
保存した画像はこのように保存されます
![](https://i0.wp.com/dsdiary.blog/wp-content/uploads/2023/02/597fa7cd9c321a5b5892ac73b67c4d20.png?resize=920%2C459&ssl=1)
![ダダ](https://i0.wp.com/dsdiary.blog/wp-content/uploads/2022/07/S__58163233.jpg?resize=150%2C150&ssl=1)
このままでは、GIFにできないのでProcessing付属のムービーメーカーを使ってGIFをアニメーションを作ります
Processing付属のムービーメーカー
![](https://i0.wp.com/dsdiary.blog/wp-content/uploads/2023/02/bf58f6bd386313ebfce327e8ef2f5ef9.png?resize=696%2C599&ssl=1)
ツール→ムービーメーカーを選択
ムービーメーカーの使い方
![](https://i0.wp.com/dsdiary.blog/wp-content/uploads/2023/02/323dcc37c77a26015be012e1e2ba1b6c.png?resize=920%2C518&ssl=1)
ファイルの選択方法
![](https://i0.wp.com/dsdiary.blog/wp-content/uploads/2023/02/362a0af03903c5aa8b7405d29d4f6d5c.png?resize=840%2C469&ssl=1)
最後に名前を付けて保存ができると
\\\GIFアニメーションの完成///
![](https://i0.wp.com/dsdiary.blog/wp-content/uploads/2023/02/count-1.gif?resize=900%2C550&ssl=1)
まとめ
アニメーションを作っても、保存ができなくてSNSへアップができない
みんなに見てもらえないという方は、是非アニメーションを作ってみてください
動く物ができるとモチベーションにもつながりますよ
![ダダ](https://i0.wp.com/dsdiary.blog/wp-content/uploads/2022/04/S__58163222.jpg?resize=150%2C150&ssl=1)
この度Udemyで講座を作りました
【プログラミングxアート】直感的・視覚的に学ぶ Processing×Python 入門講座
ブログに書いてある内容を一つの講座にしています