[編集モード] 花火大会-改

雪乃☆雫さんの「夏の花火」を少しだけ改良したものです。いろいろもっと改良したいけどとりあえず。

# 花火大会-改
# ---------------------------------------------
# 雪乃☆雫さん「夏の花火大会」を少しだけ改良したものです
# https://n3s.nadesi.com/id.php?2546
# ---------------------------------------------
#
# なでしこ「花火大会」を開催中 - タグ: 花火で投稿しよう！
#
# ---------------------------------------------
# この後、もっといろいろ改良する予定。
# TODO:
# - 火花の奇跡が少し残るようにしたい
# - 色だけでなく花火の種類を増やしたい
# - 画面の下方から打ち上げられる様子も追加したい
# - 煙が流れるようにしたい
# ---------------------------------------------
# キャンバスの準備
変数 [キャンバス幅,キャンバス高さ,背景色]＝[400,400,黒色]。
描画中キャンバスの「幅」にキャンバス幅をDOM属性設定。
描画中キャンバスの「高さ」にキャンバス高さをDOM属性設定。
夜空描画。

●夜空描画
    背景色に塗り色設定。
    [0,0,キャンバス幅,キャンバス高さ]へ四角描画。
ここまで。

# 宣言
花火データ＝空配列。
粒子データ＝{"x":100,"y":100,"半径":2,"色":赤色,"透明度":1,"重力":0.09}。
粒子数＝80。
前時間＝時間ミリ秒取得。

# 花火粒子の位置や透明度を更新
●(粒子を経過時間で)花火更新
    粒子["x"]を粒子["vx"]*経過時間だけ増やす。
    粒子["y"]を粒子["vy"]*経過時間だけ増やす。
    粒子["vy"]を粒子["重力"]*経過時間だけ増やす。
    粒子["透明度"]を0.01*経過時間だけ減らす。
    粒子["半径"]を0.05*経過時間だけ減らす。
    もし、粒子["半径"]＜０ならば、粒子["半径"]＝０。
ここまで。

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

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

●(xyへ)花火打ち上げ
    # 色の組合せを定義
    変数 花火色配列＝[
        [金色,黄色],
        [橙色,黄色,赤色],
        [緑色,水色,白色],
    ]。
    # [紫色,撫子色,菫色],
    # [緑色,黄緑色,ライムグリーン色],
    # [青色,空色,矢車菊色],
    # [クリムゾン色,赤色,珊瑚色],
    変数 [cx,cy]＝xy。
    粒子色配列＝花火色配列[(花火色配列の要素数)の乱数]。
    粒子数回
        粒子＝粒子データを配列複製。
        粒子["x"]＝cx。粒子["y"]＝cy。
        粒子["色"]＝粒子色配列[(粒子色配列の要素数)の乱数]。
        粒子["半径"]＝3の乱数+1。
        粒子["速度"]＝30の乱数/10+1。
        粒子["角度"]＝(PI*2を度変換)の乱数。
        粒子["vx"]＝COS(粒子["角度"])*粒子["速度"]。
        粒子["vy"]＝SIN(粒子["角度"])*粒子["速度"]。
        花火データに粒子を配列追加。
    ここまで。
ここまで。
#-------------------------------------------------
前時間＝時間ミリ秒取得。
「花火描画」を画面更新時実行。
0.25秒毎には、
    cx＝キャンバス幅の乱数。
    cy＝キャンバス高さの乱数。
    [cx,cy]へ花火打ち上げ。
ここまで。
#-------------------------------------------------
//「#RRGGBB」→[R,G,B]
●(色を|色の)RGB分解
　分色とは変数。分色＝空配列。
　色＝色の「#」を「0x」に置換。
　色＝色を整数変換。
　数を２から０まで繰り返す
　　分色[数]＝色%256。
　　色＝(色-分色[数])/256
　ここまで。
　分色で戻る。
ここまで。
// (0~1)と[R,G,B]→「RGBA(R,G,B,A)」
●(透明度とrgbの)カラーコードRGBA
　「RGBA({rgb[0]},{rgb[1]},{rgb[2]},{透明度})」で戻る。
ここまで。
#-------------------------------------------------

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

🍯 なでしこ3貯蔵庫

[編集モード] 花火大会-改

素材のアップロード