JavaScriptのフレームワークを使って花火を打ち上げる

JavaScript

目的

今年はコロナの影響で夏の風物詩である花火大会が中止になってしまいました。

どうしても花火を見たいと思った筆者は、偶然Youtubeの動画でみたJavaScriptを使った花火の打ち上げにチャレンジしてみたいと思いました。

完成した動画がこちらになります。

p5.jsで花火を打ち上げてみる

元ネタ

Coding Challenge #27: Fireworks!

こちらのダニエルシフマンの動画を参考にコーディングしました。一部プロパティを変更しています。

技術

Javascriptのフレームワークであるp5.jsProcessingを活用しています。

コード

var firework;
var fireworks = [];
var gravity;

function setup() {
  //Canvasのwindow幅を設定
  createCanvas(windowWidth, windowHeight +200);
  colorMode(HSB);
  gravity = createVector(0, 0.06);
  //線の色を設定
  stroke(225);
 //線の太さ
  strokeWeight(4);
 //背景色
  background(0);
}


function draw() {
  colorMode(RGB);
  background(0, 0, 0, 25);
 //花火を打ち上げ頻度
  if (random(1) < 0.05) {
    fireworks.push(new Firework());
  }
  for (var i = fireworks.length-1; i >= 0; i--) {
    fireworks[i].update();
    fireworks[i].show();
    if (fireworks[i].done()) {
      fireworks.splice(i, 1);
    }
  }
}

setup関数は最初の一回のみ実行される関数です。

draw関数は1フレームごとに実行される関数です。

function Firework(){
  //花火の色
  this.hu = random(225);
  this.firework = new Particle(random(width), height, this.hu, true);
  this.exploded = false;
  this.particles = [];

 //花火が打ちあがったことを確認
  this.done = function() {
    if (this.exploded && this.particles.length === 0) {
      return true;
    } else {
      return false;
    }
  }
  
  this.update = function() {
    if (!this.exploded) {
      this.firework.applyForce(gravity);
      this.firework.update();
      if (this.firework.vel.y >= 0) {
        this.exploded = true;
        this.explode(); 
      }
    }
    for (var i = this.particles.length-1; i >= 0; i--) {
      this.particles[i].applyForce(gravity);
      this.particles[i].update();
      if (this.particles[i].done()) {
        this.particles.splice(i,1);
      }
    }
  }
  
  //火花に関する定義
  this.explode = function () {
    for (var i = 0; i < 100; i++) {
      var p = new Particle(this.firework.pos.x, this.firework.pos.y, this.hu, false);
      this.particles.push(p);
    }
  }
  
  this.show = function(){
    if (!this.exploded) {
      this.firework.show();
    }
    for (var i = 0; i < this.particles.length; i++) {
      this.particles[i].show();
    }
  }
}
function Particle(x, y, hu, firework) {
  this.pos = createVector(x, y);
  this.firework = firework;
  this.lifespan = 300;
  this.hu = hu;
  
  if (firework) {
    this.vel = createVector(0, random(-12, -8));
  } else {
    this.vel = p5.Vector.random2D();
    this.vel.mult(random(2,10));
  }
  
  this.acc = createVector(0, 0);
  
  this.applyForce = function(force) {
    this.acc.add(force);
  }
  
  this.update = function() {
    if (!this.firework) {
      this.vel.mult(0.93);
      this.lifespan -= 4;
    }
    this.vel.add(this.acc);
    this.pos.add(this.vel);
    this.acc.mult(0);
  }
  
  this.done = function() {
    if (this.lifespan < 0) {
      return true;
    } else {
      return false;
    }
  }
  
  this.show = function() {
    colorMode(HSB);
    if (!this.firework) {
      stroke(hu, 255, 255, this.lifespan);
      strokeWeight(2);
    }else {
      stroke(hu, 255, 255);
      strokeWeight(4);
    }  
    point(this.pos.x, this.pos.y);
  }
}

感想

p5.js非常に面白いと思います。様々なアルゴリズムを使って画面に描画することが可能で、プロパティを変えると予想外の動作をしたりと、驚きがありました。もっと勉強してオリジナリティの高いコンテンツを作成したいなあと思います。また、今回は音がないのでうまく音声を組み込むことが出来ないかなと思いました。

コメント

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