Fireworks : just want to test something new

lalu24 (44)in #programming • 7 years ago (edited)

I hade made a fireworks art from js for our cricket tournament named as bwmct but i couldn't show it .. so here my code is :

Paste it in your computer and see the results .
If you like it dont forget to upvote .

Here what it looks like

    <title>Congrats</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
  <div id="wrap">
    <div id="talkbubble">
    </div>
    <p id="cc">BWCMT II</p>
    <br />
    <br />
    <span id="cs">Congrats KCT</span>
  </div>
</body>

css tag

@import url("https://fonts.googleapis.com/css?family=Poiret+One|Yatra+One");

body {
margin: 0;
text-align: center;
background-color: #ddd;
font-family: "Poiret One";
color: #fff;
}

#wrap {
margin: 80px auto;
position: absolute;
width: 100%;
display: block;
}

.count{
font-size: 26pt;
color: #005dea;
font-weight: 600;
}
#cs, #cc, #e{
display: none;
}

#cs {
font-size: 18pt;
color: #aafefa;
font-family: "Yatra One";
}

#e{
font-size: 64pt;
}

var SCREEN_WIDTH = window.innerWidth,
SCREEN_HEIGHT = window.innerHeight,
mousePos = {
x: 400,
y: 300
},

// create canvas
canvas = document.createElement('canvas'),
context = canvas.getContext('2d'),
particles = [],
rockets = [],
MAX_PARTICLES = 400,
colorCode = 0;

// init
$(document).ready(function() {
document.body.appendChild(canvas);
canvas.width = SCREEN_WIDTH;
canvas.height = SCREEN_HEIGHT;
setInterval(launch, 800);
setInterval(loop, 1000 / 50);
});

// update mouse position
$(document).mousemove(function(e) {
e.preventDefault();
mousePos = {
x: e.clientX,
y: e.clientY
};
});

// launch more rockets!!!
$(document).mousedown(function(e) {
for (var i = 0; i < 5; i++) {
launchFrom(Math.random() * SCREEN_WIDTH * 2 / 3 + SCREEN_WIDTH / 6);
}
});

function launch() {
launchFrom(mousePos.x);
}

function launchFrom(x) {
if (rockets.length < 10) {
var rocket = new Rocket(x);
rocket.explosionColor = Math.floor(Math.random() * 360 / 10) * 10;
rocket.vel.y = Math.random() * -3 - 4;
rocket.vel.x = Math.random() * 6 - 3;
rocket.size = 8;
rocket.shrink = 0.999;
rocket.gravity = 0.01;
rockets.push(rocket);
}
}

function loop() {
// update screen size
if (SCREEN_WIDTH != window.innerWidth) {
canvas.width = SCREEN_WIDTH = window.innerWidth;
}
if (SCREEN_HEIGHT != window.innerHeight) {
canvas.height = SCREEN_HEIGHT = window.innerHeight;
}

// clear canvas
context.fillStyle = "rgba(0, 0, 0, 0.05)";
context.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);

var existingRockets = [];

for (var i = 0; i < rockets.length; i++) {
    // update and render
    rockets[i].update();
    rockets[i].render(context);

    // calculate distance with Pythagoras
    var distance = Math.sqrt(Math.pow(mousePos.x - rockets[i].pos.x, 2) + Math.pow(mousePos.y - rockets[i].pos.y, 2));

    // random chance of 1% if rockets is above the middle
    var randomChance = rockets[i].pos.y < (SCREEN_HEIGHT * 2 / 3) ? (Math.random() * 100 <= 1) : false;

/* Explosion rules
- 80% of screen
- going down
- close to the mouse
- 1% chance of random explosion
*/
if (rockets[i].pos.y < SCREEN_HEIGHT / 5 || rockets[i].vel.y >= 0 || distance < 50 || randomChance) {
rockets[i].explode();
} else {
existingRockets.push(rockets[i]);
}
}

rockets = existingRockets;

var existingParticles = [];

