最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

p5.js实现烟花绽放效果

来源:懂视网 责编:小采 时间:2020-11-27 19:50:30
文档

p5.js实现烟花绽放效果

p5.js实现烟花绽放效果:这次给大家带来p5.js实现烟花绽放效果,p5.js实现烟花绽放效果的注意事项有哪些,下面就是实战案例,一起来看一下。之前看过一篇文章,使用processing制作烟花特效。效果如下fireworks 网上调查了一圈了,发现processing是一个互动编程软件,java语言发
推荐度:
导读p5.js实现烟花绽放效果:这次给大家带来p5.js实现烟花绽放效果,p5.js实现烟花绽放效果的注意事项有哪些,下面就是实战案例,一起来看一下。之前看过一篇文章,使用processing制作烟花特效。效果如下fireworks 网上调查了一圈了,发现processing是一个互动编程软件,java语言发
这次给大家带来p5.js实现烟花绽放效果,p5.js实现烟花绽放效果的注意事项有哪些,下面就是实战案例,一起来看一下。

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

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

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

Vue.js+Flask来构建单页的App(附代码)

不使用vue代码规范检测方法总结

文档

p5.js实现烟花绽放效果

p5.js实现烟花绽放效果:这次给大家带来p5.js实现烟花绽放效果,p5.js实现烟花绽放效果的注意事项有哪些,下面就是实战案例,一起来看一下。之前看过一篇文章,使用processing制作烟花特效。效果如下fireworks 网上调查了一圈了,发现processing是一个互动编程软件,java语言发
推荐度:
标签: 烟花 实现 js
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top