A Pen by Hayden Stanko

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>A Pen by  Hayden Stanko</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/a-pen-by-hayden-stanko-wKORrO */
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/a-pen-by-hayden-stanko-wKORrO */
(function() {
  //############### Globals ############################
  //####################################################
  var Bouncer, animate, bouncerCount, bouncers, canvas, ctx, h, resizeCanvas, t0, w;

  bouncers = [];

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

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

  w = canvas.width;

  h = canvas.height;

  t0 = Date.now();

  bouncerCount = 1000;

  //############# Classes ###############################
  //#####################################################
  Bouncer = class Bouncer {
    constructor() {
      this.init();
      this.r = 20;
      this.g = 200;
      this.b = 120;
      this.a = Math.random() * .5;
      this.theta = Math.random() * Math.PI * 2;
      this.dTheta = Math.random() * .02 - .01;
    }

    init() {
      this.x = Math.random() * w;
      this.y = Math.random() * h + h;
      this.dx = Math.random() * 100 - 50;
      this.dy = Math.random() * -100;
      return this.size = 40;
    }

    update(m) {
      this.x += this.dx * m;
      this.y += this.dy * m;
      return this.theta += this.dTheta;
    }

    checkWalls() {
      var ref;
      if (!((0 < (ref = this.x) && ref < w))) {
        this.dx *= -1;
      }
      if (this.y < 0) {
        return this.init();
      }
    }

    render() {
      ctx.strokeStyle = `rgba(${this.r},${this.g},${this.b}, ${this.a})`;
      ctx.beginPath();
      ctx.moveTo(this.x - this.size * Math.cos(this.theta) / 2, this.y - this.size * Math.sin(this.theta) / 2);
      ctx.lineTo(this.x + this.size * Math.cos(this.theta) / 2, this.y + this.size * Math.sin(this.theta) / 2);
      ctx.closePath();
      return ctx.stroke();
    }

  };

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

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

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

}).call(this);

