ラベル 8bit の投稿を表示しています。 すべての投稿を表示
ラベル 8bit の投稿を表示しています。 すべての投稿を表示

2020年2月16日日曜日

美咲フォント(misaki font)をPythonで扱う<実装>

直前の記事で美咲フォントのpng画像の扱い方を検討したが、
今度はPythonで実装を行う。
美咲フォントの詳細は直前の記事か、作成者様のサイトを参照してください。

2Byte文字1文字を入力して、美咲フォントの画像から必要な部分を切り出す。
画像を扱うのでOpenCVでやってみる。

import cv2
misaki_png_path = "[path]/misaki_mincho.png"
misaki_img = cv2.imread(misaki_png_path, 0)

def imshow(im):
    cv2.imshow("image", im)
    cv2.waitKey(0)
    cv2.destroyAllWindows()

def letter2glyph(chara):
    s = chara.encode("Shift-JIS")
    
    if s[0] < 0xA0:
        y = (s[0] - 0x81) * 2
    else:
        y = (s[0] - 0xE0 + (0x9F - 0x81 + 1)) * 2
    
    if s[1] < 0x7f:
        x = s[1] - 0x40
    elif s[1] < 0x9f:
        x = s[1] - 0x41
    else:
        x = s[1] - 0x9f
        y += 1
    
    return misaki_img[y*8:y*8+8, x*8:x*8+8]

ここで、
imshow(letter2glyph("松"))
と書くと、
「松」の画像部分を切り出して表示できる。
(8x8 pixelだからタイトルバーに比べて松の字は豆粒くらい・・・。)

簡単にコードの動作は以下の通り。
まず文字をShift-JISに変換し、s[0]=1Byte目 で s[1]=2Byte目に格納する。
そこからpng画像内の文字の位置を計算する。
(x, y)はpngファイル内の各文字の場所を指す。0始まりで、xが列、yが行。

文字コードからx,yを求める部分は、前回検討した内容が重要になる。
図の分断された4つの領域からpngの連続空間にマップするため、
x,yそれぞれに1つずつ条件分岐が必要になる。
加えて、列数を半分にする条件が1つ入る。

ここが上位1Byte:0x81~0x9F、 0xE0~0xEFの条件。
前半部分は、0始まりにするため0x81を引く。
後半部分は、0xE0を引いたうえで、前半部分の行数を足している。
最後に2倍にしているのは、列が半分になる=行が2倍になる部分を反映している。
奇数行の部分は後で。
    if s[0] < 0xA0:
        y = (s[0] - 0x81) * 2
    else:
        y = (s[0] - 0xE0 + (0x9F - 0x81 + 1)) * 2
こちらは下位1Byte:0x40~0x7E、 0x80~0xFCの条件。
0x9F未満の部分は条件そのままで、その先は次の行になる部分のため、
0x41ではなく0x9Fを引いて0列目からとし、行数も1加算して奇数行にする。
    if s[1] < 0x7F:
        x = s[1] - 0x40
    elif s[1] < 0x9F:
        x = s[1] - 0x41
    else:
        x = s[1] - 0x9F
        y += 1

文字を抜き出す部分は以上。
これで、8x8のndarrayを抜き出せる。
モノクロビットマップなので、全要素は0 or 255になっている。


おまけ

char[8]への変換と、「■」と「 」での表示。
def mat2char8(mat):
    m = (1 - mat / 255) * 2 ** np.arange(7, -1, -1)
    return np.add.reduce(m, axis=1).astype(np.uint8)
def mat2Dprint(mat):
    print("\n".join(["".join(["■" if y==0 else " " for y in x]) for x in mat]))

両方とも、実行効率改善や文字数を減らす余地がありそう。
こんな感じで遊べる。
txt = "松―ログ"
matList = [letter2glyph(c) for c in txt]
mats = np.concatenate(matList, axis=1)

mat2Dprint(mats)

charList = np.array([mat2char8(m) for m in matList])
print(charList)
表示結果↓
 ■ ■ ■                     ■ ■  
■■ ■ ■          ■■  ■■■    ■■■■ 
 ■■   ■          ■■■  ■    ■  ■ 
■■  ■   ■■■■■■■■ ■   ■   ■■   ■ 
■■  ■            ■   ■       ■  
 ■ ■ ■           ■■■■■■     ■   
 ■■■■ ■          ■        ■■    
                                
[[ 84 212  98 200 200  84 122   0]  # 松
 [  0   0   0 255   0   0   0   0]  # -
 [  0 206 114  68  68 126  64   0]  # ロ
 [ 20  30  18  98   4   8  48   0]] # グ
char[8]の結果は全角ハイフンがわかりやすい。
「グ」も、下4桁が4→8→16+32→0となっていて直感的に計算できる。

次回は、この結果をマトリクスLEDに表示して遊んでみる予定。
新幹線のインジケータを作るってわけです。

美咲フォント(misaki font)をPythonで扱う<事前検討>

(実装だけが必要の場合、こちらのページへGo!

8x8ドットの日本語ビットマップフォント、美咲フォントをPythonで取り扱ってみる。
JIS第一、第二水準をサポートで、ゴシック/明朝のTTF形式とPNG形式がある。
8x8なら、char[8]で格納でき、ダイナミック制御でセレクタを3bitにすることもでき、
データや信号線の取り回しも非常にやりやすい。
こんな素晴らしいものがフリーで公開されているとは!
公開元のウェブサイト

TTF形式も公開されているのでfonttoolsを使えば汎用的に扱えるが、
今回使うのは8x8だけなのでコンパクトなPNG形式を対象にした。  
 misaki_mincho.png ・・・ 54kB
 misaki_mincho.ttf ・・・ 1,092kB
  約20倍の差がある

このため、png画像から必要な部分を抜き出すことにする。
美咲フォントのpng画像はこんな感じの並び。
 (↑PNG版の美咲フォント明朝から一部抜粋)

この並びはShift-JISの2Byte文字部分のよう。
(参考:文字コード表 シフトJIS(Shift_JIS)より)

■Shift-JIS

Shift-JISを構成する範囲は以下の通り。
  上位1Byte:0x81~0x9F、 0xE0~0xEF
  下位1Byte:0x40~0x7E、 0x80~0xFC

字面だけではイメージしづらいので、0xFF×0xFFのドットマトリクスで示す。


何故隙間だらけかというと、ASCIIや他のコードと識別しやすくするためらしい。
特に上位1ByteがASCIIの0x20(半角スペース)や0x41(A), 0x61(a)と同じだと、
日本語なのかASCIIなのか1Byte目だけでは判別できなくなってしまうからだ。

これに対し、PNG画像の並びでいくつか注意が必要な部分がある。

➀開始点のオフセット


(※画像はhttp://charset.7jp.net/様より一部借用)

実際の文字コードは0x8140からスタートする。
それに対し、png画像は最初の8x8が対応するので、このオフセットを考慮しないといけない。

②1Byte目0xA0~0xDFと、2Byte目0x7Fの空白部分



図の通り、Shift-JISの中にはドデカい空白部分がある。
対して、美咲フォントのpng画像は空白部分を詰めている。

③png画像は行数2倍、列数1/2


2つの行頭を見比べると、pngのほうは「ぁァАА・・・亜院押」なのに対し、
Shift-JISの表は「ァА・・・院魁」となっている。
これは、pngのほうが区/点を基準とした表示なのに対し、
Shift-JISの表は16進数基準の表示になっているためである。
つまり、図で示すとおり元々の1行がpng画像では2行分になっている。


これら①②③を考慮すれば、あとは文字コード変換と簡単な画像処理でうまく扱えるはず。
続きは次回。