Sample code for creating fireworks special effects using p5.js_javascript skills

This article mainly introduces the sample code for using p5.js to create fireworks special effects. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor and take a look.

Preface

I have read an article before, using processing to create fireworks special effects. The effect is as follows

#fireworks After a round of online research, I found that processing is an interactive programming software, developed from the Java language. Moreover, the animation effects are run on a specialized simulator for processing. Fortunately, there are also corresponding web extension languages, including processing.js and p5.js. processing.js has not been maintained on github for several years, and some processing features are not supported. I have gone through a lot of pitfalls for this, so this article will focus on explaining how to use p5.js to write fireworks special effects.

Code explanation

processing style

function setup() { //processing初始化设置
 createCanvas(window.innerWidth, window.innerHeight);
 frameRate(50);
 imageMode(CENTER);
}
function draw() { //循环执行，达成画面渲染效果
 background(0, 0, 40);
 for (var i = 0; i < fireworks.length; i++) {
  fireworks[i].display();
  fireworks[i].update();
  if (fireworks[i].needRemove()) {
   fireworks.splice(i, 1);
  }
 }
}

Firework effect

function Fireworks(radius) {
 var num = 512; //一发烟花里，有多少个点 (比较吃机器)
 var centerPosition = new p5.Vector(random(width / 8, width * 7 / 8), random(height / 2, height * 4 / 5), random(-100, 100)); //烟花的中心位置
 var velocity = new p5.Vector(0, -22, 0);
 var accel = new p5.Vector(0, 0.4, 0);
 var img;
 var firePosition = [];
 var cosTheta;
 var sinTheta;
 var phi;
 var colorChange = random(0, 5);
 for (var i = 0; i < num; i++) {
  cosTheta = random(0, 1) * 2 - 1;
  sinTheta = sqrt(1 - cosTheta * cosTheta);
  phi = random(0, 1) * 2 * PI;
  firePosition[i] = new p5.Vector(radius * sinTheta * cos(phi), radius * sinTheta * sin(phi), radius * cosTheta); //1发烟花里各个点的位置计算
  firePosition[i] = p5.Vector.mult(firePosition[i], 1.12);
 }
 //调整烟花随机颜色，使其更亮丽
 if(colorChange>=3.8){
  img=createLight(0.9,random(0.2,0.5),random(0.2,0.5));
 }else if(colorChange>3.2){
  img=createLight(random(0.2,0.5),0.9,random(0.2,0.5));
 }else if(colorChange>2){
  img=createLight(random(0.2,0.5),random(0.2,0.5),0.9);
 } else {
  img=createLight(random(0.5,0.8),random(0.5,0.8),random(0.5,0.8));
 }
 this.display = function () {
  for (var i = 0; i < num; i++) {
   push();
   translate(centerPosition.x, centerPosition.y, centerPosition.z);
   translate(firePosition[i].x, firePosition[i].y, firePosition[i].z);
   blendMode(ADD); //各个小点（发光源遮罩效果）
   image(img, 0, 0);
   pop();
   firePosition[i] = p5.Vector.mult(firePosition[i], 1.015); //更新小点（发光源）扩散位置
  } 
 }
 this.update = function () { //模拟重力加速度
  radius = dist(0, 0, 0, firePosition[0].x, firePosition[0].y, firePosition[0].z);
  centerPosition.add(velocity);
  velocity.add(accel);
 }
 this.needRemove = function () {
  if (centerPosition.y - radius > height) {
   return true;
  } else {
   return false;
  }
 }
}

Random light source image generation

function createLight(rPower, gPower, bPower) {
 var side = 64;
 var center = side / 2.0;
 var img = createImage(side, side);
 img.loadPixels();
 for (var y = 0; y < side; y++) {
  for (var x = 0; x < side; x++) {
   var distance = (sq(center - x) + sq(center - y)) / 10.0;
   var r = int((255 * rPower) / distance);
   var g = int((255 * gPower) / distance);
   var b = int((255 * bPower) / distance);
   // img.pixels[x + y * side] = color(r, g, b);
   img.set(y, x, color(r, g, b));
  }
 }
 img.updatePixels();
 return img;
}

Receive keyboard and screen touch events

function keyPressed() { //每事件添加一发烟花
 fireworks.push(new Fireworks(80)); //80为烟花初始半径
}
function touchStarted() { //每事件添加一发烟花
 fireworks.push(new Fireworks(80));
 return false;
}

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Detailed explanation of the steps to use WebUploader in the fuzzy box

Detailed explanation of computed use cases in Vue.js

The above is the detailed content of Sample code for creating fireworks special effects using p5.js_javascript skills. For more information, please follow other related articles on the PHP Chinese website!