[編集モード] なでしこ20周年を祝う花火

日本語プログラミング言語「なでしこ」 Advent Calendar 2025、25日目の記事用

＃冬の花火
!「貯蔵庫:drawPlus.nako3」を取り込む。

#----- 準備 --------------------
花火データ＝空配列。
前時間＝0。

#--- 花火用キャンバス -----
花火用＝描画中キャンバス。
画面幅はクライアント幅*0.95を切り捨て。//画面幅＝640。
画面高はクライアント高*0.95を切り捨て。//画面高さ＝480。
描画中キャンバスの「幅」に画面幅をDOM属性設定。
描画中キャンバスの「高さ」に画面高をDOM属性設定。
夜空色＝「#000033」

●夜空描画
    夜空色に塗り色設定。空に線色設定。
    描画中コンテキスト.globalAlpha＝0.15。# 透明度
    描画中コンテキスト.globalCompositeOperation＝「source-over」。# 合成演算（規定）
    [0,0,画面幅,画面高]へ四角描画。
ここまで。

#--- 通常花火 -----
粒子データ＝{"x":100,"y":100,"半径":2,"色":赤色,"透明度":1,"重力":0.09}。
粒子数＝150。

#--- 型物花火 -----
型物花火＝["⭐","❤"]

#--- 文字花火作成 -----
テキスト＝「祝 なでしこ 20周年！」。
文字幅＝画面幅*1.2を切り捨て。
文字高さ＝画面高さ/2。
フォントサイズ＝80と文字幅/(テキストの文字数)の最小値。
フォント＝「bold {フォントサイズ}px sans-serif」

文字用＝[0,0]のキャンバス作成。//領域を確保しない
文字用.可視＝オフ。
文字用.幅属性＝文字幅。
文字用.高さ属性＝画面高さ/2。
フォントに描画フォント設定。

黒色に塗り色設定。
[0,0,文字幅,文字高さ]へ四角描画。
白色に塗り色設定。
描画中コンテキスト.textAlign＝「center」。# 行揃え（中央寄せ）
[文字幅/2,文字高さ/2]へテキストを文字描画。

色データ＝[0,0,文字幅,文字高さ]の色データ取得。

文字花火データ＝空配列。
粒子間隔＝フォントサイズ/12を切り捨て。
yを0から文字高さまで粒子間隔ずつ増やし繰り返す。
    xを0から文字幅まで粒子間隔ずつ増やし繰り返す。
        ID＝(y*文字幅+x)*4。
        もし、色データ[ID]＞128ならば、文字花火データに{"種別":"文字","tx":x-(文字幅-画面幅)/2,"ty":y,"透明度":1,"重力":0.09,"時間":0}を配列追加。
    ここまで。
ここまで。

#----- 花火粒子の位置や透明度を更新 --------------------
●(粒子を経過時間で)花火更新
    粒子["種別"]で条件分岐
        0ならば、
            粒子["x"]を粒子["vx"]*経過時間だけ増やす。
            粒子["y"]を粒子["vy"]*経過時間だけ増やす。
            粒子["vy"]を粒子["重力"]*経過時間だけ増やす。
            粒子["半径"]を0.05*経過時間だけ減らす。
            粒子["透明度"]＝SIN(時間ミリ秒取得*粒子["明滅速度"])の絶対値。//キラキラ
            粒子["vy"]を経過時間*0.5だけ増やす。//しだれ柳
        ここまで。
        1ならば、
            粒子["y"]を粒子["重力"]*経過時間だけ増やす。
            粒子["サイズ"]を5*経過時間だけ増やす。
            粒子["透明度"]を0.05*経過時間だけ減らす。
            粒子["半径"]を0.03*経過時間だけ減らす。
        ここまで。
        「昇竜」ならば、
            粒子["進行度"]を経過時間*0.01*粒子["速度"]だけ増やす。
            [粒子["sx"],粒子["sy"]]から[粒子["ex"],粒子["ey"]]まで、粒子["進行度"]で途中座標計算。
            粒子["x"]＝それ[0]。
            粒子["y"]＝それ[1]。
        ここまで。
        「竜尾」ならば、
            粒子["半径"]を0.1*経過時間だけ減らす。
            粒子["透明度"]を0.5*経過時間だけ減らす。
        ここまで。
        「文字」ならば、
            dx＝粒子["tx"]-粒子["x"]。
            dy＝粒子["ty"]-粒子["y"]。
            粒子["vx"]をdx*0.02だけ増やす。
            粒子["vy"]をdy*0.02だけ増やす。
            粒子["vx"]=0.9*粒子["vx"]。
            粒子["vy"]=0.9*粒子["vy"]。
            粒子["vx"]を粒子["時間"]*(粒子["x"]-画面幅/2)*0.0001だけ増やす。
            粒子["vy"]を粒子["重力"]*粒子["時間"]だけ増やす。
            粒子["x"]を粒子["vx"]*経過時間だけ増やす。
            粒子["y"]を粒子["vy"]*経過時間だけ増やす。
            粒子["透明度"]＝SIN(時間ミリ秒取得*粒子["明滅速度"])の絶対値。//キラキラ
            粒子["半径"]をフォントサイズ/1000*経過時間だけ減らす。
            粒子["時間"]を経過時間だけ増やす。
        ここまで。
    ここまで。
    もし、粒子["半径"]＜０ならば、粒子["半径"]＝０。
    もし、粒子["透明度"]＜０ならば、粒子["透明度"]＝０。
