php烟花效果,用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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
php烟花效果,用p5.js制作烟花特效的示例代码相关推荐
- 用p5.js制作烟花特效
前言 之前看过一篇文章,使用processing制作烟花特效.效果如下 网上调查了一圈了,发现processing是一个互动编程软件,java语言发展而来.而且动画效果是跑在processing专门的 ...
- html5的canvas动画效果,HTML5 Canvas:制作动画特效
要在HTML5 canvas中绘制图像动画效果,你需要绘制出每一帧的图像,然后在一个极短的时间内从一帧过渡到下一帧,形成动画效果.这其实是一种视觉欺骗,原理就像播放电影一样,胶片上每一格是一帧图片,然 ...
- html5车牌效果,html中车牌号省份简称输入键盘的示例代码
这篇文章主要介绍了html中车牌号省份简称输入键盘的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧原理是先写出一个按键的 ...
- 春节将至,喜庆的烟花安排上(js实现烟花)
一年一度的春节即将来临,然后苦逼的我还在使劲的摸鱼,未能回家体验小时候路边放爆竹的快乐时光,所以只能在网上来实现这个小小的心愿了.烟花静态效果图如下: 为了大伙复制方便就不分开写,直接复制即可,具体实 ...
- “码绘” —— 使用P5.JS制作一幅自画像
关于自画像,我认为最重要的是要把"我"这个人的特点表现出来. 于是,我的基本想法: 1.是一个长发齐肩的女生,有着中分的刘海 2.是一个追星少女 关于第一点还是比较好实现的,就是外 ...
- 利用js制作html table分页示例(js实现分页)
有时候table的列数太长,不利于使用者查询,所以利用JS做了一个table的分页,以下为相关代码 一.JS代码 <script type="text/javascript" ...
- html制作文字效果,使用background-clip属性制作文字特效
本教程将使用使用css background-clip:text 属性和CSS3 transitions来制作一些有趣的文字特效. 注意:目前只有webkit内核的浏览器才支持css backgrou ...
- html 苹果微信录音js,微信js-sdk 录音功能的示例代码
需求描述 制作一个H5页面,打开之后可以录音,并将录音文件提交至后台 微信录音最长时长为1min 代码如下 // isVoice: 0-未录音 1-录音中 2-录完音 // 点击录音/录音中 按钮展示 ...
- oracle 对话框怎么写,Node.js使用对话框ngDialog的示例代码
做网站经常会遇到弹出对话框获取用户输入或弹出对话框让用户确认某个操作之类的情景,有一个基于AngularJS的扩展模块可以帮我们优雅地完成这类事情:ngDialog. ngDialog在github上 ...
- html5 银行卡号校验,js 实现 银行卡号 格式验证 示例代码
[实例简介] [实例截图] [核心代码] function formatBankNo (BankNo){ if (BankNo.value == "") return; var a ...
最新文章
- 对RTMP视频流进行BitmapData.draw()出错的解决办法
- Rails5 Controller Document
- python基础学习[python编程从入门到实践读书笔记(连载五)]:数据可视化项目第16章
- Fabric 学习笔记-架构初探
- 傻孩子的故事--写给为编程而努力的HiccDS
- 才26岁!94年小姐姐,已任985名校副教授!
- Fedora 17 结实的奇迹:最新的OpenStack和JBoss
- 浪潮科大讯飞Altera用OpenCL实现FPGA深度学习语音识别加速方案
- 火山引擎 veStack 在企业办公场景的落地实践
- 关于js中的冒泡事件
- 简单的ideatomcat热加载
- bulk insert java_从JAVA插入SQL Server时,我可以获得“BULK INSERT”般的速度吗?
- 对链表结构体定义中的LNode,*LinkList的理解
- --set-gitd-purged参数解析
- Some file crunching failed, see logs for details解决方案 以及.9patch点9图片的报错的详细修改方法
- Java多线程的简介
- python 无法使用Ctrl-C终止Python脚本(ctrl+c 退出while True)
- Hexo 个人博客绑定域名配置
- 我奋斗了18年才和你坐在一起喝咖啡 原作者:麦子
- 2w多字总结的VUE学习文档
热门文章
- c++两个文档匹配数据_MongoDB 数据库的命名、设计规范
- idea改类名快捷键_IDEA使用之快捷键(default设置)
- ubuntu以安装包方式安装jdk13
- 将 url query参数 字符串转换为JSON 对象
- 力扣-1143 最长公共子序列/1035 不相交的线
- JDBC — JDBC之Insert方法
- Usb设备驱动5:usb-firmware简易框架
- [World Final 2016] Branch Assignment
- I/O多路复用技术详解之poll模型
- redmine-1.2.2安装服务(附图)