//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiPGFub255bW91cz4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFBQTs7QUFBQSxNQUFBLE9BQUEsRUFBQSxPQUFBLEVBQUEsWUFBQSxFQUFBLFFBQUEsRUFBQSxNQUFBLEVBQUEsR0FBQSxFQUFBLENBQUEsRUFBQSxZQUFBLEVBQUEsRUFBQSxFQUFBOztFQUVBLFFBQUEsR0FBVyxHQUZYOzs7O0VBS0EsTUFBQSxHQUFTLFFBQVEsQ0FBQyxhQUFULENBQXVCLFVBQXZCOztFQUNULEdBQUEsR0FBTSxNQUFNLENBQUMsVUFBUCxDQUFrQixJQUFsQjs7RUFDTixDQUFBLEdBQUksTUFBTSxDQUFDOztFQUNYLENBQUEsR0FBSSxNQUFNLENBQUM7O0VBQ1gsRUFBQSxHQUFLLElBQUksQ0FBQyxHQUFMLENBQUE7O0VBQ0wsWUFBQSxHQUFlLEtBVmY7Ozs7RUFlTSxVQUFOLE1BQUEsUUFBQTtJQUNDLFdBQWEsQ0FBQSxDQUFBO01BQ1osSUFBQyxDQUFBLElBQUQsQ0FBQTtNQUNBLElBQUMsQ0FBQSxDQUFELEdBQUs7TUFDTCxJQUFDLENBQUEsQ0FBRCxHQUFLO01BQ0wsSUFBQyxDQUFBLENBQUQsR0FBSztNQUNMLElBQUMsQ0FBQSxDQUFELEdBQUssSUFBSSxDQUFDLE1BQUwsQ0FBQSxDQUFBLEdBQWdCO01BQ3JCLElBQUMsQ0FBQSxLQUFELEdBQVMsSUFBSSxDQUFDLE1BQUwsQ0FBQSxDQUFBLEdBQWdCLElBQUksQ0FBQyxFQUFyQixHQUEwQjtNQUNuQyxJQUFDLENBQUEsTUFBRCxHQUFVLElBQUksQ0FBQyxNQUFMLENBQUEsQ0FBQSxHQUFnQixHQUFoQixHQUFzQjtJQVBwQjs7SUFTYixJQUFNLENBQUEsQ0FBQTtNQUNMLElBQUMsQ0FBQSxDQUFELEdBQUssSUFBSSxDQUFDLE1BQUwsQ0FBQSxDQUFBLEdBQWdCO01BQ3JCLElBQUMsQ0FBQSxDQUFELEdBQUssSUFBSSxDQUFDLE1BQUwsQ0FBQSxDQUFBLEdB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QWpCLEVBQW9CLENBQXBCLEVBQXVCLENBQXZCO0lBQ0EsRUFBQSxHQUFLLElBQUksQ0FBQyxHQUFMLENBQUE7SUFDTCxLQUFBLEdBQVEsRUFBQSxHQUFLO0lBQ2IsRUFBQSxHQUFLO0lBQ0wsS0FBUyx1RkFBVDtNQUNDLFFBQVMsQ0FBQSxDQUFBLENBQUUsQ0FBQyxNQUFaLENBQW1CLEtBQUEsR0FBUSxJQUEzQjtNQUNBLFFBQVMsQ0FBQSxDQUFBLENBQUUsQ0FBQyxVQUFaLENBQUE7TUFDQSxRQUFTLENBQUEsQ0FBQSxDQUFFLENBQUMsTUFBWixDQUFBO0lBSEQ7V0FJQSxxQkFBQSxDQUFzQixPQUF0QjtFQVRTO0FBdEVWIiwic291cmNlc0NvbnRlbnQiOlsiIyMjIyMjIyMjIyMjIyMjIyBHbG9iYWxzICMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyNcbiMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjXG5ib3VuY2VycyA9IFtdXG4jIyMjIyMjIyMjIyMjIyBDYW52YXMgU2V0dXAgIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyNcbiMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjI1xuY2FudmFzID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvciBcIiNkaXNwbGF5XCJcbmN0eCA9IGNhbnZhcy5nZXRDb250ZXh0IFwiMmRcIlxudyA9IGNhbnZhcy53aWR0aFxuaCA9IGNhbnZhcy5oZWlnaHRcbnQwID0gRGF0ZS5ub3coKVxuYm91bmNlckNvdW50ID0gMTAwMFxuXG5cbiMjIyMjIyMjIyMjIyMjIENsYXNzZXMgIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjI1xuIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjXG5jbGFzcyBCb3VuY2VyXG5cdGNvbnN0cnVjdG9yOiAoKSAtPlxuXHRcdEBpbml0KClcblx0XHRAciA9IDIwXG5cdFx0QGcgPSAyMDBcblx0XHRAYiA9IDEyMFxuXHRcdEBhID0gTWF0aC5yYW5kb20oKSAqIC41XG5cdFx0QHRoZXRhID0gTWF0aC5yYW5kb20oKSAqIE1hdGguUEkgKiAyXG5cdFx0QGRUaGV0YSA9IE1hdGgucmFuZG9tKCkgKiAuMDIgLSAuMDFcblx0XG5cdGluaXQ6ICgpIC0+XG5cdFx0QHggPSBNYXRoLnJhbmRvbSgpICogd1xuXHRcdEB5ID0gTWF0aC5yYW5kb20oKSAqIGggKyBoXG5cdFx0QGR4ID0gTWF0aC5yYW5kb20oKSAqIDEwMCAtIDUwXG5cdFx0QGR5ID0gTWF0aC5yYW5kb20oKSAqIC0xMDBcblx0XHRAc2l6ZSA9IDQwXG5cdFxuXHR1cGRhdGU6IChtKSAtPlxuXHRcdEB4ICs9IEBkeCAqIG1cblx0XHRAeSArPSBAZHkgKiBtXG5cdFx0QHRoZXRhICs9IEBkVGhldGFcblx0XHRcblx0Y2hlY2tXYWxsczogKCkgLT5cblx0XHRpZiBub3QgKDAgPCBAeCA8IHcpXG5cdFx0XHRAZHggKj0gLTFcblx0XHRpZiBAeSA8IDBcblx0XHRcdEBpbml0KClcblx0XG5cdHJlbmRlcjogKCkgLT5cblx0XHRjdHguc3Ryb2tlU3R5bGUgPSBcInJnYmEoI3tAcn0sI3tAZ30sI3tAYn0sICN7QGF9KVwiXG5cdFx0Y3R4LmJlZ2luUGF0aCgpXG5cdFx0Y3R4Lm1vdmVUbyhAeCAtIEBzaXplKk1hdGguY29zKEB0aGV0YSkvMiwgQHkgLSBAc2l6ZSpNYXRoLnNpbihAdGhldGEpLzIpXG5cdFx0Y3R4LmxpbmVUbyhAeCArIEBzaXplKk1hdGguY29zKEB0aGV0YSkvMiwgQHkgKyBAc2l6ZSpNYXRoLnNpbihAdGhldGEpLzIpXG5cdFx0Y3R4LmNsb3NlUGF0aCgpXG5cdFx0Y3R4LnN0cm9rZSgpXG5cdFx0XG4jIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyBIZWxwZXJzICMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjXG4jIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjXG5yZXNpemVDYW52YXMgPSAoKSAtPlxuXHRjYW52YXMud2lkdGggPSB3aW5kb3cuaW5uZXJXaWR0aFxuXHRjYW52YXMuaGVpZ2h0ID0gd2luZG93LmlubmVySGVpZ2h0XG5cdHcgPSBjYW52YXMud2lkdGhcblx0aCA9IGNhbnZhcy5oZWlnaHRcblx0XG5cblxuIyMjIyMjIyMjIyMjIyMjIyMjIyMgTWFpbiAjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjXG4jIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjXG53aW5kb3cub25sb2FkID0gKCkgLT5cblx0d2luZG93LmFkZEV2ZW50TGlzdGVuZXIoJ3Jlc2l6ZScsIHJlc2l6ZUNhbnZhcywgZmFsc2UpXG5cdHJlc2l6ZUNhbnZhcygpXG5cdGZvciBiIGluIFswLi4uYm91bmNlckNvdW50XVxuXHRcdGJvdW5jZXJzLnB1c2gobmV3IEJvdW5jZXIoKSlcblx0YW5pbWF0ZSgpXG5cdFxuYW5pbWF0ZSA9ICgpIC0+XG5cdGN0eC5jbGVhclJlY3QoMCwgMCwgdywgaClcblx0dDEgPSBEYXRlLm5vdygpXG5cdGRlbHRhID0gdDEgLSB0MFxuXHR0MCA9IHQxXG5cdGZvciBiIGluIFswLi4uYm91bmNlckNvdW50XVxuXHRcdGJvdW5jZXJzW2JdLnVwZGF0ZShkZWx0YSAvIDEwMDApXG5cdFx0Ym91bmNlcnNbYl0uY2hlY2tXYWxscygpXG5cdFx0Ym91bmNlcnNbYl0ucmVuZGVyKClcblx0cmVxdWVzdEFuaW1hdGlvbkZyYW1lKGFuaW1hdGUpXG5cdCJdfQ==
//# sourceURL=coffeescript

Comments