M5Stack

M5Stackで画像処理 -静止画の表示から動画作成まで-

M5Stackで画像処理 -静止画表示から動画作成まで-

こんにちは。

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

コンピュータビジョン(『ロボットの眼』開発)が専門の”はやぶさ”先生@Cpp_Learning一番弟子です!

くるる

はやぶさ先生は、画像処理や機械学習などの技術を分かりやすく説明してくれる”変な…優しいお兄さん”です!

本サイト:はやぶさの技術ノートで はやぶさ先生が書いた記事がタダで読めるよー

ソーベルフィルタ
【深層学習入門】画像処理の基礎(画素操作)からCNN設計まで画像処理の基礎(画素操作)から深層学習のCNN設計までカバーした記事です。画像処理にはOpenCVとPythonを使用しました。画像処理入門、深層学習入門、どちらも取り組みたい人におすすめの記事です。...
MXnetとGluonで物体検出ソフトを作る
MXNetで『カメラ・動画対応!物体検出ソフト』を作った -Yolo, SSD, Faster-RCNNモデル対応-こんにちは。 コンピュータビジョン(『ロボットの眼』開発)が専門の”はやぶさ”@Cpp_Learningです。 『深層学習に...
ONNX RuntimeとYoloV3でリアルタイム物体検出
ONNX RuntimeとYoloV3でリアルタイム物体検出Microsoft社製OSS”ONNX Runtime”の入門から実践まで学べる記事です。ONNXおよびONNX Runtimeの概要から、YoloV3モデルによる物体検出(ソースコード付)まで説明します。深層学習や画像処理に興味のある人にオススメの内容です。...

など

くるる
くるる
多すぎて紹介しきれないけど、他にも沢山の記事を書いてるよ!

くるるは先生と一緒に勉強しながら、ゲームやオリジナルビデオを作ったことがあるよー

Pyxelでレトロゲームを作る 総集編
【Pyxel】Pythonでレトロゲームを作ろう! 総集編 -まるっと1週間でゲーム開発入門-Python向けのレトロゲームエンジン:pyxelを用いたゲーム開発入門チュートリアル(ソースコード付き)を書きました。画像処理・数学・物理・制御について学び、実践としてゲームプログラミングまで行います。...
Processing
【Processing入門】画像処理プログラミングでプロモーションビデオ作成教育用途やデジタルアートなど様々な用途があるプログラミング言語Processingの入門チュートリアルを作りました。オリジナル動画を作るためのサンプルコードも公開しています。...
pyxelで物理シミュレーション
【Pyxel】Pythonで物理シミュレーションをしよう! 総集編 -まるっと1週間チュートリアル-こんにちは! 本記事は『Pythonで物理シミュレーションをしよう!』シリーズの総集編です! 本シリーズは、...
くるる
くるる
勉強楽しい!プログラミング最高!!

最近、先生が遊んでるM5Stackってやつが楽しそうなので…

先生が留守の間に、こっそり画像処理で遊ぶことにした!本記事も勝手に書いちゃうよー

本記事は「静止画編」と「動画編」の二部構成で説明します。目次からジャンプできるので、好きなところから読み始めてくださな

M5Stackの始め方

M5Stack初心者のくるるでも以下の記事を読んだら、すぐにプログラミングを始められたよ!はやぶさ先生イイ記事書いてる~♪

M5Stack
【M5Stack入門】初心者におすすめしたい情報まとめこんにちは。 現役エンジニアの”はやぶさ”@Cpp_Learningです。 先日、Maker Faire Tokyoや趣味T...

M5StackちっちゃいBodyに画面まで付いてるから、つい画像処理とかしたくなっちゃうよね♪

くるる

M5Stackで画像処理 -静止画編-

M5StackのLCDにjpg画像を表示する場合、以下のソースコードのやり方が最も簡単です。

このコードでSDカード直下に保存した”kururu.jpg”という画像を表示できます。

