用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 相关文章推荐
js FLASH幻灯片字符串中有连接符&的处理方法
Mar 01 Javascript
JQuery触发radio或checkbox的change事件
Dec 18 Javascript
javascript实现滑动解锁功能
Dec 31 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
Nov 16 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
Mar 14 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
Jun 28 Javascript
vue中七牛插件使用的实例代码
Jul 28 Javascript
旺旺在线客服代码 旺旺客服代码生成器
Jan 09 Javascript
微信小程序实现图片选择并预览功能
Jul 25 Javascript
微信小程序 wx:for遍历循环使用实例解析
Sep 09 Javascript
深入理解 TypeScript Reflect Metadata
Dec 12 Javascript
三种方式清除vue路由跳转router-link的历史记录
Apr 10 Vue.js
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
header()函数使用说明
2006/11/23 PHP
PHP关联数组的10个操作技巧
2013/01/21 PHP
php获得网站访问统计信息类Compete API用法实例
2015/04/02 PHP
php如何获取文件的扩展名
2015/10/28 PHP
学习php设计模式 php实现抽象工厂模式
2015/12/07 PHP
Yii CFileCache 获取不到值的原因分析
2017/02/08 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
PHP+redis实现的购物车单例类示例
2019/02/02 PHP
一个高效的JavaScript压缩工具下载集合
2007/03/06 Javascript
JavaScript 比较时间大小的代码
2010/04/24 Javascript
javascript编写贪吃蛇游戏
2015/07/07 Javascript
javascript断点调试心得分享
2016/04/23 Javascript
VUEJS实战之构建基础并渲染出列表(1)
2016/06/13 Javascript
Bootstrap实现水平排列的表单
2016/07/04 Javascript
JavaScript实现经典排序算法之冒泡排序
2016/12/28 Javascript
Vue渲染函数详解
2017/09/15 Javascript
AngularJS 表单验证手机号的实例(非必填)
2017/11/12 Javascript
基于zTree树形菜单的使用实例
2017/12/25 Javascript
Angular PWA使用的Demo示例
2019/01/31 Javascript
通过实例解析JavaScript常用排序算法
2020/09/02 Javascript
JS sort排序详细使用方法示例解析
2020/09/27 Javascript
[42:32]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第二场 10.28
2020/10/28 DOTA
python中assert用法实例分析
2015/04/30 Python
Python写入数据到MP3文件中的方法
2015/07/10 Python
Python中列表、字典、元组数据结构的简单学习笔记
2016/03/20 Python
Windows 64位下python3安装nltk模块
2018/09/19 Python
python 并发编程 阻塞IO模型原理解析
2019/08/20 Python
pycharm工具连接mysql数据库失败问题
2020/04/01 Python
浅谈Python 参数与变量
2020/06/20 Python
奥地利票务门户网站:oeticket.com
2019/12/31 全球购物
C#如何调用Word并打开一个Word文档
2013/05/08 面试题
2014年团总支工作总结
2014/11/21 职场文书
2015年度物业公司工作总结
2015/04/27 职场文书
学雷锋团日活动总结
2015/05/06 职场文书
2016年4月份红领巾广播稿
2015/12/21 职场文书
Win11安装升级时提示“该电脑必须支持安全启动”
2022/04/19 数码科技