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

 更新时间:2018年03月21日 08:32:02   作者:huuinn   我要评论
本篇文章主要介绍了用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;
}

Github

https://github.com/cangyan/TAV/tree/master/00003_P5_FIREWORKS

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

相关文章

  • BootStrap实现邮件列表的分页和模态框添加邮件的功能

    BootStrap实现邮件列表的分页和模态框添加邮件的功能

    这篇文章主要介绍了bootstrap分页,模态框,实现邮件列表的分页,和模态框添加邮件的功能的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-10-10
  • Bootstrap插件全集

    Bootstrap插件全集

    这篇文章主要为大家详细介绍了Bootstrap插件,包括Bootstrap过渡效果插件、Bootstrap下拉菜单插件等,感兴趣的小伙伴们可以参考一下
    2016-07-07
  • 浅谈nodeName,nodeValue,nodeType,typeof 的区别

    浅谈nodeName,nodeValue,nodeType,typeof 的区别

    本文主要简单介绍了nodeName,nodeValue,nodeType,typeof 的区别,算是知识点的一个小总结,希望对小伙伴们有所帮助
    2015-01-01
  • js判断iframe内的网页是否滚动到底部触发事件

    js判断iframe内的网页是否滚动到底部触发事件

    这篇文章主要介绍了js判断iframe内的网页是否滚动到底部触发事件,需要的朋友可以参考下
    2014-03-03
  • layer弹出子iframe层父子页面传值的实现方法

    layer弹出子iframe层父子页面传值的实现方法

    这篇文章主要介绍了layer弹出子iframe层父子页面传值的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-11-11
  • Js 获取Gridview选中行的内容操作步骤

    Js 获取Gridview选中行的内容操作步骤

    本文将介绍一下Js获取Gridview选中行的内容的过程及步骤:取得gridview中获取选中行指定列的值.获取鼠标点击的元素等等,感兴趣的朋友可以了解下,或许对你学习js方面知识有所帮助
    2013-02-02
  • JavaScript分页功能的实现方法

    JavaScript分页功能的实现方法

    这篇文章主要介绍了JavaScript分页功能的实现方法,涉及javascript操作分页的相关技巧,需要的朋友可以参考下
    2015-04-04
  • JavaScript列表框listbox全选和反选的实现方法

    JavaScript列表框listbox全选和反选的实现方法

    这篇文章主要介绍了JavaScript列表框listbox全选和反选的实现方法,涉及javascript操作列表框listbox的技巧,非常具有实用价值,需要的朋友可以参考下
    2015-03-03
  • JavaScript数据类型转换的注意事项

    JavaScript数据类型转换的注意事项

    JavaScript是一种无类型语言,但同时JavaScript提供了一种灵活的自动类型转换的处理方式。基本规则是,如果某个类型的值用于需要其他类型的值的环境中,JavaScript就自动将这个值转换成所需要的类型。
    2016-07-07
  • js显示时间 js显示最后修改时间

    js显示时间 js显示最后修改时间

    本文介绍js如何显示最后修改时间,在页面的文本框中显示文件上一次被修改的时间,通过这种方法可以查看网页的更新时间,有需要的朋友可以参考下
    2013-01-01

最新评论