最炫Python煙花代碼全解析

Posted on by

導語：

除夕除夕，就是除去煩腦，迎接新的希望！在這裡小編先祝大傢除夕快樂，歲歲常歡笑，事事皆如意！

正文：

創建畫佈

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)

結尾：

最後祝你

歲歲常歡愉,年年皆勝意，除夕快樂~🎉🎉🎉

到此這篇關於 最炫Python煙花代碼全解析的文章就介紹到這瞭,更多相關Python絢爛煙花內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：