創って学ぼうプログラミング 第25回 液晶モジュールを使ってみよう(ピクセル画像とベクトル画像の表示)

創って学ぼうプログラミング 第25回 液晶モジュールを使ってみよう(ピクセル画像とベクトル画像の表示)

○液晶モジュールでグラフィック

 今回も前回に続いて「1.8inch TFT 液晶モジュール」を使います。

・micro:bit用液晶モジュール(www.waveshare.comでの製品紹介)
https://www.waveshare.com/1.8inch-lcd-for-micro-bit.htm

(Amazonでの販売)
https://www.amazon.co.jp/dp/B07HD2TXQZ/

・GitHub
https://github.com/waveshare/WSLCD1in8

 この液晶モジュールは160×128ドット65536色の表示が可能ですが、マイクロビットでピクセル画像を表示しようとするとかなり大変です。1つ1つブロックを組み上げるのも、JavaScriptプログラムを入力していくのも手間がかかります。液晶モジュールの性能がよくても開発環境や用意されている命令によって、その性能をフルに発揮できないことがあります。
 今回は液晶モジュールの性能を活かすためにAdobe PhotoshopとAdobe Illustratorを使ってマイクロビットのプログラムを生成することにします。なお、PhotoshopはCS3以降、IllustratorはCS6以降が対象です。

・Adobe Photoshop
https://www.adobe.com/jp/products/photoshop.html

・Adobe Illustrator
https://www.adobe.com/jp/products/illustrator.html

 マイクロビットのプログラムは直接バイナリコードを生成するのは難しいので開発環境で使われているJavaScriptプログラムを生成することにします。
○Photoshopを利用してピクセル画像を表示する

 表示するピクセル画像は160×128ドットのサイズですので、Photoshopで用意する画像もそのサイズにしておきます。ただ、マイクロビット側の容量の関係で160×128サイズで表示できる画像は限界があります。このため、以後に説明する変換プログラムは160×128サイズのものと80×64サイズのものを用意してあります。
 80×64サイズでもおおよそ700程度のプログラム行数を超えるとコンパイルエラーでバイナリデータを生成できなくなります。
 画像データは160×128または80×64ピクセルサイズで、カラーモードはRGBカラー(8bit) にします。画像を用意したらPhotoshopで動作するスクリプトを実行します。なお、スクリプトについての詳しい説明は省きますが、処理としては以下のようになります。

 まず、画像の左上から1ピクセルずつ色を取得します。次に右側のピクセルの色を取得します。1つ前の色と同じならさらに右側のピクセルを読み込みます。違う色か右端を超えた場合には以下のLCD1IN8.DrawLine()で線を描画します。

LCD1IN8.DrawLine(x1,y1,x2,y2,カラー,ピクセルサイズ,形状)

 同じ色が続いた場合は線を描画することで生成するプログラムを短くしています。データ圧縮の手法で言えばもっとも簡単なランレングス法になります。
 あとは、縦のサイズ分だけ繰り返せばプログラムが生成されます。

 Photoshopで160×128ピクセルの画像を用意し以下のプログラムを実行するとマイクロビットのJavaScriptコードが生成されます。生成されたコードをコピーしてマイクロビットのJavaScriptコードエディタにペーストします。あとは、通常通りにマイクロビットのバイナリデータを生成します。

 以下のプログラムを実行する前に、あらかじめテキストエディタ等でコピー&ペーストした後で保存しておく必要があります。保存する際に拡張子を.jsxにしてください。

Photoshop用のプログラム(160x128)

// micro:bit LCD image converter (160x128)
// RRRRRGGGGGBBBBB1
(function (){
var basefile=new File("~/Desktop/00mbit.txt");
var savefile = basefile.saveDlg("保存ファイル名を指定してください(*.txt)")
if (!savefile){ return; } // キャンセルされた場合
var flag = savefile.open("w");
if (!flag){
alert("ファイルが保存できません");
return;
}
savefile.encoding = "ASCII";
savefile.writeln('LCD1IN8.LCD_Init()');
savefile.writeln('LCD1IN8.LCD_Clear()');
for(var y=0; y>3;
B=B>>3;
return (R


関連記事

おすすめ情報

マイナビニュースの他の記事もみる
主要なニュースをもっと見る
社会のニュースをもっと見る
経済のニュースをもっと見る
政治のニュースをもっと見る
国際・科学のニュースをもっと見る
エンタメのニュースをもっと見る
スポーツのニュースをもっと見る
トレンドのニュースをもっと見る
生活術のニュースをもっと見る
地域のニュースをもっと見る

経済 アクセスランキング

ランキングの続きを見る

経済 新着ニュース

新着ニュース一覧へ

総合 アクセスランキング

ランキングの続きを見る

東京 新着ニュース

東京の新着ニュースをもっと見る

東京 コラム・街ネタ

東京のコラム・街ネタをもっと見る

特集

特集一覧を見る 動画一覧を見る

記事検索