这次给大家带来p5.js实现烟花绽放效果,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; }
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
以上就是p5.js实现烟花绽放效果的详细内容,更多请关注php中文网其它相关文章!
已抢185103个
抢已抢66813个
抢已抢351683个
抢已抢665138个
抢已抢119599个
抢已抢19091个
抢