イメージ

MicroPython は、5×5 グリッドの赤色 LED (発光ダイオード - デバイスの前面で点灯するもの)を使ってできうる限りのアート機能を提供します。MicroPython はディスプレイ上の非常に多くの制御を提供しているので、あらゆる種類の面白いい効果を作り出すことができます。

MicroPython には、ディスプレイに表示できる多くの組込みピクチャがあります。たとえば、デバイスがハッピーに見えるようにするには、次のように入力します。

from microbit import *
display.show(Image.HAPPY)

最初の行が何であるかは既に知っていると思います。２行目は、 display オブジェクトに組込みのイメージを show で表示させています。表示させたいハッピーのイメージは Image に属する HAPPY というものです。これを括弧内(( と ))に指定することにより、このイメージの利用を show に伝えます。

../_images/happy.png

以下は組込みイメージの一覧です:

  • Image.HEART
  • Image.HEART_SMALL
  • Image.HAPPY
  • Image.SMILE
  • Image.SAD
  • Image.CONFUSED
  • Image.ANGRY
  • Image.ASLEEP
  • Image.SURPRISED
  • Image.SILLY
  • Image.FABULOUS
  • Image.MEH
  • Image.YES
  • Image.NO
  • Image.CLOCK12, Image.CLOCK11, Image.CLOCK10, Image.CLOCK9, Image.CLOCK8, Image.CLOCK7, Image.CLOCK6, Image.CLOCK5, Image.CLOCK4, Image.CLOCK3, Image.CLOCK2, Image.CLOCK1
  • Image.ARROW_N, Image.ARROW_NE, Image.ARROW_E, Image.ARROW_SE, Image.ARROW_S, Image.ARROW_SW, Image.ARROW_W, Image.ARROW_NW
  • Image.TRIANGLE
  • Image.TRIANGLE_LEFT
  • Image.CHESSBOARD
  • Image.DIAMOND
  • Image.DIAMOND_SMALL
  • Image.SQUARE
  • Image.SQUARE_SMALL
  • Image.RABBIT
  • Image.COW
  • Image.MUSIC_CROTCHET
  • Image.MUSIC_QUAVER
  • Image.MUSIC_QUAVERS
  • Image.PITCHFORK
  • Image.XMAS
  • Image.PACMAN
  • Image.TARGET
  • Image.TSHIRT
  • Image.ROLLERSKATE
  • Image.DUCK
  • Image.HOUSE
  • Image.TORTOISE
  • Image.BUTTERFLY
  • Image.STICKFIGURE
  • Image.GHOST
  • Image.SWORD
  • Image.GIRAFFE
  • Image.SKULL
  • Image.UMBRELLA
  • Image.SNAKE

かなりたくさんあります！　他の組込みイメージがどのように表示されるかを調べるためにハッピーの micro:bit コードを変更してみませんか？　(Image.HAPPY のところを、上記の組込みのイメージのいずれかに置き換えるだけです。)

自作イメージ

もちろん、自分で作成したイメージを micro:bit に表示したいですよね？

それは簡単です。

物理ディスプレイ上の各 LED ピクセルは 10 個の値の１つに設定できます。ピクセルを 0 (ゼロ)に設定するとオフになります。文字通りゼロの明るさになります。ピクセルを 9 に設定すると最も明るいレベルになります。値 1 から 8 はオフ(0)と最大(9)の間の明るさのレベルを表します。

以上の情報があれば、次のような新しいイメージを作成することができます:

from microbit import *

boat = Image("05050:"
             "05050:"
             "05050:"
             "99999:"
             "09990")

display.show(boat)

(実行すると、デバイスは昔ながらの 「Blue Peter」 帆船を表示します。船体よりもマストが暗くなっています。)

絵を描く方法を解明できましたか？　物理ディスプレイの各行が二重引用符で囲まれ、 : で終わる一連の数字で表されていることに気づきましたか？　各数字は明るさを指定します。５個の数字が5行あるので、物理ディスプレイ上の５行のそれぞれにある５個のピクセルのそれぞれに個別の明るさを指定することができます。これが新しいイメージを作成する方法です。

