#codevember 6 - Fireworks
How do I make an #codevember 6 - fireworks?
Canvas Fireworks. What is a #codevember 6 - fireworks? How do you make a #codevember 6 - fireworks? This script and codes were developed by Pedro Cacique on 20 November 2022, Sunday.
#codevember 6 - Fireworks - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>#codevember 6 - Fireworks</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header>Click and drag to start a firework</header>
<canvas id="canvas"></canvas>
<footer> <div>Made by <a href="http://www.pedrocacique.com">Cacique</a></div><div> <a href="http://codevember.xyz/about">#codevember</a> <a href="http://codevember.xyz/day/6">#day6</a> </div> </footer> <script src="js/index.js"></script>
</body>
</html>
#codevember 6 - Fireworks - Script Codes CSS Codes
body{ margin:0; font-family: Helvetica, Arial; font-weight: 100;
}
canvas { background-color: #101010;
}
footer{ position: fixed; bottom:0; height: 20px; width: 100%; display: flex; justify-content: space-around; align-items: center; background-color: #202020; color: #fff; font-size: 0.7em;
}
footer a{ color: #f0f0f0;
}
header{ color: #fff; padding: 10px; position: fixed;
}
#codevember 6 - Fireworks - Script Codes JS Codes
var canvas, ctx, cw, ch;
var particles = [];
var explosions = [];
var force;
const MIN_VEL = -1, MAX_VEL = 1, NUM_PARTICLES = 100, RADIUS = 3, MIN_PARTICLE_DISTANCE = 0.13, ISGRAYSCALE = false, LINEWIDTH = 0.8, FPS = 1000 / 60;
var gravity = new Vector(new Point(), new Point(0, 0.02));
var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { return setTimeout(callback, FPS);
};
window.onload = function () { canvas = document.getElementById("canvas"); initCanvas(); window.onresize = function () { initCanvas() }; init();
}
function initCanvas() { ctx = canvas.getContext("2d"); cw = window.innerWidth; ch = window.innerHeight; canvas.width = cw; canvas.height = ch;
}
function init() { canvas.addEventListener("mousedown", onMouseDown); canvas.addEventListener("mouseup", onMouseUp); animate();
}
function animate() { ctx.clearRect(0, 0, cw, ch); for (var i = 0; i < particles.length; i++) { var remove = false; particles[i].position = particles[i].distance(particles[i].time); drawParticle(particles[i]); particles[i].time++; if (particles[i].time == 100) { explosions.push( new Explosion(particles[i].color, particles[i].distance(particles[i].time).clone(), particles[i].vel) ); for (var j = 0; j < explosions[explosions.length - 1].numParticles; j++) { explosions[explosions.length - 1].particles.push( new Particle(explosions[explosions.length - 1].color, RADIUS / 2, explosions[explosions.length - 1].initPos.clone(), new Vector(new Point(), new Point(getRandomNumber(-1, 1), getRandomNumber(-3, -1))), new Vector(new Point(), new Point(getRandomNumber(-0.015, 0.015), getRandomNumber(0.02, 0.03))) ) ); } particles.splice(i, 1); remove = true; } if (!remove) { if (particles[i].position.y < 0) invertMovement(particles[i], "y"); if (particles[i].position.x > cw || particles[i].position.x < 0) invertMovement(particles[i], "x"); if (particles[i].position.y > ch) particles.splice(i, 1); } } for (var i = 0; i < explosions.length; i++) { for (var j = 0; j < explosions[i].particles.length; j++) { explosions[i].particles[j].position = explosions[i].particles[j].distance(explosions[i].particles[j].time); explosions[i].particles[j].time++; explosions[i].particles[j].radius -= 0.01; drawParticle(explosions[i].particles[j]); if (explosions[i].particles[j].radius <= 0) explosions[i].particles.splice(j, 1); } if (explosions[i].particles.length == 0) explosions.splice(i, 1); } if (force != null) drawVector(force); requestAnimationFrame(animate);
}
function onMouseDown(event) { var p1 = getMousePos(canvas, event); force = new Vector(p1, p1); var r = getRandomInt(150, 255); var g = getRandomInt(150, 255); var b = getRandomInt(150, 255); force.color = rgbToHex(r, g, b); canvas.addEventListener("mousemove", onMouseMove);
}
function onMouseMove(event) { force.p2 = getMousePos(canvas, event); drawVector(force);
}
function onMouseUp(event) { var p = new Particle(force.color, RADIUS, force.p1, new Vector(new Point(), new Point(-force.component("x") / 30, -force.component("y") / 30)), gravity); particles.push(p); canvas.removeEventListener("mousemove", onMouseMove); force = null;
}
function getMousePos(canvas, evt) { var rect = canvas.getBoundingClientRect(); return new Point( evt.clientX - rect.left, evt.clientY - rect.top, 0 );
}
function invertMovement(p, axis) { p.vel = p.vel.inverse(axis); p.initPos = p.position.clone(); p.time = 1;
}
function lineParticles(p1, p2) { ctx.beginPath(); var gradient = ctx.createLinearGradient(p1.position.x, p1.position.y, p2.position.x, p2.position.y); gradient.addColorStop("0", p1.color); gradient.addColorStop("1.0", p2.color); ctx.strokeStyle = gradient; ctx.lineWidth = LINEWIDTH; ctx.moveTo(p1.position.x, p1.position.y); ctx.lineTo(p2.position.x, p2.position.y); ctx.stroke();
}
function drawParticle(p) { if (p.radius > 0) { ctx.beginPath(); ctx.fillStyle = p.color; ctx.arc(p.position.x, p.position.y, p.radius, 0, Math.PI * 2); ctx.fill(); }
}
function drawVector(v) { ctx.beginPath(); ctx.strokeStyle = v.color; ctx.lineWidth = LINEWIDTH; ctx.moveTo(v.p1.x, v.p1.y); ctx.lineTo(v.p2.x, v.p2.y); ctx.stroke();
}
function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min;
}
function getRandomNumber(min, max) { return Math.random() * (max - min) + min;
}
function componentToHex(c) { var hex = c.toString(16); return hex.length == 1 ? "0" + hex : hex;
}
function rgbToHex(r, g, b) { return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}
//-------- PROTOTYPES --------
//POINT
function Point(x, y, z) { this.x = (x == null) ? 0 : x; this.y = (y == null) ? 0 : y; this.z = (z == null) ? 0 : z;
}
Point.prototype.distance = function (p2) { //Euclidean Disctance return Math.sqrt(Math.pow(this.x - p2.x, 2) + Math.pow(this.y - p2.y, 2) + Math.pow(this.z - p2.z, 2));
}
Point.prototype.manhatan = function (p2) { return (p2.x - p1.x) + (p2.y - p1.y) + (p2.z - p1.z);
}
Point.prototype.clone = function () { return new Point(this.x, this.y, this.z);
}
//VECTOR
function Vector(p1, p2, color) { this.p1 = (p1 == null) ? (new Point()) : p1; this.p2 = (p2 == null) ? (new Point()) : p2; this.color = (color == null) ? "#000" : color; this.origin = new Point();
}
Vector.prototype.clone = function () { return new Vector(this.p1, this.p2, this.color);
}
Vector.prototype.norm = function () { return this.p1.distance(this.p2);
}
Vector.prototype.component = function (axis) { switch (axis.toUpperCase()) { case "X": return this.p2.x - this.p1.x; break; case "Y": return this.p2.y - this.p1.y; break; case "Z": return this.p2.z - this.p1.z; break; }
}
Vector.prototype.toPoint = function (p) { if (p == null) p = new Point(); var d0x = this.p1.x - p.x; var d0y = this.p1.y - p.y; var d0z = this.p1.z - p.z; var p1n = new Point(this.p1.x - d0x, this.p1.y - d0y, this.p1.z - d0z); var p2n = new Point(this.p2.x - d0x, this.p2.y - d0y, this.p2.z - d0z); return new Vector(p1n, p2n);
}
Vector.prototype.toOrigin = function () { return this.toPoint(this.origin);
}
Vector.prototype.add = function (v2) { var v1c = this.toOrigin(); var v2c = v2.toPoint(v1c.p2); var v = new Vector(v1c.p1, new Point(v1c.p1.x + v2c.p2.x, v1c.p1.y + v2c.p2.y, v1c.p1.z + v2c.p2.z)); return v.toPoint(this.p1);
}
Vector.prototype.inverse = function (axis) { if (axis == null) return new Vector(this.p2, this.p1); else { var v1c = this.toOrigin(); var v = new Vector(); switch (axis.toUpperCase()) { case "X": v = new Vector(new Point(), new Point(-v1c.p2.x, v1c.p2.y, v1c.p2.z)); break; case "Y": v = new Vector(new Point(), new Point(v1c.p2.x, -v1c.p2.y, v1c.p2.z)); break; case "Z": v = new Vector(new Point(), new Point(v1c.p2.x, v1c.p2.y, -v1c.p2.z)); break; } return v.toPoint(this.p1); }
}
//PARTICLE
function Particle(color, radius, position, velocity, acceleration) { this.position = (position == null) ? (new Point()) : position; this.initPos = (position == null) ? (new Point()) : position; this.vel = (velocity == null) ? (new Vector()) : velocity; this.acceleration = (acceleration == null) ? (new Vector()) : acceleration; this.color = (color == null) ? "#000" : color; this.radius = (radius == null) ? 2 : radius; this.time = 0;
}
Particle.prototype.distance = function (t) { //s = s0 + v0t + at2/2 var sx = this.initPos.x + this.vel.component("x") * t + (this.acceleration.component("x") * Math.pow(t, 2)) / 2; var sy = this.initPos.y + this.vel.component("y") * t + (this.acceleration.component("y") * Math.pow(t, 2)) / 2; var sz = this.initPos.z + this.vel.component("z") * t + (this.acceleration.component("z") * Math.pow(t, 2)) / 2; return new Point(sx, sy, sz);
}
Particle.prototype.velocity = function (t) { //v = v0 + at var vx = this.vel.component("x") + this.acceleration.component("x") * t; var vy = this.vel.component("y") + this.acceleration.component("y") * t; var vz = this.vel.component("z") + this.acceleration.component("z") * t; return new Vector(new Point(), new Point(vx, vy, vz));
}
//EXPLOSION
function Explosion(color, initPos, initVel) { this.color = (color == null) ? "#fff" : color; this.initPos = (initPos == null) ? new Point() : initPos; this.initVel = (initVel == null) ? new Vector() : initVel; this.active = false; this.activeTime = 0; this.particles = []; this.duration = 20; this.numParticles = 100;
}
Developer | Pedro Cacique |
Username | phcacique |
Uploaded | November 20, 2022 |
Rating | 3.5 |
Size | 4,321 Kb |
Views | 28,336 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Aside Hover Menu | 1,938 Kb |
One page scrolling | 2,113 Kb |
Grid Interaction | 3,469 Kb |
Web Theremin | 3,970 Kb |
Platform game mechanics | 2,799 Kb |
Page transition | 2,127 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
BSP Dungeon Generation | Xgundam05 | 5,326 Kb |
Cant get enough icecream in pure css3 | Melawire | 4,322 Kb |
Portfolio Landing Page | FDfranklin | 3,585 Kb |
Click handler test | Snapson | 2,329 Kb |
Hoi hoi | JohnTheCat | 7,248 Kb |
Wave Lines | Mikehobizal | 4,023 Kb |
See Through | Larrygeams | 77,410 Kb |
Static Image to Video Block | Grayghostvisuals | 4,864 Kb |
Base-Style | Daniel_gooss | 2,614 Kb |
Hamburger Menu Animation | Salmanraza | 2,580 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!