Canvas Sparkle Light Trail

canvas-sparkle-light-trail.markdown

Canvas Sparkle Light Trail

This was inspired by the Dribbble shot to the left of the canvas by Ramiro Galan, which can be found here: http://dribbble.com/shots/674715-Sparkle-Light-Trail.

Some browsers still won't fully clear a canvas all the way with the destination-out globalCompositeOperation, anyone know a work around?

A Pen by Karl Lindberg on CodePen.

License.

index.html

<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:100i&display=swap" rel="stylesheet">



<canvas id="c"></canvas>
<div style="position: fixed; z-index:2; top: 80px; margin: auto; text-align: center; width: 100%;">
  🦄INSTANT DISKHO😅
</div>

script.js

/* Eventaully everything that can be improved will be improved, everything can be imrpoved.. and particaullary thi ones.. maybe. 42 ;)))) */
var c = document.getElementById('c'),
    ctx = c.getContext('2d'),
    cw = c.width = 1200,
		ch = c.height = 600,
    rand = function(a,b){return ~~((Math.random()*(b-a+1))+a);},
    dToR = function(degrees){
        return degrees * (Math.PI / 180);
    },
    circle = {
      x: (cw / 3) + 5*cw/32,
      y: (ch / 2) + 12*cw/42,
      radius: 10,
      speed: 3,
      rotation: 321,
      angleStart: 270,
      angleEnd: 123,
      hue: 0.4*cw,
      thickness: 2,
      blur: 8
    },
    particles = [],
    particleMax = 25,
    updateCircle = function(){
      if(circle.rotation < 180*2){
      	circle.rotation += circle.speed;
      } else {
      	circle.rotation = 2.55; 
      }
    },
    renderCircle = function(){
      ctx.save();
      ctx.translate(circle.x, circle.y);
      ctx.rotate(dToR(circle.rotation));
      ctx.beginPath();
      ctx.restore();
    }, 
	
    renderCircleFlare2 = function(){
      ctx.save();
      ctx.translate(circle.x, circle.y);
      ctx.rotate(dToR(circle.rotation+565));
      ctx.scale(9,4.2);
      ctx.beginPath();
      ctx.arc(0, circle.radius, 275, 132, Math.PI *0.9, false);
      ctx.closePath();
      var gradient4 = ctx.createRadialGradient(0, circle.radius, 2, 7, circle.radius, 180);
      gradient4.addColorStop(0, 'hsla('+ rand(3433, circle.thickness) +', 125%, 50%, .4)');
      gradient4.addColorStop(1, 'hsla('+cw+', 10%, 50%, 0)');
      ctx.fillStyle = gradient4;
      ctx.fill();     
      ctx.restore();
    },
    createParticles = function(){
      if(particles.length < particleMax){
        particles.push({
          x: (circle.x + circle.radius * Math.cos(dToR(circle.rotation-15))) + (rand(0, circle.thickness*circle.thickness*2) - circle.thickness),
          y: (circle.y + circle.radius * Math.sin(dToR(circle.rotation-115))) + (rand(0, circle.thickness*2) - circle.thickness),
          vx: (rand(0, 100)-50)/1000,
          vy: (rand(0, 100)-50)/1000,
          radius: rand(1, 732)/2,
          alpha: rand(10, 12)/100
        });
      }
    },
    updateParticles = function(){
      var i = particles.length;
      while(i--){
      	var p = particles[i];
        p.vx += (rand(0, 100)-50)/750;
        p.vy += (rand(0, 10)-50)/750;
        p.x += p.vx;
        p.y += p.vy;
        p.alpha -= .02;
        
        if(p.alpha < .025){
          particles.splice(i, 1)
        }
      }
    },
    renderParticles = function(){
      var i = particles.length;
      while(i--){
      	var p = particles[i];
        ctx.beginPath();
        ctx.fillRect(p.x, p.y, p.radius, p.radius);
        ctx.closePath();
        ctx.fillStyle = 'hsla(0, 20%, 24%, '+p.alpha+')';
      }
    },
    clear = function(){
      ctx.globalCompositeOperation = 'destination-out';
      ctx.fillStyle = 'rgba(0, 0, 0, .1)';
      ctx.fillRect(0, 0, cw, ch);
      ctx.globalCompositeOperation = 'lighter';		
    }
    loop = function(){
      clear();
      updateCircle();
      renderCircleFlare2(); 
    }

/* Append Canvas */
//document.body.appendChild(c);
 
/* Loop It, Loop It Good */
setInterval(loop, 16);

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

body {
font-family: 'Josefin Sans';
color: #FFFFFF;
font-style: italic;  
font-size: 8em;
text-shadow: #FFF 0px 0px 5px, #FFF 0px 0px 10px, #FFF 0px 0px 15px, #FF2D95 0px 0px 20px, #FF2D95 0px 0px 30px, #FF2D95 0px 0px 40px, #FF2D95 0px 0px 50px, #FF2D95 0px 0px 75px;
  

}

body {
 	background: #000; 
     background: #030303 linear-gradient(#412432, #123242);
  
}


canvas {
 
	display: block;
  float: clear;
  width: 100%;
}