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


Posted in Javascript onMarch 21, 2018

前言

之前看过一篇文章,使用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

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

Javascript 相关文章推荐
JavaScript初学者应注意的七个细节小结
Jan 30 Javascript
为EasyUI的Tab标签添加右键菜单的方法
Jul 14 Javascript
js的匿名函数使用介绍
Dec 11 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
Aug 22 Javascript
微信分享的标题、缩略图、连接及描述设置方法
Oct 14 Javascript
JS的框架Polymer中的dom-if和is属性使用说明
Jul 29 Javascript
JavaScript encodeURI 和encodeURIComponent
Dec 04 Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
May 28 Javascript
利用ECharts.js画K线图的方法示例
Jan 10 Javascript
使用webpack3.0配置webpack-dev-server教程
May 29 Javascript
webpack开发环境和生产环境的深入理解
Nov 08 Javascript
详解vue-cli3多环境打包配置
Mar 28 Javascript
AngularJS监听ng-repeat渲染完成的方法
Mar 20 #Javascript
vue对storejs获取的数据进行处理时遇到的几种问题小结
Mar 20 #Javascript
webpack本地开发环境无法用IP访问的解决方法
Mar 20 #Javascript
解决vue-router中的query动态传参问题
Mar 20 #Javascript
vue数据传递--我有特殊的实现技巧
Mar 20 #Javascript
手写Node静态资源服务器的实现方法
Mar 20 #Javascript
JS 实现缓存算法的示例(FIFO/LRU)
Mar 20 #Javascript
You might like
PHP操作文件类的函数代码(文件和文件夹创建,复制,移动和删除)
2011/11/10 PHP
Yii框架连表查询操作示例
2019/09/06 PHP
PHP isset empty函数相关面试题及解析
2020/12/11 PHP
Code:findPosX 和 findPosY
2006/12/20 Javascript
又一个小巧的图片预加载类
2007/05/05 Javascript
js innerHTML 改变div内容的方法
2013/08/03 Javascript
jquery统计用户选中的复选框的个数
2014/06/06 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
2015/11/13 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
2015/11/23 Javascript
js实现手机web图片左右滑动效果
2017/12/29 Javascript
vue-cli 引入、配置axios的方法
2018/05/08 Javascript
在vue中阻止浏览器后退的实例
2019/11/06 Javascript
vue中使用极验验证码的方法(附demo)
2019/12/04 Javascript
[04:27]DOTA2官方论坛水友赛集锦
2013/09/16 DOTA
用Python实现一个简单的能够发送带附件的邮件程序的教程
2015/04/08 Python
Python中内置的日志模块logging用法详解
2016/07/12 Python
Python首次安装后运行报错(0xc000007b)的解决方法
2016/10/18 Python
PyQt5每天必学之关闭窗口
2018/04/19 Python
Python贪心算法实例小结
2018/04/22 Python
对numpy中的where方法嵌套使用详解
2018/10/31 Python
Linux下安装python3.6和第三方库的教程详解
2018/11/09 Python
python scipy求解非线性方程的方法(fsolve/root)
2018/11/12 Python
Python修改列表值问题解决方案
2020/03/06 Python
python中绕过反爬虫的方法总结
2020/11/25 Python
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
2018/04/23 HTML / CSS
英国虚拟主机服务商:eUKhost
2016/08/16 全球购物
YOOX台湾:意大利奢侈品电商
2018/10/13 全球购物
KIKO MILANO西班牙官网:意大利领先的化妆品和护肤品品牌
2019/05/03 全球购物
Guess欧洲官网:美国服饰品牌
2019/08/06 全球购物
武汉东之林科技有限公司机试
2013/09/17 面试题
2014年道德讲堂实施方案
2014/03/05 职场文书
大学专科自荐信
2014/06/17 职场文书
2014年党员自我剖析材料
2014/10/07 职场文书
中学生旷课检讨书模板
2014/10/08 职场文书
2015年国税春训心得体会
2015/03/09 职场文书
中考百日冲刺决心书
2015/09/22 职场文书