「機動戦士のんちゃん」をM5Stack ATOM Liteで再生してみた

© CC BY 4+ visibility3128
© CC BY 4+
visibility3128

機動戦士のんちゃん 第5話「OSクラッシャー」GIFアニメーションを神編集動画BGMと共にデジタルTVへ表示させてみました。

link https://github.com/riraosan/ESP32_8BIT_CVBS/tree/master/sample/01_AnimatedGIF
動画
開発素材
システム構成
system image

こちらは、ATOM LiteとデジタルTVの接続例です。ご参考まで。

デバイスについて

次のデバイスを使いました。

  • M5Stack ATOM Lite
  • ATOMIC TF-CARD Module
  • ES9038MQ2M DAC
  • microSD(16M)
  • メルカリで買ったデジタル液晶TVSHARP LC-13S4(3000円)

arduino-esp32ライブラリについて

次のライブラリを使わさせていただきました。

microSDカードに保存したgifファイルとmp3ファイルをタイミングをあわせて再生を開始した後、フリーランする単純な作りです。 delay()を調整してシンクロ率を上げました。

使い方

ATOM Liteの本体ボタン(G39)を押すと再生が始まります。(ボタンは任意のGPIOに割当可能です。詳細はソースコードを参照してください。)

  • シングルクリック:おまけ
  • ダブルクリック :4話を再生します
  • ロングクリック :5話を再生します

ビルド方法

こちらを参照してください。


ストーリー

元ネタ

episode5←5話「OSクラッシャー」episode4 ←4話「愛戦士」(サンプルに同梱済)

概要

機動戦士のんちゃん 第5話「OSクラッシャー」GIFアニメーションを神編集動画BGMと共にデジタルTVへ表示させてみました。

I tried to display the Mobile Suit NON-chan Episode 5 "OS Crusher" GIF animation on my digital TV with the God-edited Video BGM.

My Story

「最近、在宅勤務続きでジョン・ウィリアムズばかり聞いていると、スターウォーズのこの曲がいいなぁ。。」と若きオビ・ワン・ケノービとアナキン・スカイウォーカーが戦う場面で流れる曲を聞いていました。 「この曲は神編集動画でも使われていたような。。」

「機動戦士のんちゃん」に非公式BGMをつけた神編集動画1神編集動画2をM5Stack ATOM Liteで再生したら楽しめそうだ。。

I've been working from home a lot lately and all I hear is John Williams. I'm loving this Star Wars stuff." I love this Star Wars. I was listening to the song that plays during the scene where young Obi Wan Kenobi and Anakin Skywalker fight. It occurred to me. "I remember this song being used in that God-edited movie."

I must be able to enjoy "Mobile Suit NON-chan" with unofficial BGM, God Edit Video 1 and God Edit Video 2, if I play them on M5Stack ATOM Lite.

試作&失敗

試しに、ESP_8_BIT_composite付属の描画ライブラリを使って「機動戦士のんちゃん」のアニメーションGIFをATOM Liteで再生してみました。1枚のフレームを描画するのに約60msかかることがわかりました。 フレーム間ウェイトが40ms以下のフレームを適当に間引かなければいけません。。

非常にめんどくさかった。。。orz

I used the drawing library included with ESP_8_BIT_composite to play ATOM Lite an animated GIF of "Mobile Suit Non-chan". I found that using the included drawing library, it takes about 60ms to draw one GIF frame. I have to thin out the frames with frame weights of less than 40ms appropriately.

I was very annoyed. orz.

神ライブラリを発見

アニメーションGIFを高速に描画する方法はないものか?GitHubをウロウロしていると、LovyanGFXという描画ライブラリを見つけました。FacebookのM5Stackコミュニティーに質問したところ、どうやらM5Stack界隈では超有名な描画ライブラリだと初めて知りました。

I was scouring GitHub looking for a fast way to draw animated GIFs and found a drawing library called LovyanGFX. After asking the M5Stack community on Facebook, I learned that LovyanGFX is a drawing library that is apparently very popular in the M5Stack community.

ライブラリを合体

2つのライブラリ(LovyanGFX, ESP_8_BIT_composite)は、Adafruit GFXライブラリと共通のAPIを実装していました。ということは、2つのライブラリは合体できるのではないか?というのが最初のアイデアでした。その後、@lovyan03さんのご助言をいただき、CVBSパネルクラスを作成しました。(LovyanGFXの仕組みを理解するのは、凡人には大変でした。。。)

