PK creative Spring Festival, I am participating in the “Spring Festival creative submission contest”, please see: Spring Festival creative submission Contest

preface

Chinese New Year will come soon

With a beautiful fireworks, wish XDM a happy New Year 🎉🎉🎉

Results the preview

PC

The mobile terminal

Tinkering around the edges

The fireworks feast

Online viewing address

Implementation steps

The specific implementation steps are as follows

Create a canvas

Setup and Draw are the two main p5.js functions, where createCanvas creates the size of the canvas and background sets the background color of the canvas

function setup() {
    createCanvas(1303 / 2.734 / 2)}function draw() {
    background(50);
}
Copy the code

Set to 1303/2 and 734/2, for screenshots, also shown in Nuggets, will be changed later

Draw firework particles

Given that there will be many, generated by a function called Particle, the code is as follows

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)
    }
}
Copy the code

CreateVector creates three p5 vectors pos, VEL, and ACC with amplitude and direction, which can be described as forces that will be used later, followed by an update function, update, and show

Then change the contents of the main function, starting with setup

function setup() {
    createCanvas(1303 / 2.734 / 2)
    stroke(255)
    strokeWeight(4)
    firework = new Particle(200.150)}Copy the code

Set the color to white with stroke, the particle size to 4 with strokeWeight, and then in draw

function draw() {
    background(50);
    firework.update()
    firework.show()
}
Copy the code

Call firework.update() and firework.show() to display the firework particles

The results are as follows:

Let the firework particles randomly appear at the bottom

Modify Firework in Setup so that it appears anywhere at the bottom

firework = new Particle(random(width), height)
Copy the code

The width and height here represent the width and height of the canvas

The results are as follows

Let the firework particles move upwards

Just change this.vel in Particle

this.vel = createVector(0, -4)
Copy the code

The first parameter in the createVector represents the X-axis rate, with positive being the rate to the right and negative being the rate to the left. The second parameter is the speed of the Y-axis, with negative up and positive down

Results the following

So that particles can move downward using the gravity effect

Start by declaring a variable gravity globally and setting gravity in the setup function

gravity = createVector(0.0.2)
Copy the code

CreateVector (0, 0.2) means downward gravity, and the higher the value, the greater the gravitational field

Then we need to add a gravitational field to the draw function

firework.applyForce(gravity)
Copy the code

And, of course, you need to add the applyForce function to Particle, the actual operation that you’re adding

this.applyForce = function (force) {
    this.acc.add(force)
}
Copy the code

Results the following

It takes a lot of firework particles

You need to create a Firework function

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(); }}Copy the code

Then in draw, the for loop displays a lot of fireworks particles

function draw() {
    background(50)
    fireworks.push(new Firework())
    for (var i = 0; i < fireworks.length; i++) {
        fireworks[i].update()
        fireworks[i].show()
    }
}
Copy the code

The results are as follows

Introduce random factor, modify density

Fireworks. Push (new Firework()) in Draw

if(random(1) <0.1){
    fireworks.push(new Firework())
}   
Copy the code

This can be easily modified by introducing a random factor

Results the following

Adjust fast, slow, high, low

In fact, we just need to change the force. We can use random

So we change this.vel in Particle to createVector(0, random(-12,-8))

The results are as follows

Make the firework particle disappear when it reaches its apex

It’s essentially emptying the Firework when the y force is gone

So how do you check the force on the y axis?

This.firework.vel. Y >= 0

Modify Firework:

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(); }}}Copy the code

Results the following

Disappear the moment, let the surrounding explosion

There are a lot of changes here. The main changes are in 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()
        }
    }
}
Copy the code

The results are as follows

Random multiple burst

You can modify Particle to improve the effect above

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)
    }
}
Copy the code

The effect is as follows:

Display fireworks less

This is done by adjusting the odds so that fewer fireworks are displayed

We will draw in the draw function

if(random(1) <0.1){
    fireworks.push(new Firework())
}    
Copy the code

Modified to:

if(random(1) <0.02){
    fireworks.push(new Firework())
}    
Copy the code

That’s a little less

Results the following

Fixed an issue where fireworks were too scattered

Go to Particle, find the update method, and add it

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

The more mult there is, the more force there is and the more dispersed the explosion is

Results the following

Fade-out effect implemented

Once it’s spread out, it needs to slowly fade away,

The main variable lifespan is introduced, decrement from 255 and fade-out by stroke(255,this.lifespan)

The following code

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)
    }
}
Copy the code

Results the following

Extended blasting range

Again, this is done by adjusting the mult value

Mult (random(1, 6)); this.vel. Mult (random(2, 10));

This.vel. Mult (0.85) change to this.vel. Mult (0.9)

The effect is as follows:

Missing firework particles need to be removed

To remove the missing firework particles, which are actually cut out of particles, you can use the splice method of the native JS array

Change the for loop in Update in Firework

for (var i = this.particles.length - 1; i >= 0; i--) {
    this.particles[i].applyForce(gravity)
    this.particles[i].update()
    if (this.particles[i].done()) {
        this.particles.splice(i, 1)}}Copy the code

Of course we need to add the done method to Particle generation

this.done = function () {
    if (this.lifespan < 0) {
        return true
    } else {
        return false}}Copy the code

Then, add a done in Firework as well

this.done = function(){
    if(this.exploded && this.particles.length === 0) {return true
    }else{
        return false}}Copy the code

Then use it in DRAW

for (var i = fireworks.length - 1; i >= 0; i--) {
    fireworks[i].update()
    fireworks[i].show()
    if (fireworks[i].done) {
        fireworks.splice(i, 1)}}Copy the code

The effect is the same as above, except that we have removed the invisible particles from the array

Modify the background color

Change the background color to black using the background function in Setup

background(0)
Copy the code

Also add in Draw

colorMode(RGB)
background(0.0.0.25)
Copy the code

ColorMode is used to set the color model, in addition to RGB, and the above HSB; The four parameters of background correspond to RGBA

Results the following

Add fireworks color

Add color to fireworks, can be random number to add random color, mainly in Firework add

this.hu = random(255)
Copy the code

Keep in mind that several of the dependencies need to be changed

After perfection, the effect is as follows

Suitable for PC and mobile terminals

The createCanvas(1303/2, 734/2) was set up to capture the appropriate images to display on nuggets and to make the images less large

Now for mobile portrait, we set the width of the draft to viewport width

createCanvas(window.innerWidth, window.innerHeight)
Copy the code

Second, since the height of the portrait screen is definitely high, we need to adjust the strength of the upward, and adjust the strength of the mobile and web separately

So we find Particle and change if (this.firework){xx} to

if (this.firework) {
    if(window.innerHeight<640) {this.vel = createVector(0, random(-16, -13))}else{
        this.vel = createVector(0, random(-17, -15))}}Copy the code

The above values are adjusted. I think they have a good effect. They are not too high and the height is relatively concentrated

The page side effect is as follows

Look at the mobile side

That’s close, but of course we can adjust the values to achieve many different effects, such as

Enlarged gravity field

gravity = createVector(0.0.3)
Copy the code

I was just messing around

if (random(1) < 0.01) {
    fireworks.push(new Firework())
}
Copy the code

Fireworks feast is so beautiful

if (random(1) < 0.5) {
    fireworks.push(new Firework())
}
Copy the code

In fact, you can also make more interesting effects according to the different color, thickness, speed, direction, add sound, and even 3d effect of particles

conclusion

That’s all for this article

Finally I wish you the best

In the New Year, have good luck, be loved by many people, laugh often, and have all the best things

Happy New Year ~🎉🎉🎉