欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

用p5.js制作烟花特效的示例代码

程序员文章站 2022-04-16 10:23:24
前言 之前看过一篇文章,使用processing制作烟花特效。效果如下 fireworks 网上调查了一圈了,发现processing是一个互动编程软件,java语...

前言

之前看过一篇文章,使用processing制作烟花特效。效果如下

用p5.js制作烟花特效的示例代码

fireworks 网上调查了一圈了,发现processing是一个互动编程软件,java语言发展而来。而且动画效果是跑在processing专门的模拟器上。 不过好在也有对应的web扩展语言,有processing.js和p5.js。 processing.js在github上已经好几年没有人维护了,一些processing的特性支持不了。为此踩了不少坑, 本文就集中讲解如何用p5.js写烟花特效。

代码讲解

processing风格

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);
  }
 }
}

烟花效果

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;
  }
 }
}

随机发光源图片生成

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;
}

接收键盘和屏幕触碰事件

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

function touchstarted() { //每事件添加一发烟花
 fireworks.push(new fireworks(80));
 return false;
}

github

https://github.com/cangyan/tav/tree/master/00003_p5_fireworks

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。