ドットマトリクスLED風表示

ドットマトリクスLED風に「大石泉すき」の文字を流す。美咲ゴシックを使用。

エディタ

プログラム

画像URLは「data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAICAYAAAC/K3xHAAAApUlEQVQ4T81T0RKAMAjK///o2rroyEPZ3tpTbSqgGOc4x3Mi4qDf+3beVUfF5rucqzA6/BIcnJ2AleJKJISsNKDLtwJGwDuBHMzd3OlcFQui3ZQ6HCUmVibgOuTeYcVJfMemzo53XScAgAycv2chkOPvap8Usaq+tRAEKKKc3AHk3B278XQcWWkh7ED2OzrJS8wFeElz9ytSTpiq70R9LOSC//h+AcfTrOkYDa7yAAAAAElFTkSuQmCC」。
列数は16。

●(IMGの)画像データ取得とは
  定数の画像幅はIMG$width。
  定数の画像高はIMG$height。
  定数のキャンバスは「canvas」のDOM要素作成。
  キャンバスの「width」に画像幅をDOM属性設定。
  キャンバスの「height」に画像高をDOM属性設定。
  キャンバスで描画開始。
  IMGを[0,0]に画像描画。
  定数の画像データは描画中コンテキストの「getImageData」を[0,0,画像幅,画像高]でJSメソッド実行。
  定数の画像データ本体は画像データ$data。
  定数の取得結果は空配列。
  行で0から(画像高-1)まで繰り返す
    定数の取得結果行は空配列。
    列で0から(画像幅-1)まで繰り返す
      取得結果行に(画像データ本体[(行×画像幅+列)×4]が128未満)を配列追加。
    ここまで。
    取得結果に取得結果行を配列追加。
  ここまで。
  取得結果を戻す。
ここまで。

表示画像は画像URLの画像読み待つ。
画像データは表示画像の画像データ取得。
行数は画像データの表行数。

●(LEDをVに)点灯設定とは
  もし、Vならば
    LEDの「色」に赤色をDOMスタイル設定。
  違えば
    LEDの「色」に灰色をDOMスタイル設定。
  ここまで。
ここまで。

●LED作成とは
  定数のLEDは「●」のラベル作成。
  LEDをオフに点灯設定。
  LEDを戻す。
ここまで。

マトリクスは「DIV」のDOM部品作成。
マトリクスに{
  display: "inline-block",
  padding: "0.2em",
  whiteSpace: "nowrap",
  lineHeight: "1em"
}をDOMスタイル一括設定。
マトリクスの「背景色」に黒色をDOMスタイル設定。

マトリクスにDOM親要素設定。
LED配列は空配列。
(行数）回
  LED行は空配列。
  (列数)回
    LED作成してLED行に配列追加。
  ここまで。
  LED配列にLED行を配列追加。
  改行作成。
ここまで。

●(OFFSETで)画像LED表示とは
  行で0から(行数-1)まで繰り返す
    列で0から(列数-1)まで繰り返す
      定数の表示列は(OFFSET+列)を(画像データの表列数)で割った余り。
      LED配列[行][列]を画像データ[行][表示列]に点灯設定。
    ここまで。
  ここまで。
ここまで。

表示位置は0。
0.2秒毎には
  表示位置で画像LED表示。
  表示位置は(表示位置+1)を(画像データの表列数)で割った余り。
ここまで。

実行結果

保存

プログラムを保存

表示ページ

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

実行環境

なでしこバージョン

素材

画像・音声・データ

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

🍯 プログラム貯蔵庫

プログラム

プログラムを保存

なでしこバージョン

画像・音声・データ