なでしこ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実行 ここまで。 #-------------------------------------------------