ここまで。

●花火描画(タイムスタンプ)
    # 経過時間を計算
    経過時間＝(タイムスタンプ-前時間)/100。
    前時間＝タイムスタンプ。
    # キャンバスをクリア
    夜空描画。
    描画中コンテキスト.globalCompositeOperation＝「lighter」。# 合成演算（色値加算）
    # 各粒子を更新して描画
    総粒子数＝花火データの要素数。
    花火データの要素数回
        粒子＝花火データ[総粒子数-回数]。# 消失した粒子を削除するため逆順で回す
        粒子を経過時間で花火更新。
        色＝粒子["色"]。
        描画中コンテキスト.globalAlpha＝粒子["透明度"]。
        粒子["種別"]で条件分岐
            0ならば、
                色に塗り色設定。空に線色設定。
                [粒子["x"],粒子["y"]]へ粒子["半径"]の円描画。
            ここまで。
            1ならば、
                r＝粒子["サイズ"]
                色＝粒子["色"][(粒子["色"]の要素数)の乱数]
                空に塗り色設定。色に線色設定。
                粒子["半径"]*2に線太さ設定。「丸」に線端形状設定。
                [1,r/粒子["半径"]]に破線パターン設定。
                キャンバス状態保存。
                [粒子["x"],粒子["y"]]に描画起点設定。
                粒子["傾き"]に描画回転。
                粒子["型物"]で条件分岐
                    「⭐」ならば、5で[0,0]にrの星描画。ここまで。
                    「❤」ならば、[0-r,0-r,r*2,r*2]のハート描画。ここまで。
                ここまで。
                キャンバス状態復元。
            ここまで。
            「昇竜」ならば、
                色に塗り色設定。空に線色設定。
                [粒子["x"],粒子["y"]]へ粒子["半径"]の円描画。
                [粒子["x"],粒子["y"]]へ「竜尾」の花火打ち上げ
                もし、粒子["y"]＜粒子["ey"]ならば、
                    変数 花火種類＝12の乱数。
                    もし、花火種類≠1ならば、花火種類＝0。
                    [粒子["ex"],粒子["ey"]]へ花火種類の花火打ち上げ。
                    花火データの総粒子数-回数を配列削除。
                ここまで。
            ここまで。
            「竜尾」ならば、
                色に塗り色設定。空に線色設定。
                [粒子["x"],粒子["y"]]へ粒子["半径"]の円描画。
            ここまで。
            「文字」ならば、
                色に塗り色設定。空に線色設定。
                [粒子["x"],粒子["y"]]へ粒子["半径"]の円描画。
            ここまで。
        ここまで。
        # 半径が０か透明度が０になった粒子は削除
        もし、(粒子["透明度"]≦0)または(粒子["半径"]≦0)ならば、花火データの総粒子数-回数を配列削除。
    ここまで。
    「花火描画」を画面更新時実行。
ここまで。

# 花火色候補の色定数。
定数 クリムゾン色＝「crimson」
定数 珊瑚色＝「coral」
定数 トマト色＝「tomato」
定数 橙色＝「orange」
定数 チョコ色＝「chocolate」
定数 撫子色＝「pink」
定数 菫色＝「violet」
定数 本紫色＝「purple」
定数 空色＝「skyblue」
定数 矢車菊色＝「cornflowerblue」
定数 森色＝「forestgreen」
定数 黄緑色＝「yellowgreen」
定数 ライムグリーン色＝「limegreen」

