Simple Swarm

In this example below you will see how to do a Simple Swarm with some HTML / CSS and Javascript

Just a late night swarm I created when I couldn't sleep.

Thumbnail
This awesome code was written by AyeAyeHayden, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright AyeAyeHayden ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Simple Swarm</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <canvas id="display"></canvas>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/AyeAyeHayden/simple-swarm-NxKjvO */
body {
  margin: 0;
  padding: 0;
}

canvas {
  width: 100%;
  height: 100%;
  position: absolute;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/183082/black-texture.png);
  background-size: 100%;
}

/*Downloaded from https://www.codeseek.co/AyeAyeHayden/simple-swarm-NxKjvO */
(function() {
  //############### Globals ############################
  //####################################################
  var animate, canvas, ctx, cx, cy, h, resizeCanvas, t0, twig, twigCount, twigs, w;

  twigs = [];

  //############# Canvas Setup ##########################
  //#####################################################
  canvas = document.querySelector("#display");

  ctx = canvas.getContext("2d");

  w = canvas.width;

  h = canvas.height;

  cx = w / 2;

  cy = h / 2;

  t0 = Date.now();

  twigCount = 1000;

  //############# Classes ###############################
  //#####################################################
  twig = class twig {
    constructor() {
      this.init();
      this.r = 55;
      this.g = 255;
      this.b = 118;
      this.dg = -1;
      this.db = 1;
      this.dr = 1;
    }

    init() {
      this.a = Math.random() * .4 + .1;
      this.theta = Math.random() * Math.PI * 2;
      this.dTheta = Math.random() * .005 + .002;
      this.x = cx;
      this.y = cy;
      this.mag = Math.random() * 15 + 5;
      this.dx = this.mag * Math.cos(this.theta);
      return this.dy = this.mag * Math.sin(this.theta);
    }

    update(m) {
      var ref, ref1, ref2;
      this.r += this.dr;
      this.g -= this.dg;
      this.b += this.db;
      if (!((255 > (ref = this.r) && ref > 0))) {
        this.dr *= -1;
      }
      if (!((255 > (ref1 = this.g) && ref1 > 0))) {
        this.dg *= -1;
      }
      if (!((255 > (ref2 = this.b) && ref2 > 0))) {
        this.db *= -1;
      }
      this.x += this.dx * m;
      this.y += this.dy * m;
      this.theta += this.dTheta;
      this.dx = this.mag * Math.cos(this.theta);
      this.dy = this.mag * Math.sin(this.theta);
      return this.dTheta += Math.random() * .0002 - .0001;
    }

    checkWalls() {
      var ref, ref1;
      if (!((0 < (ref = this.x) && ref < w) && (0 < (ref1 = this.y) && ref1 < h))) {
        return this.init();
      }
    }

    render() {
      ctx.strokeStyle = `rgba(${this.r},${this.g},${this.b}, ${this.a})`;
      ctx.lineWidth = 5;
      ctx.beginPath();
      ctx.moveTo(this.x, this.y);
      ctx.lineTo(this.x + this.dx, this.y + this.dy);
      ctx.closePath();
      return ctx.stroke();
    }

  };

  
  //###################### Helpers #######################
  //######################################################
  resizeCanvas = function() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    w = canvas.width;
    h = canvas.height;
    cx = w / 2;
    cy = h / 2;
    return canvas.width = canvas.width;
  };

  //################### Main ############################
  //######################################################
  window.onload = function() {
    var i, ref, t;
    window.addEventListener('resize', resizeCanvas, false);
    resizeCanvas();
    for (t = i = 0, ref = twigCount; (0 <= ref ? i < ref : i > ref); t = 0 <= ref ? ++i : --i) {
      twigs.push(new twig());
    }
    return animate();
  };

  animate = function() {
    var delta, i, ref, t, t1;
    ctx.clearRect(0, 0, w, h);
    t1 = Date.now();
    delta = t1 - t0;
    t0 = t1;
    for (t = i = 0, ref = twigCount; (0 <= ref ? i < ref : i > ref); t = 0 <= ref ? ++i : --i) {
      twigs[t].update(delta / 1000);
      twigs[t].checkWalls();
      twigs[t].render();
    }
    return requestAnimationFrame(animate);
  };

}).call(this);

