Fireworks

Developer
Chris Hanson
Size
3,514 Kb
Views
10,120
  1. Fireworks Previews
  2. Fireworks HTML Codes
  3. Fireworks CSS Codes
  4. Fireworks JS Codes

How do I make an fireworks?

What is a fireworks? How do you make a fireworks? This script and codes were developed by Chris Hanson on 01 October 2022, Saturday.

Fireworks Previews
IQ Test

Fireworks - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fireworks</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html, body { padding: 0; margin: 0; height: 100%; background: black;
}
canvas { display: block;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <canvas></canvas> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Fireworks - Script Codes CSS Codes

html, body { padding: 0; margin: 0; height: 100%; background: black;
}
canvas { display: block;
}

Fireworks - Script Codes JS Codes

(function () { 'use strict'; var canvas = document.querySelector('canvas'), ctx = canvas.getContext('2d'), W = canvas.width = window.innerWidth, H = canvas.height = window.innerHeight, maxP = 350, minP = 100, fireworks = []; function tick() { var newFireworks = []; ctx.clearRect(0, 0, W, H); fireworks.forEach(function (firework) { firework.draw(); if (!firework.done) newFireworks.push(firework); }); fireworks = newFireworks; window.requestAnimationFrame(tick); } function Vector(x, y) { this.x = x; this.y = y; } Vector.prototype = { constructor: Vector, add: function (vector) { this.x += vector.x; this.y += vector.y; }, diff: function (vector) { var target = this.copy(); return Math.sqrt( (target.x-=vector.x) * target.x + (target.y-=vector.y) * target.y ); }, copy: function () { return new Vector(this.x, this.y); } }; var colors = [ ['rgba(179,255,129,', 'rgba(0,255,0,'], //green / white ['rgba(0,0,255,', 'rgba(100,217,255,'], //blue / cyan ['rgba(255,0,0,', 'rgba(255,255,0,'], //red / yellow ['rgba(145,0,213,', 'rgba(251,144,204,'] //purple / pink ]; function Firework(start, target, speed) { this.start = start; this.pos = this.start.copy(); this.target = target; this.spread = Math.round(Math.random() * (maxP-minP)) + minP; this.distance = target.diff(start); this.speed = speed || Math.random() * 5 + 15; this.angle = Math.atan2(target.y - start.y, target.x - start.x); this.velocity = new Vector( Math.cos(this.angle) * this.speed, Math.sin(this.angle) * this.speed ); this.particals = []; this.prevPositions = []; var colorSet = colors[Math.round(Math.random() * (colors.length -1))]; for (var i=0; i<this.spread; i++) { this.particals.push(new Partical(target.copy(), colorSet)); } } Firework.prototype = { constructor: Firework, draw: function () { var last = this.prevPositions[this.prevPositions.length -1] || this.pos; ctx.beginPath(); ctx.moveTo(last.x, last.y); ctx.lineTo(this.pos.x, this.pos.y); ctx.strokeStyle = 'rgba(255,255,255,.7)'; ctx.stroke(); this.update(); }, update: function () { if (this.start.diff(this.pos) >= this.distance) { var newParticals = []; this.particals.forEach(function (partical) { partical.draw(); if (!partical.done) newParticals.push(partical); }); this.particals = newParticals; this.prevPositions = []; if (!newParticals.length) this.done = true; } else { this.prevPositions.push(this.pos.copy()); if (this.prevPositions.length > 8) { this.prevPositions.shift(); } this.pos.add(this.velocity); } } }; function Partical(pos, colors) { this.pos = pos; this.ease = 0.2; this.speed = Math.random() * 6 + 2; this.gravity = Math.random() * 3 + 0.1; this.alpha = .8; this.angle = Math.random() * (Math.PI*2); this.color = colors[Math.round(Math.random() * (colors.length - 1))]; this.prevPositions = []; } Partical.prototype = { constructor: Partical, draw: function () { var last = this.prevPositions[this.prevPositions.length -1] || this.pos; ctx.beginPath(); ctx.moveTo(last.x, last.y); ctx.lineTo(this.pos.x, this.pos.y); ctx.strokeStyle = this.color + this.alpha + ')'; ctx.stroke(); this.update(); }, update: function () { if (this.alpha <= 0) { this.done = true; } else { this.prevPositions.push(this.pos.copy()); if (this.prevPositions.length > 10) this.prevPositions.shift(); if (this.speed > 1) this.speed -= this.ease; this.alpha -= 0.01; this.gravity += 0.01; this.pos.add({ x: Math.cos(this.angle) * this.speed, y: Math.sin(this.angle) * this.speed + this.gravity }); } } }; function addFirework(target) { var startPos = new Vector(W/2, H); target = target || new Vector(Math.random() * W, Math.random() * (H - 300)); fireworks.push(new Firework(startPos, target)); } canvas.addEventListener('click', function (e) { addFirework(new Vector(e.clientX, e.clientY)) }, false); function randomFirework() { addFirework(); window.setTimeout(randomFirework, Math.random() * 500); } tick(); randomFirework();
})();
Fireworks - Script Codes
Fireworks - Script Codes
Home Page Home
Developer Chris Hanson
Username chrishanson
Uploaded October 01, 2022
Rating 3.5
Size 3,514 Kb
Views 10,120
Do you need developer help for Fireworks?

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!

Chris Hanson (chrishanson) Script Codes
Name
Ui-select with tree navigation
Nested rotating shapes
Particle Emitter
Uiselect ie8 issues
A Pen by Chris Hanson
Alternating rotating shaps
Css spinner
Rotating 3d cube
Hello World
Photo crop prototype
Create amazing love letters with AI!

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!