クリエイター手抜きプロジェクト[579]IoT M5 Stack編 点や線の描画/古籏一浩

投稿:  著者:  読了時間:9分(本文:約4,400文字)



今回も、M5 Stackを使ったグラフィックの処理を行ってみます。作成するのは、画面にランダムにドットを表示するプログラムと、スクリーンセーバーのように線を移動させながら描画するプログラムです。

まず、簡単なところで画面に点を一つ表示してみましょう。グラフィックまわりのブロックは「グラフィック」のカテゴリにあります。この中から

[ピクセルを表示 x:[0] y:[0] 色:[ ]]

というブロックをクリックします。[ Setup ]のブロックの下にくっつけます。M5 Stackの画面は横が320、縦が240なのでX座標を160、Y座標を120にすると画面中央に点が表示されます。

[ Setup ]
[ピクセルを表示 x:[160] y:[120] 色:[ ]]

ブロックを配置したら、実行ボタンをクリックします。画面中央に小さく白い点が表示されたはずです。あまりに細かいので、よく見えないかもしれません。そんな時はハズキルーペでも使ってください。表示されたのを確認したら、座標値や色を変えてみてください。





今度は、画面に無限にランダムな位置に点を描画してみましょう。無限に繰り返すには「繰り返し」ブロックから[ 繰り返す:続ける条件 ]というブロックを配置します。

このブロックを[ Setup ]ブロックの下に配置します。そして、続ける条件を指定します。条件は無限に繰り返す、つまり真=trueを指定します。[ true ]ブロックは「ロジック」のカテゴリにあります。この[ true ]ブロックを[ 繰り返す:続ける条件 ]ブロックの右側にはめこみます。

次に、繰り返しブロック内に[ピクセルを表示 x:[ ] y:[ ] 色:[ ]]ブロックを入れます。座標値をランダムにするので「数学」ブロックから[[ ]から[ ]までのランダムな整数 ]ブロックを配置します。

X座標は0〜319,Y座標は0〜239までの値を指定します。直接数値は入力できないので、「数学」のカテゴリの一番上にある[ 0 ]ブロックを使って指定します。指定したらランダムな値を生成するブロックを[ピクセルを表示 x:[ ] y:[ ] 色:[ ]]のXとYにはめこみます。

これでできあがりです。実行ボタンをクリックして動かしてみてください。一度目は動作しても二度目に動作しない場合は、M5 Stackの電源ボタンを押します。画面のUploadの文字が表示されている位置にあるボタンを押してください。

Pythonのコードだと以下のようになります。

--------------------------------------------------------------------------
from m5stack import *
from m5ui import *
clear_bg(0x111111)
btnA = M5Button(name="ButtonA", text="ButtonA", visibility=False)
btnB = M5Button(name="ButtonB", text="ButtonB", visibility=False)
btnC = M5Button(name="ButtonC", text="ButtonC", visibility=False)
import random
while True:
lcd.pixel(random.randint(0, 319), random.randint(0, 239), 0xffffff)
--------------------------------------------------------------------------

それでは次に、スクリーンセーバーのように線をランダムに移動させてみましょう。ここでは線の開始座標と終了座標の変数を用意します。変数名は開始座標がx1とy1、終了座標がx2とy2とします。

線を移動させるための移動量を示す変数も用意します。これも開始点と終了点が必要になります。それぞれdx1, dy1, dx2, dy2とします。

開始座標と終了座標を示す変数に、最初の座標をセットします。[ x1 に[ 0 ]]をセットというブロックが「変数」のカテゴリにありますのでクリックして配置します。開始座標と終了座標を示す変数に値を設定します。座標値は適当で構いません。次に移動量を示す変数にも値を設定します。1や-1などにしておきます。

次に、先ほどのランダムに点を表示するのと同様に、無限に繰り返すブロックを配置します。このブロックの中に線を消す、座標値を加算する、座標値が端になったら移動量を変える、線を描画するといったブロックを配置していきます。さすがに、文章で説明するのは限度があるので、以下にPythonコードを載せておきます。

