6000 Particles

Testing the limits of the fabric.util.requestAnimFrame function.

by brady houseknecht

HTML

<script src="https://unpkg.com/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.3/fabric.js"></script>
<canvas id="fiddle">
  </canvas>
  
  
  <script>
    document.write('<a id="githubLink" href="https://github.com/bradyhouse/house/tree/master/fiddles/jquery/fiddle-0072-6000Particles"' +
      '><img style="z-index: 1000; position: absolute; top: 0; right: 0; border: 0;" ' +
      'src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" ' +
      'alt="Fork me on GitHub"><\/a>');
  </script>

JavaScript

(function() {
  var total = 6000,
    blobs = new Array(total),
    myfps = 60,
    updateTime = 6000 / myfps,
    mouse_pos = { x: 0, y: 0 },
    canvas = this.__canvas = new fabric.Canvas('fiddle', {
      width: window.innerWidth,
      height: window.innerHeight,
      renderOnAddRemove: false,
      selection: false
    }),
    maxx = canvas.width,
    maxy = canvas.height,
    msg, startTime, prevTime, ms, frames;

  fabric.Image.fromURL('https://s3.amazonaws.com/brady.house/blob.png', blobLoaded);

  canvas.on('mouse:move', function(options) {
    mouse_pos = canvas.getPointer(options.e);
  });

  function blobLoaded(img) {
    for (var i = 0; i < total; i++) {
      var img2 = new fabric.Image(img.getElement(), {
        left: Math.random() * maxx,
        top: Math.random() * maxy,
        selectable: false
      });
      img2.vx = 0;
      img2.vy = 0;
      canvas.add(img2);
      blobs[i] = img2;
    }

    msg = new fabric.Text('FPS: 0/' + myfps, {
      fontFamily: 'Arial',
      fontSize: 12,
      fill: 'white',
      fontWeight: 'bold',
      left: 50,
      top: 35,
      selectable: false
    });
    canvas.add(msg);

    frames = 0;
    startTime = Date.now(), prevTime = startTime;
    animate();
  }

  function animate() {
    for (var i = 0; i < total; i++) {
      var blob = blobs[i];
      var dx = blob.left - mouse_pos.x;
      var dy = blob.top - mouse_pos.y;
      var vx = blob.vx;
      var vy = blob.vy;

      if (dx * dx + dy * dy <= 10000) {
        vx += dx * 0.01;
        vy += dy * 0.01;
      }
      vx *= 0.95;
      vy *= 0.95;

      vx += Math.random() - 0.5;
      vy += Math.random() - 0.5;

      var x = blob.left += vx;
      var y = blob.top += vy;

      if (x < 0 || x > maxx || y < 0 || y > maxy) {
        var r = Math.atan2(y - maxy / 2, x - maxx / 2);
        vx = -Math.cos(r);
        vy = -Math.sin(r);
      }

      blob.vx = vx;
      blob.vy = vy;
    }

    var time = Date.now();
    frames++;

    if ( time >...