Reputation: 47

Javascript confetti blast effect

I was able to find this code to create a javascript confetti blast. However, I need three main colours for the confetti, and for the confetti, to be squares. Any help would be much appreciated.

Below is the code

// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       || 
		  window.webkitRequestAnimationFrame || 
		  window.mozRequestAnimationFrame    || 
		  window.oRequestAnimationFrame      || 
		  window.msRequestAnimationFrame     || 
		  function( callback ){
			window.setTimeout(callback, 1000 / 60);
		  };
})();

var canvas = document.getElementById("canvas"),
	ctx = canvas.getContext("2d"),
	W = window.innerWidth,
	H = window.innerHeight,
	circles = [];

canvas.width = W;
canvas.height = H; 

//Random Circles creator
function create() {
	
	//Place the circles at the center
	
	this.x = W/2;
	this.y = H/2;

	
	//Random radius between 2 and 6
	this.radius = 2 + Math.random()*3; 
	
	//Random velocities
	this.vx = -5 + Math.random()*10;
	this.vy = -5 + Math.random()*10;
	
	//Random colors
	this.r = Math.round(Math.random())*255;
	this.g = Math.round(Math.random())*255;
	this.b = Math.round(Math.random())*255;
}

for (var i = 0; i < 500; i++) {
	circles.push(new create());
}

function draw() {
	
	//Fill canvas with black color
    ctx.globalCompositeOperation = "source-over";
    ctx.fillStyle = "rgba(0,0,0,0.15)";
    ctx.fillRect(0, 0, W, H);
	
	//Fill the canvas with circles
	for(var j = 0; j < circles.length; j++){
		var c = circles[j];
		
		//Create the circles
		ctx.beginPath();
		ctx.arc(c.x, c.y, c.radius, 0, Math.PI*2, true);
        ctx.fillStyle = "rgba("+c.r+", "+c.g+", "+c.b+", 1)";
		ctx.fill();
		
		c.x += c.vx;
		c.y += c.vy;
		c.radius -= .02;
		
		if(c.radius > 3)
			circles[j] = new create();
	}
}

function animate() {
	requestAnimFrame(animate);
	draw();
}

animate();

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style type="text/css">
	
	body{
	padding: 0; margin: 0;
	min-height: 400px; height: 100%;
	width: 100%;
	overflow: hidden;
	background-color: #000000;
}
</style>
</head>

<body>
<canvas id="canvas"></canvas>
<script src="explosion.js"></script>
</body>
</html>

Upvotes: 0

Answers (4)

benmoses

Reputation: 31

I wrote up an alternative solution. I noticed your current solutions had some runtime error, also a lot of unnecessary code (IMO - might be cleaner or easier to read?) and painted the whole rectangle canvas, you could apply this as a background colour via CSS, or leave as transparent as you probably want the confetti to show over something?

https://codepen.io/BenMoses/pen/MWyEePJ

ctx.globalCompositeOperation = "source-over"; //not needed as is default.
// shim layer with setTimeout fallback ? This is globally support so probably unnecessary?
//this.radius = 2 + Math.random()*3;  //this is only for circles so can be removed
// all circle references should be updated to rect or square or confetti and confetto (a single confetti :o )

Upvotes: 1

Marilyn

Reputation: 47