簡単！

実際のところ、複数の行に分けて書く必要はありません。各行を追えるのであれば、次のように書き直すことができます:

boat = Image("05050:05050:05050:99999:09990")

アニメーション

静止したイメージは楽しいですが、それを移動させるのはもっと楽しいです。これを行うもの MicroPython では驚くほど簡単です ~ イメージのリストを使うだけです！

ここに買い物リストがあります:

Eggs
Bacon
Tomatoes

このリストを Python で表現する方法は次のとおりです:

shopping = ["Eggs", "Bacon", "Tomatoes" ]

単に shopping というリストを作成し、３つの要素を入れました。Python はそれが角括弧 ([ と ]) で囲まれているので、リストだと分かります。リスト内の要素はカンマ (,) で区切られ、このインスタンス内の要素は３個の文字列 "Eggs", "Bacon", "Tomatoes" となっています。各要素は引用符で囲まれているので、文字列であると分かります。

Python ではリストに任意のデータを格納できます。数値のリストは次のとおりです:

primes = [2, 3, 5, 7, 11, 13, 17, 19]

注釈

数値は(文字列ではなく)単一の値を表すため、引用符で囲む必要はありません。 2 (数値の 2) と "2" (数字の 2 を表す文字)は違うものです。今のところはよく分からなくても心配要りません。すぐに違いに慣れるでしょう。

同じリストにさまざまな種類のデータを入れることもできます:

mixed_up_list = ["hello!", 1.234, Image.HAPPY]

最後の要素に注目してください。イメージです！

イメージのリストをアニメーション化するよう MicroPython に指示できます。幸いにも既に組み込まれているイメージのリストがあります。 Image.ALL_CLOCKS と Image.ALL_ARROWS です。

from microbit import *

display.show(Image.ALL_CLOCKS, loop=True, delay=100)

単一の画像と同様に、デバイスのディスプレイに表示するには display.show を使います。しかし、MicroPython には Image.ALL_CLOCKS の利用を伝えているので、リスト中の各イメージを次々に表示する必要があることを理解します。また、イメージのリストをループするよう(アニメーションが永遠に続くよう) MicroPython に伝えるために loop=True を指定しています。さらに、各イメージ間の表示間隔を 100 ミリ秒 (0.1 秒)とするために引数 delay=100 を指定しています。

Image.ALL_ARROWS リストをアニメーション化する方法を考え出せますか？　永遠にループしないようにするにはどうしますか？　(ヒント: True の反対は False ですが、 loop 引数のデフォルト値は False です)　アニメーションのスピードを変えることができますか？

最後に、自前のアニメーションを作成する方法について説明します。この例では、ボートをディスプレイの底に沈めます:

from microbit import *

boat1 = Image("05050:"
              "05050:"
              "05050:"
              "99999:"
              "09990")

boat2 = Image("00000:"
              "05050:"
              "05050:"
              "05050:"
              "99999")

boat3 = Image("00000:"
              "00000:"
              "05050:"
              "05050:"
              "05050")

boat4 = Image("00000:"
              "00000:"
              "00000:"
              "05050:"
              "05050")

boat5 = Image("00000:"
              "00000:"
              "00000:"
              "00000:"
              "05050")

boat6 = Image("00000:"
              "00000:"
              "00000:"
              "00000:"
              "00000")

all_boats = [boat1, boat2, boat3, boat4, boat5, boat6]
display.show(all_boats, delay=200)

コードの仕組みは次のとおりです:

  • 先に説明したのとまったく同じ方法で６個のイメージを作成
  • 作成したイメージすべてを all_boats というリストに格納
  • display.show でリストのイメージを 200 ミリ秒間隔でアニメーション化
  • loop=True は指定していないので、ボートは一度だけ沈没(すなわちアニメーションは科学的に正確)。:-)

あなたは何をアニメーションにしますか？　特殊効果をアニメーション化できますか？　イメージをフェードアウトさせてから再びフェードインするにはどうしますか？