スマホからご覧の方へ
縮小がうまくいかない場合は、ブラウザのメニューから「PC版を表示」を試してみてください
※備考、スクロール、接近表示欄では数字は全角で入力してください
・前作のLED方向幕シミュレータを発展させて、LED表現の集大成として作ったものです。
・画像生成は前作よりも効率化し、スクロール表現についてはイチから開発しました。
・一種類の筺体では飽き足らず、複数の筺体、フォント、文字色を用意しましたので、ぜひ最新式から往年のタイプまで、横沢電鉄の発車標をお楽しみください
2024.6.20 Ver. 1.0公開
①操作盤左上「ランダムにセット」
②操作盤右上「下記内容で実行」
あとは、各自さわって試してみてください
前回は画像だったフォント情報をテキストに変更した。詳細は以下の通り
↑「黒なら0」「白なら1」で二値化し8ビットごとに16進数に変換。
24*24dotなら1文字につき144桁の文字列となる
この文字列を幅情報や高さ情報と一緒にcsvに統合。csv化によってフォントデータが増えても管理がしやすくなった
フォントのソースは下記の通り。漢字はjis第一水準まで対応
24ドットフォント(ゴシック) | Noto Sansの字形をベースにエンゼシアが作成/左記に収録されていない漢字のみNoto Sans Mediumを24dotで二値化したもの |
24ドットフォント(明朝) | Noto Serifの字形をベースにエンゼシアが作成/左記に収録されていない漢字のみJFドットjiskan24h(全角文字はパブリックドメイン) |
16ドットフォント | JFドット東雲ゴシック16(パブリックドメイン) |
前回の方向幕シミュレータでは、スクロールがある場合毎フレーム描画を行っていたが、当然のように重い処理となり致命的な問題となっていた
今回は抜本的対策を行いcssアニメーションにて実現した。例えば幅200pxのエリアでスクロールを行いたい場合、下記のような画像を生成する。
これを200pxを超える部分は隠した上で横にスライドすることで、スクロールしているように見せることができる。前回の方式と比べると描画処理が一回で済み、スクロールがカクつくことはなくなった
実際のcss(1行目備考欄)
このままではうまく動作しない。単にアニメーション範囲を0%から100%にすると、画像が完全に見切れる(画像右端が描画範囲左端まで達する)までスライドしてしまう。うまく動作しているように見せるためには、画像右端が描画範囲右端に達した時点でアニメーションをとめるようにしなければならない
つまり、上記cssの/*変更部分1*/をjavascriptで動的に計算する必要がある
次にアニメーション時間を変更する(/*変更部分2*/)
さて、javascriptからcssを変更したいときは、個別のhtml要素の.styleプロパティからアクセスすることが普通だが、今回変更したいのはキーフレームである。個別のhtml要素からアクセスすることはできない。どうするか?javascriptから”直接” “地の”cssを変更していく。
そのためにdocument.styleSheetsやcssRulesといったプロパティがあるのだが、これが曲者かつ不便で、スタイルシートやその中のcssルールを指定する方法が”順番”しかない。
cssルールは上から数えていけば分かるが、スタイルシートの順番というのが分からない。
MDN webdocsによれば、document.styleSheetsは次の順でリストが返されるとある。
ということらしい。とりあえずこれで目的のスタイルシートを探すことができる。分からなくても、0から順番に試していけばいい。
しかし、これはつまり、何かあれば簡単に順番が変わってしまうということでもある。
例えば<head>内の<link>を増やせば、<body>内の<style>の順番は後ろになるし、ローカル環境からwordpress等の環境に上げればプラグイン等の<link>が増え、順番が変わる。
このことからdocument.styleSheetsやcssRulesを使うときの注意↓
・スタイルシートの場合は、読み込まれるスタイルシートの数が変わるときはエラーが起きないか確認を行う
・cssルールの場合は、予め順番で指定されることを予想して書く。操作したいルールは上の方に置き、順番を固定する
前回のled方向幕シミュレータに引き続き、今回のシミュレータの表示画像は動的に生成される。そのために入力エリアはできるだけ自由に入力できるようにしたい(例<input type=”text”>)。しかし反対に決まった内容を入力したいときは自由すぎる入力は不便・面倒であり、選択肢があった方がよい(例<form><select>)。今回は<input type=”text”>ベースとし、(+)メニューから予め用意したテキストを追加できるようにした
今回独自に色タグ(㈹赤など)を実装した。本当はxml的なタグにしたかったが断念し簡易的な実装である
1文字分の描画を行う関数内の最初で文字判定が実行される。㈹/㈵が来れば描画を中断し、次の文字(赤/青/黄…)を解釈する。その次の文字から描画が再開される。
つまり㈹/㈵がトリガーであり、㈹/㈵が付かない赤/青/黄…は普通の文字として描画される。
コピペするのも面倒なので追加ボタンを設置した。青枠のテキストボックスのカーソル位置を取得し、文章中に挿入できるようにした。
今回、筐体の描画もcanvasでプログラム的に行っている。
筐体の描画で特別難しいことはしていないが、時計部分の影のインセット(凹んでいる表現)だけはネット上に情報がなかったのでメモしておく
canvasではドロップシャドウを付けることができるが、おそらく影のインセットを行うオプションがない。なので、回りくどい方法でインセットに見えるような画像を作っていく
まずメインキャンバスの他に別途作業キャンバスを用意する。作業キャンバスのギリギリ外でストロークを描き、それにドロップシャドウを付ける。この作業キャンバスを、メインキャンパスにdrawImageで貼り付ける
線の太さを意識して座標を考えるのが面倒である。デメリットとして、角Rをつけていると角にストロークの色がついてしまう。ストロークの色を透明にすれば良いと思ってしまうが、そうすると、そもそもシャドウが付かない。今のところ改善策なし
ベースカラー | # |
---|---|
電球サイズ | inputイベントで値を表示px |
電球間隔 | inputイベントで値を表示px |
電球ガンマ補正 | inputイベントで値を表示 |
フレアガンマ補正 | inputイベントで値を表示 |
フレア強さ | inputイベントで値を表示 |
枠の太さ | inputイベントで値を表示px |
枠の色 | # |
消灯されたLED (#000000)の対応 | # |
#000001の対応 | # |
スクロール速度 | inputイベントで値を表示px/s |
文字間隔 |