用p5.js制作烟花特效
前言
之前看过一篇文章,使用processing制作烟花特效。效果如下 网上调查了一圈了,发现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;
}
Demo
http://lab.huuinn.com/demos/p5-fireworks/
Github
https://github.com/cangyan/TAV/tree/master/00003_P5_FIREWORKS
参考链接
http://qiita.com/mikittt/items/776e6f2a114866386b54 查看原文:http://www.huuinn.com/archives/146更多技术干货:风匀坊关注公众号:风匀坊
用p5.js制作烟花特效相关推荐
- html加css加js制作的烟花,js实现烟花特效
本文实例为大家分享了js实现烟花特效的具体代码,供大家参考,具体内容如下 1.概述 在网页背景中实现鼠标点击出现模拟烟花爆炸的特效 2.思路 1.获取鼠标点击位置,底端创建烟花节点. 2.为烟花添加c ...
- 小程序 纯js模拟烟花特效
如下图 首先描绘圆周运动 // d1 /*css*/ div{height: 4px;width: 4px;background: red;position: absolute; } //js var ...
- 墙裂推荐4款js网页烟花特效
以下是几款网页特效和一款软件: http://keleyi.com/keleyi/phtml/jstexiao/1.htm http://keleyi.com/keleyi/phtml/jstex ...
- 纯css制作烟花特效
此文提供了代码展示烟花绽放的效果,通过css3的动画完成效 HTML <div id="container"><div class="firework- ...
- python制作烟花特效_用python做一个烟花show
#-*- coding: utf-8 -*-#Nola importtkinter as tkfrom PIL importImage, ImageTkfrom time importtime, sl ...
- “码绘” —— 使用P5.JS制作一幅自画像
关于自画像,我认为最重要的是要把"我"这个人的特点表现出来. 于是,我的基本想法: 1.是一个长发齐肩的女生,有着中分的刘海 2.是一个追星少女 关于第一点还是比较好实现的,就是外 ...
- 用P5 JS绘制动态绚丽烟花——动态篇
上一节我们探究了绘制静态图像手绘与码绘的差异,但是万事万物,变化万千,有很多东西仅仅用静态是无法描述的. 正如恩格斯所言:"整个自然界,从最小的东西到最大的东西,从沙粒到太阳,从原生生物到人 ...
- P5.js 实现交互式动态绘画
p5.js 实现交互式动态绘画 1.关于交互式绘画的思考 2.选定题目 3.内容展示 4.代码分析 (1).按钮的实现 (2).笔刷(画笔) (3).动作 5.总结 6.参考文献 1.关于交互式绘画的 ...
- HTML+CSS+JS制作炫酷【烟花特效】
文章目录 制作炫酷烟花特效 一.普通烟花(分散形) HTML代码 CSS代码 JS代码 二.圆形烟花 HTML代码 CSS代码 JS代码 三.爱心形烟花 HTML代码 CSS代码 JS代码 四.源码获 ...
最新文章
- 您对TOP Server的德语、中文和日语语言支持了解吗?(二)
- 博客迁移至http://www.vlix.org/
- L1-041 寻找250
- 大型网站架构演变和知识体系--转
- oracle tns 连接关闭,ORA-12537 TNS:连接关闭
- 泰安第一中学2021年高考成绩查询,等级考第一天结束 泰安部分考生已完成2021年高考...
- 杭电2073无限的路.水题
- [转载] Python: ljust()|rjust()|center()字符串对齐
- 电动阀门和气动阀门有什么区别
- beetl html模板,Beetl模板引擎之自定义html标签
- 如何编写一份完整的软件测试报告?(进阶版)
- (2)QlikView安装
- 码云gitee 部署公钥匙
- 微信支付分(四)--取消支付分订单
- ai领域职业规划_我如何抛弃我的咨询职业并进入技术领域
- 第九批车船税减免名单公示 新能源汽车共计444款
- ubuntu图形化软件包管理工具synaptic
- PyCharm中的错误:following errors occurred on attempt to save files和Unable to save settings: Failed 的解决方案
- java进程老挂掉_Java进程突然挂掉排查分析手记(jvm bug)
- 蓝光视频播放器Blu-ray Player Pro for Mac
热门文章
- 单例模式——懒汉与饿汉
- MySQL字符串转时间、Oracle字符串转时间
- 从互联网金融企业资金流向 看90后消费
- c#输入三个数升序排列,如何在C#中按升序对数组进行排序?
- [精简]托福核心词汇41
- 【LeetCode刷题日记】89. 格雷编码
- HYSBZ - 3309 D - DZY Loves Math(莫比乌斯反演+组合思想+DP思想)*好题。。。
- html中box标签的作用,CSS3的box-sizing属性的作用及使用
- 怎么使xp计算机不休眠,怎么让电脑不休眠,教您如何操作
- 北大教授警告中老年人:千万不要死于无知!看看你做错多少