Web Music Developers JPのアドベントカレンダーの12月6日の記事です！
ネタはCanvasで作ったLCDディスプレイです。先日の「FMシンセサイザー」の部品の説明になります。
作り始めたキッカケ
「FMシンセサイザー作ったけど、なんか味気ないな。。。」と思ったところからで、 「デジタルシンセだからデジタルっぽく見せられるドットのLCDで雰囲気は出るんじゃない？」という短絡的な発想でした。 さっそく作り始めたのですが、ふと「文字のドットの位置ってどこから起こせば良いのよ？？リファレンスどれにするの？？」という疑問が沸き、 今度はこれ系の液晶が付いた機器を探したのですが最近って高性能なカラーか、 もしくは昔ながらの7セグの電卓の液晶ばかりでなかなか見つからず、 結構焦ったのですがゴソゴソ探したら、それこそリファレンスが出てきてホッとしました。
出て来たのはコレです。なんとも懐かしいYamaha MU2000です。 1999年に発売されたみたいです。MIDIファイルも引っ張りだして来て、 ひとしきり遊んでから作業続行しました。MU2000のお陰もありドットの文字を起こすのは短時間でできました。
本題の使い方
手順は簡単です。
(1) HTMLファイルにcanvasのエリアを作ります。(例：index.html)
<canvas id="canvasLCD"></canvas>
(2) 以下のJavaScriptを貼付けます。(例：main.js)
var lcd = new CanvasLCD('01');
lcd.init('canvasLCD', 'initialword', true);
- 1行目
- 引数はディスプレイの色のタイプです。
- 01, 02, 03, 04, 05, 06 の6種類用意しています。(デモページに全種類出てます) - 2行目
- 第1引数(canvasLCD)はHTMLで指定canvasのIDです。
- 第2引数(initialword)は、最初のロゴ表示の直後に表示させる文字列です。
- 第3引数(true)はロゴ表示をさせるか否かのフラグです。
(3) 文字をディスプレイに表示させる。
lcd.write2Display('lettersRL01', 'ABCDEFG');
- 第1引数(lettersRL01)は文字をどう出現させるかです。3種類用意しています。
- letters 指定された文字列を一度に表示
- lettersRL01 指定された文字列を左から右に向かって表示させる
- lettersRL02 指定された文字列を左から右に向かって表示させる
- lettersRL01との違いは複数あった場合、複数行同時に表示させる点
基本的な動作はこんなところです。
ちょっと面倒ですが、こんなこともできます。
- 表示できる文字数、行数も変更することが可能です。
canvasLCD.jsの中をいじらないといけないのがイケてないです。すみません。
var digits = { 'x': 18, 'y': 2 }; // Line55: canvasLCD.js
- 色の種類も追加することが可能です。canvasLCD.jsのcolorSetに追加すれば利用可能です。
感想
色のセットは数字の古い順から時代で並べてるつもり(確固たる根拠はなく感覚です)なんですが、並べて初めて気がついたのが「進化してるんだな〜」というところでした。lcdType: 04 は初めて見たときは「暗いところで見られていいね！」って昔は思ったのですが、最新の lcdType:06 と比べると、ギラつきが多くて(コントラストの設定ができる機器もありましたね)ちょっと見難いですよね。lcdType:06 はYamaha MX49だったり、Roland INTEGRA-7の色合いですね。(INTEGRA-7は背景がもう少し黒いかな。。) 目的だったデジタルっぽく見えるのも達成できたし(自己満足)、楽しかったし、比較もできたし、よかったな〜、と自己満足しています。