Spring Festival “make” their own fireworks

PK Creative Spring Festival, I am participating in the “Spring Festival Creative Submission Contest”, please see: Spring Festival Creative Submission Contest”

preface

Unconsciously, the Spring Festival is almost over, the annual leave has been insufficient. Because of the repeated epidemic, he responded to the government’s call to celebrate the Spring Festival in place, so he stayed in the “imperial capital” Beijing for the holiday. There are many inconveniences in the imperial capital, such as setting off fireworks is not very free. Then, oneself make something, satisfy oneself to put fireworks mood.

The body of the

presentation

You’ve decided to make a fireworks program, so what kind of presentation should you choose? Like applets, Android, iOS, web, Windows client, MAC client, Linux client?

Come to a most familiar PC client, and is to support Windows, MAC, Linux three platforms. Without a doubt, the Electron architecture is the most cost-effective. Electron is an open source cross-platform PC architecture solution.

Choose a specific background image

I am an outgoing blogger who likes sharing and is ready to help others. I have helped a lot of friends in the developer community of Umeng, so I have been officially recognized as the star of the Season. Besides, the official has also given me the honorary certificate and customized gift box, so I can use them as the background picture of fireworks.

Next, set the background image. Note that the canvas background can only be drawn after the image is loaded.

First, get the canvas’s context as follows:

var ctx = canvas.getContext("2d");
Copy the code

Then, create the background graph object and the listening event as follows:

var img = new Image();
img.src = "img/bg.png";
img.onload = function () {
        draw();
}
Copy the code

Finally, define the drawing method to draw the picture to canvas, the code is as follows:

function draw() {
        ctx.drawImage(img, 0.0, img.width, img.height);
}
Copy the code

Define the fireworks

Define the basic attributes of fireworks, including the x and Y axis coordinates of fireworks, fireworks radius, launch speed, bloom range, etc., the reference code is as follows:

function Fire() {
    this.x = canvas.width / 2.// The x coordinate of the fireworks
    this.y = canvas.height, // The y coordinate of the fireworks
    this.radius = 2.// The radius of the fireworks
    this.speed = getRandom(6.8), // Launch speed
    this.angle = getRandom(1.1 * Math.PI, 1.9 * Math.PI), // The scope of the bloom
    this.color = Math.random() > 0.5 ? 'white' : (The '#' + Math.random().toString(16).substr(2.6).toUpperCase());
}
Copy the code

The burst fragment that defines a firework

As we all know, fireworks bloom, will produce countless fragments, the appearance of these fragments finally determine the beauty of fireworks, so the design is very important, fireworks fragments include coordinates, radius, number of fragments, speed, gravity, friction, Angle, etc., the reference code is as follows:

function ChildFire() {
    this.x = 0.// Fireworks fragment x position
    this.y = 0.// Fireworks fragment y position
    this.radius = 1.// Fireworks fragment radius
    this.n = 2.// The number of fireworks fragments
    this.speed = getRandom(1.10) / 5.// Fireworks debris speed
    this.g = 0.98./ / gravity
    this.mocha = 0.96./ / the friction
    this.color = Math.random() > 0.5 ? 'white' : (The '#' + Math.random().toString(16).substr(2.6).toUpperCase()), // Fragment Angle
    this.angle = getRandom(0.2 * Math.PI); // random between 0 and 2π
}
Copy the code

Final rendering

Since the Nuggets can’t upload video, I made it into a GIF and it didn’t seem to affect the fireworks. Please enjoy, as shown below:

conclusion

Well, the fireworks effect you want is achieved. The text of the GIF effect, but also ok. Interested partners welcome comments, communication, let fireworks bloom more beautiful.

About the author: 😄 Hello everyone, MY name is Data-Mining (Liuzhen007). I am a typical audio and video technology enthusiast. I have worked for traditional broadcasting giants and audio and video Internet companies before and after, and I have rich experience in audio and video live broadcast and on-demand. Have a very deep understanding of WebRTC, FFmpeg and Electron, 😄 public account: Play with audio and video. Also CSDN blog expert, Huawei cloud sharing expert (co-create editor), InfoQ contract author, welcome to follow me to share more dry goods! 😄