●(xyへ花火種類の)花火打ち上げ
    変数 花火色配列＝[[クリムゾン色,赤色,珊瑚色,トマト色],[金色,黄色,橙色,チョコ色],[青色,空色,矢車菊色,水色],[緑色,森色,黄緑色,ライムグリーン色],[紫色,撫子色,菫色,本紫色]]。
    変数 [cx,cy]＝xy。
    粒子色配列＝花火色配列[(花火色配列の要素数)の乱数]。
    花火種類で条件分岐。
        0ならば、
            粒子数回
                粒子＝粒子データを配列複製。
                粒子["x"]＝cx。粒子["y"]＝cy。
                粒子["種別"]＝0。
                粒子["色"]＝粒子色配列[(粒子色配列の要素数)の乱数]。
                粒子["半径"]＝小数乱数*2+1。
                粒子["速度"]＝小数乱数*3+1。
                粒子["角度"]＝小数乱数*(PI*2を度変換)。
                粒子["vx"]＝COS(粒子["角度"])*粒子["速度"]*3。
                粒子["vy"]＝SIN(粒子["角度"])*粒子["速度"]*3。
                粒子["明滅速度"]＝小数乱数*0.2+0.05。
                花火データに粒子を配列追加。
            ここまで。
        ここまで。
        1ならば、
            粒子＝粒子データを配列複製。
            粒子["種別"]＝1。
            粒子["型物"]＝型物花火[(型物花火の要素数)の乱数]。
            粒子["x"]＝cx。粒子["y"]＝cy。
            粒子["色"]＝粒子色配列。
            粒子["半径"]＝3。
            粒子["サイズ"]＝1。
            粒子["傾き"]＝90の乱数-45。
            粒子["明滅速度"]＝0.15。
            花火データに粒子を配列追加。
        ここまで。
        「昇竜」ならば、
            粒子＝粒子データを配列複製。
            粒子["種別"]＝「昇竜」。
            粒子["色"]＝「#ffffff」。
            粒子["ex"]＝cx。粒子["ey"]＝cy。//最終到達地点
            粒子["x"]＝cx-80からcx+80までの乱数範囲。
            粒子["y"]＝画面高さ。
            粒子["sx"]＝粒子["x"]。粒子["sy"]＝粒子["y"]。//打ち上げ地点
            粒子["半径"]＝2。
            粒子["速度"]＝10-([粒子["sx"],粒子["sy"]]から[粒子["ex"],粒子["ey"]]までの距離計算)/100
            粒子["進行度"]＝0。
            花火データに粒子を配列追加。
        ここまで。
        「竜尾」ならば、
            粒子＝粒子データを配列複製。
            粒子["種別"]＝「竜尾」。
            粒子["色"]＝「#ffffff」。
            粒子["透明度"]＝0.5。
            粒子["ex"]＝cx。粒子["ey"]＝cy。//最終到達地点
            粒子["x"]＝cx-1.5からcx+1.5までの乱数範囲。
            粒子["y"]＝cy。
            粒子["半径"]＝2。
            花火データに粒子を配列追加。
        ここまで。
        「文字」ならば、
            文字花火データを反復。
                粒子＝対象を配列複製。
                粒子["x"]＝cx。粒子["y"]＝cy。
                粒子["色"]＝粒子色配列[(粒子色配列の要素数)の乱数]。
                粒子["半径"]＝フォントサイズの乱数/100*3+フォントサイズ/40。
                粒子["vx"]＝0。粒子["vy"]＝0。
                粒子["明滅速度"]＝小数乱数*0.2+0.05。
                花火データに粒子を配列追加。
            ここまで。
        ここまで。
    ここまで。
ここまで。
#-------------------------------------------------

花火用へ描画開始。
「花火描画」を画面更新時実行。

C＝0。
0.5秒毎には、
    cx＝画面幅の乱数。
    cy＝画面高さの乱数。
    もし、C%10＝0ならば、[画面幅/2,画面高さ/2]へ「文字」の花火打ち上げ。
    [cx,cy]へ「昇竜」の花火打ち上げ。
    Cを0.5増やす。
ここまで。

#-------------------------------------------------
●(xyとxy2の|xyからxy2までの)距離計算
    変数[x,y]＝xy。
    変数[x2,y2]＝xy2。
    (((x2-x)^2)＋((y2-y)^2))の平方根を戻す。
ここまで。

●(xyからxy2までtで|xy2までのtを)途中座標計算
    変数[x,y]＝xy。
    変数[x2,y2]＝xy2。
    [x+(x2-x)*t,y+(y2-y)*t]を戻す。
ここまで。
#-------------------------------------------------
●(xywhの|xywhを)色データ取得
　(描画中コンテキストの「getImageData」をxywhでJSメソッド実行).dataを戻す。
ここまで。
#-------------------------------------------------
●クライアント幅
　　「document.documentElement.clientWidth」をJS実行。
ここまで。

●クライアント高さ
　　「document.documentElement.clientHeight」をJS実行。
ここまで。
#-------------------------------------------------
●小数乱数
    「Math.random()」をJS実行
ここまで。
#-------------------------------------------------

デバッグ × キャンバス: 幅 × 高

🍯 プログラム貯蔵庫

[編集モード] なでしこ20周年を祝う花火

素材のアップロード