p5.js:fireworks
code:fireworks.js
var fireworks = [];
var gravity;
function Firework() {
this.hu = random(255);
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() { //firstUpdate
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.particlesi.applyForce(gravity); this.particlesi.update(); if (this.particlesi.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 = this.particles.length-1; i >= 0; i--) {
}
}
}
function setup() {
createCanvas(500, 500);
gravity = createVector(0, 0.2);
colorMode(HSB);
stroke(255);
strokeWeight(4);
background(0);
}
function draw() {
colorMode(RGB);
background(0, 0, 0, 25);
if (random(1) < 0.03) {
fireworks.push(new Firework());
}
for (var i = fireworks.length-1; i >= 0; i--) {
fireworks.splice(i, 1);
}
}
function Particle(x, y, hu, firework) {
this.pos = createVector(x, y);
this.firework = firework;
this.lifespan = 255;
this.hu = hu;
if (this.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() { //second update
if (!this.firework) {
this.vel.mult(0.9);
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) {
strokeWeight(2);
stroke(hu, 255, 255, this.lifespan);
}else {
strokeWeight(4);
stroke(hu, 255, 255);
}
point(this.pos.x, this.pos.y);
}
}
code:sketch.js
const sketch = p => {
let fireworks = [];
let gravity;
function Firework () {
this.hu = p.random(255);
this.firework = new Particle(p.random(p.width), p.height, this.hu, true);
this.exploded = false;
this.particles = [];
this.done = () =>{
if (this.exploded && this.particles.length === 0){
return true;
} else {
return false;
}
}
this.update = () => { //firstUpdate
if (!this.exploded) {
this.firework.applyForce(gravity);
this.firework.update();
if (this.firework.vel.y >= 0) {
this.exploded = true;
this.explode();
}
}
for (let i = this.particles.length-1; i >= 0; i--) {
this.particlesi.applyForce(gravity); this.particlesi.update(); if (this.particlesi.done()){ this.particles.splice(i, 1);
}
}
}
this.explode = () => {
for (let 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 = () => {
if (!this.exploded) {
this.firework.show();
}
for (let i = this.particles.length-1; i >= 0; i--) {
}
}
}
p.setup = () => {
//p.createCanvas(500, 500);
const canvas = p.createCanvas(window.innerWidth, window.innerHeight);
canvas.position(0,0); //canvasをページの原点に固定
canvas.style('z-index','-1');//canvasを後ろに移動する
gravity = p.createVector(0, 0.2);
p.colorMode(p.HSB);
p.stroke(255);
p.strokeWeight(4);
p.background(0);
}
p.draw = () => {
p.colorMode(p.RGB);
p.background(0, 0, 0, 25);
if (p.random(1) < 0.03) {
fireworks.push(new Firework());
}
for (let i = fireworks.length-1; i >= 0; i--) {
fireworks.splice(i, 1);
}
}
}
function Particle(x, y, hu, firework) {
this.pos = p.createVector(x, y);
this.firework = firework;
this.lifespan = 255;
this.hu = hu;
if (this.firework){
this.vel = p.createVector(0, p.random(-12, -8));
}else {
this.vel = p5.Vector.random2D();
this.vel.mult(p.random(2, 10));
}
this.acc = p.createVector(0, 0);
this.applyForce = (force) => {
this.acc.add(force);
}
this.update = () => { //second update
if (!this.firework) {
this.vel.mult(0.9);
this.lifespan -= 4;
}
this.vel.add(this.acc);
this.pos.add(this.vel);
this.acc.mult(0);
}
this.done = () => {
if(this.lifespan < 0){
return true;
}else {
return false;
}
}
this.show = () => {
p.colorMode(p.HSB);
if (!this.firework) {
p.strokeWeight(2);
p.stroke(hu, 255, 255, this.lifespan);
}else {
p.strokeWeight(4);
p.stroke(hu, 255, 255);
}
p.point(this.pos.x, this.pos.y);
}
}
}
new p5(sketch, '');
p5-sketch-button.icon
https://img.shields.io/badge/p5.js-fireworks-ED225D.svg?logo=p5.js&style=for-the-badge