もし、SDカード直下ではなく、imgフォルダなどに画像を保存している場合は、以下のように書きます。

M5StackのWindowサイズが320×240なので、画面いっぱいに表示させたいときは、同じ320×240pixelのjpg画像を使うのがオススメです。

M5StackのWindowサイズ

座標を指定して画像表示

画像処理では画面左上を原点として扱うことが多く、M5Stackも左上が原点でした。

最初に紹介した画像表示のやり方は、M5Stack(Window)の原点とjpg画像の原点を揃えて表示する方法です。

以下のコードを使えば、座標指定で画像表示ができます。

以下のような画像表示になります。

【M5Stack】x,y座標指定で画像表示

画像の幅と高さを指定して表示

jpg画像の幅と高さを指定して表示することもできます。

以下のような画像表示になります。

【M5Stack】幅と高さ指定で画像表示

オフセットを指定して画像表示

オフセットも指定できるよー

以下のような画像表示になります。

【M5Stack】オフセット指定で画像表示

クリッピング(画像の指定範囲を表示)

今までの説明したやつを応用すれば、目の部分だけ表示(クリッピング)ができます。

以下のような画像表示になります。

【M5Stack】画像表示(応用)
くるる
くるる
必殺技が出せそう!

スケールを指定して画像表示

サイズの大きいjpg画像を表示させるなら、スケールを変更すると良いです。

このコードで以下のような1/2スケールの表示ができます。

【M5Stack】スケール指定で画像表示

スケールは整数値でも指定できますが、用意してある列挙型を使う方が直感的にスケールを理解できるのでオススメです。

jpeg_div_tという列挙型が用意してあります。

  • JPEG_DIV_NONE:スケール指定なし
  • JPEG_DIV_2:1/2スケール
  • JPEG_DIV_4:1/4スケール
  • JPEG_DIV_8:1/8スケール
  • JPEG_DIV_MAX:存在するけど使わない

列挙型なので、JPEG_DIV_NONE=0, JPEG_DIV_NONE2=1,… を表現しています。

そのため、scale=JPEG_DIV_NONE2ではなく、scale=1を指定してもスケールは1/2になります。

また、JPEG_DIV_NONEは省略してもOKです。

ただし、JPEG_DIV_〇を書いたり/書かなかったすると読み手が混乱するので…

一箇所でもJPEG_DIV_〇でスケール指定するなら、JPEG_DIV_NONEも省略せずに書く方が親切です。

くるる

補足 -良いソースコードとは?-

くるる
くるる
『読み手や使い手のことを想ってソースコードを書くのが正解』って、はやぶさ先生が教えてくれたよ♪

ケースバイケースだけど、変数を使わずに引数を書くと何の処理をしているか分かりにくいので…

コメントで引数の定義を補足するか、直感的に理解しやすい名前の変数を使うと良いです。

また、「悪い例」・「良い例」で引数の数が異なります。これは、省略可能なスケールを書いたり・書かなかったりした差です。

エラーは出ませんが、統一感のないコードは読み手が混乱します。

『読み手や使い手のことを想ってソースコードを書くのが正解』

思想や好みもありますが、統一感のあるコードの方が「読み手を想ったコード」になると考えています。

くるる

(静止画編 完)

スポンサーリンク

M5Stackで画像処理 -動画編-

静止画だけじゃなくて、M5Stackで動画(アニメーション)も作成するよー!

簡単なアニメーションなら、パラパラ漫画…つまり、静止画を重ねるだけで実現できます。

単純に1枚の画像のx,y座標を少しずつ動かすだけでも面白い動画になります。

Processing

この図はProcessingでオリジナルビデオを作る』のブログ記事で使った図解です。なので、ソースコードの言語は異なりますが、画像処理の基礎は同じです!

Processingでオリジナルビデオを作る
Processing
【Processing入門】画像処理プログラミングでプロモーションビデオ作成教育用途やデジタルアートなど様々な用途があるプログラミング言語Processingの入門チュートリアルを作りました。オリジナル動画を作るためのサンプルコードも公開しています。...

