Javascript: Confetti particles falling down in canvas

Question

I found this great script to make it rain confetti: http://jsfiddle.net/hcxabsgh/ Note how the particles have this twist/turn/skew-effect to make it feel more natural.

I have been trying to make the particles round which also works nicely: http://jsfiddle.net/rqr9hb7x/2/

But i can't get the particles to twist/turn/skew around their axes like in the rectangular example.

I figured it should be doable with ctx.setTransform(), since it handles skew-parameters, but it seems to skew the whole canvas instead of the single particle. Anyone an idea on how to approach this properly?

this.draw = function () {
    ctx.beginPath();
    ctx.save();
    //ctx.setTransform(1, 0, 0, 1, 0, 0); // straigt
    ctx.setTransform(1, .3, 0, .7, 0, 0); // skewed - to make dynamic
    ctx.arc(this.x + this.tilt, this.y + this.tilt + (this.r / 4), (this.r / 2), 0, Math.PI * 2, false);
    ctx.restore();
    ctx.fillStyle = this.color;
    return ctx.fill();
}

Answer 1

Skew using setTransform

You want to rotate the particles local x axis over time. The x axis is the first two arguments of setTransform . To rotate that axis over time you use cos(angle) and sin(angle) to set the x and y component of the x axis.

As you want that to be local to the particle you need to also set the particle origin (point of rotation) and then draw the particle at 0,0. The origin is the last two arguments of setTransform

The draw function you want is

draw() {
    ctx.fillStyle = this.color;
    ctx.beginPath();
    ctx.setTransform(
        Math.cos(this.tiltAngle),  // set the x axis to the tilt angle
        Math.sin(this.tiltAngle),
        0, 1, 
        this.x, this.y    // set the origin
    ); 
    ctx.arc(0, 0, (this.r / 2), 0, Math.PI * 2, false); // draw at origin (0,0)
    ctx.fill();
}

Example

Looking at the code at the fiddle given, i could not work out what they were trying to do as it was way over complicated, so I rewrote the whole thing which now takes a 3rd as much code and no jQuery.

Run demo for the FX you are after...

maybe????

 (function () { requestAnimationFrame(mainLoop); const ctx = canvas.getContext("2d"); var W,H; var confetti = new Particles(); var droppedCount = 0; var particlesPerFrame = 1.5; var wind = 0; var windSpeed = 1; const windSpeedMax = 1; const windChange = 0.01; const windPosCoef = 0.002; const maxParticlesPerFrame = 2; //max particles dropped per frame var id = 0; stopButton.addEventListener("click",() => particlesPerFrame = 0 ); startButton.addEventListener("click",() => particlesPerFrame = maxParticlesPerFrame); const randI = (min, max = min + (min = 0)) => (Math.random() * (max - min) + min) | 0; const rand = (min = 1, max = min + (min = 0)) => Math.random() * (max - min) + min; const colors = { options: "DodgerBlue,OliveDrab,Gold,pink,SlateBlue,lightblue,Violet,PaleGreen,SteelBlue,SandyBrown,Chocolate,Crimson".split(","), index: 0, step: 10, get color() { return colors.options[((colors.index++) / colors.step | 0) % colors.options.length] } } function Confetti() { this.setup() } Confetti.prototype = { setup(){ this.x = rand(-35,W + 35); this.y = rand(-30,-35); this.r = rand(10, 30); this.d = rand(150) + 10; //density; this.color = colors.color; this.tilt = randI(10); this.tiltAngleIncremental = (rand(0.08) + 0.04) * (rand() < 0.5 ? -1 : 1); this.tiltAngle = 0; this.angle = rand(Math.PI * 2); this.id = id++; return this; }, update() { this.tiltAngle += this.tiltAngleIncremental * (Math.cos(wind + (this.d + this.x + this.y) * windPosCoef) * 0.2 + 1); this.y += (Math.cos(this.angle + this.d) + 3 + this.r / 2) / 2; this.x += Math.sin(this.angle); this.x += Math.cos(wind + (this.d + this.x + this.y) * windPosCoef) * windSpeedMax; this.y += Math.sin(wind + (this.d + this.x + this.y) * windPosCoef) * windSpeedMax; this.tilt = (Math.sin(this.tiltAngle - (this.id / 3))) * 15; return this.y > H; // returns true if particle is past bottom }, draw() { ctx.fillStyle = this.color; ctx.beginPath(); ctx.setTransform( Math.cos(this.tiltAngle), // set the x axis to the tilt angle Math.sin(this.tiltAngle), 0, 1, this.x, this.y // set the origin ); ctx.arc(0, 0, (this.r / 2), 0, Math.PI * 2, false); ctx.fill(); } } function Particles() { const items = []; const pool = []; this.update = function() { for (var i = 0; i < items.length; i++) { if(items[i].update() === true){ pool.push(items.splice(i--,1)[0]) } } } this.draw = function() { for (var i = 0; i < items.length; i++) { items[i].draw() } } this.add = function() { if (pool.length > 0) { items.push(pool.pop().setup()) } else { items.push(new Confetti()) } } } function mainLoop(time) { if (W !== innerWidth || H !== innerHeight) { W = canvas.width = innerWidth; H = canvas.height = innerHeight; } else { ctx.setTransform(1,0,0,1,0,0); ctx.clearRect(0, 0, W, H); } windSpeed = Math.sin(time / 8000) * windSpeedMax; wind += windChange; while(droppedCount < particlesPerFrame){ droppedCount += 1; confetti.add(); } droppedCount -= particlesPerFrame; confetti.update(); confetti.draw(); requestAnimationFrame(mainLoop); } })(); 

 * { margin: 0; padding: 0; } body { /*You can use any kind of background here.*/ background: transparent; } canvas { display: block; position: relative; zindex: 1; pointer-events: none; } #content { text-align: center; width: 500px; height: 300px; position: absolute; top: 50%; left: 50%; margin-left: -250px; margin-top: -150px; color: silver; font-family: verdana; font-size: 45px; font-weight: bold; } .buttonContainer { display: inline-block; } button { padding: 5px 10px; font-size: 20px; } 

 <div id="content"> Confetti World <br /> I 💙 confetti! <br /> <div class="buttonContainer"> <button id="stopButton">Stop Confetti</button> <button id="startButton">Drop Confetti</button> </div> </div> <canvas id="canvas"></canvas> 

Note Some of this code and content has been copied from this fiddle .