最炫Python煙花代碼全解析
導(dǎo)語(yǔ):
除夕除夕,就是除去煩腦,迎接新的希望!在這里小編先祝大家除夕快樂(lè),歲歲常歡笑,事事皆如意!
正文:
創(chuàng)建畫(huà)布
setup
和draw
是p5.js
的兩個(gè)主函數(shù),里頭的createCanvas
用于創(chuàng)建畫(huà)布的大小,background
來(lái)設(shè)置畫(huà)布的背景顏色
function setup() { createCanvas(1303 / 2, 734 / 2) } function draw() { background(50); }
畫(huà)煙花粒子
考慮到會(huì)有很多,通過(guò)一個(gè)函數(shù)Particle
來(lái)生成,代碼如下
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) } } #調(diào)用firework.update()和firework.show()將煙花粒子展示出來(lái) function setup() { createCanvas(1303 / 2, 734 / 2) stroke(255) strokeWeight(4) firework = new Particle(200, 150) } function draw() { background(50); firework.update() firework.show() }
結(jié)果如下:
讓煙花粒子隨機(jī)出現(xiàn)在底部
修改setup
中的firework
,讓它出現(xiàn)在底部的任意位置
firework = new Particle(random(width), height)
這里的width
和height
表示的就是畫(huà)布的寬和高
結(jié)果如下
讓煙花粒子向上運(yùn)動(dòng)
只需要修改Particle
中的this.vel
即可
this.vel = createVector(0, -4)
createVector
中第一個(gè)參數(shù)表示x軸的速率,正數(shù)為向右的速率,負(fù)為向左的速率;第二個(gè)參數(shù)表示y軸的速率,負(fù)為向上,正為向下
效果如下
讓粒子用重力效果,可以下向運(yùn)動(dòng)
首先在全局聲明一個(gè)變量gravity
,在setup函數(shù)中設(shè)置重力
gravity = createVector(0, 0.2) firework.applyForce(gravity) this.applyForce = function (force) { this.acc.add(force) }
效果如下
需要很多的煙花粒子
需要?jiǎng)?chuàng)建一個(gè)Firework
函數(shù)
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中,通過(guò)for循環(huán)來(lái)顯示很多的煙花粒子 function draw() { background(50) fireworks.push(new Firework()) for (var i = 0; i < fireworks.length; i++) { fireworks[i].update() fireworks[i].show() } }
結(jié)果如下
讓煙花粒子上到自身頂點(diǎn)時(shí)消失
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(); } } }
效果如下
消失的那一刻,讓周?chē)?/h3>
這里修改的地方會(huì)比較多,主要修改的地方是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() } } }
結(jié)果如下
隨機(jī)倍數(shù)爆發(fā)
可以修改Particle
來(lái)完善以下上面的效果,修改后的代碼為
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) } }
效果如下:
展示煙花少一些
通過(guò)調(diào)整幾率來(lái)實(shí)現(xiàn),讓展示煙花少一些
我們將draw
函數(shù)中的
if(random(1)<0.1){ fireworks.push(new Firework()) }
修改成:
if(random(1)<0.02){ fireworks.push(new Firework()) }
這樣就少一些了
然后我們又發(fā)現(xiàn),煙花太散落了,修改煙花太散落的問(wèn)題
到Particle
中,找到update
方法,里頭添加
if(!this.firework){ this.vel.mult(0.85) }
可以理解為,mult
的值越大作用力就越大爆炸就越散
淡出效果實(shí)現(xiàn)
散開(kāi)之后,需要慢慢淡出消失,
其實(shí)主要引入一個(gè)變量lifespan
,讓它從255
開(kāi)始遞減,通過(guò)stroke(255,this.lifespan)
來(lái)實(shí)現(xiàn)淡出
如下代碼
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
中通過(guò)background
函數(shù)將背景色修改成黑色
background(0)
同時(shí)在draw
添加
colorMode(RGB) background(0, 0, 0, 25)
colorMode
用于設(shè)置顏色模型,除了RGB
,還有上面的HSB
;background
的4
個(gè)參數(shù)就是對(duì)應(yīng)rgba
效果如下
添加煙花顏色
主要給煙花添加色彩,可以隨機(jī)數(shù)來(lái)添加隨機(jī)顏色,主要在Firework
添加一下
this.hu = random(255)
結(jié)尾:
最后祝你
歲歲常歡愉,年年皆勝意,除夕快樂(lè)~??????
到此這篇關(guān)于 最炫Python煙花代碼全解析的文章就介紹到這了,更多相關(guān)Python絢爛煙花內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Numpy array數(shù)據(jù)的增、刪、改、查實(shí)例
今天小編就為大家分享一篇Numpy array數(shù)據(jù)的增、刪、改、查實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-06-06python+OpenCV實(shí)現(xiàn)圖像拼接
這篇文章主要為大家詳細(xì)介紹了python+OpenCV實(shí)現(xiàn)圖像拼接,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-03-03PyCharm在新窗口打開(kāi)項(xiàng)目的方法
今天小編就為大家分享一篇PyCharm在新窗口打開(kāi)項(xiàng)目的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-01-01python找出一個(gè)列表中相同元素的多個(gè)索引實(shí)例
今天小編就為大家分享一篇python找出一個(gè)列表中相同元素的多個(gè)索引實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-06-06詳解python 破解網(wǎng)站反爬蟲(chóng)的兩種簡(jiǎn)單方法
這篇文章主要介紹了詳解python 破解網(wǎng)站反爬蟲(chóng)的兩種簡(jiǎn)單方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02Python 實(shí)現(xiàn)二叉查找樹(shù)的示例代碼
這篇文章主要介紹了Python 實(shí)現(xiàn)二叉查找樹(shù)的示例代碼,幫助大家更好的理解和使用python,感興趣的朋友可以了解下2020-12-12python獲取redis memory使用情況場(chǎng)景分析
這篇文章主要介紹了python獲取redis memory使用情況,項(xiàng)目研發(fā)過(guò)程中,用到Python操作Redis場(chǎng)景,記錄學(xué)習(xí)過(guò)程中的心得體會(huì),需要的朋友可以參考下2022-12-12