オリジナルビデオ作成に興味のある人は、この記事も読んでほしいな~

くるる
くるる
今回はM5Stack(Arduino)でアニメーションを作成するよ♪
くるる

実践!M5Stackでアニメーション表示

静止画編でjpg画像の一部を切り取ったり、スケールを変更する方法を説明しました。

静止画を表示させるだけなら、処理速度を気にする必要はありませんが、できるだけ実行する処理を減らした方が滑らかなアニメーションになります。

そのため、SDカードに保存した小さなjpg画像を読み込み、x,y座標を動かすソースコードを作成しました。

このコードでjpg画像のx,y座標が10pixelずつ移動するアニメーションを生成できます。

あとは以下の仕様を検討すれば、オリジナルアニメーションが作成できます。

  • 更新速度(画像を移動させる時間)を調整
  • 移動量(dx=〇pixel移動させるか)を調整
  • ある座標(画面の端など)に行ったときの処理
  • ボタンが押されたらときの処理
  • 移動軌跡(sin・cosを使って滑らかに移動など)の処理

など、自由な発想でオリジナルアニメーションを作ってみよう♪

実践!M5Stackでオリジナルアニメーション作成

最後に簡単なオリジナルアニメーションのソースコードを紹介します。

3つの画像を用意して、ボタン毎に処理を変えてみました。このコードを動かしたときの様子は以下の通りです。

自分の好きな画像を使ってオリジナルアニメーションが動くの楽しい!M5Stackの小さな画面で動くのが可愛らしい♪

くるる

(動画編 完)

M5Stackで画像処理まとめ

M5Stackに画面が付いてたから、画像処理で遊んでみました。

画像表示の方法について説明し、最終的にはアニメーション作成まで実践しました。

くるる
くるる
楽しかった~

みんなもオリジナルアニメーション作成に挑戦してみてね♪

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

はやぶさ
はやぶさ
この記事くるるちゃんが書いたの!?すごいよ!
くるる
くるる
”はやぶさ先生”@Cpp_Learningが色々教えてくれたから、楽しく自力でオリジナルアニメを作れたよ!
くるる
はやぶさ
はやぶさ
画像処理の基礎がしっかり習得できてるから、言語が変わっても自分のやりたいことを実現できたね
くるる
くるる
言語も違ったし、PCじゃなくてマイコンモジュールだったけど、画像処理できたよー

くるるちゃんは着実にレベルアップしています。教える立場としては、とても誇らしいです!

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

本ブログのサポート方法

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

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

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

くるる
くるる
最後まで読んでくれてありがとね!また一緒に勉強しようねー♪
M5Stack
【M5Stack入門】初心者におすすめしたい情報まとめこんにちは。 現役エンジニアの”はやぶさ”@Cpp_Learningです。 先日、Maker Faire Tokyoや趣味T...
Processing
【Processing入門】画像処理プログラミングでプロモーションビデオ作成教育用途やデジタルアートなど様々な用途があるプログラミング言語Processingの入門チュートリアルを作りました。オリジナル動画を作るためのサンプルコードも公開しています。...
Pyxelでレトロゲームを作る 総集編
【Pyxel】Pythonでレトロゲームを作ろう! 総集編 -まるっと1週間でゲーム開発入門-Python向けのレトロゲームエンジン:pyxelを用いたゲーム開発入門チュートリアル(ソースコード付き)を書きました。画像処理・数学・物理・制御について学び、実践としてゲームプログラミングまで行います。...
LINEスタンプ配信中!

フクロウのLINEスタンプ

当サイトのマスコットキャラクター

「フクロウのくるる」が

LINEスタンプになりました!

勉強で疲れたあなたに癒しをお届け☆

お迎え待ってます(*・ω・)ノ♪

今すぐお迎えする

40個セットがたったの50コインとお得です