--------------------------------------------------------------------------
from m5stack import *
from m5ui import *
clear_bg(0x000000)
btnA = M5Button(name="ButtonA", text="ButtonA", visibility=False)
btnB = M5Button(name="ButtonB", text="ButtonB", visibility=False)
btnC = M5Button(name="ButtonC", text="ButtonC", visibility=False)
from numbers import Number
x1 = None
y1 = None
x2 = None
y2 = None
dx1 = None
dy1 = None
dx2 = None
dy2 = None
x1 = 0
y1 = 0
x2 = 311
y2 = 213
dx1 = 1
dy1 = 1
dx2 = 1
dy2 = 1
while True:
lcd.line(x1, y1, x2, y2, 0x000000)
x1 = (x1 if isinstance(x1, Number) else 0) + dx1
y1 = (y1 if isinstance(y1, Number) else 0) + dy1
x2 = (x2 if isinstance(x2, Number) else 0) + dx2
y2 = (y2 if isinstance(y2, Number) else 0) + dy2
if x1 < 0:
dx1 = 1
if x1 > 319:
dx1 = -1
if y1 < 0:
dy1 = 1
if y1 > 239:
dy1 = -1
if x2 < 0:
dx2 = 1
if x2 > 319:
dx2 = -1
if y2 < 0:
dy2 = 1
if y2 > 239:
dy2 = -1
lcd.line(x1, y1, x2, y2, 0xffffff)
wait(0.01)
--------------------------------------------------------------------------

ちなみにブロックエディタではできませんが、Pythonコードを変更すると、フルカラーでカラフルな線を描画できます。まず、以下の行を削除します。

lcd.line(x1, y1, x2, y2, 0x000000)

 次に下から2行目を以下のように変更します。

lcd.line(x1, y1, x2, y2, 0xffffff)
 ↓
lcd.line(x1, y1, x2, y2, random.randint(0, 0xffffff))

これで実行ボタンを押すと、カラフルな線が画面に表示されていきます。なお、変更したPythonコードからブロックエディタに切り替えてしまうと、修正した部分は消えてしまい、元に戻ってしまうので注意してください。


【古籏一浩】openspc@alpha.ocn.ne.jp
http://www.openspc2.org/

皆様、10連休はいかがお過ごしでしたでしょうか。配達業にはそんな連休は存在しないので、いつものように仕事をしてました。

連休中にM5 Stack UI Flowの1.3.0β版がテストできるようになりました。現在のバージョン1.2.3の画面右上にある、BETAの吹き出しボタンをクリックすると1.3.0を試すことができます。

連休明けのビックリニュースと言えばAdobe CC。どうやら最新版とひとつ前のバージョンだけしか使えなくなってしまったようです。前バージョンとの完全互換性がない状態でのInDesgnドキュメントを印刷したら……印刷事故が多発しそうです。

いきなりの変更で混乱してるような状態ですが、スマホやパソコンOSと違って乗り換え先がないので、こうなるとお手上げです。
https://jdash.info/archives/Adobe%20CCを契約していてもCS6は使用禁止.html

過去のバージョンはダウンロードできませんが、現バージョンは今のうちにダウンロードしておいた方がよさそうです。
https://helpx.adobe.com/jp/download-install/kb/creative-cloud-apps-download.html

・InDesign自動化サンプルプログラム逆引きリファレンス上/下
https://www.amazon.co.jp/dp/4844396846/
https://www.amazon.co.jp/dp/4844396854/

・創って学ぼうプログラミング
https://news.mynavi.jp/series/makeprogram

・みんなのIchigoLatte入門 JavaScriptで楽しむゲーム作りと電子工作
https://www.amazon.co.jp/dp/4865940936
[正誤表]
http://www.openspc2.org/book/error/ichigoLatte/

・After Effects自動化サンプルプログラム 上巻、下巻
https://www.amazon.co.jp/dp/4844397591
https://www.amazon.co.jp/dp/4844397605

・IchigoLatteでIoT体験
https://www.amazon.co.jp/dp/B06X3X1CHP
http://digiconcart.com/dccartstore/cart/info/2561/218591

・みんなのIchigoJam入門 BASICで楽しむゲーム作りと電子工作
http://www.amazon.co.jp/dp/4865940332/

・Photoshop自動化基本編
http://www.amazon.co.jp/dp/B00W952JQW/

・Illustrator自動化基本編
http://www.amazon.co.jp/dp/B00R5MZ1PA/

・4K/ハイビジョン映像素材集
http://www.openspc2.org/HDTV/

・クリエイター手抜きプロジェクト
http://www.openspc2.org/projectX/