音を奏でて toio を動かす！（p5.js・ml5.js・p5.toio を用いたバージョン）

完成 © CC BY 4+ visibility750
完成 © CC BY 4+
visibility750

以前 2020年に、つくばや東京のメーカーフェアに出展した「音で toio を操る作品」の実装を、ある API から別ライブラリなどに変えたバージョンを作りました

link https://www.youtube.com/watch?v=6Qa7oShcbgA
folder アプリケーション, データサイエンス / AI / BOT, 電子工作, ロボット, インタラクティブデザイン, レゴ
sell JavaScript, toio, Teachable Machine, p5.js, p5.toio, XUI, ml5.js, ゆるメカ
  • image
arrow_back_iosarrow_forward_ios
1
2
動画
開発素材

ガジェット

ツール

システム構成
system image

仕組み

作品の動作や概要

  • ハンドベル・卓上ベルの音を鳴らすと、その音色に反応して小さなロボットの「toio」が動きます
  • ハンドベル・卓上ベルのどちらを鳴らしたか、卓上ベルについては普通に鳴らしたか連打して鳴らしたかによって、toio が異なる動きをします（全3種類）
  • 鳴らした音を聞きわける部分には、Googleさんが提供している AI・機械学習の仕組みの「Teachable Machine」を使っています。それに関して事前に複数の種類の音を、機械学習で学習させています
  • toio を動かす部分は、PC との間で無線の「Bluetooth」による通信を使っています
  • 全て JavaScript で実装したプログラム（いくつかのライブラリを活用）で、それを使った処理はブラウザ上で行っています

体験してもらっている様子の一例【以下の X のポスト上半分】

様々な場所で展示をしているのですが、小さなお子さんでも体験でき、楽しんでくれます！
（一度体験した子が、他のブースなどまわって、その後にも 2度・3度と来ては繰り返し・長時間体験してくれたりしました）

利用している技術・仕組みやライブラリ

  • Teachable Machine
    • AI・機械学習モデルの作成（音用のモデル）
    • 上記の事前学習済みモデルを使った、鳴らされた音の識別
  • ml5.js
    • JavaScript による機械学習を扱いやすくしてくれるライブラリで、Teachable Machine を扱いやすくするために利用（ライブラリは TensorFlow.jsベースで実装されているもの）
  • p5.toio
    • PC のブラウザと toio の間での Web Bluetooth API を使った通信処理を使いやすくしてくれるライブラリ
  • p5.js
    • p5.toio が依存しているライブラリで、ブラウザのキャンバスを使った 2D／3D 描画に関する描画ライブラリ

利用しているデバイス・物

  • toio
    • 小さなロボットトイです
  • LEGOパーツ
    • 見た目を可愛くするため、上部に LEGO の板と目玉のパーツをつけています
  • PC
    • Google Chrome で JavaScript のプログラムを動かしています
  • 100均の音を鳴らすアイテム
    • 音色の異なる 2種類のベル（卓上ベル、ハンドベル）

実物はこんなセットです（※ ポストの上半分の部分の写真内、なおかつ電子ペーパーデバイスは除く）。

関連する技術情報

書籍を出版したもの

●Amazon.co.jp: 「Teachable Machine」による機械学習 (I/OBOOKS) : 豊田 陽介: 本 https://www.amazon.co.jp/dp/4777522059

関連技術についての自身のアウトプット（主なもののみ抜粋）

●Teachable Machine を使った音声からの任意のキーワードの検出（ブラウザ上で機械学習） - Qiita 　https://qiita.com/youtoy/items/9096836e5d77274500ea

●toio を音で制御してみた（Audio用の Teachable Machine でベルやタンバリンの音を機械学習） - Qiita 　https://qiita.com/youtoy/items/37f70bb4ce630e6cbd92

●p5.toio を使ったシンプルな p5.js のプログラム：接続中の toio の数の表示や move()、rotate() などによる走行 - Qiita https://qiita.com/youtoy/items/f67e6a3624ec260f2022

ストーリー

この作品について

作品を作ったきっかけ

当初は、2020年につくばや東京でのメーカーフェアに出展するにあたり作った作品です。

toio のユーザーコミュニティで出展応募していた「 Tsukuba Mini Maker Faire 2020 」に通ったので、その際に、自分が気になってた機械学習の仕組みである「 Teachable Machine 」を toio と組み合わせた何かを作ってみよう、と思って作りました。

↓こちらが最初に作ったバージョンの作品ページです。
●音を奏でて toio を動かす！ | ProtoPedia
https://protopedia.net/prototype/1976

作ったものを第三者に体験して楽しんでもらえるものにする、ということを非常に重視しました。

作品を作るにあたってのコンセプトなど