for (var i = 0; i < particles.length; i++) {
    particles[i].update();

    // render and save particles that can be rendered
    if (particles[i].exists()) {
        particles[i].render(context);
        existingParticles.push(particles[i]);
    }
}

// update array with existing particles - old particles should be garbage collected
particles = existingParticles;

while (particles.length > MAX_PARTICLES) {
    particles.shift();
}

}

function Particle(pos) {
this.pos = {
x: pos ? pos.x : 0,
y: pos ? pos.y : 0
};
this.vel = {
x: 0,
y: 0
};
this.shrink = .97;
this.size = 2;

this.resistance = 1;
this.gravity = 0;

this.flick = false;

this.alpha = 1;
this.fade = 0;
this.color = 0;

}

Particle.prototype.update = function() {
// apply resistance
this.vel.x *= this.resistance;
this.vel.y *= this.resistance;

// gravity down
this.vel.y += this.gravity;

// update position based on speed
this.pos.x += this.vel.x;
this.pos.y += this.vel.y;

// shrink
this.size *= this.shrink;

// fade out
this.alpha -= this.fade;

};

Particle.prototype.render = function(c) {
if (!this.exists()) {
return;
}

c.save();

c.globalCompositeOperation = 'lighter';

var x = this.pos.x,
    y = this.pos.y,
    r = this.size / 2;

var gradient = c.createRadialGradient(x, y, 0.1, x, y, r);
gradient.addColorStop(0.1, "rgba(255,255,255," + this.alpha + ")");
gradient.addColorStop(0.8, "hsla(" + this.color + ", 100%, 50%, " + this.alpha + ")");
gradient.addColorStop(1, "hsla(" + this.color + ", 100%, 50%, 0.1)");

c.fillStyle = gradient;

c.beginPath();
c.arc(this.pos.x, this.pos.y, this.flick ? Math.random() * this.size : this.size, 0, Math.PI * 2, true);
c.closePath();
c.fill();

c.restore();

};

Particle.prototype.exists = function() {
return this.alpha >= 0.1 && this.size >= 1;
};

function Rocket(x) {
Particle.apply(this, [{
x: x,
y: SCREEN_HEIGHT}]);

this.explosionColor = 0;

}

Rocket.prototype = new Particle();
Rocket.prototype.constructor = Rocket;

Rocket.prototype.explode = function() {
var count = Math.random() * 10 + 80;

for (var i = 0; i < count; i++) {
    var particle = new Particle(this.pos);
    var angle = Math.random() * Math.PI * 2;

    // emulate 3D effect by using cosine and put more particles in the middle
    var speed = Math.cos(Math.random() * Math.PI / 2) * 15;

    particle.vel.x = Math.cos(angle) * speed;
    particle.vel.y = Math.sin(angle) * speed;

    particle.size = 10;

    particle.gravity = 0.2;
    particle.resistance = 0.92;
    particle.shrink = Math.random() * 0.05 + 0.93;

    particle.flick = true;
    particle.color = this.explosionColor;

    particles.push(particle);
}

};

Rocket.prototype.render = function(c) {
if (!this.exists()) {
return;
}

c.save();

c.globalCompositeOperation = 'lighter';

var x = this.pos.x,
    y = this.pos.y,
    r = this.size / 2;

var gradient = c.createRadialGradient(x, y, 0.1, x, y, r);
gradient.addColorStop(0.1, "rgba(255, 255, 255 ," + this.alpha + ")");
gradient.addColorStop(1, "rgba(0, 0, 0, " + this.alpha + ")");

c.fillStyle = gradient;

c.beginPath();
c.arc(this.pos.x, this.pos.y, this.flick ? Math.random() * this.size / 2 + this.size / 2 : this.size, 0, Math.PI * 2, true);
c.closePath();
c.fill();

c.restore();

};

Thank you for your support

#steemeitducation #javascript #fireworks #fun

7 years ago in #programming by lalu24 (44)

$0.07

4 votes

Fireworks : just want to test something new

I hade made a fireworks art from js for our cricket tournament named as bwmct but i couldn't show it .. so here my code is :

css tag

Js tag