WindowsのLively WallpaperでMatrix風壁紙をカスタマイズした話

きっかけ
描画される文字を左右反転する改変
1. 壁紙の保存フォルダを開く
2. ソースコードを編集する
最後に結果を確認

きっかけ

タイトルのとおり、これまでLively WallpaperをインストールしてMatrix風壁紙の「Matrix Rain Customizable」を適用していました。

ふと映画で見た記憶からどこか違和感があって調べてみたところ、映画ではコードで生成された仮想世界を裏側から見ている視点を表現するため左右反転した文字にしていたようですね。

そういうことならば、ちょっとコードに手を加えてみましょう。

描画される文字を左右反転する改変

左右反転して描画するために早速作業していきます。

壁紙の保存フォルダを開く

Lively Wallpaperを起動します。
ライブラリ内の「Matrix Rain Customizable」のサムネイルを右クリックします。
メニューから「ファイルの場所を開く」を選択します。

ソースコードを編集する

script.jsをメモ帳などテキストエディタで開き以下の記述箇所を探します。
2026-09-19時点で、こちらの環境では67行目でした。

        ctx.fillText(text, i * font_size, drops[i] * font_size);
        // Incrementing Y coordinate

変更元の箇所をコメントアウトしてAIに検討してもらった左右反転するコード記述を追加したものが以下です。

        //ctx.fillText(text, i * font_size, drops[i] * font_size);
        // --- ここから左右反転の処理を追加 ---
        ctx.save(); // 現在の描画状態（色など）を保存

        // 文字の位置（X座標）を基準にして左右反転する座標系を作る
        var posX = i * font_size;
        var posY = drops[i] * font_size;

        ctx.translate(posX + font_size / 2, posY); // 文字の中心へ移動
        ctx.scale(-1, 1);                          // 左右反転
        ctx.textAlign = "center";                  // 中心基準で描画

        ctx.fillText(text, 0, 0);                  // 座標(0,0)に文字を描画

        ctx.restore(); // 描画状態を元に戻す（次の列への影響を防ぐ）
        // --- ここまで ---
        // Incrementing Y coordinate

もともとあった2行の箇所を変更後の内容に置き換え修正したら保存してテキストエディタを閉じてしまって大丈夫です。

最後に結果を確認

変更内容を反映させるためにLively Wallpaperのライブラリー内で別の壁紙を選択してから、改めてMatrix Rain Customizableを選択するとこのように描画変更することができました。

文字を半角にするなどの変更を別途行っていたのでちょっと見た目が違っていると思います。
まったく同じにしたいということでしたら、23行目を以下のように変更します。

var konkani  = "ｱｲｳｴｵｶｷｸｹｺｻｼｽｾｿﾀﾁﾂﾃﾄﾅﾆﾇﾈﾉﾊﾋﾌﾍﾎﾏﾐﾑﾒﾓﾔﾕﾖﾗﾘﾙﾚﾛﾜｦﾝ1234567890Z"

当時視聴済みで懐かしいと思う方と、ナニコレという方に分かれるかもしれませんね。
Amazonで3部作セットが販売されていましたので映画を見てみようと思われた方は以下のリンク先をご覧になってみてください。

プロモーション

Amazon.co.jp: マトリックスワーナー・スペシャル・パック(3枚組)初回限定生産 [Blu-ray] : キアヌ・リーブス, ローレンス・フィッシュバーン, キャリー=アン・モス, ウォシャウスキー兄弟: DVD

Amazon.co.jp: マトリックスワーナー・スペシャル・パック(3枚組)初回限定生産 : キアヌ・リーブス, ロ...

Amazonで購入