JavaScript+SVGでドットマトリクスを生成する

インタラクティブなSVGを作ってみたい

JavaScirptと言えばホームページに日付表示するような時代から幾星霜。
いまやフロントでは無双状態の言語で8bitな感じのものを作ってみたいと。

前時代的に自前で試したい

ライブラリを使うのが正解だとは思いますが。

JavaScript + SVGの壁

先人の記事を拝見すると、何やら制限事項が多く道は困難。
インラインSVGならいろいろ操作できるとの記述を見るも、あのソースを貼り付けるのはいやだなぁ。
シンプルなSVGで8bitな感じのをできないものか。

Let's Generate!

もはや思考は迷走し、SVGでドットマトリクスを生成したら楽しいのではないかとのアイデアに憑りつかれます。
HC-20やPC-1500のグラフィックも再現できちゃう？

    <svg id="matrix" width="220" height="220"></svg>

やった！インラインSVGを書き終えました。
要素を生成してappendChildしていきます。

        mtx = document.getElementById("matrix");
        dotMatrix = {}

        //色指定
        dotOff = "powderblue";
        dotOn = "darkslategray";

        //マトリクスのドット数
        mtxWidth = 10;
        mtxHeight = 10;

        //ドットのサイズ
        dotWidth = 20;
        dotHeight = 20;

        //マトリクス生成
        for (var x = 0; x <= mtxWidth - 1; x++){
            for (var y = 0; y <= mtxHeight - 1; y++){
                //オブジェクトIDを付ける
                dotName = "dot" + x + ":" + y;

                dot=document.createElementNS('http://www.w3.org/2000/svg','rect');
                dot.setAttribute('id',dotName);
                dot.setAttribute('x',x * (dotWidth + 1));
                dot.setAttribute('y',y * (dotHeight + 1));
                dot.setAttribute('width',dotWidth);
                dot.setAttribute('height',dotHeight);
                dot.setAttribute('stroke','none');
                dot.setAttribute('fill',dotOff);
                dot.setAttribute('rx',2);
                dot.setAttribute('ry',2);
                mtx.appendChild(dot);
                dotMatrix[dotName] = dot;
            }
        }

        //色付きの初期配置
        dx = parseInt(mtxWidth / 2);
        dy = parseInt(mtxHeight / 2);
        dotFill(dx,dy,dotOn);

idを 「dot + x座標 + : + y座標」 と自分なりに直感的な命名にしてハッシュにも設定。
dotFill関数に座標と色情報を与えると、要素に色を塗ります。

        //ドットを指定色で塗る関数
        function dotFill(dx,dy,para){
            dotName = "dot" + dx + ":" + dy;
            dot = dotMatrix[dotName];
            dot.attributes['fill'].nodeValue = para;
        }

あ、関数名はPSETの方がよかったかな・・・。

こんな感じです。

        //キーイベント処理
        document.onkeydown = function(e){
            dotFill(dx,dy,dotOff);

            //右矢印
            if ((e.keyCode == 39) && (dx < mtxWidth - 1)){
                dx++;
            }

            //左矢印
            if ((e.keyCode == 37) && (dx > 0)){
                dx--;
            }

            //上矢印
            if ((e.keyCode == 38) && (dy > 0)){
                dy--;
            }

            //下矢印
            if ((e.keyCode == 40) && (dy < mtxHeight - 1)){
                dy++;
            }
            dotFill(dx,dy,dotOn);
        }

矢印キーを拾って描いては消し。

正直、このコードではちらつきが厳しく、ドット数が多いと目が疲れます。
ゲームなどに使えるように高速化を目指したいと思います。