怎么用Python代碼實現(xiàn)最炫的煙花

這篇文章主要介紹“怎么用Python代碼實現(xiàn)最炫的煙花”，在日常操作中，相信很多人在怎么用Python代碼實現(xiàn)最炫的煙花問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么用Python代碼實現(xiàn)最炫的煙花”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

效果圖：

正文：

創(chuàng)建畫布

setup和draw是p5.js的兩個主函數(shù)，里頭的createCanvas用于創(chuàng)建畫布的大小，background來設(shè)置畫布的背景顏色

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

畫煙花粒子

考慮到會有很多，通過一個函數(shù)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)
    }
}
#調(diào)用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()
}

結(jié)果如下：

讓煙花粒子隨機出現(xiàn)在底部

修改setup中的firework，讓它出現(xiàn)在底部的任意位置

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

這里的width和height表示的就是畫布的寬和高

結(jié)果如下

讓煙花粒子向上運動

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

this.vel = createVector(0, -4)

createVector中第一個參數(shù)表示x軸的速率，正數(shù)為向右的速率，負為向左的速率；第二個參數(shù)表示y軸的速率，負為向上，正為向下

效果如下

讓粒子用重力效果，可以下向運動

首先在全局聲明一個變量gravity，在setup函數(shù)中設(shè)置重力

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

效果如下

需要很多的煙花粒子

需要創(chuàng)建一個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中，通過for循環(huán)來顯示很多的煙花粒子
function draw() {
    background(50)
    fireworks.push(new Firework())
    for (var i = 0; i < fireworks.length; i++) {
        fireworks[i].update()
        fireworks[i].show()
    }
}

結(jié)果如下

讓煙花粒子上到自身頂點時消失

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

結(jié)果如下

隨機倍數(shù)爆發(fā)

可以修改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)
    }
}

效果如下：

展示煙花少一些

通過調(diào)整幾率來實現(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)，煙花太散落了，修改煙花太散落的問題

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

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

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

淡出效果實現(xiàn)

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

其實主要引入一個變量lifespan，讓它從255開始遞減，通過stroke(255,this.lifespan)來實現(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中通過background函數(shù)將背景色修改成黑色

background(0)

同時在draw添加

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

colorMode用于設(shè)置顏色模型，除了RGB，還有上面的HSB；background的4個參數(shù)就是對應(yīng)rgba

效果如下

添加煙花顏色

主要給煙花添加色彩，可以隨機數(shù)來添加隨機顏色，主要在Firework添加一下

this.hu = random(255)

到此，關(guān)于“怎么用Python代碼實現(xiàn)最炫的煙花”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>