[ 📌文法] [ 🎨命令一覧]

[編集モード] 夏の花火大会

エンドレスで花火を打ち上げます。そんだけ！　たまに❤️型や⭐️形や🙂の花火も打ち上がります☆　打ち上げ時に尾を引くようにしてみました。　https://news.mynavi.jp/techplus/article/zerojavascript-26/を読んでなでしこさんでもやってみましたが、ChatGPTさんがイマイチ協力してくださらなかったので、色は自前で改造しています（哀）　花火タグ付けた🎆

＃花火大会
!「https://n3s.nadesi.com/plain/drawPlus.nako3」を取り込む。
!「https://n3s.nadesi.com/plain/ImageProcessing.nako3」を取り込む。

# キャンバスの準備
定数 黒色＝「#000000」
定数 深夜青＝「#191970」。
変数 [キャンバス幅,キャンバス高さ,背景色]＝[400,400,[黒色,深夜青]]。
描画中キャンバスの「幅」にキャンバス幅をDOM属性設定。
描画中キャンバスの「高さ」にキャンバス高さをDOM属性設定。
背景描画。
●背景描画
    100回
        背景色＝回数で黒色と深夜青の色等比計算して色混ぜ。
        背景色に塗り色設定。空に線色設定。
        [0,キャンバス高さ/100*(回数-1),キャンバス幅,キャンバス高さ/100]へ四角描画。
    ここまで。
ここまで。

# 宣言
花火データ＝空配列。
粒子データ＝{"x":100,"y":100,"半径":2,"色":赤色,"透明度":1,"重力":0.05,"時間":0}。
粒子数＝100。
前時間＝時間ミリ秒取得。
型物花火＝["星","ハート","スマイル"]。

# 花火粒子の位置や透明度を更新
●(粒子を経過時間で)花火更新
    粒子["種別"]で条件分岐
        0ならば、
            粒子["x"]を粒子["vx"]*経過時間だけ増やす。
            粒子["y"]を粒子["vy"]*経過時間だけ増やす。
            粒子["vy"]を粒子["重力"]*経過時間だけ増やす。
            もし、粒子["時間"]＞10ならば、粒子["重力"]を0.03*経過時間だけ増やす。//後半に重力を増加させる
            粒子["透明度"]を0.01*経過時間だけ減らす。
            粒子["半径"]を0.05*経過時間だけ減らす。
        ここまで。
        1ならば、
            粒子["y"]を粒子["重力"]*経過時間だけ増やす。
            もし、粒子["時間"]＞10ならば、粒子["重力"]を0.5*経過時間だけ増やす。//後半に重力を増加させる
            粒子["サイズ"]を1.5*経過時間だけ増やす。
            もし、粒子["時間"]＜20ならば、粒子["サイズ"]を1.5*経過時間だけ増やす。//後半の広がりすぎを押さえる（必要か？）
            粒子["透明度"]を0.01*経過時間だけ減らす。
            粒子["半径"]を0.05*経過時間だけ減らす。
        ここまで。
        「昇竜」ならば、
            粒子["y"]を粒子["速度"]*経過時間だけ減らす。
        ここまで。
        「竜尾」ならば、
            粒子["半径"]を0.1*経過時間だけ減らす。
            粒子["透明度"]を0.3*経過時間だけ減らす。
        ここまで。
    ここまで。
    粒子["時間"]を経過時間だけ増やす。
    もし、粒子["半径"]＜０ならば、粒子["半径"]＝０。
    もし、粒子["透明度"]＜０ならば、粒子["透明度"]＝０。
ここまで。

●花火描画
    # 経過時間を計算
    今時間＝時間ミリ秒取得。
    経過時間＝(今時間-前時間)/100。
    前時間＝今時間。
    # キャンバスをクリア
    背景描画。
    # 各粒子を更新して描画
    総粒子数＝花火データの要素数。
    花火データの要素数回
        番号＝総粒子数-回数。# 消失した粒子を削除するため逆順で回す
        粒子＝花火データ[番号]。
        
        粒子を経過時間で花火更新。
        色＝粒子["透明度"]と(粒子["色"]をRGB分解)のカラーコードRGBA。
        粒子["種別"]で条件分岐
            0ならば、
                色に塗り色設定。空に線色設定。
                [粒子["x"],粒子["y"]]へ粒子["半径"]の円描画。
            ここまで。
            1ならば、
                空に塗り色設定。色に線色設定。
                粒子の型物花火描画。
            ここまで。
            「昇竜」ならば、
                色に塗り色設定。空に線色設定。
                [粒子["x"],粒子["y"]]へ粒子["半径"]の円描画。
                [粒子["x"],粒子["y"]]へ「竜尾」の花火打ち上げ
                もし、粒子["y"]＜粒子["ey"]ならば、
                    変数 花火種類＝12の乱数。
                    もし、花火種類≠1ならば、花火種類＝0。
                    [粒子["ex"],粒子["ey"]]へ花火種類の花火打ち上げ。
                    花火データの番号を配列削除。
                ここまで。
            ここまで。
            「竜尾」ならば、
                色に塗り色設定。空に線色設定。
                [粒子["x"],粒子["y"]]へ粒子["半径"]の円描画。
            ここまで。
        ここまで。
        # 半径が０か透明度が０になった粒子は削除
        もし、(粒子["透明度"]≦0)または(粒子["半径"]≦0)ならば、花火データの番号を配列削除。
    ここまで。
    「花火描画」を画面更新時実行。
