なでしこさんで、にゃんこー掲示板
今週は、Qiitaの記事も早めに書けた。
noteに書きたいことも決まっている。
早めに書いてしまって、日曜日は枠審査を先延ばしにした結果溜まってしまったアニメのデキューを進めたい。
……あれれ？記事を書かないままもう日曜日になってしまった。
昼飯の前に記事を書いて、午後デキューを進め……
あれれれれ？午前中意識を保っていたのに、全く記事を書けなかったぞ？？？？？
うーん……午後はデキューに宛てて、noteはまた適当なプログラムで繋いどくか……
ああ、今週もクズでカスで無能でバカで頭が悪い。にゃーん。
今回やったこと
なでしこで、電光掲示板風の表示を行う。
LEDのかわりに猫の絵文字を用いる。
プログラム
にゃんこー掲示板 (プログラム貯蔵庫)
ポイント
データの用意
表示データは「
0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
0,0,0,1,0,0,1,1,1,0,0,0,0,1,1,1,1,1,1,0,0,0,0,1,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
1,1,1,1,0,1,0,0,0,1,0,0,1,0,0,0,0,0,0,1,0,0,1,0,0,0,1,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
0,0,0,1,1,0,0,0,0,1,0,0,0,0,0,0,0,0,1,0,0,0,1,0,0,0,0,0,0,0,1,0,0,0,0,0,1,0,1,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
0,0,1,1,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,1,1,1,1,1,1,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
0,1,0,1,0,0,1,1,0,1,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,1,0,1,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,1,0,1,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
0,1,0,1,0,1,0,0,1,0,0,0,1,0,0,0,0,0,0,0,0,0,1,0,1,0,1,0,0,0,0,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,1,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
1,0,0,1,0,0,1,1,0,1,0,0,0,1,1,1,1,1,1,1,0,0,0,1,0,0,0,1,1,1,1,1,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
」をCSV取得。
それの0を配列削除。
データ長さは表示データ@0の要素数。
表示高は表示データの要素数。
表示幅は16。
移動間隔は100。# [ms]まず、電光掲示板に表示するデータを用意する。
消灯を0(偽)、点灯を1(真)で表す。
表示する画像をペイントで作成し、それをCyberChefで文字列に変換した。
Extract RGBA, 3 more - CyberChef
この文字列を「CSV取得」で配列に変換する。
見た目の都合上、データとカッコは別の行に配置する。
開きカッコの後に改行を入れたことで、配列の最初に余計な要素ができるので、「配列削除」で削除する。
閉じカッコの前の改行は、余計な要素にはならないようである。
続いて、表示する画像のサイズを取得し、表示領域のサイズを設定する。
高さはデータと同じにし、幅は手動でデータよりも短く設定した。
最後に、データのうちどこを使うかを切り替える間隔を設定する。
表示用部品の用意
DOM親要素の「行揃え」に「中央」をDOMスタイル設定。
背景は「DIV」のDOM部品作成。
それに{
"white-space": "nowrap",
"background": "#909090",
"display": "inline-block",
"padding": "0.75ex",
}をDOMスタイル一括設定。
それにDOM親部品設定。
要素配列は空配列。
VRAMは空配列。
Yで0から(表示高-1)まで繰り返す
要素配列に空配列を配列追加。
VRAMに空配列を配列追加。
Xで0から(表示幅-1)まで繰り返す
「🐱」のラベル作成。
要素配列@Yにそれを配列追加。
VRAM@Yに偽を配列追加。
ここまで。
改行作成。
ここまで。電光掲示板として用いるDOM部品を用意する。
勝手に改行されない設定にし、背景色も設定しておく。
そして、その中に、猫を並べていく。
並べた猫のラベルは配列に入れ、並行して各要素を点灯するか否かを格納する配列も用意する。
表示内容の画面への反映
●VRAM反映とは
Yで0から(表示高-1)まで繰り返す
Xで0から(表示幅-1)まで繰り返す
もし、VRAM@Y,Xならば
要素配列@Y,Xの「opacity」に「1」をDOMスタイル設定。
違えば
要素配列@Y,Xの「opacity」に「0.25」をDOMスタイル設定。
ここまで。
ここまで。
ここまで。
ここまで。
VRAM反映。表示内容を表す配列の内容を、実際に表示に反映させる関数を定義する。
点灯しているか否かを、透明度の違いで表現する。
表示内容の更新
表示位置はデータ長さから表示幅を引く。
更新時刻はシステム時間ミリ秒。
●表示更新とは
{関数}表示更新を画面更新時実行。
システム時間ミリ秒から更新時刻を引いて移動間隔で割って切り捨て。
定数の移動距離はそれ。
もし、移動距離が0以下ならば、戻る。
移動間隔に移動距離を掛ける。
更新時刻をそれだけ増やす。
表示位置は表示位置に移動距離を足してデータ長さで割った余り。
Yで0から(表示高-1)まで繰り返す
Xで0から(表示幅-1)まで繰り返す
VRAM@Y,Xは表示データ@Y,(表示位置にXを足してデータ長さで割った余り)。
ここまで。
ここまで。
VRAM反映。
ここまで。
{関数}表示更新を画面更新時実行。横に長い画像データのうち、どこを表示するかを決め、その部分のデータを表示内容を表す配列にコピーする。
表示する位置の初期値は、最後に用意した全消灯の部分とする。
「画面更新時実行」を用いて、アニメーションを行う。
これは、設定した関数が呼び出されるたびにまた設定しないと動かない。
今回は、条件によって途中で処理を打ち切るので、関数の最後ではなく最初に再設定を行うようにした。
まず、前回更新を行ってから、更新何回分の時間が経ったかを求める。
これが1回分以上であれば、その分表示する位置と更新を行った時刻を進める。
表示する位置を更新したら、それに従い、表示するデータを表示内容を表す配列にコピーする。
表示をループさせることを、わり算の余りで表現する。
NG集
定数の値で引数の無い関数を用いる計算を行おうとする
システム時間ミリ秒から更新時刻を引いて移動間隔で割って切り捨て。
定数の移動距離はそれ。のかわりに
定数の経過時間はシステム時間ミリ秒から更新時刻を引く。
定数の移動距離は経過時間を移動間隔で割って切り捨て。と書いたところ、期待通り動かず、経過時間が0のままになってしまった。
ここで用いている「システム時間ミリ秒」は、一見変数のように見えるが、実際は引数の無い関数である。
このように「定数の(変数)は(値)。」構文を用いる際、「値」に引数の無い関数の値を用いた計算を使おうとすると、今のところなぜか処理がうまくいかない。
この件に関しては約1ヶ月前に報告しているが、いまだに改善されていないようである。
連文と増減文を組み合わせようとする
なでしこでは、「して」「て」などを用いると、前の関数の戻り値を次の関数の引数として渡すことができる。
これを連文という。
しかし、
移動間隔に移動距離を掛ける。
更新時刻をそれだけ増やす。のかわりに
移動間隔に移動距離を掛けて更新時刻を増やす。とすると、異常な速さで更新が行われた。
これは、「増やす」などの増減文は関数ではなく文法であるためか、連文の「て」で指定した値が無視されてしまい、1しか増やしてくれないからである。
おわりに
自分はクズでカスで無能でバカで頭が悪いけど、猫はかわいい。
ねこにゃーん。
コメント