用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 相关文章推荐
Prototype Hash对象 学习
Jul 19 Javascript
jQuery EasyUI 中文API Button使用实例
Apr 14 Javascript
javascript 窗口加载蒙板 内嵌网页内容
Nov 19 Javascript
js点击事件链接的问题解决
Apr 25 Javascript
原生js实现移动开发轮播图、相册滑动特效
Apr 17 Javascript
JavaScript定时器和优化的取消定时器方法
Jul 03 Javascript
使用CoffeeScrip优美方式编写javascript代码
Oct 28 Javascript
javascript中的replace函数(带注释demo)
Jan 07 Javascript
小程序自定义单页面、全局导航栏的实现代码
Mar 15 Javascript
vue 实现滚动到底部翻页效果(pc端)
Jul 31 Javascript
解决layui数据表格table的横向滚动条显示问题
Sep 04 Javascript
js重写alert事件(避免alert弹框标题出现网址)
Dec 04 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 智能404跳转代码,适合换域名没改变目录的网站
2010/06/04 PHP
php 魔术方法详解
2014/11/11 PHP
PHP+Mysql+jQuery实现发布微博程序 php篇
2015/10/15 PHP
php倒计时出现-0情况的解决方法
2016/07/28 PHP
PHP从零开始打造自己的MVC框架之路由类实现方法分析
2019/06/03 PHP
比较新旧两个数组值得增加和删除的JS代码
2013/10/30 Javascript
js点击选择文本的方法
2015/02/09 Javascript
JavaScript 表单处理实现代码
2015/04/13 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
2015/12/05 Javascript
浅谈Vue.js 组件中的v-on绑定自定义事件理解
2017/11/17 Javascript
jQuery实现checkbox的简单操作
2017/11/18 jQuery
React 组件渲染和更新的实现代码示例
2019/02/21 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
2019/07/05 Javascript
Javascript异步执行不按顺序解决方案
2020/04/30 Javascript
如何利用node转发请求详解
2020/09/17 Javascript
vue 项目@change多个参数传值多个事件的操作
2021/01/29 Vue.js
在Python的Tornado框架中实现简单的在线代理的教程
2015/05/02 Python
python根据list重命名文件夹里的所有文件实例
2018/10/25 Python
500行Python代码打造刷脸考勤系统
2019/06/03 Python
如何爬取通过ajax加载数据的网站
2019/08/15 Python
python使用python-pptx删除ppt某页实例
2020/02/14 Python
如何通过python计算圆周率PI
2020/11/11 Python
python requests库的使用
2021/01/06 Python
css3实现元素环绕中心点布局的方法示例
2019/01/15 HTML / CSS
Tarte Cosmetics官网:美国最受欢迎的化妆品公司之一
2017/08/24 全球购物
跑步、骑行和铁人三项的高性能眼镜和服装:ROKA
2018/07/06 全球购物
解释DataSet(ds) 和 ds as DataSet 的含义
2014/07/27 面试题
机关党建工作汇报材料
2014/08/20 职场文书
2015年班级元旦晚会活动总结
2014/11/28 职场文书
辛德勒的名单观后感
2015/06/03 职场文书
二十年同学聚会致辞
2015/07/28 职场文书
2016年第32个教师节致辞
2015/11/26 职场文书
电工实训心得体会
2016/01/14 职场文书
《浅水洼里的小鱼》教学反思
2016/02/16 职场文书
2019个人半年工作总结
2019/06/21 职场文书
用 Python 定义 Schema 并生成 Parquet 文件详情
2021/09/25 Python