导语：

除夕除夕，就是除去烦脑，迎接新的希望！在这里小编先祝大家除夕快乐，岁岁常欢笑，事事皆如意！

正文：

创建画布

setup和draw是p5.js的两个主函数，里头的createCanvas用于创建画布的大小，background来设置画布的背景颜色

function setup() {createCanvas(1303 / 2, 734 / 2)
}
function draw() {background(50);
}

画烟花粒子

考虑到会有很多，通过一个函数Particle来生成，代码如下

var firework;
function Particle(x, y) {this.pos = createVector(x, y)this.vel = createVector(0, 0)this.acc = createVector(0, 0)this.update = function () {this.vel.add(this.acc)this.pos.add(this.vel)this.acc.mult(0)}this.show = function () {point(this.pos.x, this.pos.y)}
}
#调用firework.update()和firework.show()将烟花粒子展示出来
function setup() {createCanvas(1303 / 2, 734 / 2)stroke(255)strokeWeight(4)firework = new Particle(200, 150)
}
function draw() {background(50);firework.update()firework.show()
}

结果如下：

让烟花粒子随机出现在底部

修改setup中的firework，让它出现在底部的任意位置

firework = new Particle(random(width), height)

这里的width和height表示的就是画布的宽和高

结果如下

让烟花粒子向上运动

只需要修改Particle中的this.vel即可

this.vel = createVector(0, -4)

createVector中第一个参数表示x轴的速率，正数为向右的速率，负为向左的速率；第二个参数表示y轴的速率，负为向上，正为向下

效果如下

让粒子用重力效果，可以下向运动

首先在全局声明一个变量gravity，在setup函数中设置重力

gravity = createVector(0, 0.2)
firework.applyForce(gravity)
this.applyForce = function (force) {this.acc.add(force)
}

效果如下

需要很多的烟花粒子

需要创建一个Firework函数

function Firework() {this.firework = new Particle(random(width), height)this.update = function () {this.firework.applyForce(gravity)this.firework.update()}this.show = function () {this.firework.show();}
}
#然后再draw中，通过for循环来显示很多的烟花粒子
function draw() {background(50)fireworks.push(new Firework())for (var i = 0; i < fireworks.length; i++) {fireworks[i].update()fireworks[i].show()}
}

结果如下

让烟花粒子上到自身顶点时消失

function Firework() {this.firework = new Particle(random(width), height)this.update = function () {if (this.firework) {this.firework.applyForce(gravity)this.firework.update()if (this.firework.vel.y >= 0) {this.firework = null}}}this.show = function () {if (this.firework) {this.firework.show();}}
}

效果如下

消失的那一刻，让周围爆破

这里修改的地方会比较多，主要修改的地方是Firework：

function Firework() {this.firework = new Particle(random(width), height, true)this.exploded = falsethis.particles = []this.update = function () {if (!this.exploded) {this.firework.applyForce(gravity)this.firework.update()if (this.firework.vel.y >= 0) {this.exploded = truethis.explode()}}for (let i = 0; i < this.particles.length; i++) {this.particles[i].applyForce(gravity)this.particles[i].update()}}this.explode = function () {for (let i = 0; i < 100; i++) {var p = new Particle(this.firework.pos.x, this.firework.pos.y)this.particles.push(p)}}this.show = function () {if (!this.exploded) {this.firework.show();}for (let i = 0; i < this.particles.length; i++) {this.particles[i].show()}}
}

结果如下

随机倍数爆发

可以修改Particle来完善以下上面的效果，修改后的代码为

function Particle(x, y, firework) {this.pos = createVector(x, y)this.firework = fireworkif (this.firework) {this.vel = createVector(0, random(-12, -8))} else {this.vel = p5.Vector.random2D()this.vel.mult(random(1, 6))}this.acc = createVector(0, 0)this.applyForce = function (force) {this.acc.add(force)}this.update = function () {this.vel.add(this.acc)this.pos.add(this.vel)this.acc.mult(0)}this.show = function () {point(this.pos.x, this.pos.y)}
}

效果如下：

展示烟花少一些

通过调整几率来实现，让展示烟花少一些

我们将draw函数中的

if(random(1)<0.1){fireworks.push(new Firework())
}

修改成：

if(random(1)<0.02){fireworks.push(new Firework())
}

这样就少一些了

然后我们又发现，烟花太散落了，修改烟花太散落的问题

到Particle中，找到update方法，里头添加

