Firework types
How do I make an firework types?
What is a firework types? How do you make a firework types? This script and codes were developed by Sarah Cartwright on 05 December 2022, Monday.
Firework types - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Firework types</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> This Pen does nothing on its own - it is used in other pens. <script src="js/index.js"></script>
</body>
</html>
Firework types - Script Codes CSS Codes
body { padding: 10px; margin: 0px; background: #2e2e2e; color: #909090; font: 12px arial, sans-serif;
}
Firework types - Script Codes JS Codes
function generalParticleUpdate(particle){ particle.point.updatePosition(); particle.point.yv -= 0.01; if(particle.point.y < 0) particle.alive = false; if(particle.life > 0) { --particle.life; if(particle.life == 0) particle.alive = false; }
}
function groundBangParticle(){ this.point = new _3DPoint(); this.style = { red: 230, green: 255, blue: 110, opacity: 1, size: 3 } this.life = randomIntRange(90, 140); this.alive = true; this.type = "GroundBang"; this.initGroundBangPoint(this.point);
}
groundBangParticle.prototype.initGroundBangPoint = function (p){ p.x = 0; p.y = 0; p.z = 0; groundBangShape = { xMin: -0.7, xMax: 0.7, yMin: 1.1, yMax: 1.6, zMin: -0.7, zMax: 0.7, minPower: 0.4, maxPower: 0.6 } v = newVector(groundBangShape); p.xv = v.x; p.yv = v.y; p.zv = v.z;
}
groundBangParticle.prototype.update = function (isAnimated, okToAddParticleCount, particles){ if(!isAnimated) return; generalParticleUpdate(this); if(okToAddParticleCount > 5 && randomIntRange(0,100) < 5) particles.push(new sparkleParticle(this.point));
}
groundBangParticle.prototype.draw = function (cXP, cYP, scaledSize, XP, YP, scaledSizeH){ this.style.opacity = randomRealRange(0.4, 1); ctx.beginPath(); ctx.arc(cXP, cYP, scaledSize, 0, Math.PI*2, true); ctx.closePath(); ctx.fillStyle = 'rgba(' + this.style.red + ', ' + this.style.green + ', ' + this.style.blue + ', ' + this.style.opacity + ')'; ctx.fill();
}
/*
##############################################################################
*/
function sparkleParticle(parentPoint){ this.point = new _3DPoint(); this.style = { red: 100, green: 200, blue: 100, opacity: 1, size: 2 } this.life = randomIntRange(90, 140); this.alive = true; this.type = "Sparkle"; this.initSparklePoint(this.point, parentPoint);
}
sparkleParticle.prototype.update = function (isAnimated, okToAddParticleCount, particles){ if(!isAnimated) return; generalParticleUpdate(this);
}
sparkleParticle.prototype.initSparklePoint = function (thisPoint, parentPoint){ thisPoint.x = parentPoint.x-(parentPoint.xv*2); thisPoint.y = parentPoint.y-(parentPoint.yv*2); thisPoint.z = parentPoint.z-(parentPoint.zv*2); //No need for ranges, just use a smaller velocity from the main parent particle. /*sparkleShape = { xMin: 0, xMax: 0, yMin: 0, yMax: 0, zMin: 0, zMax: 0, minPower: 0, maxPower: 0 }*/ //v = newVector(sparkleShape); thisPoint.xv = parentPoint.xv/2; thisPoint.yv = parentPoint.yv/2; thisPoint.zv = parentPoint.zv/2;
}
sparkleParticle.prototype.draw = function (cXP, cYP, scaledSize, XP, YP, scaledSizeH){ this.style.opacity = randomRealRange(0, 1); ctx.beginPath(); ctx.arc(cXP, cYP, scaledSize, 0, Math.PI*2, true); ctx.closePath(); ctx.fillStyle = 'rgba(' + this.style.red + ', ' + this.style.green + ', ' + this.style.blue + ', ' + this.style.opacity + ')'; ctx.fill();
}
/*
##############################################################################
*/
function goldenStarRocketParticle(){ this.point = new _3DPoint(); this.style = { red: 255, green: 90, blue: 110, opacity: 1, size: 6 } this.life = randomIntRange(90, 140); this.alive = true; this.type = "GoldenStarRocket"; this.initGoldenStarRocketParticle(this.point);
}
goldenStarRocketParticle.prototype.initGoldenStarRocketParticle = function (p){ p.x = 0; p.y = 0; p.z = 0; GoldenStarRocketShape = { xMin: -0.2, xMax: 0.2, yMin: 1.4, yMax: 1.9, zMin: -0.2, zMax: 0.2, minPower: 1.0, maxPower: 1.3 } v = newVector(GoldenStarRocketShape); p.xv = v.x; p.yv = v.y; p.zv = v.z;
}
goldenStarRocketParticle.prototype.update = function (isAnimated, okToAddParticleCount, particles){ if(!isAnimated) return; generalParticleUpdate(this); if(okToAddParticleCount>1) particles.push(new goldenStarRocketStreamParticle(this.point)); if(okToAddParticleCount>4){ if(randomIntRange(0,100)<10){ var a={x: this.point.x, y: this.point.y, z: this.point.z}; a.x+=randomRealRange(-1,1); a.y+=randomRealRange(-1,1); a.z+=randomRealRange(-1,1); particles.push(new smokeParticle(a)); a.x+=randomRealRange(-1,1); a.y+=randomRealRange(-1,1); a.z+=randomRealRange(-1,1); particles.push(new smokeParticle(a)); } } if(this.alive == false){ var a={x: this.point.x, y: this.point.y, z: this.point.z}; for(var i=0; i<10; i++){ var seperation = 6; a.x+=randomRealRangeSlow(-seperation,seperation); a.y+=randomRealRangeSlow(-seperation,seperation); a.z+=randomRealRangeSlow(-seperation,seperation); particles.push(new smokeParticle(a)); } var starColorType = randomIntRangeSlow(0, 80); var red = 0, green = 0, blue = 0; if(starColorType<20){ red = 240; green = 20; blue = 20; }else if(starColorType>=20&&starColorType<40){ red = 20; green = 240; blue = 20; }else if(starColorType>=40&&starColorType<60){ red = 20; green = 20; blue = 240; }else if(starColorType>=60){ red = 240; green = 230; blue = 60; } if(particles.length < maxPartCount){ particles.push(new flashParticle(this.point, 255, 255, 255)); } for(var i=0; i<50; i++){ if(particles.length < maxPartCount){ particles.push(new goldenStarParticle(this.point, red, green, blue)); } } }
}
goldenStarRocketParticle.prototype.draw = function (cXP, cYP, scaledSize, XP, YP, scaledSizeH){ this.style.opacity = randomRealRange(0.4, 1); ctx.beginPath(); ctx.arc(cXP, cYP, scaledSize, 0, Math.PI*2, true); ctx.closePath(); ctx.fillStyle = 'rgba(' + this.style.red + ', ' + this.style.green + ', ' + this.style.blue + ', ' + this.style.opacity + ')'; //ctx.filter = "blur(2px)"; // Too slow! ctx.fill(); //ctx.filter = "blur(0px)";
}
/*
##############################################################################
*/
function goldenStarRocketStreamParticle(parentPoint){ this.point = new _3DPoint(); this.style = { red: 200, green: 200, blue: 110, opacity: 1, size: 4 } this.life = 40; this.alive = true; this.type = "GoldenStarStreamRocket"; this.initGoldenStarRocketStreamParticle(this.point, parentPoint);
}
goldenStarRocketStreamParticle.prototype.initGoldenStarRocketStreamParticle = function (p, parentPoint){ p.x = parentPoint.x - (parentPoint.xv*1.2); p.y = parentPoint.y - (parentPoint.yv*1.2); p.z = parentPoint.z - (parentPoint.zv*1.2); /* GoldenStarRocketStreamShape = { xMin: 0, xMax: 0, yMin: 0, yMax: 0, zMin: 0, zMax: 0, minPower: 0, maxPower: 0 }*/ //v = newVector(GoldenStarRocketStreamShape); p.xv = 0; p.yv = 0; p.zv = 0;
}
goldenStarRocketStreamParticle.prototype.update = function (isAnimated, okToAddParticleCount, particles){ if(!isAnimated) return; this.size = this.life/8; generalParticleUpdate(this);
}
goldenStarRocketStreamParticle.prototype.draw = function (cXP, cYP, scaledSize, XP, YP, scaledSizeH){ this.style.opacity =(this.life/40)/4; ctx.beginPath(); ctx.arc(cXP, cYP, scaledSize, 0, Math.PI*2, true); ctx.closePath(); ctx.fillStyle = 'rgba(' + this.style.red + ', ' + this.style.green + ', ' + this.style.blue + ', ' + this.style.opacity + ')'; //ctx.filter = "blur(2px)"; // Too slow! ctx.fill(); //ctx.filter = "blur(0px)";
}
/*
##############################################################################
*/
function goldenStarParticle(parentPoint, red, green, blue){ this.point = new _3DPoint(); this.style = { red: red, green: green, blue: blue, opacity: 1, size: 3 } this.life = randomIntRange(90, 140); this.alive = true; this.type = "GoldenStar"; this.initGoldenStarParticle(this.point, parentPoint);
}
goldenStarParticle.prototype.initGoldenStarParticle = function (p, parentPoint){ p.x = parentPoint.x; p.y = parentPoint.y; p.z = parentPoint.z; goldenStarShape = { xMin: -1.0, xMax: 1.0, yMin: -1.0, yMax: 1.0, zMin: -1.0, zMax: 1.0, minPower: 0.5, maxPower: 0.6 } //v = newVector(goldenStarShape); v = newRoundVector(goldenStarShape); p.xv = v.x;// + parentPoint.xv; p.yv = v.y;// + parentPoint.yv; p.zv = v.z;// + parentPoint.zv;
}
goldenStarParticle.prototype.update = function (isAnimated, okToAddParticleCount, particles){ if(!isAnimated) return; generalParticleUpdate(this); //Counteract some gravity... as these things are lightweight this.point.yv *= 0.6;
}
goldenStarParticle.prototype.draw = function (cXP, cYP, scaledSize, XP, YP, scaledSizeH){ this.style.opacity = randomIntRange(0, 100)<40 ? 1 : 0.2; ctx.beginPath(); ctx.arc(cXP, cYP, scaledSize, 0, Math.PI*2, true); ctx.closePath(); ctx.fillStyle = 'rgba(' + this.style.red + ', ' + this.style.green + ', ' + this.style.blue + ', ' + this.style.opacity + ')'; ctx.fill();
}
/*
##############################################################################
*/
function flashParticle(parentPoint, red, green, blue){ this.point = new _3DPoint(); this.style = { red: red, green: green, blue: blue, opacity: 1, size: 3 } this.life = 3; this.alive = true; this.type = "FlashParticle"; this.initFlashParticle(this.point, parentPoint);
}
flashParticle.prototype.initFlashParticle = function (p, parentPoint){ p.x = parentPoint.x; p.y = parentPoint.y; p.z = parentPoint.z; p.xv = 0; p.yv = 0; p.zv = 0;
}
flashParticle.prototype.update = function (isAnimated, okToAddParticleCount, particles){ if(!isAnimated) return; generalParticleUpdate(this); //Counteract some gravity... as these things don't move this.point.yv *= 0.6; //Live goes from 2 to 0 inclusive //thia.age = (3-this.life);// From 1 to 3 this.style.size = (this.life + 1) * 10; this.style.opacity = 0.15 * (this.life + 1);
}
flashParticle.prototype.draw = function (cXP, cYP, scaledSize, XP, YP, scaledSizeH){ //this.style.opacity = 1; //randomIntRange(0, 100)<40 ? 1 : 0.2; ctx.beginPath(); ctx.arc(cXP, cYP, scaledSize, 0, Math.PI*2, true); ctx.closePath(); ctx.fillStyle = 'rgba(' + this.style.red + ', ' + this.style.green + ', ' + this.style.blue + ', ' + this.style.opacity + ')'; ctx.fill();
}
Developer | Sarah Cartwright |
Username | SarahC |
Uploaded | December 05, 2022 |
Rating | 3 |
Size | 3,349 Kb |
Views | 20,240 |
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 |
OLED Emulator - Sprites | 7,784 Kb |
Bullet time - Fireworks | 5,737 Kb |
OLED Emulator - Horizontal bytes | 5,745 Kb |
Web-worker workload levelling | 2,797 Kb |
Canvas view-type arrays | 3,013 Kb |
Date Words | 3,352 Kb |
Tinted image renderer | 2,176 Kb |
3D Tools | 2,502 Kb |
Kindle - Convert image to 4 shade E-ink | 4,747 Kb |
3D Spatial hash | 2,084 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 |
Test | Dviate | 2,668 Kb |
Filtre ile Arama Kutusu - Search Box with Filter | AyhanALTINOK | 3,448 Kb |
CSS Bot Confusion | Jpod | 3,456 Kb |
Experiments with Vertical Centering | KatieK2 | 3,924 Kb |
Minimal Material Design Form Input | Koenigsegg1 | 3,076 Kb |
FontAwesome icons with animation | Nicotinell | 2,083 Kb |
Feedback Page | TessDiNapoli | 2,836 Kb |
NgEasyModal | Lorenzodianni | 4,159 Kb |
Underlined form fields | Mitchdot | 2,323 Kb |
Michelle, submit your photography to Unsplash. | Zaneriley | 3,368 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!