最炫Python烟花代码全解析
作者:迢迢x 发布时间:2022-02-16 13:07:53
导语:
除夕除夕,就是除去烦脑,迎接新的希望!在这里小编先祝大家除夕快乐,岁岁常欢笑,事事皆如意!
正文:
创建画布
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 = false
this.particles = []
this.update = function () {
if (!this.exploded) {
this.firework.applyForce(gravity)
this.firework.update()
if (this.firework.vel.y >= 0) {
this.exploded = true
this.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 = firework
if (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 = firework
this.lifespan = 255
if (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)
结尾:
最后祝你
岁岁常欢愉,年年皆胜意,除夕快乐~🎉🎉🎉
来源:https://blog.csdn.net/a55656aq/article/details/122455251
猜你喜欢
- 以下为引用的内容:DROP PROCEDURE test_insert ;DELIMITER ;;CREATE PROCEDURE test
- 在第一章,我们讲过position,当它取值absolute的时候,即绝对定位。既然是定位,就要有参照物。一般来讲,这个定位的参照物是bod
- zip()的作用先看一下语法:zip(iter1 [,iter2 [...]]) —> zip objectPython的内置help
- 本文实例讲述了PHP获取二叉树镜像的方法。分享给大家供大家参考,具体如下:问题操作给定的二叉树,将其变换为源二叉树的镜像。解决思路翻转二叉树
- 支持向量机常用于数据分类,也可以用于数据的回归预测1、Question?我们经常会遇到这样的问题,给你一些属于两个类别的数据(如子图1),需
- 树形目录显示程序问题描述:在我们项目中常常会出现自关联的数据表,如果我们从整体看去,整个表就呈现为一个树形数据结构(对于复杂的情况,它可能变
- Dreamweaver MX 2004 试用试用心得:安装:选择工作界面(我选了默认的设计模式)初次启动,选择30天试用如果你也看到这个警告
- microtime() 函数返回当前 Unix 时间戳的微秒数。用于检测程序执行时间的函数,也是PHP内置的时间函数之一,在PHP中可以用于
- 可以的,看看下面的代码和说明:<%sessionID = session.SessionIDtimeout&nbs
- 代理服务原理很简单,就拿浏览器与web服务器来说。无非是A浏览器发request给B代理,B代理再把request把送给C web服务,然后
- MYSQL在一个字段值前面加字符窜,如下:member 表名card 字段名update member SET card = '00
- 这本入门手册是否合适你?我只想告诉你我非常喜欢这本书。我对Microsoft Access的经验足以让我跳过这本傻瓜系列教材,但是实际情况是
- 本文深入分析了Symfony控制层。分享给大家供大家参考,具体如下:Symfony中控制层包含了连接业务逻辑与表现的代码,控制层为不同的使用
- 本文实例讲述了php+html5基于websocket实现聊天室的方法。分享给大家供大家参考。具体如下:html5的websocket 实现
- 最近在学习PHP,以下是看PHP100视频教程,做的学习笔记,在这里存放以便今后使用。apache--PHP--DB(mysql)一、apa
- 1.背景项目需求,要求获得github的repo的api,以便可以提取repo的数据进行分析。研究了一天,终于解决了这个问题,虽然效率还是比
- 从最基础的说起。本教程中,所有IE 均指 WindowXP + IE 6.0, 所有 FF 均指 FF 1.5。不用编程部分1.1 Form
- Pythonpython 真的太好用了,但是它真的好慢啊(哭死) ; C++ 很快,但是真的好难写啊,此生能不碰它就不碰它。老天啊,有没有什
- django-pipeline 是一个 Django 下非常方便的静态资源管理 app,尤其是 1.2 版本之后,利用 djan
- 在CSS中,实现分栏布局有两种方法。第一种方法是使用四种CSS定位选项(absolute 、static、relative和fixed)中的