🫐

Elixir で M5Stack CoreMP135 の液晶ディスプレイに図形を描く

2024/09/25に公開

Elixir

M5Stack

framebuffer

tech

 本稿について本稿では Elixir ライブラリ image を用いて M5Stack CoreMP135（以下、「CoreMP135」と呼ぶ）の液晶ディスプレイ（LCD）上に図形を描く方法について解説します。
拙稿 Elixir を M5Stack CoreMP135 上で動かす の内容に沿って Elixir を CoreMP135 にインストールしてあることが本稿の前提条件です。

 Elixir スクリプト次に示すのは、私が作成した Elixir スクリプト draw_circles.exs です。
Mix.install([
  {:image, "~> 0.54"}
])

import Bitwise

fb_width = 320
fb_height = 240

img = Image.new!(fb_width, fb_height)

img =
  img
  |> Image.Draw.circle!(160, 120, 50, color: "#0000ff")
  |> Image.Draw.circle!(200, 160, 20, color: "#ff0000")
  |> Image.Draw.circle!(120, 150, 30, color: "#00ff00")

{:ok, data} = Vix.Vips.Image.write_to_binary(img)

pixels =
  for <<r::8, g::8, b::8 <- data>> do
    r = r >>> 3
    g = g >>> 3
    b = b >>> 3
    <<a, b>> = <<r::5, g::6, b::5>>
    <<b, a>>
  end

data = :erlang.list_to_bitstring(pixels)

File.open("/dev/fb1", [:binary, :write], fn file ->
  IO.binwrite(file, data)
end)
このスクリプトを CoreMP135 内の適当なディレクトリにおいて elixir draw_circles.exs コマンドで実行すると、LCD の表示が次のように変化します。
写真映りのせいで左下の円板が白く見えますが、実際には緑色です。

 ソースコードの解説5 行目をご覧ください。
import Bitwise
ビット操作演算子 >>> を使用するために Bitwise モジュールをインポートしています。
9 行目をご覧ください。
{:ok, img} = Image.new(fb_width, fb_height)
関数 Image.new!/3 を用いて、幅 320px、高さ 240px のキャンバスを作成しています。変数 img には、構造体 %Vix.Vips.Image{} がセットされます。
12-16 行をご覧ください。
img =
  img
  |> Image.Draw.circle!(160, 120, 50, color: "#0000ff")
  |> Image.Draw.circle!(200, 160, 20, color: "#ff0000")
  |> Image.Draw.circle!(120, 150, 30, color: "#00ff00")
関数 Image.Draw.circle!/5 を用いて、キャンバス上に 3 種類の円板を描いています。第 2 引数に中心の X 座標、第 3 引数に中心の Y 座標、第 4 引数に円の半径、第 5 引数は省略可能なオプションです。color オプションには #rrggbb 形式で色を指定しています。
18 行目をご覧ください。
{:ok, data} = Vix.Vips.Image.write_to_binary(img)
関数 Vix.Vips.Image.write_to_binary/1 を用いて、構造体 %Vix.Vips.Image{} をバイナリデータに変換しています。
このバイナリデータは、1 個のピクセルを 3 バイト（24 ビット）で表します。第 1 バイトが赤、第 2 バイトが緑、第 3 バイトが緑の値を表します。
20-27 行をご覧ください。
pixels =
  for <<r::8, g::8, b::8 <- data>> do
    r = r >>> 3
    g = g >>> 3
    b = b >>> 3
    <<a, b>> = <<r::5, g::6, b::5>>
    <<b, a>>
  end
バイナリデータを CoreMP135 のフレームバッファに適合するピクセルデータのリストに変換しています。<<r::8, g::8, b::8 <- data>> は、data の先頭から 3 バイトずつを順に取り出して、1 バイトずつの 3 個の断片を変数 r, g, b にセットしています。
23 行目の r = r >>> 3 はビット操作演算子 >>> を利用して 3 ビット右にシフトしています。これにより 24 ビットで表現されるフルカラーのピクセルデータが、16 ビットのピクセルデータに変換されます。例えば、ビットストリング 11001110 は 00011001 に変換されます。
25 行目以降のコードに関しては、Elixir で M5Stack CoreMP135 の液晶ディスプレイに色を塗る を参照してください。

 備考当初、本稿は「Elixir で CoreMP135 のフレームバッファを操作する②」というタイトルで公開されました。

 参考文献
Elixir Image で図形・文字描画 @RyoWakabayashi

Elixir Comprehensions(内包表記) Bitstring generators @tbpgr

本稿について

Elixir スクリプト

ソースコードの解説

備考

参考文献

Discussion