//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiPGFub255bW91cz4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFBQTs7QUFBQSxNQUFBLE9BQUEsRUFBQSxNQUFBLEVBQUEsR0FBQSxFQUFBLEVBQUEsRUFBQSxFQUFBLEVBQUEsQ0FBQSxFQUFBLFlBQUEsRUFBQSxFQUFBLEVBQUEsSUFBQSxFQUFBLFNBQUEsRUFBQSxLQUFBLEVBQUE7O0VBRUEsS0FBQSxHQUFRLEdBRlI7Ozs7RUFLQSxNQUFBLEdBQVMsUUFBUSxDQUFDLGFBQVQsQ0FBdUIsVUFBdkI7O0VBQ1QsR0FBQSxHQUFNLE1BQU0sQ0FBQyxVQUFQLENBQWtCLElBQWxCOztFQUNOLENBQUEsR0FBSSxNQUFNLENBQUM7O0VBQ1gsQ0FBQSxHQUFJLE1BQU0sQ0FBQzs7RUFDWCxFQUFBLEdBQUssQ0FBQSxHQUFJOztFQUNULEVBQUEsR0FBSyxDQUFBLEdBQUk7O0VBQ1QsRUFBQSxHQUFLLElBQUksQ0FBQyxHQUFMLENBQUE7O0VBQ0wsU0FBQSxHQUFZLEtBWlo7Ozs7RUFpQk0sT0FBTixNQUFBLEtBQUE7SUFDQyxXQUFhLENBQUEsQ0FBQTtNQUNaLElBQUMsQ0FBQSxJQUFELENBQUE7TUFDQSxJQUFDLENBQUEsQ0FBRCxHQUFLO01BQ0wsSUFBQyxDQUFBLENBQUQsR0FBSztNQUNMLElBQUMsQ0FBQSxDQUFELEdBQUs7TUFDTCxJQUFDLENBQUEsRUFBRCxHQUFNLENBQUM7TUFDUCxJQUFDLENBQUEsRUFBRCxHQUFNO01BQ04sSUFBQyxDQUFBLEVBQUQsR0FBTTtJQVBNOztJQVNiLElBQU0sQ0FBQSxDQUFBO01BQ0wsSUFBQyxDQUFBLENBQUQsR0FBSyxJQUFJLENBQUMsTUFBTCxDQUFBLENBQUEsR0FBZ0IsRUFBaEIsR0FBcUI7TUFDMUIsSUFBQyxDQUFBLEtBQUQsR0FBUyxJQUFJLENBQUMsTUFBTCxDQUFBLENBQUEsR0FBZ0IsSUFBSSxDQUFDLEVBQXJCLEdBQTBCO01BQ25DLElBQUMsQ0FB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RSxDQUFDLFVBQVQsQ0FBQTtNQUNBLEtBQU0sQ0FBQSxDQUFBLENBQUUsQ0FBQyxNQUFULENBQUE7SUFIRDtXQUlBLHFCQUFBLENBQXNCLE9BQXRCO0VBVFM7QUF2RlYiLCJzb3VyY2VzQ29udGVudCI6WyIjIyMjIyMjIyMjIyMjIyMjIEdsb2JhbHMgIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjI1xuIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyNcbnR3aWdzID0gW11cbiMjIyMjIyMjIyMjIyMjIENhbnZhcyBTZXR1cCAjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjI1xuIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjXG5jYW52YXMgPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yIFwiI2Rpc3BsYXlcIlxuY3R4ID0gY2FudmFzLmdldENvbnRleHQgXCIyZFwiXG53ID0gY2FudmFzLndpZHRoXG5oID0gY2FudmFzLmhlaWdodFxuY3ggPSB3IC8gMlxuY3kgPSBoIC8gMlxudDAgPSBEYXRlLm5vdygpXG50d2lnQ291bnQgPSAxMDAwXG5cblxuIyMjIyMjIyMjIyMjIyMgQ2xhc3NlcyAjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjXG4jIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyNcbmNsYXNzIHR3aWdcblx0Y29uc3RydWN0b3I6ICgpIC0+XG5cdFx0QGluaXQoKVxuXHRcdEByID0gNTVcblx0XHRAZyA9IDI1NVxuXHRcdEBiID0gMTE4XG5cdFx0QGRnID0gLTFcblx0XHRAZGIgPSAxXG5cdFx0QGRyID0gMVxuXHRcblx0aW5pdDogKCkgLT5cblx0XHRAYSA9IE1hdGgucmFuZG9tKCkgKiAuNCArIC4xXG5cdFx0QHRoZXRhID0gTWF0aC5yYW5kb20oKSAqIE1hdGguUEkgKiAyXG5cdFx0QGRUaGV0YSA9IE1hdGgucmFuZG9tKCkgKiAuMDA1ICsgLjAwMlxuXHRcdEB4ID0gY3hcblx0XHRAeSA9IGN5XG5cdFx0QG1hZyA9IE1hdGgucmFuZG9tKCkgKiAxNSArIDVcblx0XHRAZHggPSBAbWFnKk1hdGguY29zKEB0aGV0YSlcblx0XHRAZHkgPVx0QG1hZypNYXRoLnNpbihAdGhldGEpXG5cdFxuXHR1cGRhdGU6IChtKSAtPlxuXHRcdEByICs9IEBkclxuXHRcdEBnIC09IEBkZ1xuXHRcdEBiICs9IEBkYlxuXHRcdGlmIG5vdCgyNTUgPiBAciA+IDApXG5cdFx0XHRAZHIgKj0gLTFcblx0XHRpZiBub3QoMjU1ID4gQGcgPiAwKVxuXHRcdFx0QGRnICo9IC0xXG5cdFx0aWYgbm90KDI1NSA+IEBiID4gMClcblx0XHRcdEBkYiAqPSAtMVxuXHRcdEB4ICs9IEBkeCAqIG1cblx0XHRAeSArPSBAZHkgKiBtXG5cdFx0QHRoZXRhICs9IEBkVGhldGFcblx0XHRAZHggPSBAbWFnKk1hdGguY29zKEB0aGV0YSlcblx0XHRAZHkgPVx0QG1hZypNYXRoLnNpbihAdGhldGEpXG5cdFx0QGRUaGV0YSArPSBNYXRoLnJhbmRvbSgpICogLjAwMDIgLSAuMDAwMVxuXHRcdFxuXHRjaGVja1dhbGxzOiAoKSAtPlxuXHRcdGlmIG5vdCAoMCA8IEB4IDwgdyBhbmQgMCA8IEB5IDwgaClcblx0XHRcdEBpbml0KClcblx0XG5cdHJlbmRlcjogKCkgLT5cblx0XHRjdHguc3Ryb2tlU3R5bGUgPSBcInJnYmEoI3tAcn0sI3tAZ30sI3tAYn0sICN7QGF9KVwiXG5cdFx0Y3R4LmxpbmVXaWR0aCA9IDVcblx0XHRjdHguYmVnaW5QYXRoKClcblx0XHRjdHgubW92ZVRvKEB4LCBAeSlcblx0XHRjdHgubGluZVRvKEB4ICsgQGR4LCBAeSArIEBkeSlcblx0XHRjdHguY2xvc2VQYXRoKClcblx0XHRjdHguc3Ryb2tlKClcblx0XHRcbiMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIEhlbHBlcnMgIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyNcbiMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyNcbnJlc2l6ZUNhbnZhcyA9ICgpIC0+XG5cdGNhbnZhcy53aWR0aCA9IHdpbmRvdy5pbm5lcldpZHRoXG5cdGNhbnZhcy5oZWlnaHQgPSB3aW5kb3cuaW5uZXJIZWlnaHRcblx0dyA9IGNhbnZhcy53aWR0aFxuXHRoID0gY2FudmFzLmhlaWdodFxuXHRjeCA9IHcgLyAyXG5cdGN5ID0gaCAvIDJcdFxuXHRjYW52YXMud2lkdGggPSBjYW52YXMud2lkdGhcblxuIyMjIyMjIyMjIyMjIyMjIyMjIyMgTWFpbiAjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjXG4jIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjXG53aW5kb3cub25sb2FkID0gKCkgLT5cblx0d2luZG93LmFkZEV2ZW50TGlzdGVuZXIoJ3Jlc2l6ZScsIHJlc2l6ZUNhbnZhcywgZmFsc2UpXG5cdHJlc2l6ZUNhbnZhcygpXG5cdGZvciB0IGluIFswLi4udHdpZ0NvdW50XVxuXHRcdHR3aWdzLnB1c2gobmV3IHR3aWcoKSlcblx0YW5pbWF0ZSgpXG5cdFxuYW5pbWF0ZSA9ICgpIC0+XG5cdGN0eC5jbGVhclJlY3QoMCwgMCwgdywgaClcblx0dDEgPSBEYXRlLm5vdygpXG5cdGRlbHRhID0gdDEgLSB0MFxuXHR0MCA9IHQxXG5cdGZvciB0IGluIFswLi4udHdpZ0NvdW50XVxuXHRcdHR3aWdzW3RdLnVwZGF0ZShkZWx0YSAvIDEwMDApXG5cdFx0dHdpZ3NbdF0uY2hlY2tXYWxscygpXG5cdFx0dHdpZ3NbdF0ucmVuZGVyKClcblx0cmVxdWVzdEFuaW1hdGlvbkZyYW1lKGFuaW1hdGUpXG5cdCJdfQ==
//# sourceURL=coffeescript

Comments