JavaScriptで花火を描画する

JavaScript

夏なのでJavaScriptのCanvas APIを使って花火の残像も含めて再現しました。
ウインドウを最大化して全画面で見るといい雰囲気です。

花火をみる

やっていること

  • 花火の1つ1つの点は、実際には小さな6角形を描画している
  • 色をランダムにしただけだが、それっぽく見える
  • 花火は全てEffectクラスのインスタンスを配列に格納して管理
  • 画面から消えたEffectクラスはきちんと削除する（isAliveプロパティで判断）
  • キャンバスのglobalAlphaプロパティを使うと残像を表現できる

ソースコード

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
	<script src="Functions.js" type="text/javascript"></script>
	<script src="Effect.js" type="text/javascript"></script>
	<script src="main.js" type="text/javascript"></script>
	<title>fire works</title>
</head>
<body>
	<div id="wrapper">
		<canvas id="canvas" width="" height=""></canvas>
	</div>
</body>
</html>

style.css

主にキャンバスを端末の全画面で表示するための設定です

/* style.css */
@charset "utf-8";

*{
    margin: 0;
    padding: 0;
}

html, body, #wrapper{
    width: 100%;
    height: 100%;
}

#canvas{
    display: block;
}

Function.js

指定範囲の乱数生成、ランダムカラー生成、6角形の描画用など花火を描画するのに利用した関数群です

// 指定範囲の乱数を生成する関数(min~max)
function randInt(min, max){
    return Math.floor(Math.random() * (max+1-min)+min);
}

// ランダムカラー文字列を生成して返すアロー関数式
const getRandomColor = ()=>{
    const get256 = ()=>{ return Math.floor(Math.random()*256); };    // 0 ~ 255を返す
    let [r, g, b] = [get256(), get256(), get256()];                 // ランダムでRGBカラーを設定
    let color = `rgb(${r}, ${g}, ${b})`;                            // 文字列生成 'rgb(XX, XXX, XXX)'
    return color;
};

// オブジェクトを消去
function deleteObjects(){
    // エフェクト
    for(let i in effects){
        if(!effects[i].isAlive) effects.splice(i, 1);
    }
}

// 多角形を塗りつぶし描画する関数（頂点の数、中心x座標、中心y座標、半径、色）
const fillPolygon = function(n, cx, cy, r, tilt, color){
    const p = Math.floor(360 / n)
    let theta = -90 + tilt;    // 角度修正（キャンバスでは3時方向が0度扱いのため12時方向を0度とする）
    let polygon = [];

    while(theta<360-90){   // 全ての頂点を求める
        const pos = {
            x: r * Math.cos(theta*Math.PI/180) + cx,
            y: r * Math.sin(theta*Math.PI/180) + cy,
        };
        polygon.push(pos);
        theta += p;    // 次の点の位置
    }

    // 塗りつぶし多角形を描画する
    g.fillStyle = color;
    g.beginPath();
    for(let i=0; i<polygon.length; i++){
        if(i==0){
            g.moveTo(polygon[i].x, polygon[i].y);
        }
        else{
            g.lineTo(polygon[i].x, polygon[i].y);
        }
    }
    g.closePath();  // パスを閉じる
    g.fill();
}

Effect.js

花火の1つの点を表現するためのクラスです

/* Effect.js : エフェクトクラス*/
 
class Effect{
    // コンストラクタ（x座標, y座標, 発射角度, 速度, 落ちる速度, 色）
    constructor(x, y, angle, speed, fallSpeed, color){
        this.x = x;         // x座標
        this.y = y;         // y座標
        this.angle = angle; // 発射角度
        this.speed = speed; // 速度
        this.fallSpeed = fallSpeed; // 落ちる速度
        this.color = color; // 色
        this.isAlive = true;

        // 発射角度と速度からxy方向の速度計算
        this.vx = this.speed * Math.cos(this.angle / 180 * Math.PI);
        this.vy = this.speed * Math.sin(this.angle / 180 * Math.PI);
    }

    // 移動メソッド
    move(){
        this.x += this.vx;
        this.vy += this.fallSpeed;
        this.y += this.vy;

        // 画面から消えたら消去
        if(this.y < 0 || this.y > canvas.height || this.x < 0 || this.x > canvas.width){
            this.isAlive = false;
        }
    }
    
    // 描画メソッド
    draw(){
        fillPolygon(6, this.x, this.y, 3, 0, this.color);
    }

    // 更新処理
    update(){
        this.move();
        this.draw();
    }
}

main.js

全体を管理しています

// main.js
const SKY_COLOR = "#003";   // 夜空の色
let wrapper = null;
let canvas = null;
let g = null;
let effects = [];    // エフェクト格納用配列
let frameCount = 0; // フレーム数

// 描画更新処理
function mainLoop(){
    // 一定間隔でエフェクトを生成
    if(frameCount % 60 == 0){
        // エフェクト生成
        const x = randInt(0, canvas.width);
        const y = randInt(0, canvas.height);
        const speed = randInt(1, 5);
        const [color1, color2, color3, color4] = [getRandomColor(), getRandomColor(), getRandomColor(), getRandomColor()];

        for(let angle of [0, 30, 60, 90, 120, 150, 180, -30, -60, -90, -120, -150]){
            const effect = new Effect(x, y, angle, speed, 0.05, color1);
            effects.push(effect);
            
            const effect2 = new Effect(x+10*Math.cos(angle/180*Math.PI), y+10*Math.sin(angle/180*Math.PI), angle, speed, 0.05, color2);
            effects.push(effect2);

            const effect3 = new Effect(x+25*Math.cos(angle/180*Math.PI), y+25*Math.sin(angle/180*Math.PI), angle, speed, 0.05, color3);
            effects.push(effect3);
            
            const effect4 = new Effect(x+50*Math.cos(angle/180*Math.PI), y+50*Math.sin(angle/180*Math.PI), angle, speed, 0.05, color4);
            effects.push(effect4);
            
            const effect5 = new Effect(x+70*Math.cos(angle/180*Math.PI), y+70*Math.sin(angle/180*Math.PI), angle, speed, 0.05, color1);
            effects.push(effect5);
            
        }
    }

    // キャンバスクリア（残像を利用）
    g.globalAlpha = 0.1;
    g.fillStyle = SKY_COLOR;
    g.fillRect(0, 0, canvas.width, canvas.height);
    g.globalAlpha = 1;

    // エフェクト描画を更新
    for(let effect of effects){
        effect.update();
    }

    // オブジェクト消去
    deleteObjects();

    // フレームカウント
    frameCount++;

    // フレーム毎に再帰呼び出し
    requestAnimationFrame(mainLoop);
}

/*
 * キャンバスのサイズをウインドウに合わせて変更
 */
function getSize(){
    // キャンバスのサイズを再設定
    canvas.width = wrapper.offsetWidth;
    canvas.height =  wrapper.offsetHeight;
}
 
/*
 * リサイズ時（キャンバスの中心と時計の縮尺を再設定）
 */
window.addEventListener("resize", function(){
    getSize();
});

window.addEventListener("load", ()=>{
    wrapper = document.getElementById("wrapper");
    // キャンバス取得
    canvas = document.getElementById("canvas");
    g = canvas.getContext("2d");

    // キャンバスをウインドウサイズに設定
    getSize();

    frameCount = 0;

    // 描画更新処理を開始
    mainLoop();
});

本物の花火の中では、真っ白でゆっくり下に消えながら落ちていくしだれ柳みたいな花火が個人的に一番好きです。

コメント

タイトルとURLをコピーしました