Here is the final code, thank you Stephen Brickner for all the help. I've learned a hell of alot

    // shim layer with setTimeout fallback
    window.requestAnimFrame = (function(){
      return  window.requestAnimationFrame       || 
              window.webkitRequestAnimationFrame || 
              window.mozRequestAnimationFrame    || 
              window.oRequestAnimationFrame      || 
              window.msRequestAnimationFrame     || 
              function( callback ){
                window.setTimeout(callback, 1000 / 60);
              };
    })();

    var canvas = document.getElementById("canvas"),
        ctx = canvas.getContext("2d"),
        W = window.innerWidth,
        H = window.innerHeight,
        circles = [];

    canvas.width = W;
    canvas.height = H; 

    //Random Circles creator
    function create() {

        //Place the circles at the center

        this.x = W/2;
        this.y = H/2;


        //Random radius between 2 and 6
        this.radius = 2 + Math.random()*3; 

        //Random velocities
        this.vx = -10 + Math.random()*30;
        this.vy = -10 + Math.random()*30;
    }

    for (var i = 0; i < 100; i++) {
        circles.push(new create());
    }

    function draw() {

        //Fill canvas with black color
        ctx.globalCompositeOperation = "source-over";
        ctx.fillStyle = "rgba(175,38,28,255)";
        ctx.fillRect(0, 0, W, H);

        var myColors = ["e8e8e8", "a98547", "ccac7b"];
        var which = 0;

        //Fill the canvas with circles
        for(var j = 0; j < circles.length; j++){
            var c = circles[j];

            //Create the circles
            ctx.beginPath();
            //ctx.arc(c.x, c.y, c.radius, 0, Math.PI*2, true);
            ctx.fillRect(c.x , c.y, 8, 8); //change to box

            //ctx.fillStyle = "rgba("+c.r+", "+c.g+", "+c.b+", 1)";
            ctx.fillStyle = "#" + myColors[which].toString();
            ctx.fill();

            c.x += c.vx;
            c.y += c.vy;
            c.radius -= .02;

            if(c.radius > 3)
                circles[j] = new create();

            if(which < myColors.length - 1) {
                which++;
            }
            else {
                which = 0;
            }
        }
    }

    function animate() {
        requestAnimFrame(animate);
        draw();
    }

    animate();

Upvotes: 0

Stephen Brickner

Reputation: 2602

There are just a couple of places to modify (commented below).

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    body{
        padding: 0; margin: 0;
        min-height: 400px; height: 100%;
        width: 100%;
        overflow: hidden;
        background-color: #000000;
    }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
    <script>
        // shim layer with setTimeout fallback
        window.requestAnimFrame = (function(){
          return  window.requestAnimationFrame       || 
                  window.webkitRequestAnimationFrame || 
                  window.mozRequestAnimationFrame    || 
                  window.oRequestAnimationFrame      || 
                  window.msRequestAnimationFrame     || 
                  function( callback ){
                    window.setTimeout(callback, 1000 / 60);
                  };
        })();

        var canvas = document.getElementById("canvas"),
            ctx = canvas.getContext("2d"),
            W = window.innerWidth,
            H = window.innerHeight,
            circles = [];

        canvas.width = W;
        canvas.height = H; 

        //Random Circles creator
        function create() {

            //Place the circles at the center

            this.x = W/2;
            this.y = H/2;


            //Random radius between 2 and 6
            this.radius = 2 + Math.random()*3; 

            //Random velocities
            this.vx = -5 + Math.random()*10;
            this.vy = -5 + Math.random()*10;
        }

        for (var i = 0; i < 500; i++) {
            circles.push(new create());
        }

        function draw() {

            //Fill canvas with black color
            ctx.globalCompositeOperation = "source-over";
            ctx.fillStyle = "rgba(0,0,0,0.15)";
            ctx.fillRect(0, 0, W, H);

            var myColors = ["e8e8e8", "a98547", "ccac7b"];
            var which = 0;

            //Fill the canvas with circles
            for(var j = 0; j < circles.length; j++){
                var c = circles[j];

                //Create the circles
                ctx.beginPath();
                //ctx.arc(c.x, c.y, c.radius, 0, Math.PI*2, true);
                ctx.fillRect(c.x , c.y, 20, 20); //change to box

                //ctx.fillStyle = "rgba("+c.r+", "+c.g+", "+c.b+", 1)";
                ctx.fillStyle = "#" + myColors[which].toString();
                ctx.fill();

                c.x += c.vx;
                c.y += c.vy;
                c.radius -= .02;

                if(c.radius > 3)
                    circles[j] = new create();

                if(which < myColors.length - 1) {
                    which++;
                }
                else {
                    which = 0;
                }
            }
        }

        function animate() {
            requestAnimFrame(animate);
            draw();
        }

        animate();
    </script>
</body>

</html>

Upvotes: 0

epascarello

Reputation: 207537

Pass in the index and use modulus operator to determine what color to set. Basic idea:

function create(ind) {

    /* other code */    

    if(ind%3===0) { /* set color one */ }
    else if (ind%2===0) { /* set color two */ }
    else { /* set color three */ }     
}

for (var i = 0; i < 500; i++) {
    circles.push(new create(i));
}

Hopefully you figure out you need to change the this.r, this.g, and this.b values to match the color you need.

Upvotes: 0

Javascript confetti blast effect

Answers (4)

Related Questions