if(!this.firework){this.vel.mult(0.85)
}

可以理解为，mult的值越大作用力就越大爆炸就越散

淡出效果实现

散开之后，需要慢慢淡出消失，

其实主要引入一个变量lifespan，让它从255开始递减，通过stroke(255,this.lifespan)来实现淡出

如下代码

function Particle(x, y, firework) {this.pos = createVector(x, y)this.firework = fireworkthis.lifespan = 255if (this.firework) {this.vel = createVector(0, random(-12, -8))} else {this.vel = p5.Vector.random2D()this.vel.mult(random(1, 6))}this.acc = createVector(0, 0)this.applyForce = function (force) {this.acc.add(force)}this.update = function () {if(!this.firework){this.vel.mult(0.85)this.lifespan -= 4}this.vel.add(this.acc)this.pos.add(this.vel)this.acc.mult(0)}this.show = function () {if (!this.firework) {strokeWeight(2)stroke(255,this.lifespan)} else {strokeWeight(4)stroke(255)}point(this.pos.x, this.pos.y)}
}

效果如下

修改背景颜色

在setup中通过background函数将背景色修改成黑色

background(0)

同时在draw添加

colorMode(RGB)
background(0, 0, 0, 25)

colorMode用于设置颜色模型，除了RGB，还有上面的HSB；background的4个参数就是对应rgba

效果如下

添加烟花颜色

主要给烟花添加色彩，可以随机数来添加随机颜色，主要在Firework添加一下

this.hu = random(255)

结尾：

以上就是本文的所有内容了，欢迎点赞支持~大家需要完整的项目源码的可以私信我哟！

这行蓝色的字体也行wo~

最后祝你

岁岁常欢愉,年年皆胜意，除夕快乐~???

除夕最炫烟花代码----跨年必备合集相关推荐

除夕最炫烟花代码----跨年必备合集【含动态展示效果及网盘代码下载】
写在前面前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家:人工智能学习网站跨年烟花目录写在前面 1.HTML5夜景放烟花绽放动画效果 2.指哪打哪的HTML5+J ...
【除夕最炫烟花代码】—— HTML+JQuery实现2022跨年烟花特效
HTML+Jquery实现2022跨年烟花特效，除夕最炫烟花代码，跨年怎能没有烟花
【跨年】《2020年跨年演讲合集-吴晓波、罗振宇、丁祖昱等》（附下载链接）...
2020年来了,新的一年祝大家事事顺意,2020年我们只争朝夕,不负韶华.给大家奉上跨年演讲合集,请查收. 关注公众号"智能推荐系统"并回复"2020"即可下载 ...
php 3 3公派算法代码,PHP常见算法合集代码实例
许多人都说算法是程序的核心,一个程序的好于差,关键是这个程序算法的优劣,下面是一些常用的算法和实例,大家可以好好学习下一.文件夹遍历 function allFile($path = __DIR_ ...
php最常见代码,PHP常见算法合集代码实例
许多人都说算法是程序的核心,一个程序的好于差,关键是这个程序算法的优劣,下面是一些常用的算法和实例,大家可以好好学习下一.文件夹遍历<?php function allFile($path ...
HTML实现除夕最美烟花，2023春节倒计时，新年不可没有烟花，最炫烟花代码分享
x265代码解读博客合集
x265代码博客: https://blog.csdn.net/cabbage2008/category_6077644.html https://blog.csdn.net/lj501886285/ ...
iOS 代码块写法、合集（大大大大大大全，这个真是太有用了，贼爽）
iOS开发者应该知道,我们平时可以写一些常用的代码块,下次直接使用快捷键就能调用,不用重复编写. 写法如下:<#aaaa#> 这样就可以像系统api一样填空了. UIView *<# ...
用代码写出浪漫__合集（python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心）
活动地址:CSDN21天学习挑战赛用代码写出浪漫合集(爱心.玫瑰花) 本文目录: 一.前言二.用python.matplotlib.Matlab.java绘制爱心 (1)爱心图形1( ...

除夕最炫烟花代码----跨年必备合集

导语：

正文：

创建画布

画烟花粒子

让烟花粒子随机出现在底部

让烟花粒子向上运动

让粒子用重力效果，可以下向运动

让烟花粒子上到自身顶点时消失

消失的那一刻，让周围爆破

淡出效果实现

修改背景颜色

添加烟花颜色

结尾：

除夕最炫烟花代码----跨年必备合集相关推荐

最新文章

热门文章