祝なでしこ20周年！　電光掲示板🎊️

キャンバスに描いたテキストのピクセルをドット化したリアルっぽい電光掲示板。日本語プログラミング言語「なでしこ」 Advent Calendar 2025、1日目の記事用。

文法命令一覧

エディタ

プログラム

#--- 電光掲示板の設定 ----------
掲示板幅＝400。
掲示板高さ＝100。
メッセージ＝「祝 なでしこ 20周年！」
速さ＝3。

# キャンバス
電光掲示板＝描画中キャンバス。
電光掲示板.幅属性＝掲示板幅。
電光掲示板.高さ属性＝掲示板高さ。

# フォントと描画位置
背景色＝黒色。
文字色＝金色。
フォント＝「bold 80px sans-serif」

# 描画位置
描画X＝掲示板幅。
描画Y＝掲示板高さ-20。

# メッセージの描画幅
フォントに描画フォント設定。
メッセージ幅＝(メッセージの文字描画幅取得).widthを整数変換。

#--- LEDメッセージ作成 ----------
LEDサイズ＝3。
LED間隔＝6。
LEDデータ＝空配列。
LEDキャンバス＝[メッセージ幅,掲示板高さ]のキャンバス作成。
LEDキャンバス.可視＝オフ。
「#runbox」の「行揃え」に「中央」をDOMスタイル設定。

# 黒地に白でメッセージを描画
黒色に塗り色設定。
[0,0,メッセージ幅,掲示板高さ]に四角描画。
白色に塗り色設定。
フォントに描画フォント設定。
[0,描画Y]にメッセージを文字描画。

# 色データを取得し、白い部分からドットを作成
変数 色データ＝[0,0,メッセージ幅,掲示板高さ]の色データ取得。
LEDデータ＝空配列。
yを0から掲示板高さまでLED間隔ずつ増やし繰り返す。
    xを0からメッセージ幅までLED間隔ずつ増やし繰り返す。
        ID＝(y*メッセージ幅+x)*4。
        もし、色データ[ID]＞128ならば、LEDデータに[x,y]を配列追加。
    ここまで。
ここまで。

# いったんクリアして背景を透明にし、LEDデータに従って円を描く。
全描画クリア。
文字色に塗り色設定。背景色に線色設定。
LEDデータを反復
    対象にLEDサイズの円描画。
ここまで。

#--- 背景作成 ----------
背景キャンバス＝[掲示板幅,掲示板高さ]のキャンバス作成。
背景キャンバス.可視＝オフ。

透明度＝0.2。
文字色に塗り色設定。
塗り色＝描画中コンテキスト.fillStyle。
塗り色をRGB分解。
消灯LED色＝「rgba({それ[0]},{それ[1]},{それ[2]},{透明度})」

背景色に塗り色設定。
[0,0,掲示板幅,掲示板高さ]に四角描画。
消灯LED色に塗り色設定。
yを0から掲示板高さまでLED間隔ずつ増やし繰り返す。
    xを0からメッセージ幅までLED間隔ずつ増やし繰り返す。
        [x,y]にLEDサイズの円描画。
    ここまで。
ここまで。

#--- 電光掲示板描画アニメーション ----------
電光掲示板へ描画開始。
電光掲示板描画。

●電光掲示板描画
    [0,0]へ背景キャンバスを画像描画。
    [描画X,0]にLEDキャンバスを画像描画。
    
    描画XをLED間隔だけ減らす。
    もし、描画X≦メッセージ幅*-1ならば、描画X＝掲示板幅。
    (0.1/速さ)秒待つ。
    「電光掲示板描画」を画面更新時実行。
ここまで。

#-----------------------------------------------
●(xywhの|xywhを)色データ取得
　(描画中コンテキストの「getImageData」をxywhでJSメソッド実行).dataを戻す。
ここまで。

●(色を|色の)RGB分解
　分色とは変数。分色＝空配列。
　色＝色の「#」を「0x」に置換。
　色＝色を整数変換。
　数を２から０まで繰り返す
　　分色[数]＝色%256。
　　色＝(色-分色[数])/256
　ここまで。
　分色で戻る。
ここまで。
#-----------------------------------------------

実行結果

保存

プログラムを保存

表示ページ

直前に実行または一時保存した内容を復元

実行環境

なでしこバージョン

素材

画像・音声・データ

ログインすると素材をアップロードできます。

🍯 プログラム貯蔵庫

プログラム

プログラムを保存

なでしこバージョン

画像・音声・データ