ここまで。

●(粒子の)型物花火描画
    r＝粒子["サイズ"]
    粒子["半径"]*2に線太さ設定。「round」に線端形状設定。
    [1,r/粒子["元半径"]]に破線パターン設定。
    キャンバス状態保存。
    [粒子["x"],粒子["y"]]に描画起点設定。
    粒子["傾き"]に描画回転。
    粒子["型物"]で条件分岐
        「星」ならば、5で[0,0]にrの星描画。ここまで。
        「ハート」ならば、[0-r,0-r,r*2,r*2]のハート描画。ここまで。
        「スマイル」ならば、
            [0,0]にrの円描画。
            [0,0]に(20をラジアン変換)から(170をラジアン変換)までr/2の円弧描画。
            [r/3*-1,r/3*-1]にr/20の円描画。
            [r/3,r/3*-1]にr/20の円描画。
        ここまで。
    ここまで。
    キャンバス状態復元。
ここまで。

# 花火色候補の色定数。
定数 クリムゾン色＝「#dc143c」
定数 赤色＝「#FF0000」
定数 珊瑚色＝「#ff7f50」
定数 橙色＝「#ffa500」
定数 金色＝「#ffd700」
定数 黄色＝「#ffff00」
定数 撫子色＝「#ffc0cb」
定数 紫色＝「#ff00ff」
定数 菫色＝「#ee82ee」
定数 青色＝「#0000FF」
定数 水色＝「#00ffff」
定数 空色＝「#87ceeb」
定数 矢車菊色＝「#6495ed」
定数 緑色＝「#00FF00」
定数 森色＝「#228b22」
定数 黄緑色＝「#adff2f」
定数 ライムグリーン色＝「#32cd32」
定数 グリーン色＝「#008000」
定数 白色＝「#FFFFFF」

●(xyへ花火種類の)花火打ち上げ
    変数 花火色配列＝[[クリムゾン色,赤色,珊瑚色],[金色,黄色,橙色],[青色,空色,矢車菊色],[緑色,黄緑色,ライムグリーン色],[紫色,撫子色,菫色]]。
    変数 [cx,cy]＝xy。
    変数 粒子色配列＝花火色配列[(花火色配列の要素数)の乱数]。
    花火種類で条件分岐。
        0ならば、
            粒子数回
                粒子＝粒子データを配列複製。
                粒子["種別"]＝0。
                粒子["x"]＝cx。粒子["y"]＝cy。
                粒子["色"]＝粒子色配列[(粒子色配列の要素数)の乱数]。
                粒子["半径"]＝3の乱数+1。
                粒子["速度"]＝30の乱数/10+1。
                粒子["角度"]＝(PI*2を度変換)の乱数。
                粒子["vx"]＝COS(粒子["角度"])*粒子["速度"]。
                粒子["vy"]＝SIN(粒子["角度"])*粒子["速度"]。
                花火データに粒子を配列追加。
            ここまで。
        ここまで。
        1ならば、
            粒子＝粒子データを配列複製。
            粒子["種別"]＝1。
            粒子["型物"]＝型物花火[(型物花火の要素数)の乱数]。
            粒子["x"]＝cx。粒子["y"]＝cy。
            粒子["色"]＝粒子色配列[0]。
            粒子["半径"]＝3。
            粒子["元半径"]＝3。//粒子のサイズを小さくしても、破線パターンの計算は元のサイズで行う。
            粒子["サイズ"]＝1。
            粒子["傾き"]＝(180の乱数)-90。
            花火データに粒子を配列追加。
        ここまで。
        「昇竜」ならば、
                粒子＝粒子データを配列複製。
                粒子["種別"]＝「昇竜」。
                粒子["色"]＝白色。
                粒子["ex"]＝cx。粒子["ey"]＝cy。//最終到達地点
                粒子["x"]＝cx。//cx-20からcx+20までの乱数範囲。
                粒子["y"]＝キャンバス高さ。
                粒子["半径"]＝2。
                粒子["速度"]＝20。
                花火データに粒子を配列追加。
        ここまで。
        「竜尾」ならば、
                粒子＝粒子データを配列複製。
                粒子["種別"]＝「竜尾」。
                粒子["色"]＝白色。
                粒子["ex"]＝cx。粒子["ey"]＝cy。//最終到達地点
                粒子["x"]＝cx-1からcx+1までの乱数範囲。
                粒子["y"]＝cy。
                粒子["半径"]＝2。
                粒子["速度"]＝20。
                花火データに粒子を配列追加。
        ここまで。
    ここまで。
ここまで。
#-------------------------------------------------
前時間＝時間ミリ秒取得。
「花火描画」を画面更新時実行。
0.25秒毎には、
    cx＝キャンバス幅の乱数。
    cy＝キャンバス高さの乱数。
    [cx,cy]へ「昇竜」の花火打ち上げ。
ここまで。
#-------------------------------------------------

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

🍯 なでしこ3貯蔵庫

[編集モード] 夏の花火大会

素材のアップロード