Photo by
sehaku
なでしこさんで偽2次元コード作成
今週も、noteに書きたいことを抱えたまま、あっという間に日曜日。
その日曜日も、致命的に頭が悪いので午前中も午後も寝まくり。
Qiitaの記事も書いてなかったから書いて、noteに残された時間はあと約1時間。
今週もまた適当なプログラムを書いて繋ぐしかないか。
(カタカタカタカタ)
実装完了。残り約15分。さあ記事を書こう。
今回やったこと
なでしこで、QRコードっぽい画像を作る。
※QRコードは株式会社デンソーウェーブの登録商標です。
プログラム
偽2次元コード作成 (プログラム貯蔵庫)
ポイント
パラメータの用意
定数のセルサイズは8。
定数の余白セル数は4。
定数のコードセル数は21。四角1個あたりのピクセル数、コードのまわりの白い部分の幅 (四角の個数)、コードの一辺で使う四角の個数を設定する。
この余白幅4、コードサイズ21というのは、QRコードの定義上の最小の値である。
なお、コードサイズを大きくすると、考慮したい特徴が増えてしまうので、今回は21とする。
描画用関数の用意
●(セルXのセルYに)目描画とは
白色に塗色設定。
[セルサイズ×(セルX－1), セルサイズ×(セルY－1), セルサイズ×9, セルサイズ×9]へ四角描画。
黒色に塗色設定。
[セルサイズ×セルX, セルサイズ×セルY, セルサイズ×7, セルサイズ×7]へ四角描画。
白色に塗色設定。
[セルサイズ×(セルX＋1), セルサイズ×(セルY＋1), セルサイズ×5, セルサイズ×5]へ四角描画。
黒色に塗色設定。
[セルサイズ×(セルX＋2), セルサイズ×(セルY＋2), セルサイズ×3, セルサイズ×3]へ四角描画。
ここまで。
●(セルXのセルYに)点描画とは
[セルサイズ×セルX, セルサイズ×セルY, セルサイズ, セルサイズ]へ四角描画。
ここまで。QRコードで特徴的な四隅のうち3個に配置されるパターンを描画する関数と、点1個を描画する関数を定義する。
パターンの描画は、共通で使えるよう、余白部分にも描画する仕様である。
黒い部分の左上の座標を、四角単位で指定する。
描画先の用意
DOM親要素の「行揃え」に「中央」をDOMスタイル設定。
定数の画像セル数は余白セル数に2を掛けてコードセル数を足す。
定数の画像ピクセル数は画像セル数にセルサイズを掛ける。
[画像ピクセル数, 画像ピクセル数]のキャンバス作成。
空に線色設定。描画先となるキャンバスのサイズを計算し、キャンバスを作成する。
また、線を描画しない設定にする。
この設定をしないと、描画時にぼやけたような表示になってしまった。
描画処理の用意と実行
●偽コード作成とは
# 画像全体を白で塗りつぶす
白色に塗色設定。
[0, 0, 画像ピクセル数, 画像ピクセル数]へ四角描画。
# まずはコードの場所全体にランダムで点を打つ
黒色に塗色設定。
Yで余白セル数から(余白セル数＋コードセル数－1)まで繰り返す
Xで余白セル数から(余白セル数＋コードセル数－1)まで繰り返す
もし、2の乱数が0と等しいならば
XのYに点描画。
ここまで。
ここまで。
ここまで。
# 特徴的な部分を描画する
定数の目位置は余白セル数にコードセル数を足して7を引く。
余白セル数の余白セル数に目描画。
目位置の余白セル数に目描画。
余白セル数の目位置に目描画。
オフセットで1から(コードセル数－16)まで繰り返す
[白色, 黒色]@(オフセットを2で割った余り)に塗色設定。
(余白セル数＋7＋オフセット)の(余白セル数＋6)に点描画。
(余白セル数＋6)の(余白セル数＋7＋オフセット)に点描画。
ここまで。
ここまで。
偽コード作成。描画を行う関数を定義し、実行する。
描画は以下の流れで行う。
画像全体を白で塗る
コード部分全体にランダムに黒い点 (四角) を描画する
四隅のうち3個に配置されるパターンを描画する
パターン間に点線を描画する
再描画ボタンの設置
改行作成。
「再生成」のボタン作成。
{関数}偽コード作成でそれをクリックした時。クリックすると描画する関数を呼び出し、別の画像を生成できるボタンを設置する。
まとめ
なでしこさんで、QRコードっぽい画像を生成することができた。
偶然QRコードとして読める画像ができたらラッキー？
コメント