PK creative Spring Festival, I am participating in the “Spring Festival creative submission contest”, please see: Spring Festival creative submission Contest
🌊 author’s home page: Hai Young 🌊 Author profile: 🏆CSDN full stack quality creator, 🥇HDZ core group member 🌊 Fan benefits: fans send 6~9 books every week, send a variety of small gifts from time to time, the award will be announced
May this year be a good one for you and me
I wish you all a happy New Year. This is my first article of 2022. I hope to bring you something fun and interesting
Will bring you some interesting articles on the theme of Spring Festival
- Watch Snow with Xiao Hai – Simple snow effects with HTML, CSS and JS
- HTML, CSS and JS implement the countdown timer for the 2022 New Year
- HTML, CSS and JS implementation fireworks
- Mobile responsive design
- .
Today we bring you a few beautiful fireworks based on HTML+CSS+JS effects
Snowflakes, cherry blossoms, romantic cards, and Christmas trees I made a few days ago. If you’re interested, check out my previous posts:
Snow: juejin. Cn/post / 705174… Sakura: juejin. Cn/post / 704285… Christmas trees and greeting cards: juejin.cn/post/704406…
🎇 Five different JS fireworks effects
🍕 a simple atmosphere of fireworks
Site: Haiyong-site /fireworks1
The HTML code here is short
<div>
<canvas id="canvas"></canvas>
</div>
Copy the codeCSS code
These are the only two pieces of CSS
body{
background:black;
overflow:hidden;
margin:0;
}
canvas{
background:# 000;
}
Copy the codeJS code
All the source code is here, copy and paste
window.addEventListener("resize", resizeCanvas, false);
window.addEventListener("DOMContentLoaded", onLoad, false);
window.requestAnimationFrame =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000/60);
};
var canvas, ctx, w, h, particles = [], probability = 0.04,
xPoint, yPoint;
function onLoad() {
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
resizeCanvas();
window.requestAnimationFrame(updateWorld);
}
function resizeCanvas() {
if(!!!!! canvas) { w = canvas.width =window.innerWidth;
h = canvas.height = window.innerHeight; }}function updateWorld() {
update();
paint();
window.requestAnimationFrame(updateWorld);
}
function update() {
if (particles.length < 500 && Math.random() < probability) {
createFirework();
}
var alive = [];
for (var i=0; i<particles.length; i++) {
if (particles[i].move()) {
alive.push(particles[i]);
}
}
particles = alive;
}
function paint() {
ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = "Rgba (0,0,0,0.2)";
ctx.fillRect(0.0, w, h);
ctx.globalCompositeOperation = 'lighter';
for (var i=0; i<particles.length; i++) { particles[i].draw(ctx); }}function createFirework() {
xPoint = Math.random()*(w-200) +100;
yPoint = Math.random()*(h-200) +100;
var nFire = Math.random()*50+100;
var c = "rgb("+ (~ ~ (Math.random()*200+55)) +","+ (~ ~ (Math.random()*200+55)) +","+ (~ ~ (Math.random()*200+55)) +")";
for (var i=0; i<nFire; i++) {
var particle = new Particle();
particle.color = c;
var vy = Math.sqrt(25-particle.vx*particle.vx);
if (Math.abs(particle.vy) > vy) {
particle.vy = particle.vy>0? vy: -vy; } particles.push(particle); }}function Particle() {
this.w = this.h = Math.random()*4+1;
this.x = xPoint-this.w/2;
this.y = yPoint-this.h/2;
this.vx = (Math.random()-0.5) *10;
this.vy = (Math.random()-0.5) *10;
this.alpha = Math.random()*. 5+. 5;
this.color;
}
Particle.prototype = {
gravity: 0.05.move: function () {
this.x += this.vx;
this.vy += this.gravity;
this.y += this.vy;
this.alpha -= 0.01;
if (this.x <= -this.w || this.x >= screen.width ||
this.y >= screen.height ||
this.alpha <= 0) {
return false;
}
return true;
},
draw: function (c) {
c.save();
c.beginPath();
c.translate(this.x+this.w/2.this.y+this.h/2);
c.arc(0.0.this.w, 0.Math.PI*2);
c.fillStyle = this.color;
c.globalAlpha = this.alpha; c.closePath(); c.fill(); c.restore(); }}Copy the code🍜 2. Fireworks seen in the countryside
Demo Address:haiyong.site/fireworks2(Need to use the computer to open, do not respond to the mobile phone to open a black, or you can see the fireworks behind)
The HTML code here is just as short
<div id="jsi-fireworks-container" class="container"></div>
Copy the codeCSS code
CSS only has these three pieces of content
html.body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background-color: # 101010;
}
.container{
position: absolute;
width: 500px;
height: 500px;
top: 50%;
left: 50%;
margin-top: -250px;
margin-left: -250px;
}
canvas{
position: absolute;
top: 0;
left: 0;
}
Copy the codeJS code
JS code is relatively long, I put a part of it here, need to complete the source can pay attention to the public number [hai Long]
var RENDERER = {
LEAF_INTERVAL_RANGE : {min : 100.max : 200},
FIREWORK_INTERVAL_RANGE : {min : 20.max : 200},
SKY_COLOR : 'hsla (210. 60%, % % luminance, 0.2)'.STAR_COUNT : 100.init : function(){
this.setParameters();
this.reconstructMethod();
this.createTwigs();
this.createStars();
this.render();
},
setParameters : function(){
this.$container = $('#jsi-fireworks-container');
this.width = this.$container.width();
this.height = this.$container.height();
this.distance = Math.sqrt(Math.pow(this.width / 2.2) + Math.pow(this.height / 2.2));
this.contextFireworks = $('<canvas />').attr({width : this.width, height : this.height}).appendTo(this.$container).get(0).getContext('2d');
this.contextTwigs = $('<canvas />').attr({width : this.width, height : this.height}).appendTo(this.$container).get(0).getContext('2d');
this.twigs = [];
this.leaves = [new LEAF(this.width, this.height, this)];
this.stars = [];
this.fireworks = [new FIREWORK(this.width, this.height, this)];
this.leafInterval = this.getRandomValue(this.LEAF_INTERVAL_RANGE) | 0;
this.maxFireworkInterval = this.getRandomValue(this.FIREWORK_INTERVAL_RANGE) | 0;
this.fireworkInterval = this.maxFireworkInterval;
},
reconstructMethod : function(){
this.render = this.render.bind(this);
},
getRandomValue : function(range){
return range.min + (range.max - range.min) * Math.random();
},
createTwigs : function(){
this.twigs.push(new TWIG(this.width, this.height, 0.0.Math.PI * 3 / 4.0));
this.twigs.push(new TWIG(this.width, this.height, this.width, 0, -Math.PI * 3 / 4.Math.PI));
this.twigs.push(new TWIG(this.width, this.height, 0.this.height, Math.PI / 4.Math.PI));
this.twigs.push(new TWIG(this.width, this.height, this.width, this.height, -Math.PI / 4.0));
},
createStars : function(){
for(var i = 0, length = this.STAR_COUNT; i < length; i++){
this.stars.push(new STAR(this.width, this.height, this.contextTwigs, this)); }},render : function(){
requestAnimationFrame(this.render);
var maxOpacity = 0,
contextTwigs = this.contextTwigs,
contextFireworks = this.contextFireworks;
for(var i = this.fireworks.length - 1; i >= 0; i--){
maxOpacity = Math.max(maxOpacity, this.fireworks[i].getOpacity());
}
contextTwigs.clearRect(0.0.this.width, this.height);
contextFireworks.fillStyle = this.SKY_COLOR.replace('%luminance'.5 + maxOpacity * 15);
contextFireworks.fillRect(0.0.this.width, this.height);
for(var i = this.fireworks.length - 1; i >= 0; i--){
if(!this.fireworks[i].render(contextFireworks)){
this.fireworks.splice(i, 1); }}for(var i = this.stars.length - 1; i >= 0; i--){
this.stars[i].render(contextTwigs);
}
for(var i = this.twigs.length - 1; i >= 0; i--){
this.twigs[i].render(contextTwigs);
}
for(var i = this.leaves.length - 1; i >= 0; i--){
if(!this.leaves[i].render(contextTwigs)){
this.leaves.splice(i, 1); }}if(--this.leafInterval == 0) {this.leaves.push(new LEAF(this.width, this.height, this));
this.leafInterval = this.getRandomValue(this.LEAF_INTERVAL_RANGE) | 0;
}
if(--this.fireworkInterval == 0) {this.fireworks.push(new FIREWORK(this.width, this.height, this));
this.maxFireworkInterval = this.getRandomValue(this.FIREWORK_INTERVAL_RANGE) | 0;
this.fireworkInterval = this.maxFireworkInterval; }}};Copy the code🧀 3. Clickable fireworks
Demo Address:haiyong.site/fireworks3
HTML code:
<canvas id="canvas"></canvas>
Copy the codeCSS code
body{
background-color: # 000;
}
canvas{
display: block;
margin: auto;
-webkit-tap-highlight-color:rgba(0.0.0.0);
-webkit-user-select:none;
}
Copy the codeComplete JS code
(function() {
var Fireworks, GRAVITY, K, SPEED, ToRadian, canvas, context, ctx, fireBoss, repeat, stage;
canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
stage = new createjs.Stage(canvas);
stage.autoClear = false;
ctx = canvas.getContext("2d");
ctx.fillStyle = "rgba(0, 0, 0, 0)";
ctx.fillRect(0.0, canvas.width, canvas.height);
createjs.Ticker.setFPS(50);
createjs.Touch.enable(stage);
stage.update();
/ / gravity
GRAVITY = 1;
/ / resistance
K = 0.9;
/ / speed
SPEED = 12;
// Convert from degrees to radians
ToRadian = function(degree) {
return degree * Math.PI / 180.0;
};
// Make fireworks class
Fireworks = class Fireworks {
constructor(sx = 100, sy = 100, particles = 70) {
var circle, i, j, rad, ref, speed;
this.sx = sx;
this.sy = sy;
this.particles = particles;
this.sky = new createjs.Container();
this.r = 0;
this.h = Math.random() * 360 | 0;
this.s = 100;
this.l = 50;
this.size = 3;
for (i = j = 0, ref = this.particles; (0 <= ref ? j < ref : j > ref); i = 0 <= ref ? ++j : --j) {
speed = Math.random() * 12 + 2;
circle = new createjs.Shape();
circle.graphics.f(`hsla(The ${this.h}.The ${this.s}%, The ${this.l}` %, 1)).dc(0.0.this.size);
circle.snapToPixel = true;
circle.compositeOperation = "lighter";
rad = ToRadian(Math.random() * 360 | 0);
circle.set({
x: this.sx,
y: this.sy,
vx: Math.cos(rad) * speed,
vy: Math.sin(rad) * speed,
rad: rad
});
this.sky.addChild(circle);
}
stage.addChild(this.sky);
}
explode() {
var circle, j, p, ref;
if (this.sky) {
++this.h;
for (p = j = 0, ref = this.sky.getNumChildren(); (0 <= ref ? j < ref : j > ref); p = 0 <= ref ? ++j : --j) {
circle = this.sky.getChildAt(p);
/ / acceleration
circle.vx = circle.vx * K;
circle.vy = circle.vy * K;
// Position calculation
circle.x += circle.vx;
circle.y += circle.vy + GRAVITY;
this.l = Math.random() * 100;
/ / size
this.size = this.size - 0.001;
if (this.size > 0) {
circle.graphics.c().f(`hsla(The ${this.h}, 100%, The ${this.l}` %, 1)).dc(0.0.this.size); }}if (this.sky.alpha > 0.1) {
this.sky.alpha -= K / 50;
} else {
stage.removeChild(this.sky);
this.sky = null; }}else{}}}; fireBoss = [];setInterval(function() {
ctx.fillStyle = "Rgba (0, 0, 0, 0.1)";
ctx.fillRect(0.0, canvas.width, canvas.height);
}, 40);
setInterval(function() {
var x, y;
x = Math.random() * canvas.width | 0;
y = Math.random() * canvas.height | 0;
fireBoss.push(new Fireworks(x, y));
return fireBoss.push(new Fireworks(x, y));
}, 1300);
repeat = function() {
var fireworks, j, ref;
for (fireworks = j = 0, ref = fireBoss.length; (0 <= ref ? j < ref : j > ref); fireworks = 0 <= ref ? ++j : --j) {
if (fireBoss[fireworks].sky) {
fireBoss[fireworks].explode();
}
}
stage.update();
};
createjs.Ticker.on("tick", repeat);
stage.addEventListener("stagemousedown".function() {
fireBoss.push(new Fireworks(stage.mouseX, stage.mouseY));
return fireBoss.push(new Fireworks(stage.mouseX, stage.mouseY));
});
}).call(this);
Copy the code🍖 4. 3D rotating fireworks
Site: Haiyong. site/ Fireworks4
<canvas id="canvas"></canvas>
Copy the codeCSS code
html.body{
margin:0px;
width:100%;
height:100%;
overflow:hidden;
background:# 000;
}
#canvas{
width:100%;
height:100%;
}
Copy the codePart of JS code
The JS code is long and I will not list it all. If you need the full source code, you can download all the source code of this article here:
function initVars(){
pi=Math.PI;
ctx=canvas.getContext("2d");
canvas.width=canvas.clientWidth;
canvas.height=canvas.clientHeight;
cx=canvas.width/2;
cy=canvas.height/2;
playerZ=-25;
playerX=playerY=playerVX=playerVY=playerVZ=pitch=yaw=pitchV=yawV=0;
scale=600;
seedTimer=0; seedInterval=5,seedLife=100; gravity=. 02;
seeds=new Array(a); sparkPics=new Array(a); s="https://cantelope.org/NYE/";
for(i=1; i<=10; ++i){ sparkPic=new Image();
sparkPic.src=s+"spark"+i+".png";
sparkPics.push(sparkPic);
}
sparks=new Array(a); pow1=new Audio(s+"pow1.ogg");
pow2=new Audio(s+"pow2.ogg");
pow3=new Audio(s+"pow3.ogg");
pow4=new Audio(s+"pow4.ogg");
frames = 0;
}
function rasterizePoint(x,y,z){
var p,d;
x-=playerX;
y-=playerY;
z-=playerZ;
p=Math.atan2(x,z);
d=Math.sqrt(x*x+z*z);
x=Math.sin(p-yaw)*d;
z=Math.cos(p-yaw)*d;
p=Math.atan2(y,z);
d=Math.sqrt(y*y+z*z);
y=Math.sin(p-pitch)*d;
z=Math.cos(p-pitch)*d;
var rx1=-1000,ry1=1,rx2=1000,ry2=1,rx3=0,ry3=0,rx4=x,ry4=z,uc=(ry4-ry3)*(rx2-rx1)-(rx4-rx3)*(ry2-ry1);
if(! uc)return {x:0.y:0.d: -1};
var ua=((rx4-rx3)*(ry1-ry3)-(ry4-ry3)*(rx1-rx3))/uc;
var ub=((rx2-rx1)*(ry1-ry3)-(ry2-ry1)*(rx1-rx3))/uc;
if(! z)z=000000001.;
if(ua>0&&ua<1&&ub>0&&ub<1) {return {
x:cx+(rx1+ua*(rx2-rx1))*scale,
y:cy+y/z*scale,
d:Math.sqrt(x*x+y*y+z*z)
};
}else{
return {
x:cx+(rx1+ua*(rx2-rx1))*scale,
y:cy+y/z*scale,
d: -1}; }}function spawnSeed(){
seed=new Object(a); seed.x=-50+Math.random()*100;
seed.y=25;
seed.z=-50+Math.random()*100;
seed.vx=1.-Math.random()*2.;
seed.vy=-1.5;//*(1+Math.random()/2);
seed.vz=1.-Math.random()*2.;
seed.born=frames;
seeds.push(seed);
}
Copy the code🍰 5. Custom fireworks that can be dragged from perspective
Site: Haiyong. site/ Fireworks5
<div id="WebGL-output"></div>
Copy the codeCSS code
body {
margin: 0;
overflow: hidden;
background: -webkit-linear-gradient(0deg.rgb(0.12.91), rgb(0.0.0));
background: linear-gradient(0deg.rgb(0.12.91), rgb(0.0.0));
}
Copy the codePart of JS code
The JS code is long and I will not list it completely. If you need the complete source code, you can refer to the end of the article for two ways to obtain the source code
let scene,
camera,
renderer,
orbitControls,
planeMesh,
canvasTexture,
isAutoLaunch = true;
const gravity = new THREE.Vector3(0, -0.005.0);
const friction = 0.998;
const noise = new SimplexNoise();
const textureSize = 128.0;
const fireworksInstances = [];
let outputDom;
const getOffsetXYZ = i= > {
const offset = 3;
const index = i * offset;
const x = index;
const y = index + 1;
const z = index + 2;
return { x, y, z };
};
const getOffsetRGBA = i= > {
const offset = 4;
const index = i * offset;
const r = index;
const g = index + 1;
const b = index + 2;
const a = index + 3;
return { r, g, b, a };
};
const gui = new dat.GUI();
const guiControls = new function () {
this.ParticleSize = 300;
this.AutoLaunch = true; } (); gui.add(guiControls,'ParticleSize'.100.600);
gui.add(guiControls, 'AutoLaunch').onChange(e= > {
isAutoLaunch = e;
outputDom.style.cursor = isAutoLaunch ? 'auto' : 'pointer';
});
const getRandomNum = (max = 0, min = 0) = > Math.floor(Math.random() * (max + 1 - min)) + min;
const launchFireWorks = () = > {
if (fireworksInstances.length > 5) return;
const fw = Math.random() > 8 ? new BasicFIreWorks() : new RichFIreWorks();
fireworksInstances.push(fw);
scene.add(fw.meshGroup);
};
const autoLaunch = () = > {
if(! isAutoLaunch)return;
if (Math.random() > 0.7) launchFireWorks();
};
const drawRadialGradation = (ctx, canvasRadius, canvasW, canvasH) = > {
ctx.save();
const gradient = ctx.createRadialGradient(canvasRadius, canvasRadius, 0, canvasRadius, canvasRadius, canvasRadius);
gradient.addColorStop(0.0.'rgba (255255255,1.0)');
gradient.addColorStop(0.5.'rgba (255255255,0.5)');
gradient.addColorStop(1.0.'rgba(255,255,255,0)');
ctx.fillStyle = gradient;
ctx.fillRect(0.0, canvasW, canvasH);
ctx.restore();
};
const getTexture = () = > {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const diameter = textureSize;
canvas.width = diameter;
canvas.height = diameter;
const canvasRadius = diameter / 2;
drawRadialGradation(ctx, canvasRadius, canvas.width, canvas.height);
const texture = new THREE.Texture(canvas);
texture.type = THREE.FloatType;
texture.needsUpdate = true;
return texture;
};
canvasTexture = getTexture();
const getPointMesh = (num, vels, type) = > {
const bufferGeometry = new THREE.BufferGeometry();
const vertices = [];
const velocities = [];
const colors = [];
const adjustSizes = [];
const masses = [];
const colorType = Math.random() > 0.3 ? 'single' : 'multiple';
const singleColor = getRandomNum(100.20) * 0.01;
const multipleColor = () = > getRandomNum(100.1) * 0.01;
let rgbType;
const rgbTypeDice = Math.random();
if (rgbTypeDice > 0.66) {
rgbType = 'red';
} else if (rgbTypeDice > 0.33) {
rgbType = 'green';
} else {
rgbType = 'blue';
}
for (let i = 0; i < num; i++) {
const pos = new THREE.Vector3(0.0.0);
vertices.push(pos.x, pos.y, pos.z);
velocities.push(vels[i].x, vels[i].y, vels[i].z);
if (type === 'seed') {
let size;
if (type === 'trail') {
size = Math.random() * 0.1 + 0.1;
} else {
size = Math.pow(vels[i].y, 2) * 0.04;
}
if (i === 0) size *= 1.1;
adjustSizes.push(size);
masses.push(size * 0.017);
colors.push(1.0.1.0.1.0.1.0);
} else {
const size = getRandomNum(guiControls.ParticleSize, 10) * 0.001;
adjustSizes.push(size);
masses.push(size * 0.017);
if (colorType === 'multiple') {
colors.push(multipleColor(), multipleColor(), multipleColor(), 1.0);
} else {
switch (rgbType) {
case 'red':
colors.push(singleColor, 0.1.0.1.1.0);
break;
case 'green':
colors.push(0.1, singleColor, 0.1.1.0);
break;
case 'blue':
colors.push(0.1.0.1, singleColor, 1.0);
break;
default:
colors.push(singleColor, 0.1.0.1.1.0); } } } } bufferGeometry.addAttribute('position'.new THREE.Float32BufferAttribute(vertices, 3).setDynamic(true));
bufferGeometry.addAttribute('velocity'.new THREE.Float32BufferAttribute(velocities, 3).setDynamic(true));
bufferGeometry.addAttribute('color'.new THREE.Float32BufferAttribute(colors, 4).setDynamic(true));
bufferGeometry.addAttribute('adjustSize'.new THREE.Float32BufferAttribute(adjustSizes, 1).setDynamic(true));
bufferGeometry.addAttribute('mass'.new THREE.Float32BufferAttribute(masses, 1).setDynamic(true));
Copy the code✨ Download the full source code
For beginners, all the source code for this article has been packaged. Contact information can be obtained from my nuggets home page. Please note: nuggets 👇👇👇 juejin.cn/user/204034…
Why not give them the romance of a programmer?
Hopefully, through this tutorial, you’ll also be able to implement simple fireworks effects using JS.
The author is determined to build a fishing site with 100 small games/tools, update progress: 52/100
I’ve been writing tech blogs for a long time, mostly through Nuggets, and this is my post on how to implement simple snow effects using HTML, CSS, and JS. I like to share technology and happiness through articles. You can visit my blog at juejin.cn/user/204034… For more information. Hope you like it! 😊
💌 welcomes your comments and suggestions in the comments section! 💌