ScratchとM5Stackで遊ぶ
https://gyazo.com/ab6eaf1a7b9e8e4274e6de82f723f909
自己紹介
https://gyazo.com/409401d94dbb4075ecd26d0b1e85e018
むとうたけし(武藤武士)
専業主夫(51歳)＠奈良
所属コミュニティ
アカウント一覧
はじめに
Scratch
ビジュアルプログラミング、いいですよね?
とにかく、楽しいですよね?
センサーなんかのデバイスと一緒に使えるといいですよね?
M5Stack一家
ビジュアルプログラミング、いいですよね?
とにかく、楽しいですよね?
センサーなどのデバイスがあっていいですよね?
では、二つをつなげて遊んでみましょう!!
M5Stack一家の肖像
https://gyazo.com/0371c74f4489b6454fbc0141ae5c36eb
ハードウエアの特徴(赤字は今回使ったもの)
CPU:ESP32など
ディスプレイ:320x240TFT(Core,Core2), 80×160TFT(M5StickC), 135x240TFT(C Plus), 5x5フルカラーLED(ATOM Matrix)
バッテリー:150mAh(Core), 390mAh(Core2), 80or95mAh(C), 120mAh(C Plus)
ネットワーク:Wi-Fi(2.4G) + BLE
センサー:加速度センサー、ジャイロ、ボタンスイッチ、温度センサーなど
オーディオ:マイク, スピーカー
その他I/O:Grove A(I2C), B(A/D,GPIO), C(UART), M-BUSなど
付属物:腕時計バンド、LEGOマウント、キーボードなど
腕時計バンド、LEGOマウント、壁掛けマウント付属
https://gyazo.com/ec17cef78c4287b98b372b2844daf0e1
ソフトウエア開発環境
UiFLOW:ビジュアルプログラミング環境, クラウド版/デスクトップ版
Python:UiFlowからの変換可能
https://gyazo.com/a24f609eebf22bf101ce5fd713c8a0b5
Arduino IDE:Arduino言語によるプログラミング
https://gyazo.com/9741ce6147d44b2fa6f1e90409a2cee1
あなたは、どのScratch?
https://gyazo.com/6bfac9414a50aad4016dd02c42289099
Scratch: ビジュアルプログラミング環境
教育目的などでよく利用される。
意外と変態的な言語: オブジェクト指向, 並行処理, イベント(メッセージ)ベース。
プログラムのシェア/フォーク(リミックス)のためのプラットフォームも提供。
Scratch専用SNS環境もあり。
実は、3つのバージョンがある。
table:Scratchのバージョン
ver 実装言語 拡張方法 610t作 online offline 備考
1.4 Smalltalk 遠隔センサー M5Scratch x o Smalltalkを直接使った魔改造も可能
2 Flash(EoL) JavaScriptなど o o Flashが死んで使えない
3 JavaScript 拡張機能 M5bitLess o o
End of Life (現在使えないもの)
Scratch 2: FlashがEoLのため。
Scratch 1.4: 32bitアプリなので最近のmacOSでは死んでますorz
https://gyazo.com/18bdd10a8d63ac6c72fce701dc36ddf7
Scratch 1.4:遠隔センサー
Scratch 1.4:Scratch遠隔センサーを使って、TCP/IP (ポート42001)経由でデータのやり取りができる。
テキストベースのプロトコル。
メッセージのやり取り
broadcast "メッセージ"
変数のやり取り
sensor-update "変数名" "値" ...
https://gyazo.com/dbe77008ce27cc6616058aed1e1e01be
Scratch側での準備:遠隔センサーを有効にする。
調べる->"スライダセンサーの値"を右クリック->"遠隔センサー接続を有効にする"を選ぶ。
https://gyazo.com/7515f6592eaba8833caf92b6b8ba3cbc
M5Stackとの連携例
M5Stack -> Scratch (逆は難しい?)
ビジュアルプログラミング、夢のコラボ!!
https://gyazo.com/7f7fd7b9abeaf4b764b368aee2a3d3d1
https://gyazo.com/45cae94aac2def5896b2362dfa84c489
https://www.youtube.com/watch?v=tUXKSZtTxOE&t=48s
おまけ: スマートフォンからScratch 1.4を使う。
iOS: 軽く探した範囲では見つかりませんでした。情報求む!!
https://gyazo.com/5e3648777b3d8a1e0455336c5960630c
おまけ:Scratch1.4でSmalltalk魔改造
Smalltalk(Squeak)を利用する手順
画面左上のSCRATCHのロゴの”R”の部分をShiftキーを押しながら左クリックすると以下のメニューが開く。
https://gyazo.com/513f410475770777183afa1596685299
"turn fill screen off"を選ぶと白い背景が見えるので、ここを左クリックするとSmalltalkのメニューが出てくる。
https://gyazo.com/68139b3ce1d58a66f31556d8584c9363
後は、hackするだけ!!
https://gyazo.com/6f48f680cbaa737bfbd11657ecafd356
Scratch1.4でSmalltalkを使う場合の参考情報
Scratch 2 (End of Life)の拡張方法
既に使えないので、ザックリと。
ScratchX: github上にある特定の書式に従ったJavaScriptで書かれた実験的な拡張機能(extension)を追加することができる。 https://gyazo.com/09081796b6f296ae468257c82083fe53
自力でオフライン(デスクトップ)版を改造する。
Scratch3の拡張機能
Scratch3に追加の機能を実現する方法。
Scratch3の公式拡張機能の一部 (ハードウエアに関するもの)
https://gyazo.com/cffcd74efaeae6aa7cce24ded85d6eda
Scratch3のサーバー()のソース(JavaScript)は公開されている。 Scratch3のサーバーに拡張機能を実装すれば、My Scratchが。
拡張機能入のScratchサーバを自分で立てる。
(必要であれば)クライアント側も自分で書く。
Stretch3:拡張機能実装例
Stretch3:非公式Scratch3拡張機能が使えるサーバー
楽しい拡張機能がいっぱい!!
AI 関連
自分で学習したモデルが使えるもの
既にあるモデルを使うもの
ポーズ認識
Microbit More
https://gyazo.com/14e6eb682f3c4bd7b62bb1179634e4af
Microbit More for Scratch x micro:bit
https://gyazo.com/3071757b69f52ccb4f16357d7a02c61e
Scratch3からmicro:bitの全ての機能を使うための拡張機能。
公式micro:bit拡張機能は、ジェスチャーなど限られた機能しか使えない。
ソース
M5bitLess
https://gyazo.com/63c4ed0a62a5a77efe1263f67eac8756
M5bitLess=M5Stack一家をmicro:bitのようにふるまわせてMicrobit More(↔︎Less)を使う
Microbit Moreの寄生虫
作った背景
Arduino IDEでの作業がほぼ必須。
IPアドレスやWi-Fi設定の変更。
自分好みのデモへの変更。
Scratch拡張機能側とM5Stack側を同時に作っていくと、ぜったいハマる自信がある。
Microbit Moreがあるんだから、M5Stackがmicro:bitのフリをすればいいんじゃね?
対応しているブロック(赤枠部分)
https://gyazo.com/520645ef40c290104f19f539a1701f2c
デモ
発表当日はライブでデモします。
https://youtu.be/iFvyk9Q_aNg
おわりに
ScratchとM5Stackで遊ぶととても楽しい!!
Scratch 1.4遠隔センサー
x UiFLOW
x M5Scratch
Scratch3 + Microbit More
x M5bitLess
まだまだ実装できていない機能があるので、一緒に作りませんか!!
当日の情報へのリンク
https://www.youtube.com/watch?v=_6NbsS_av-4&t=2957s
参考情報