MicroPythonでヨットが横に移動するアニメーションのコードを書いてみよう

上の動画のようなマイクロビットの5×5ディスプレイでヨットが横に移動するアニメーションを作成してみます。

MicroPythonで潜水艦が潜るアニメーションのコードを書いてみようで作成しました潜水艦のアニメーションと異なる点としまして、ヨットが左側に行ったら、右からヨットが出てきて、ヨットの移動が繰り返します。

最初に

5×5ディスプレイにヨットを出力してみます。

from microbit import *

mat = [
	[0,0,9,0,0],
	[0,0,9,9,9],
	[0,0,9,0,0],
	[9,9,9,9,9],
	[0,9,9,9,0]
]

coord = ""
for vec in mat:
	for v in vec:
		coord += str(v)
	coord += ":"

yacht = Image(coord)
display.show(yacht)

上記のコードをフラッシングしてみると、上の写真のようなヨットが出力されます。

---

続いて、1秒毎に二次元リストの値が左にシフトする仕組みを設けてみます。

from microbit import *

mat = [
	[0,0,9,0,0],
	[0,0,9,9,9],
	[0,0,9,0,0],
	[9,9,9,9,9],
	[0,9,9,9,0]
]

icons = []
for i in range(0, len(mat)+1):
	coord = ""
	for vec in mat:
		for v in vec:
			coord += str(v)
		coord += ":"

	yacht = Image(coord)
	display.show(yacht)
	sleep(1000)

	# リスト内の列を左にシフト
	for row in range(0, len(mat)):
		for col in range(0, len(mat[0])-1):
			mat[row][col] = mat[row][col+1]
		mat[row][len(mat[0])-1] = 0

アイコンの表示の箇所のコードをforで囲い、アイコンの表示を5回行うようにします。

この時、アイコンを表示した直後に、

for row in range(0, len(mat)):
	for col in range(0, len(mat[0])-1):
		mat[row][col] = mat[row][col+1]
	mat[row][len(mat[0])-1] = 0

の処理を加える事で、1秒毎にリストの列を左にシフトさせます。

列をシフトさせることで、次のアイコンの描写の時はヨットが少し左に移動したようになります。

ただし、現時点のコードではヨットが左に到達したらアニメーションは終了します。

---

ヨットが左に到達したら、右から再びヨットが現れるようにコードを書き換えてみます。

from microbit import *

mat = [
	[0,0,9,0,0,0,0,0,0,0,0],
	[0,0,9,9,9,0,0,0,0,0,0],
	[0,0,9,0,0,0,0,0,0,0,0],
	[9,9,9,9,9,0,0,0,0,0,0],
	[0,9,9,9,0,0,0,0,0,0,0]
]

icons = []
while True:
	coord = ""
	for vec in mat:
		i = 0
		for v in vec:
			coord += str(v)
			i += 1
			if i > 4:
				break
		coord += ":"

	# メモリ対策でアイコンをすぐに出力する
	yacht = Image(coord)
	display.show(yacht)

	sleep(1000)
	
	# リスト内の列を左にシフト
	for row in range(0, len(mat)):
		mat[row][len(mat[0])-1] = mat[row][0]
		for col in range(0, len(mat[0])-1):
			mat[row][col] = mat[row][col+1]

最初の二次元のリストで右側に見えない範囲の分の値を追加します。

上記の対応に合わせて、リストから座標の文字列を組み立てる際に必要な分(各行左から5個の値で次の行にいく)のみにするコードに修正します。

リスト内の列の左にシフトの処理で各行の一番左の値を、一番右に移動する処理に修正します。

上記のコードをマイクロビットにフラッシングすると、冒頭の動画のように実行されます。