他の作品でも共通する部分が多いですが、以下のようなコンセプトを考えつつ作っています。

  • サクッと試せる体験型展示
    • 何か動作をしたら反応が返るのを楽しめるインタラクション型の作品にしており、展示イベントで多くの方が来ても皆さんに体験してもらえるように、短時間でも試せるものにしています
  • 子どもから大人まで楽しめる
    • 小さな子どもから大人まで幅広い方が楽しめるよう、体験する際に必要な動作はシンプルに（今回は、ベルを鳴らすだけ）、何が起こるかは説明不要（今回は、音色の異なる音を鳴らすと、ロボットが違う動きをする）という作りにしています
    • 100均の音を鳴らすグッズを探したのですが、その際に未就学児童のお子さんでも容易に音を出せる、また手に持って大きすぎない（なおかつ、大人が使っても扱いにくくない）というものを選んでいます
    • 音が鳴ると小さなロボットが可愛く動くという、少し意外性のある結びつきを作って、シンプルですが楽しさや驚きがあるものにしています
  • 分かりやすく楽しい要素を入れる
    • 特にお子さんがくいつく、連打という遊び要素を入れています。それについて、「連打＝早く叩く ⇒ 速く動く」という、スピードつながりで連想しやすい、何が起こるか把握しやすいつながりを作っています。
  • 持ち運びが簡単なセット
    • 遠方での展示イベントに出たり、展示の依頼をもらうこともあり、持ち運びしやすい構成で作っています

意図していなかったものの、結果的に得られた効果

  • 非日常を体験できる
    • 日常で鳴らす機会が少ないことも多い、ハンドベル・卓上ベルを鳴らす、ということに非日常の体験を感じて楽しんでもらえた方が多くいらっしゃいました
  • 普段は怒られることをやれてします
    • 普段の飲食店などで、お子さんが卓上ベルを連打する、というのは怒られる行動ですが、そのいつもは禁止されてできない非日常を楽しめる、というところで面白がってもらえたことが多くありました

初期バージョンとの違い

今回のものは、当初「 JavaScript ＋ ml5.js 」の組み合わせで作ってバージョンに関して、いくつかのライブラリを使った実装に変更しています。具体的には、toio を扱う処理が非常に楽になる便利なライブラリ「p5.toio（と、それに付随して必要になる p5.js）」を使ったものにしています。那須での展示イベントに出展する機会があったあたりで、本バージョンのものを作りました。

あと他に、北は北海道の美唄から南は愛知県の名古屋までと、様々な場所で展示をしていく中で、自分が便利に展示対応できる展示側向けの機能追加も行っています（体験する側から見た挙動は変わらないですが、展示対応者が便利になる機能）。

いろいろな場所で展示をしている背景

色々な場所・機会で展示を行っています。
その機会について、自主的に展示を申し込んだものもあれば、個人宛に出展依頼をもらって対応した案件もあったりと様々です。

小さな子から大人でも楽しめるというところを評価してもらって、未就学児や小学生と親御さんが来るイベントでのお楽しみコーナーを作るという展示依頼をよくもらいます。他に、AI・機械学習とロボット制御という要素があるところから、技術を学ぶイベントに来た小中高生に、複数の技術を組み合わせて面白いことができる事例を見せてほしい、という意図での展示依頼をもらったりもします。

各地で展示をした時の様子

上記のように、この作品は、モノ作り系のイベントや様々な年齢層の方が来訪するイベントで展示しています。 その様子を一部抜粋して、こちらで紹介します。

那須でのイベント「DGであそぼ」

展示した作品をたくさんのイベント来場者の親子に体験いただけました

https://twitter.com/youtoy/status/1756200027423469945

福島県矢吹町での親子向けイベント「やぶきプログラミングフェス with DecaDojo」

福島県の矢吹町の親子向けイベントでも、楽しんでもらえました

https://twitter.com/youtoy/status/1801950437194825847

子ども向けデジタル体験型施設「PITAAAN！」の開所イベント＠北海道

北海道の美唄でも作品を展示しました（体験してもらっている様子は、冒頭部分に掲載済み）。

東大の本郷キャンパスでのイベント「Scratch Day 2024 in UTokyo」

Scratch やその他、プログラミング・技術が好きな子どもや大人が集まるイベント、「Scratch Day 2024 in UTokyo」で展示しました。

↓その出展に関して、作品紹介を Scratch で出すという要件があり、こちらの紹介ムービー的なものを Scratch で作ってみたりもしました

https://scratch.mit.edu/projects/1011744858/

初期バージョンを展示した時の様子

https://twitter.com/tadfmac/status/1312886905726361601/photo/3

メンバー
  • user
    Yosuke Toyota @youtoy
関連イベント
  • event 【参加無料】DIYなデジタルガジェットで遊ぼ2024 in 那須2024-02-10 開催
  • event ヒーローズ・リーグ 20242024-09-02 開催
  • event 「Ogaki Mini Maker Faire 2024」の出展作品まとめ（一部だよ｜非公式だよ）2024-11-23 開催
関連リンク



user
otama @otama

toioたちの動きが絶妙にきれいでいいですね

user
Yosuke Toyota @youtoy

ありがとうございます！
「展示イベントで長机の一部だけしか使えないとかでも大丈夫な、限られたスペースでも活用できる（そして、机からはみ出て落ちていかない）」とか、「音色ごとに異なる動きの違いが、小さい子から大人まで年齢は問わずで分かりやすくて、良い感じに見えるもの」など、そういうことを考えながら工夫して作った動きなので、動きについてのコメント、嬉しいです！

同じニオイがする作品
  • event Kingyo AI Navi
  • event Mashup Camera - MAカメラ
  • event トイレの神様
  • event TaVision たびじょんメガネ
Proto lovers ♥
user
user
user
user
user
user
user
user
user
user

イベントまとめ

コンテストまとめ

作品を登録しよう

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

close

目次

Proto lovers ♥
user
user
user
user
user
user
user
user
user
user