====== 8-4 電子目はいいぞ！！ ======
===== 👁 👁 深淵へようこそ 👁 👁 =====
**__本資料最終章は講師最推しにして爆推しの「電子目」のコーナーです。__**
電子目には難しい仕様もあり、開発には多くの苦難も付きまといますが、それを補って余りあるほどのロマンがあります。そして何より楽しいです！
講師が今まで開発してきた電子目の知見と、その過程で得た電子目の情報をまとめましたので、こちらを参考に、少しでも興味があればぜひ開発に挑戦してみてください！
　　
{{youtube>Wti9km0d_P8?large}}
　　　　
===== 「電子目」とは =====
「電子目」は講師が勝手に提唱している概念で、ディスプレイを使ったきぐるみ(や、ぬいぐるみ、ドール、ロボット等)の目を指します。
少なくとも着ぐるみ界隈・Furry Fandomではまだ特定の呼び名は定着していないようで、英語だと「display eyes」とか「animated eyes」等の呼び名を観測しています。
ディスプレイにマイコンを接続し、目の柄や視線をコントロールし表示することができます。

{{:gimmickkouza:electronic_basic:8:8-29.png?400|}}

=== 電子目の魅力 ===
== キャラクターに複雑な表情や生命感を与える ==
よくつくられた電子目は、きぐるみ等により複雑な表情や生命感、躍動感を与えます。

== 常識をぶち壊し見る者に驚きを与える ==
本来きぐるみの目は動きません。というか「動くはずがないもの」と思って皆さん見ています。
その固定観念に真正面からグーパンチを叩きつけていきましょう。

== 意思疎通の手段にもできる ==
きぐるみは(特に中の人がしゃべらないキャラは)意思疎通が難しいです。
電子目に表示するものを工夫することで、その機能を補うことができます。

== メカ系の機構が存在せず、駆動音が皆無 ==
キャラクターの目をコントロールする手段としてアニマトロニクスがよく用いられますが、こちらはサーボモータの駆動音が(製品にもよりますが)結構騒がしいです。
キャラクターの目をコントロールしたいがアニトロの雑音が気になってしまう方には、無音で実現可能な手段として電子目をオススメしたいです。
またアニトロとは違いメカ系の機構も使わないため、そういったものの作成や保守を苦手に感じる方にもオススメです。
　　
=== 電子目の難点 ===
== 真昼の屋外に致命的に弱い ==
よく晴れた真昼の屋外でスマートフォンを使うと「画面が暗くてよく見えないな～」と感じます。
これはディスプレイの輝度に対して周囲が明るすぎるのが原因です。これと同じことが電子目でも起こります。

{{:gimmickkouza:electronic_basic:8:8-30.png?600|}}

上の左右の画像は同じ日・同じ時間(1月のAM11:39)に、同一の電子目をそれぞれ屋内と屋外で撮影したものです。
屋外で撮影した方は問題なくディスプレイに表示されているにも関わらず、ほぼ目を視認できません。
　　
2024年3月現在、個人レベルでこの問題を解決できる方法は思いつきません。
デジタルサイネージのように真昼の屋外でも力強く光る性能を持った超小型ディスプレイの発売を待つしかないのかとも思いますが、そんなものが実現可能なのか・実現したとして一体どれだけの電力を消費するのか、どれだけの電圧が必要なのか・お値段はいくらになるのか等を考えると嫌な予感しかしません。
(そもそもこんなマニアックな需要が他にある気はしないので、そのようなブツが開発される気すらしませんが…)

== 夜の屋外は撮影に弱い ==
夜になったらなったで今度はディスプレイの輝度が周囲の暗さに対して明るすぎになってしまいます。
ディスプレイを視認する分には問題ないですが、問題は写真を撮ったときです。

{{:gimmickkouza:electronic_basic:8:8-31.png?300|}}

上の図は先程の2つの図と同じ日の夜に撮影した写真です。
ディスプレイのバックライトが激しく、目の柄が白飛びしてしまっているのがわかります。
撮影用の機材の性能や、撮影者の腕前によってはある程度カバーすることはできるようです。
(講師は撮影方面は詳しくないので、具体的な撮影機材や撮影手法についてはわかりません)

== ディスプレイによりフリッカー現象が発生する ==
{{:gimmickkouza:electronic_basic:8:8-32.png?400|}}

上の図は両目にめちゃくちゃ黒い線が入ってしまったかわいそうなデューです。
講師が今のところこの現象に遭遇したディスプレイは一種類のみですが、それがお気に入りのディスプレイだったので、この現象に長年煮え湯を飲まされ続けてきました。
　　
原因は「フリッカー現象」です。
**OLEDディスプレイでは、この現象が大なり小なり仕様として発生するようです。**
対策も講じましたが結局どうにもできず別の種類のディスプレイに換装しました。
こちらは機材や撮影者の腕前でカバーするのは相当難しいそうです。
　　
ちなみに冒頭のデューの目に使っているディスプレイは、4D SystemsのμOLED-128-G2です。
この現象さえなければ非常にいい商品なんですけどねーこれ……

== バッテリーが切れるとキャラの目が死ぬ ==
当然ながらそうです。きぐるみの実際の運用時間を考えたバッテリーを用意してください。
駆動時間が短い場合は容量を大きくする他、予備バッテリーを複数持ち歩くのもありです。

