最炫Python煙花程式碼全解析

2022-02-14 19:00:47

導語：

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

正文：

建立畫布

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)
    }
}

效果如下