title: how to direct canvas elements into a funnel shape
body: <p>I have the following canvas animation for random 'rain' like gravity elements: </p>
  
  <pre><code>  $(document).ready(function() {
      var canvas = $('#canvas')[0];
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
  
      if(canvas.getContext) {
        var ctx = canvas.getContext('2d');
        var w = canvas.width;
        var h = canvas.height;
        ctx.strokeStyle = "rgba("+Math.round(Math.random())*255+", "+Math.round(Math.random())*255+", "+Math.round(Math.random())*255+", 0.5)";
        ctx.lineWidth = 1;
        ctx.lineCap = 'round';
  
  
        var init = [];
        var maxParts = 1000;
        for(var a = 0; a &lt; maxParts; a++) {
          init.push({
            x: Math.random() * w,
            y: Math.random() * h,
            l: Math.random() * 1,
            xs: -4 + Math.random() * 4 + 2,
            ys: Math.random() * 10 + 10
          })
        }
  
        var particles = [];
        for(var b = 0; b &lt; maxParts; b++) {
          particles[b] = init[b];
        }
  
        function draw() {
          ctx.clearRect(0, 0, w, h);
          for(var c = 0; c &lt; particles.length; c++) {
            var p = particles[c];
            ctx.beginPath();
            ctx.moveTo(p.x, p.y);
            ctx.lineTo(p.x + p.l * p.xs, p.y + p.l * p.ys);
            ctx.stroke();
          }
          move();
        }
  
        function move() {
          for(var b = 0; b &lt; particles.length; b++) {
            var p = particles[b];
            p.x += p.xs;
            p.y += p.ys;
            if(p.x &gt; w || p.y &gt; h) {
              p.x = Math.random() * w;
              p.y = -20;
            }
          }
        }
  
        setInterval(draw, 30);
  
      }
    });
  </code></pre>
  
  <p><a href="https://codepen.io/chriscamplin/pen/OXyeVP" rel="nofollow">https://codepen.io/chriscamplin/pen/OXyeVP</a></p>
  
  <p>How could I extend this to collect the elements in a funnel shape and narrow them down, almost like a hourglass timer.</p>