== 中の人の視界を別で用意する必要がある ==
キャラ系のきぐるみは目自体がメッシュやアルミパンチになっていて、そこから中の人の視界を取ることができます。
しかし電子目はディスプレイを通して外を見ることはできないので、別の部分に視界を設ける必要があります。
条件的にはリアル系と同じですが、視界を設けたい部分にディスプレイの設置箇所が干渉するのを避けたりと、若干めんどくさいです。
　　
ちなみに外を見ることができるディスプレイもあります。
透過OLEDは、その名の通り透明なOLEDです。SwitchScienceのこの商品なんかがそうです。
(参考：https://www.switch-science.com/products/8315)　

きぐるみ用ではサイズ的に厳しいかもですが、メカヘッドなどはワンチャンありかもしれません。
なお大きなサイズの透過OLEDは、2024年3月現在BtoCでの販売経路は見当たりません。
　　
またフルカラーのシースルーディスプレイも存在します。
しかしこちらは透過OLED以上に個人で入手するのは困難かと思われます。
またかなりのパワー系ソリューションとして、カメラアイを自作してヘッド内に配置したディスプレイから外を見るという手法もあります。
講師はまだやったことがありません。
　　
{{:gimmickkouza:electronic_basic:8:8-33.png?400|}}
ちなみに2代目デューの視界はこんな感じになってます。
　　
　　
===== 電子目向け・ディスプレイの選び方 =====
==== ディスプレイの種類比較 ====
第6章のLCDの項でも少し話しましたが、電子目を作る場合に推奨するフルカラーディスプレイは以下の二種です

  * IPSの液晶ディスプレイ(IPS LCDとかTFTって書いてあるやつ)
  * OLED

それぞれのディスプレイについて、特徴の比較表を作りました。
一応参考までに、非IPSのTFT LCDも載せておきます。

^ IPSじゃないTFT LCD                                                                             ^ IPS TFT LCD                                                                     ^ OLED                                                                                                                ^
| メリット：\\ ・比較的安価\\ \\ デメリット：\\ ・製品にもよるが視野角は\\ 　期待しない方がいい  | メリット：\\ ・視野角が広い\\ ・比較的安価\\ デメリット：\\ 　(特になくない？)  | メリット：\\ ・視野角が広い\\ \\ デメリット：\\ ・寿命は液晶より短い\\ ・フリッカー現象が発生\\ 　する可能性がある  |


表を作るまでもなく、IPS LCDが圧倒的最強ですね。
ただ実際は欲しいサイズの商品が無かったり、サンプルコードが使いたいディスプレイに対応していなかったりして、IPSの商品を選択できない場合もあります。
　　
==== 電子目に使えそうなディスプレイ紹介 ====
ディスプレイ製品を多く手掛けているメーカーごと、電子目で使えそうなディスプレイを紹介します。

=== Adafruit ===
この講座では(主にライブラリで)散々お世話になってきました、我らがAdafruit様のご登場です。
Adafruitは電子工作をコスプレやウェアラブルといった分野に活用することに非常に意欲的なメーカーです。
公式サイトには自社製品やライブラリを使った様々な制作例が掲載されています。

特に__電子目には並々ならぬ熱意__があるようで、後で解説しますがUncanny EyesとMonsterM4SKという本当にすばらしいコード・製品を開発しています。
製品の品質・クオリティ共に高く、製品ごとのサポートページや作例も充実、フォーラムもあるなど、とにかく安心して使うことができるので**超オススメです。ただし高いです。**

Adafruitのディスプレイで電子目に使えそうなものは以下の通りです。

== Uncanny Eyes コードがサポートしているディスプレイ ==
Adafruitが提供している電子目プログラム、「Uncanny Eyes」が動作対応しているディスプレイ二種です。
上は非IPSのLCD、下はOLEDです。
　　
Adafruit 1.44" Color TFT LCD Display with MicroSD Card breakout - ST7735R
https://www.adafruit.com/product/2088
　　
OLED Breakout Board - 16-bit Color 1.5" w/microSD holder - EYESPI Connector
(Adafruit公式)：https://www.adafruit.com/product/1431
(SwitchScience)：https://www.switch-science.com/products/1754

== プリメイドの電子目 ==
Adafruitはプリメイドの電子目も開発・販売しています。
最も有名なのが「MONSTER M4SK」です。海外(欧米)の電子目キャラはだいたいこれを使っている印象です。
一つ目でよければ「HalloWing M0 Express」「HalloWing M4 Express」という製品もあります。

{{:gimmickkouza:electronic_basic:8:8-34.png?400|}}

Adafruit MONSTER M4SK - DIY Electronic Eyes Mask
(Adafruit公式)：https://www.adafruit.com/product/4343
(Mouser)：https://mou.sr/49RcpOs
→ちなみにこちらの製品に使用されているディスプレイは240x240 IPS TFTです。

== その他のディスプレイ ==
{{:gimmickkouza:electronic_basic:8:8-35.png?400|}}

Adafruit 1.54" 240x240 Wide AngleTFT LCD Display with MicroSD - ST7789
(Adafruit公式)：https://www.adafruit.com/product/3787
(SwitchScience)：https://www.switch-science.com/products/8716
→IPSのディスプレイです。
　講師はUncanny Eyesをどうしてもこのディスプレイで使いたかったので、コードを改造して対応に成功しました(上の図がそれ)
　なので超がんばればUncanny Eyesをこのディスプレイで使うことも不可能ではないです。**超がんばればね。**
　　
2.0" 320x240 Color IPS TFT Display with microSD Card Breakout - ST7789
(Adafruit公式)：https://www.adafruit.com/product/4311
(SwitchScience)：https://www.switch-science.com/products/5809
→上のディスプレイよりもちょっと大きいIPSディスプレイ。1.9インチもあった。
　　
=== 4D Systems ===
るためすたが最初に作った電子目では、こちらの会社のディスプレイを使いました。
この会社のディスプレイは、__Workshop4IDEという専用のソフト(無料でDLできます)で管理をする__のが特徴です。
Workshop4IDEにはディスプレイのファームウェアの書き換えや、ディスプレイ内のストレージ・SDカードへの画像データの書き込み、Arduinoで使えるコード生成等の機能があります。
またこの会社のディスプレイは、IDEを使って内部に独自言語のコードを書き込み、外部のマイコンなしで単独で動作させることができます。Arduinoなどのマイコンに繋いで使えるディスプレイとして使いたい場合は、IDEでファームウェアを書き換えることで対応できます。

…機能充実してるし「めちゃ便利そう！」って思うじゃないですか？
**ところがこのIDEはめちゃくちゃ癖が強いんだなァ～～～～～～～～～(心の叫び)**

という感じなので、手放しにオススメはできないです。
ただめちゃくちゃ癖は強いですが、製品としての質は非常に良いですし、癖にめげずにIDEを使いこなすことさえできるようになればいいアイテムではあります。
(日本語のまともな解説がぜんぜんないのが致命的と思うんですよね～～～まあ英語もないけどな！
え？お前が書けって？やだ～～～～～～～～～～～～～めんどくさい！！！！！！！！！ (大の字))
　　
またこのメーカーのディスプレイの特異な点として、マイコンとの接続は一般的なディスプレイで使われるSPIではなく、UARTで接続するというのがあります。
またタッチパネルの機能を持っているディスプレイの選択肢も多いので、タッチ機能を使いたい場合は使用を検討してみてもいいかもしれません。

== 4D Systemsのディスプレイで電子目に使えそうなもの ==
{{:gimmickkouza:electronic_basic:8:8-36.png?400|}}
uOLED-128-G2
https://4dsystems.com.au/products/uoled-128-g2/
→フリッカー現象に悩まされたディスプレイですが、フルカラーOLEDの選択肢は非常に少ないので掲載しておきます。
　繰り返しますがフリッカー現象が出る以外は悪くないんですよね…ホント。
　　
{{:gimmickkouza:electronic_basic:8:8-37.png?400|}}
pixxiLCD-13P2
https://4dsystems.com.au/products/pixxilcd-13p2/
→円形のIPS LCDです。
　2ndデューの目に使っていたuOLED-128-G2のフリッカー現象に耐えられなくなり、こちらのディスプレイに換装しました。
　SDカードスロットとねじ止め用の穴がないのが玉に瑕。
　　
{{:gimmickkouza:electronic_basic:8:8-38.png?400|}}
pixxiLCD-25P4
https://4dsystems.com.au/products/pixxilcd-25p4/
→テスト用としてよく使う少し大きめのディスプレイ。
　同じモデルのタッチパネル搭載版も売っている。
　このメーカーはかなり大きめのディスプレイも商品ラインナップにあるので、そのうち何かに活用できないかな～などと思ったり。
　(一枚持ってるけどね)
　　
== 4DSystemsのディスプレイ購入サイトと注意点 ==
4Dのディスプレイは国内の主要な電子部品販売サイトではほとんど取り扱いがありません。
なので下記のサイトのような、海外在庫に強いサイトや海外サイトから通販する必要があります。
　　
　RSコンポーネンツ：https://jp.rs-online.com/web/b/4d-systems/?displayMonolithBrandPage=true
　Mouser：https://www.mouser.jp/manufacturer/4d-systems/
　　
注意点として、**こういったサイトで海外製品を購入する際は、必ず無線通信機能の有無をチェックし、そういった機能が搭載されていない商品だけを購入**してください。

SwitchScienceなどで売っている無線機器は、主に販売サイトがわざわざ技適取得の手続きをしてくれており、法的に問題のない状態の商品が販売されています。
しかし自前で海外通販をする場合は、その手続きがされないまま無線機器が届きます。
当然ながら日本国内でその機器を使うことはできません(技適違反となります)
__自身で技適を取得することも不可能ではないですが、掛かる手間や費用を考慮すると、到底現実的とは言えません。__
4Dのディスプレイには無線通信機能が搭載されているものがあります。くれぐれもご注意ください。
　　
=== Waveshare ===
第6章でお世話になったLCDディスプレイのメーカーです。安価なIPSディスプレイを多く取り揃えているのが特長です。
独自のサンプルコード(R4シリーズは2024/3現在非対応)が用意されている他、搭載しているドライバによってはAdafruitのライブラリを使うことができます。
　　
こちらのディスプレイで"るた式電子目"の制作に挑戦するには、画像を二次元配列にして読み出すか、画像を保存しておいて読み出す
SDカードモジュールを用意する必要があります。
(参考：https://www.waveshare.com/wiki/Image_Extraction)
　　
どちらも講師は実践しておりませんので、実用可能なレベルで動作するかどうかは不明です。
AdafruitのUncanny Eyesを動作せられるかも不明です。
商品自体は安いですがうまくいかなかった場合は赤字になります。
手堅くいきたければAdafruitのディスプレイをオススメします。
「失敗したら遊び倒すか転用するか～～～」と思えるなら悪くないと思います。表示も普通にきれいだし。

== Waveshareのディスプレイで電子目に使えそうなもの ==
リアル系ならいけそうなサイズ感の物で、IPSの商品3種です。
上2つは日本国内の販売店で取り扱いがあるみたい(「waveshare (品番(SKU))」で検索検索ｩ)
ですが、2インチはなさそうに見えたので、海外通販コースかもしれません。
　　
1.69inch LCD Display Module, 240×280 Resolution, SPI
https://www.waveshare.com/1.69inch-LCD-Module.htm
　　
1.9inch LCD Display Module, 170×320 Resolution, SPI
https://www.waveshare.com/1.9inch-LCD-Module.htm
　　
2inch LCD Display Module, IPS Screen, 240×320 Resolution, SPI
https://www.waveshare.com/2inch-LCD-Module.htm
　　
　　
===== 電子目の作り方：その1・るた式電子目 =====
るた式電子目です。前項でご紹介した4DSystemsの3種で動作させた実績があります。
使うディスプレイによりコードが異なり、全てのディスプレイのサンプルコードを用意するだけの手間はかけられないので、サンプルコードはありません。
(4Dのディスプレイ一つとっても、製品ごとに異なるプロセッサを搭載していて使えるライブラリが違うんスよ…)
　　
__本項で説明するのはるた式電子目の理論と構造にすぎません。__
しかしそれが理解できれば、あとは**あなたの実力次第で(それと選択するディスプレイやマイコンの処理能力次第で)他のメーカーのディスプレイでも同じ動作原理で電子目を作ることができるはず**です。

==== 材料について ====
必要な材料は以下の通りです。

== マイコン：1個 ==
講師はArduino Nano Everyをよく使います。
4Dのディスプレイを使うのであれば、NanoEveryと同等かそれ以上の処理能力を持ったマイコンなら大丈夫だと思います。
5V動作の物が望ましいです(4Dのディスプレイは5V駆動です)
4D以外のディスプレイの場合はちょっとわかりませんが、なるべく処理能力が高いマイコンを選んだ方がいいような気がします。

== ディスプレイ：2枚 ==
同じ種類のディスプレイを2枚用意します。
SDカードスロット、或いはディスプレイに内部に画像を保存するための十分なストレージがあるものにします。
SDカードに画像を保存する場合は、ディスプレイの要件に合ったSDカードも必要です。

== コントローラ：必要に応じて ==
目やまぶたを動かすための何らかのコントローラを用意したければします。
定番のコントローラはジョイスティックやタクトスイッチ辺りでしょうか。
コントローラを使わない場合は、プログラムの書き方次第で自動運転でランダムに目を動かすようにすることもできます。
　　
==== マイコンとディスプレイの接続について ====
マイコンにディスプレイ2枚とコントローラを繋ぎます。
ディスプレイがSPIであれば、共有できるピンは共有します。
高速に動作するハードウェアSPIを使用すべきかと思います。
　　
4Dのディスプレイを使う場合はUART接続を使いますが、ここで難しいポイントです。
定石通りディスプレイ1枚に対し1つのUARTを使う…例えば左目ディスプレイにSoftwareSerial1、右目のディスプレイにSoftwareSerial2を割り当てたとして、それぞれのディスプレイに送る命令文は別々の文になります。
SoftwareSerialは処理負荷が大きいせいか、左目への画像表示処理が終了するまで右目の処理は待機するっぽく、つまり左右同時に目を動かすことができません。
例えばまばたきの命令を左目→右目の順に実行すると、左目がまばたきしてから右目のまばたきが開始します。
(処理能力爆高いマイコンだとこの辺の動作はどうなるんだろ…それともArduino言語自体の仕様？)
　　
この問題に対し、2020年の自分はトライアンドエラーを繰り返しながら、**邪道すぎる対処法**を編み出しました。それがこちらです。

  * ディスプレイは2枚とも、同一のUARTに接続します。
　　2枚のうち片方のディスプレイはRXとTXの両方を、もう片方はRXのみ配線します。

  * ディスプレイのSDに入れる各画像は、左右完全に同じ順番でSDに書き込みます
　　
動作順序としては、

①ディスプレイは左右ともArduinoから画面表示の命令をRXで受け取ります。
　同じピンに接続しているため、RXへの信号はどちらのディスプレイにも同じ命令が同時に届き処理されます。

②4Dの命令文は、「SDの中のXX番目の画像を表示しろ」みたいな感じなので、
　左右のディスプレイは各々のSDの中にあるXX番目の画像を表示します。
　SD内部の画像は左右共同じ順番に書きこまれているので、左右の目で対応した画像が読みだされ表示されます

③ディスプレイからもTXの信号がArduinoに向けて発せられていますが、こちらは片方のディスプレイしか繋がっていません。
　Arduinoは片方のディスプレイのTXを受け取ります。
　もう片方も信号を発してはいるものの、繋がれていないので垂れ流し状態です。
　しかし自身の信号をArduinoが受け取ったかどうかをチェックする機能はないですし、
　ディスプレイから受け取った信号をもとに何かを処理する命令もArduino側にはないため、全体の動作には影響がありません。
　(仮にもし何かに影響を与えていても、左右のディスプレイは"必ず同じ動作をする"前提なので、
　片側の通信をもとに処理されていれば問題はない)
　(ちなみにTXを2台とも接続すると、当然ながらクラッシュします)
　　
つまり、**ArduinoにはUARTに一つの機器が繋がっていると誤認させ、ディスプレイにはどちらも一台のマイコンと繋がっているよう誤認させているような状態**にしています。
言ってしまえば"誤作動"の状態ですが、それでこちらが望む条件に合致した動作をしてくれるので、そのまま正式に採用しています。
(今のところ特に問題は生じていませんが、正しい使い方ではないことを承知の上でやってください)
　　
==== 目の動きの動作原理 ====
=== 導入 ===
るた式電子目では、ざっくり分けて下の3つの目の動きを実現します。

　①目玉の動き
　②まぶたの動き(目閉じ/まばたき/細目)
　③目柄チェンジ

るた式電子目はるた式電子目と一口に言っていますが、作ったモデルにより動作の実現の為に使った手法は異なります。
それらの複数の手法を比較し、4D以外のディスプレイでもなるべく再現可能な、或いは再現しやすい手法を今回は提示したいと思います。

=== 動作原理・①目玉の動き ===
== 基本の処理 ==
電子目は画面上を縦横無尽に目玉が動き回るかのような印象を与えますが、__実はるた式電子目では、目玉が表示される場所が決まっています。__
目(この場合、瞳を指す)が表示されるのは、画面上の中央・上下左右・斜め4方向の全9か所です。
これを図示すると下図のようになります。

{{:gimmickkouza:electronic_basic:8:8-39.png?600|}}

るた式～では、この1～9は個別の画像として表現します。
例えば、ルクの電子目で実際に使われている、1の画像は下のようになります。

{{:gimmickkouza:electronic_basic:8:8-40.png?100|}}

続いて、2の画像はこちらです。

{{:gimmickkouza:electronic_basic:8:8-41.png?100|}}

下には3、4、5、6…と、まあこんな感じです。

{{:gimmickkouza:electronic_basic:8:8-43.png?600|}}
　　
1～9のどこに瞳を表示するかは、コントローラの操作で決定します。
例えばジョイスティックを使う場合、スティックのX軸(横)は瞳の左右方向、Y軸(縦)は瞳の上下方向のポジションを指定します。
スティックをのX軸を左方向に最大に倒した状態、且つY軸を上方向に最大に倒した状態にした時、
ディスプレイには3の画像(下図)を表示するようにプログラムを書いておきます。

{{:gimmickkouza:electronic_basic:8:8-44.png?100|}}

同様に、スティックを右上に倒すと5の画像を、中下に倒せば8の画像を表示するようにします。
(ジョイスティックはスティックの角度により抵抗値が変化する電子部品です。
実際のプログラムでは、一定以上(以下)の抵抗の数値を閾値として、
その抵抗値を超えたことを以て「スティックを○○方向に倒した」と判断します)

== 目が動いているように見える理屈 ==
るた式で目が動く(というか動いて見える)理屈は、パラパラ漫画やアニメーションのそれと同じです。
例えば直前のスティックの操作により、画面には②の目が表示されているとします。
その状態で、スティックのY軸はそのまま・X軸を右方向に倒した時、ディスプレイはすぐさま6の画像を表示します。
画面上では2→6の画像に一瞬で切り替わることにより、人間の目には瞳が左から右に向かって移動したかのように見えます。

== 「中割り」を入れて目の動きをスムーズに見せる ==
{{:gimmickkouza:electronic_basic:8:8-45.png?300|}}

ここでさっきの図をもう一度見てみます。
この1～9の9枚の画像は、電子目の目玉部分の最低限必須の構成要素です。
「最低限」と言った通り、この電子目にはまだ改善できる余地があります。
というのも、この9枚電子目では瞳が動くときにカクカクしたぎこちなさを感じてしまいます。
特に瞳のサイズが小さければ小さいほど顕著に感じられるのではないかと思います。
　　
「中割り」とはアニメーション用語で、"ある絵と絵の間を繋いで自然でスムーズな動きに見せるための絵"を指します。
9枚体制の電子目に「中割り」を足すことで、目がスムーズに動くように見せます。
　　
{{:gimmickkouza:electronic_basic:8:8-46.png?300|}}

そんなわけで中割りを指定しました。この10～25の画像も作成します。**しんどいけど泣かない。**
定位置となる9枚の画像と中割りの画像では、役割が異なります。
中割りの画像は瞳の定位置としては使用しません。中割りを表示するのは、瞳が動くタイミングです。

例えば4から7に目が動く処理が入ったとします。
先の9枚体制では、4→7と表示していました。

{{:gimmickkouza:electronic_basic:8:8-47.png?400|}}

今回は4と7を表示する合間に、その中間地点にある16の画像を中割りとして表示します。
これにより、瞳の動きがスムーズになります。

{{:gimmickkouza:electronic_basic:8:8-48.png?600|}}

中割りの表示は以下のようにするといいかと思います。

  * 基本的には瞳を動かす前後の画像の中間にある画像を表示する
　　→例えば4→7の時は4→16→7でした。
　　　4→1の時は4→14→1です。
　　　2→5の時は2→14→5です。
　　　3→7の時は、3→1→7です。
　　　(1は中割り用の画像ではないですが、この時は中間に位置するので中割りとして使います)
　　　ただしあくまでこれは基本です。原則を理解したうえで、意図的にルールを外すのはありです。
　　　例えば、3→7の時に3→13→7と表示すると、瞳の動きは一瞬の"タメ"を伴うものに変化します。
　　　また3→19→7にすると、瞳の軌道はまっすぐではなく、ブレを伴うダイナミックなものになるかと思います。
　　
  * 瞳の動く速度を考えて表示する画像の枚数を決める
　　→講師の書いたコードでは、どんな瞳の動きでも表示する画像は必ず3枚に統一しています。
　　　例えば4→14→1で3枚ですが、これが4→1→8でも3枚です。
　　　4→14→1→18→8の5枚にはしません。
　　　講師なりの理由としては、
　　　　・中割りは必要以上に書き加えない。
　　　　　今回は3次元的な変化を伴わない単純且つ極めて短距離の動作しかないため、
　　　　　どんな位置からでも間に1枚加えれば十分補完できる
　　　　・表示枚数が増える＝瞳の動きに要する時間が増える
　　　　　なので、5枚表示の箇所の動きだけ僅かにゆっくりになる
　　　　　これを「目の動く距離が長いのだから、多少ゆっくりなほうがよい」と思う場合は、5枚表示を採用してもいいと思う
　　　　　講師は目を観察していて、長距離動作でも動く速度はそんな劇的には変わらないんじゃないかと思ったので3枚にした
　　　　・マイコンとディスプレイの処理能力を気にかけた。
　　　　　特に4Dの場合、通信にCPU負担の高いSoftwareSerialを使うため、NanoEveryといった最強ではない
　　　　　マイコンになるべく負担がかからないよう、多少は気にかけている
　　　　・ただでさえ超長いコードがもっと超長くなるのがなんか厭だった
　　　　　　(当時は今以上に冗長なコードを書いてたのもある。今ならもっとスマートに書けると思う)
　　
=== 動作原理・②まぶたの動き ===
まぶたの動きについては、使用するディスプレイによって実現の仕方が異なるため、ディスプレイ別に解説します。

== 4DSystemsのディスプレイを使う場合 ==
4Dのディスプレイでは、ベース画像の上に画像を重ねて表示することができる機能があります。
(絵描き的な言い方をするとレイヤー表示のようなものです。但し重ねることができる画像は1枚までです)
この機能を使って、瞳の画像の上にまぶたの画像(目を表示する部分は透過処理しておきます)を重ねて同時に表示することができます。

{{:gimmickkouza:electronic_basic:8:8-49.png?600|}}

上の画像(まぶた)と下の画像(瞳)は、どの番号の画像を表示するかを個別に指定することができ、お互いが干渉することはありません。
例えば上にデフォルトまぶたの画像を重ねたまま、下の瞳の画像を変えて瞳を動かすことができます。

{{:gimmickkouza:electronic_basic:8:8-50.png?600|}}

これとは逆に、瞳の画像をそのままに、上のまぶたの画像を差し替えることもできます。

{{:gimmickkouza:electronic_basic:8:8-51.png?600|}}

この連続した画像差し替えを実行すれば目閉じ、直後に逆順の動作を実行すればまばたきになります。
目を細目にしたい場合は、まぶたの表示を「細まぶた」にすればOKです。
**この機能とgifアニメ再生をサポートしてるので4Dのディスプレイはめっちゃ便利なんですよね～**
　　
== 4DSystems以外のディスプレイを使う場合の事情 ==
さて、Adafruitなどのディスプレイでは、画像表示の仕方はライブラリに依存します。
そしてこれらのディスプレイで一般的に使われるAdafruitのST7789ライブラリには、そういった機能はなかったと思います(違っていたらすみません)
このような環境でまぶたを表示・切り替えて表示するには、2つの方法が考えられます。

== 4DSystems以外のディスプレイを使う場合の手法：その1 ==
手法その1は、「瞳の画像自体をまぶたをつけたものにする」です。
最もベタなソリューションです。
手間は甚大ですがプログラミングの知識的な難易度は皆無に等しく恐らく失敗はない方法だ思います。
この方法では以下のように画像を用意します。

{{:gimmickkouza:electronic_basic:8:8-52.png?600|}}

まぶたの中割りは細まぶたの1種のみにしています。
こだわる場合はまぶたの伏せ具合が異なる画像を作り、そのまぶたと瞳を合成した画像1～25も用意します。
目閉じをする際は、下記のように画像を選択し表示します

{{:gimmickkouza:electronic_basic:8:8-53.png?600|}}

瞳を動かす場合は、まぶたの状態を維持しながら動かすのが基本です。

{{:gimmickkouza:electronic_basic:8:8-54.png?600|}}

{{:gimmickkouza:electronic_basic:8:8-55.png?600|}}

== 4DSystems以外のディスプレイを使う場合の手法：その2 ==
手法その2は、「スプライト表示を使い、瞳とまぶたの画像をプログラムで合成して表示する」です。
講師はこの方法を試したことはなく、そういう方法があるということだけ知っている状態なので、うまくいくかどうかはわかりません。
一応そういう方法があるということを備忘も兼ねて提示します。
　　
スプライトとは画像表示に関する技術で、超ざっくり言うとマイコン上で画像の大きさや角度を変えたり、画像同士を合成して表示できたりする技術です。
スプライトを使うには、それを機能としてサポートしているライブラリが必要になります。
どういったライブラリがあるのか、どういった機能が使えるのか等、下記のサイトさんが非常にわかりやすく解説してくださっていますので、そちらをご覧いただければと思います。

　【M5STACK】スプライト技術入門(静止画編) ( Haratta Tech Lab.)：
　　https://haratta-tech-lab.com/m5stack_sprite_image/

スプライト技術を使い画像表示することができれば、4Dのディスプレイのように瞳とまぶたの画像を個別に処理することができるはずです。
(まぶたの画像のうち目が表示される部分は透過色で塗りつぶし、プログラム側で透過色を指定する必要があります)

{{:gimmickkouza:electronic_basic:8:8-56.png?600|}}

懸案事項としては、一般的に画像処理はマイコンに対し比較的負荷が高い処理となります。
用意する画像のサイズや色数・解像度やプログラムの処理等にもよりますが、スプライト技術を使うには相応の性能を持ったマイコンを選ばないといけないのではないかと予想します。
(ArduinoNanoEveryじゃきついんじゃないかな……ChatGPTもそう言ってました。
参考サイトさんはM5Stack使ってますし、ESP32ならいけるんじゃないかな……知らんけど。
まあでもESP32は高確率で煮湯フルコースになるかと思いますので、気軽にオススメはしません)
　　
=== 動作原理・③目柄チェンジ ===
目柄チェンジもディスプレイ別に解説します。

== 4DSystemsのディスプレイを使う場合 ==
複数の目柄を表示したい場合で、その目柄の瞳を動かす必要がない場合(例えば画面中央にハートマーク"♡"やバッテン"×"等を表示するような場合)は、瞳の画像単体を用意します。
コントローラ側から目柄切り替えのサイン(例えばタクトスイッチの入力等)があった場合、瞳の画像を任意の瞳の画像と差し替えます。

{{:gimmickkouza:electronic_basic:8:8-57.png?600|}}

切り替える目柄の瞳を動かしたい場合は、その目柄の1～25の画像セットを用意します。

{{:gimmickkouza:electronic_basic:8:8-58.png?500|}}

目柄と目柄をパッと切り替えるだけでもよいのですが、それに味気なさを感じる方は、__目柄を切り替えるときに演出を入れると非常にいい感じ__になります。
最もシンプルな演出は、例えばまばたきをした瞬間に目柄が切り替わるものです。
もっと凝りたい人は、幸いにして4Dのディスプレイではgifアニメーションの再生をサポートしていますので、切り替え演出をgifアニメーションで作成し、これを再生するとよいでしょう。
各瞳の位置に対応する目柄切り替えgifを9枚分用意するのがしんどければ、目柄を切り替える直前に瞳の位置を中央に戻す処理を挟み、必ず中央で目柄切り替えをするようにすれば1枚で済みます。

参考：デューの目切り替えのアニメーションgif
{{:gimmickkouza:electronic_basic:8:8-59.png?800|}}

ちなみにこの機能は目の切り替え演出以外にも目の特殊演出に悪用することもできます。
デューの場合、目の奥に炎が揺らめくような特殊演出や、ヤバい能力が発動する時のような特殊演出などをタクトスイッチで発動できるように仕込んでいます。
なお後者のgifはあまりにも重くて動作しなかったため、アニメーションを3分割して順番に処理させるようにしています。

== 4DSystems以外のディスプレイを使う場合==
瞳の画像の切り替えは4Dの項と同じようにやればOKです。
まぶたの表示方式を手法①でやっている場合、用意する画像が死ぬほど多くて管理も死ぬほど大変ですが、**気合いでなんとか乗り切ってください。**

問題は目柄切り替え演出です。
Adafruit ST7789ライブラリでは、アニメーションgifの再生はサポートしていなかったと思います。
同じことを実現するためのやっつけ的なソリューションとしては、アニメーションgifの中身にあたる連続した画像を、一枚一枚順番に次々と描画(恐らくスプライト技術が必要になるのではないかと思います)して表示することになるかと思います。
先程のスプライト技術の参考リンク先で登場するライブラリ、「LovyanGFX」を使いアニメーション再生をしている例では、下記のサイトなどがあります。
　　
　MakePython ESP32 Color LCD で LovyanGFXを堪能 (HomeMadeGarbage)：
　https://homemadegarbage.com/makerfabs02
　　
==== るた式電子目の参考資料について ====
るた式電子目については、ざっとまあこんな感じです。
参考までに、ルクの目やデューの目で使った画像実物を8-4-1フォルダ内、「1_るた式電子目」のフォルダに入れています。

<text background="danger">__**これらの画像は、あくまで制作の参考として見ていただくためのものです。
絶対に自分の作品等で利用したり、加工やトレースなどして利用したりしないでください。
転載や配布・販売する行為ももちろん禁止です。**__</text>
　　
{{:gimmickkouza:electronic_basic:8:8-60.png?600|}}
　　
　　
===== 電子目の作り方：その2・Adafruit UncannyEyes =====
==== UncannyEyesとは ====
UnccannyEyesは、Adafruitが提供している電子目のスケッチです。
UnccannyEyesを使った電子目の材料や作り方などはすべて、以下のAdafruit公式ページに掲載されています。

Electronic Animated Eyes for ARM Microcontrollers(Adafruit)：
https://learn.adafruit.com/animated-electronic-eyes
　　
{{:gimmickkouza:electronic_basic:8:8-35.png?400|}}
　　
==== UncannyEyesの特徴 ====
  * 自動運転で目が動く(コードを改造すればジョイスティック等で操作することも可能)
  * まばたきも自動で行う
  * まぶたが目に追従して動いたり、瞳孔の収縮も表現されるなど、非常にリアルな目の動き
  * 目のための画像2枚＋上下まぶた1枚ずつ計4枚の画像から.hファイルを作成し、それをもとに目を描画する
  * 画像は数種類のプリセットがある他、自前で用意してオリジナルの目を作ることもできる
  * 基本的には公式サイトでサポートが明言されているボード＆ディスプレイのためのスケッチ
　　
==== 材料 ====
=== マイコン ===
公式サイトによると、UncannyEyesは以下のボードでサポートされています。

  * Teensy 3.1 もしくは 3.2
  * M0もしくはM4コアを搭載した、ほとんどのFeather(AVRや32u4搭載ボードは不可！)
  * M0もしくはM4コアを搭載した、ほとんどのItsyBitsy(AVRや32u4搭載ボードは不可！)
  * Circuit Playground Express
  * TFT Gizmo

なおサイトの説明はTeensy3.2を使って示されています。
他のボードを使う場合は、ピン配置などで読み替えが必要です。

これはまったくの個人の感想ですが……
Teensyシリーズは超高性能・破格の処理能力が特長の超つよつよマイコンなのですが、
作りが非常に繊細で、**取り扱いを少しでも間違えるとすぐ死ぬ**タイプのマイコンでもあります。
(講師が今までで唯一壊したボードでもあります)
なので、__個人的にはFeatherかItsyBitsyの方がオススメ__です。

Teensy/Feather/ItsyBitsyのいずれもSwitchScienceなど、多くのサイトで取り扱いがあります。
ちなみにUncannyEyesを性能が十分な他のボードで動作するように移植することは、条件次第で不可能ではないですが、ものすごく大変だったのでまったくオススメはしません。
(講師はアホのくせにFeather STM32F405への移植に挑戦し、成功したものの**地獄を見ました…**)

=== ディスプレイ ===
Adafruit 1.44" Color TFT LCD Display with MicroSD Card breakout - ST7735R
https://www.adafruit.com/product/2088

OLED Breakout Board - 16-bit Color 1.5" w/microSD holder - EYESPI Connector
https://www.adafruit.com/product/1431
　　
UncannyEyesが公式にサポートしているのはこの2種のディスプレイです。
片や非IPSのLCD、片やフリッカーリスクのOLEDということで、非常に悩ましいです。

講師はどちらも厭でIPSのLCD(https://www.adafruit.com/product/3787)が使えるよう、コードを改造しましたがこちらもなかなか大変でした。
(マイコンの移植も同時にやったのでどっちがどのくらい大変だったかは忘れました)
　　
==== UncannyEyesの導入 ====
**UncannyEyesの説明全般は公式サイトで十分されているので、そちらを読んでください。**
本資料では、公式サイトの説明のみでは躓きそうなポイントを解説します。

=== スケッチのダウンロード ===
とりあえず公式サイトからUncannyEyesをダウンロードします。
このページ(https://learn.adafruit.com/animated-electronic-eyes/software)の上段にある、
緑のボタン「Download "Uncanny Eyes" Arduino Code」をクリックすると、ソースコードがダウンロードされます。

メインのスケッチは「uncannyEyes」フォルダ内の「uncannyEyes.ino」です。
.hファイルや.cppファイルもプログラムの一部ですので、消さないでください。
「graphics」フォルダ内とその内部のファイルも同様です。
「convert」フォルダ内には、プリセットで入っている目の画像と、画像から.hファイルを生成するためのプログラムが収納されています。

=== 目の設定に必要な.hファイルの作成について ===
この項については、**公式解説でめちゃくちゃサラっと書かれている割に、初心者にはかなりのBIG落とし穴**だと感じたので、しっかり手順を解説します。

== ①目の画像を用意する ==
今回は目2枚(強膜(sclera)と虹彩(iris))、まぶた2枚(上まぶた(Upper lid)と下まぶた(Lower lid))、計4枚の画像から目のデータを生成します。
各画像のサイズや形式等、細かい条件は公式を読んでください。
また「convert」フォルダ内にあるプリセットの画像群は、オリジナルの目画像を作るうえで非常に参考になります。

== ②Pythonのインストール ==
4枚の画像を用意したら、その画像をもとに目のデータとなる.hファイルを生成します。
.hファイルを生成するには「tablegen.py」(と、このファイルとリンクしている「hextable.py」を実行する必要がありますが、このファイルはPythonというプログラム言語で書かれています。
なのでPCにPythonがインストールされていないと、このファイルは実行することができません。
__あなたのPCにPythonがインストールされていない場合、インストールが必要__です。
Pythonのインストール方法は下記のサイトが詳しいです。
こちらのサイトを参考に、お使いのPCへのインストールを完了してください。
　　
　Windows版Pythonのインストール(Python.jp)：
　https://www.python.jp/install/windows/install.html
　　
参考サイトでも書かれていますが、インストール途中に出てくる「Add Python 3.x to PATH」の欄には必ずチェックマークを入れてください。もし入れ忘れてしまった場合は、もう一度インストールし直せばOKです。
上記サイトの「PowerShellの環境設定」の直前まで終了しておいてください。
(「PowerShellの環境設定」は今回使わないので、設定するかどうかはお好みでどうぞ)

== ③Pillowライブラリをインストールする ==
「tablegen.py」のコード内はいくつかのPythonライブラリを使用しています。
殆どのライブラリはPythonインストール時に標準でインストールされていますが、Pillowライブラリだけは自分で追加インストールする必要があります。
　　
{{:gimmickkouza:electronic_basic:8:8-61.png?400|}}
画面左下のWindowsマークの右隣にある「🔎ここに入力して検索」の検索バーに、「cmd」と打ち込み、コマンドプロンプトを立ち上げます。
　　
{{:gimmickkouza:electronic_basic:8:8-62.png?600|}}
なんか黒くて圧のある画面が出てくるかと思います。
こちらがコマンドプロンプトです。
こちらを利用してPythonのライブラリをインストールします。
　　
{{:gimmickkouza:electronic_basic:8:8-63.png?600|}}
コマンドプロンプトに、下記の文を半角英字で打ち込みます。
「pip install Pillow」
打ち込んでエンターを押すと、Pillowライブラリのインストールが開始します。
　　
{{:gimmickkouza:electronic_basic:8:8-64.png?600|}}
なにやら画面にピコピコ表示されます。
「Successfully installed Pillow～～」の一文が表示されれば、インストールは無事完了です。
右上の×を押してコマンドプロンプトは閉じてください。
Python側の準備はこれでOKです！

== ④画像ファイルをフォルダに準備する ==
あなたが用意した画像を、「convert」フォルダ内の「defaultEye」フォルダ内に入れます。
このフォルダには既に画像ファイルが6枚入っていますが、「lid-lower-symmetrical.png」と
「lid-upper-symmetrical.png」だけを残しそれ以外の画像はすべて取り除きます。

その上で、自分が用意した画像をこのフォルダ内に入れます。
各画像のファイル名は以下の通りにしておきます。名前が違うと.hファイルは生成できません。

  * 強膜(sclera)　　　　 →　「sclera.png」
  * 虹彩(iris)　　　　　　→　「iris.png」
  * 上まぶた(Upper lid)　→　「lid-upper.png」
  * 下まぶた(Lower lid)　→　「lid-lower.png」

== ⑤「convert」内でコマンドプロンプトを開きコマンド実行 ==
今回は「tablegen.py」ファイルがある「convert」フォルダ内でコマンドを実行する必要があるため、先程とは違う開き方をします。

{{:gimmickkouza:electronic_basic:8:8-65.png?700|}}
まずは上の図のように「convert」フォルダを開きます。
　　
{{:gimmickkouza:electronic_basic:8:8-66.png?500|}}
ウィンドウ左上の少し下にある、右図青緑で色付けされたバーをクリック。
中身の文字列を消して、「cmd」と打ち込みエンターを押します。
　　
{{:gimmickkouza:electronic_basic:8:8-67.png?600|}}
「convert」フォルダ内でコマンドプロンプトが立ち上がります。
4行目に表示されているフォルダのパス(番地)が「～～～～convert>」で終わっていれば成功です。
　　
この状態で、下記のコマンドを打ち込みます。

「打ち込みます」とは言いましたが、超絶めんどくさいですし絶対打ち間違えるのでコピペでOKです。__むしろコピペ推奨です。__
下記文字列をコピーした状態で、コマンドプロンプトの画面上を右クリックするとペーストされます。
ショートカットキーでももちろんOKです。
<code>
python tablegen.py defaultEye/sclera.png defaultEye/iris.png defaultEye/lid-upper-symmetrical.png defaultEye/lid-lower-symmetrical.png defaultEye/lid-upper.png defaultEye/lid-lower.png 80 > defaultEye.h
</code>
なおドラゴンやヤギのような特殊な瞳孔を持った目を生成したい場合は、
追加の画像を用意し、引数を追加したコマンドを打ち込む必要があります。
下記リンク先、ページの下の方に書いてありますので、そちらを参考にしてください。
参考：https://learn.adafruit.com/animated-electronic-eyes/customizing
　　
{{:gimmickkouza:electronic_basic:8:8-68.png?600|}}
問題なく実行されると上のような画面になります。
　　
{{:gimmickkouza:electronic_basic:8:8-69.png?400|}}
「convert」フォルダ内を確認します。
「defaultEye.h」ファイルが生成されているはずです。一応開いて中身を確認しましょう。
「defaultEye.h」を右クリックして「プログラムから開く」→「メモ帳」を押すと、このファイルがメモ帳で開かれます。
長大な数値の配列が書かれていればおそらく成功です。

== ⑥「defaultEye.h」を「uncannyEyes」の内部に組み込む ==
今回のプログラムの実行部隊は「uncannyEyes」フォルダ内にあります。
たった今がんばって生成した「defaultEye.h」もこのメンバーに加えてあげなければなりません。

「defaultEye.h」ファイルをコピーして、「uncannyEyes」フォルダ内の「graphics」フォルダの中に貼り付けますが、
「graphics」フォルダ内には、同じ名前の「defaultEye.h」が既に入っているはずです。

{{:gimmickkouza:electronic_basic:8:8-70.png?400|}}
画像引用元：https://learn.adafruit.com/assets/27592

この先住民の「defaultEye.h」は、プリセットで入っている、上図の目を表示するための.hファイルです。
この目が不要であれば、何も考えずに古い　「defaultEye.h」を削除し、先ほど自作した「defaultEye.h」を貼り付けてください。
この目を削除したくない場合は、自作の「defaultEye.h」ファイルの名前を変更してから「graphics」フォルダに貼り付けます。
変更可能なのは「.h」より前の「defaultEye」部分のみです。__「.h」は絶対に変えてはいけません。__
　　
続いて「unccannyEyes.ino」を開き、config.hのタブをクリックします。
config.hタブの18～28行目は以下のようになっています。
<code>
// Enable ONE of these #includes -- HUGE graphics tables for various eyes:
#include "graphics/defaultEye.h"      // Standard human-ish hazel eye -OR-
//#include "graphics/dragonEye.h"     // Slit pupil fiery dragon/demon eye -OR-
//#include "graphics/noScleraEye.h"   // Large iris, no sclera -OR-
//#include "graphics/goatEye.h"       // Horizontal pupil goat/Krampus eye -OR-
//#include "graphics/newtEye.h"       // Eye of newt -OR-
//#include "graphics/terminatorEye.h" // Git to da choppah!
//#include "graphics/catEye.h"        // Cartoonish cat (flat "2D" colors)
//#include "graphics/owlEye.h"        // Minerva the owl (DISABLE TRACKING)
//#include "graphics/naugaEye.h"      // Nauga googly eye (DISABLE TRACKING)
//#include "graphics/doeEye.h"        // Cartoon deer eye (DISABLE TRACKING)
</code>
この行は先ほどの「graphics」フォルダ内にある.hファイルのうち、どのファイルを読み込むかを設定している行です。
デフォルトだと「defaultEye.h」を読み込むようになっています。
このdefaultEye.hの行をコピーして、下記のように打ち換えます。
<code>
// Enable ONE of these #includes -- HUGE graphics tables for various eyes:
#include "graphics/(あなたが生成したファイルの名前)).h"   
//#include "graphics/defaultEye.h"      // Standard human-ish hazel eye -OR-
//#include "graphics/dragonEye.h"     // Slit pupil fiery dragon/demon eye -OR-
　　(以下省略)
</code>
(あなたが生成したファイルの名前)部分には、あなたが生成したファイルの名前を入れてください。
この行を有効にし、defaultEye.hの行は<nowiki>「//」</nowiki>で無効化しておきます。
これで「grapics」フォルダ内に入れた「(あなたが生成したファイルの名前).h」が読み込まれるようになりました。お疲れさまでした。
　　
==== UncannyEyes まとめ ====
**__公式のドキュメントが充実しているので公式を見てください。__**
　　
あとどこかのページでも書いた気がしますが、__Adafruitはコードのコメントが非常に親切__です。
なのでもし__UncannyEyesのコードを改造したい場合は、公式ドキュメントは勿論のこと、コードにもしっかり目を通して__ください。
だいたいご丁寧に<code>「//この文を有効にするとまぶたが瞳を追跡します(英語)」</code>などといった説明がされています。
検索機能を活用し、求めている情報の単語を検索すれば、その単語に対応した設定文や命令文を比較的簡単に探し出すこともできます。
　　
難解な長文コードに心が折れそうになることもありますし、最初は全然わかりませんが、とにかくいろんなコードを読んで、悩んで、いじくってみて、動作がどう変わるかを観察して…を繰り返し経験値をためるうちに、少しずつ難しいコードがわかるようになります。

** た　ぶ　ん　な　！　！**
　　
　　
===== 電子目の作り方：その3・Adafruit MonsterM4SK =====
==== MonsterM4SKとは ====
MonsterM4SKは、Adafruitが開発・販売しているプリメイド電子目です。
ドキュメントは以下のAdafruit公式ページに掲載されています。

　Electronic Animated Eyes for ARM Microcontrollers(Adafruit)：
　https://learn.adafruit.com/adafruit-monster-m4sk-eyes
　　
{{:gimmickkouza:electronic_basic:8:8-34.png?400|}}
　　
==== MonsterM4SKの特徴 ====
MonsterM4SKは超お手軽且つ多機能なプリメイド電子目です。
特に欧米のきぐるみで電子目を搭載している子には高確率で使われている印象があります。
(どうしてMonsterM4SK目だとわかるのかって？その辺については後述します)

MonsterM4SKはこれ自身が一枚のボードであり、マイコンに繋いで動作させる部品というよりはこれ1枚単独で動作させることを想定して設計されている…ように思います。
なので__目の柄を変えてきぐるみに突っ込むだけで、とりあえず様になる電子目キャラが誕生__します。
**なんかようわからんけどとりあえず電子目やってみたい！という人にはいい選択肢**だと思います。
　　
MonsterM4SKの特徴は以下の通りです。

  * 自動運転で目が動く(コードを改造すれば任意の操作することも可能…だが難易度は高い)
  * まばたきも自動で行う
  * まぶたが目に追従して動いたり、瞳孔の収縮も表現されるなど、非常にリアルな目の動き
  * タクトスイッチ3つ搭載
  * 左右の目の間の鼻の部分にタッチセンサーが入っている
  * ライトセンサーも搭載している
  * コネクタが多少あり、電子部品を外付けで繋げることができる
  * (ほぼ使い物になるレベルではなかったが)ボイスチェンジャーを搭載している
  * UncannyEyesとは異なる目画像の設定方法。
　　UncannyEyesよりも柔軟で多彩な設定が可能で、ライトセンサーと連携させて周囲の明るさによって瞳孔の大きさを変えたり、
　　タッチセンサ―を押した時に目を見開かせたり、虹彩をぐるぐる回転させ続けることもできる
　　
==== 材料 ====
基本的にはMonsterM4SK1枚あればOKですが、ヘッドのサイズに合わせて目と目の間を広げたい場合は、M4SKの中央の鼻がプリントされた部分を切り取り、左右の目の間をケーブル(下記参照)で繋ぐ必要があります。

　JST SH 9-Pin Cable - 100mm long：
　https://www.adafruit.com/product/4350
　　
左右の目の分割の仕方等はこちら↓
　Separate the MONSTER M4SK(Adafruit)：
　https://learn.adafruit.com/wide-set-monster-m4sk-creature-eyes/separate-the-monster-m4sk
　　
==== MonsterM4SKの弱(？)点 ====
このセクションは__講師のまったくの個人の感想__です。そう思って読んでください。
至れり尽くせりのMonsterM4SKですが、講師は敢えてダメ出しをしたいと思います。

=== 講師が感じる、MonsterM4SKのダメ出しポイント ===
**■正面を向いている時間が非常に少ない**
　MonsterM4SKの目の自動運転アルゴリズムは、とにかく正面を向かないです。
　常にどこかの方角を見ている印象があります。
　これはハロウィンのパーティグッズ用途としては見栄えがよいのですが、きぐるみ搭載となると話は違ってきます。
　とにかく正面を向かないのです。キャラに向かってカメラを構えても、ずっと明後日の方向をキョロキョロし続けるのです。
　いずれ撮影者は諦めて「明後日の方向を見ながらポーズをキメているキャラ」の写真を撮ります。**最悪です。**
　　
**■目の動きに独特のクセがある**
　正面を向かないこともそうなのですが、目の動きに非常にクセがあります。
　もちろん目の動きは滑らかで、まぶたが瞳と連動して動いたり瞳孔が収縮したりとクオリティは非常に高いです。
　ただ目が動きすぎるのです。常にせわしなくいろんな方向をキョロキョロし続けるのです。
　またしてもきぐるみとのシナジーが最悪です。
　常にキョロキョロしているキャラは落ち着きがない印象を与えます。
　　「この子はおっとりキャラなの！」
　　「この子は威厳ある8代目の魔王なの！」
　という設定でこの動きをするのはたいへん望ましくないです。
　そもそも論の話をすると、人間は物を見るときに目だけを動かして見ようとすることは殆どありません。
　だいたい見たいものの方向に顔や首を動かしながら同時に目線を移動させます。
　キャラに自然な目の動きをさせようと思うと、目の動きとキャラの動きがある程度リンクしていることが望ましいです。
　しかしMonsterM4SKの目の動きはとにかく落ち着きがないので、偶然の一致を狙う以前にどう動くか自体の難易度が非常に高いです。
　冒頭の「欧米の電子目きぐるみはだいたいMonsterM4SK」がなぜそれとわかるのか。
　「目の動きがMonsterM4SKの自動運転のそれ」だからです。
　動きの傾向があまりに特徴的過ぎて、目の柄を変えていても簡単に見抜けてしまいます。**マジです。**
　　
　　
<text background="success">**これだけ言っておきながら講師はMonsterM4SKはだいすきですし、これほどまでに素晴らしいプロダクトを世に送り出してくださったAdafruitにはマジで感謝してもしきれないです。**</text>
　　
さりとて……自分の作品で…この自動運転の目を使うのは…正直…………　　**厳しい**
　　
そう感じた講師はMonsterM4SKのコードを改造してアイトラッキングシステムと組み合わせ、自力で動かすようにしました。
**ハッピーですが超たいへんでした。でもハッピーこの上ないです。**
　　
==== MonsterM4SK 改造にまつわるQ＆A ====
== Q.何かしらの改造をしたいけど何から始めたらいいですか ==
A.まずは公式ドキュメント順番に読むのじゃ。
　冒頭でいきなり説明されてるブートローダーのアップデートを完了し、クイックスタートの項を必要に応じてやるといいんじゃ！

　Update the UF2 Bootloader
　https://learn.adafruit.com/adafruit-monster-m4sk-eyes/update-the-uf2-bootloader

　Quickstart
　https://learn.adafruit.com/adafruit-monster-m4sk-eyes/foo-2

== Q.とりあえずプリセットでいいから目の柄を変えてみたいです ==
A.ここから目の画像と設定のデータファイルをダウンロードするんじゃ。
　あとはドキュメントの指示通りに操作すれば目柄をかえられるんじゃな！

　Ready-Made Graphics
　https://learn.adafruit.com/adafruit-monster-m4sk-eyes/graphics

== Q.目の柄を自作したいな… ==
A.公式ドキュメントのここを読んで画像とコンフィグファイルを用意するのじゃ。
コンフィグファイルの中身は自作の画像に合わせて書き換えておくんじゃぞ～～。

　Preparing Graphics
　https://learn.adafruit.com/adafruit-monster-m4sk-eyes/customizing

　Configurable Settings
　https://learn.adafruit.com/adafruit-monster-m4sk-eyes/customizing-2

== Q.ボイスチェンジャーに興味がありますが、本当に使い物にならないんですか？ ==
A.ボイスチェンジャーの使用を考えている君は、まず下のページを読むんじゃ。

　Voice Changer
　https://learn.adafruit.com/adafruit-monster-m4sk-eyes/voice-changer-2
　　
このページの必要な物リストを見て頂ければわかりますが、「バッテリー駆動のアンプ付きスピーカー」が必要となります。
きぐるみの首からデカくて重いスピーカーをぶら下げることに抵抗がなければ、ぜひ試してみてほしいです
(そして可能であれば使い物になったかレポほしいです…)

講師は心身が貧弱なので「これはちょっと厳しいかな…」と思い、なるべく小さなスピーカーでボイスチェンジャー機能を使えないかあれこれ実験してみました。
結局、バッテリー駆動の自作小型アンプキットに大きめのスピーカーを繋げることでそこそこの音量は確保できたものの、(恐らくMonsterM4SKの基板自体に原因があると推定する)ノイズが大変ひどく、少なくとも講師の個体は使い物にならないという結論に至りました。

ご参考までに。

== Q.MonsterM4SKのコードってどこにあるの？ ==
A.MonsterM4SKのコードはArduinoIDEで編集することになるぞい。
　なのでまずはボードマネージャのダウンロードと設定をしておくんじゃ。

　Building Eyes from Source Code
　https://learn.adafruit.com/adafruit-monster-m4sk-eyes/building-from-source-code
　　
　ソースコードはこのページにあるんじゃ。緑のボタン「M4_eyes」がそれじゃぞ！
　ソースコードの下には必要なライブラリのリストもあるからそれもインストールするんじゃ！

　Source, Libraries and Settings
　https://learn.adafruit.com/adafruit-monster-m4sk-eyes/compiling-from-source-code

== Q.ソースコード難しすぎてなにもわかりません ==
A. **わかる。 がんばれ。**
　　
　　
まあそれだけというのもアレなので記憶に残っている限りのヒントを書いておくんじゃ。
　　
  * とにかくコードを読む、読めるようになる
　　全部完璧にわからなくてもいいです。少しずつでもわかる箇所を増やしていく
　　
  * Adafruit公式の、MonsterM4SKを使った作例のうちのいくつかはコードのカスタムを含んでいます。
　　まずはその辺を読んでコードの理解を深めてください。ヒントになる作例もあります
　　
  * フォーラムにヒントがあったと思います。フォーラム内検索して見つけてください
　　
  * 経験を積んでから再トライする
　　
==== MonsterM4SK まとめ ====
**__あれこれ言ったもののマジでいい商品です。__
軽い気持ちで使ってよし、改造に挑戦する価値ももちろんあり。**
　　
ちなみにMonsterM4SKは半導体不足のあおりを受けて生産がストップしていたっぽく、__しばらく前まで世界中の販売サイトはどこも在庫切れ・極めて入手困難な状態__が続いていました。
ここ最近の公式の販売ページでは少量の在庫が入ったり売り切れたりしているように見えます。
(生産が再開しているのか、デッドストックが入荷しているのかは不明)

日本から買える手段としては、2024/3/17現在、MonserとDigi-keyがまとまった在庫を持っているようです。
Adafruit公式サイトに在庫が補充されていることもありますが、__送料が死ぬほど高い__です。
　　
購買を煽るわけではありませんが、いつなんどき商品を入手できなくなるかもわからない不透明な状況にあることを知って頂いた上で、もしご興味があれば早めに入手されておくことを推奨します。