The two libraries (LovyanGFX, ESP_8_BIT_composite) implemented a common API with the Adafruit GFX library. So I thought the two libraries could be combined. This was my first idea. Then I took @lovyan03's advice and created a CVBS panel class. (It was hard to understand how LovyanGFX works...)

Roger-randomさんのご助言をいただき、2つのライブラリに依存する形でESP32_8BIT_CVBSライブラリとしてGitHubへコミットしました。

この作品はESP32_8BIT_CVBSライブラリのサンプルプログラムとして配布しています。 もしよろしければ、お楽しみください。

なぜATOM Lite?

単に、小遣いの範囲で楽しむ、という理由でATOM Liteを使っています。ATOM Liteの可能性を追求しようかと思い立ち、M5StackCore2などのLCD付M5Stackには未だに手を出すことなく現在に至ります。しかし、StickCPPが出たらすぐに買います。😁

I use ATOM Lite simply because I enjoy it within my allowance. I have decided to explore the possibilities of ATOM Lite. So I have yet to get my hands on an M5Stack with LCD, such as the M5StackCore2, to date. However, I will buy the StickCPP as soon as it comes out.

KAIZEN

アニメーションGIFのフレームのウェイト時間が40ms以下のフレームをリアルタイムで間引く(スキップする)いい方法はないか思案中です。 音声の再生時間を入力すると最善の方法で間引きたいと思っていますが、私の知力ではいいアイデアが浮かびません。。どなたか教えて下さいませんか?よろしくおねがいします。

2022-07-31 Ramer-Douglas-Peuckerアルゴリズムを使って間引いてみました。GitHubにアップ済み

2022-08-10 間引きはやめました。フレームウェイト時間内に描画処理が終わるように画サイズをオリジナルサイズに戻しました。delay()を使ってGIF再生速度を調整しました。

応用?

気象庁の気象情報をATOM LiteでデジタルTV画面に表示したいと思っています。強震モニタのATOM Lite版に似ているのかな。日本のどこかで線状降水帯が発生した際に、その地域の降雨情報に切り替えて表示する。そのようなアプリケーションを考えています。 また、今回の成果を流用して、雨雲の動きをアニメーション化してみたいと考えています。 その画面を毎日見ることができれば、地球の気候変動を自分自身の様に感じられるのではないか、と私は意味づけました。

I would like to use ATOM Lite to display JMA weather information on my digital TV screen. It would be similar to the ATOM Lite version of the strong motion monitor. When a linear precipitation zone occurs somewhere in Japan, the display would switch to rainfall information for that area. I am considering such an application. I would also like to divert the results of this project to animate the movement of rain clouds. If we can see the screen every day, we can feel the earth's climate change as if it were our own, I have implied.

できてはいるのですが、気象庁非公式APIのhttps化に伴い、上記のプロジェクトはメモリ不足により動作しなくなり、在庫プロジェクトとなっています。供養中です。

@lovyan03さんが外部のライブラリに依存しない形で、LovyanGFXにPanel_CVBSをコミットしてくださいました。ありがとうございます。こちらのCVBSライブラリで表示できるか試してみたいと思います。(2022-08-19追記)

謝辞

@nosferatu_nonさん、@lovyan03さん、@Roger-randomさん、各ライブラリ作者の皆さんとJimmyとその向こう側のコミュニティーのみなさんに感謝したいと思います。

みなさんから勇気をもらいました。ありがとうございました。👍

I would like to thank @nosferatu_non, @lovyan03, @Roger-random, each library author and the community at Jimmy and beyond.

I got courage from all of you. Thank you.👍

メンバー
  • user
    riraosan @riraosan_0901

関連イベント
  • event M5Stack Japan Creativity Contest 20222022-07-15 開催
関連リンク
user
riraosan @riraosan_0901

コンテンツがすごいのであって、私のアイデアは巨人の肩に立っただけですwのんちゃんのように再起動したいとおもいます。
のすふぇらとうさんのご回復を祈念しております。
https://twitter.com/nosferatu_non/status/15661492183008788


同じニオイがする作品
  • event LINE通知・アプリコミュニケーションのカスタマイザー「感覚でつながるメッセージングアクセサリー」
  • event All IoT化システム
  • event opniz CLI
  • event MergeWorld

Proto lovers ♥
user
user
user
user
user
user
user
user

作品を登録しよう

モノづくりしている人に、つくった作品を見てもらえ、リアクションがもらえるかも?

close

目次


Proto lovers ♥
user
user
user
user
user
user
user
user