Wave

script.js

var canvas = document.createElement("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var ctx = canvas.getContext("2d");
ctx.translate(0.5, 0.5);
document.body.appendChild(canvas);
window.addEventListener("resize", function() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
});


/**
 * A module that returns an Atom object. The object is
 * in the form of a function, so it can be instantiated.
 */
var Atom = (function Atom() {
  var mainRadius;
  var smallRadius;
  var lineWidth;
  var buffer = document.createElement("canvas");
      
  function instantiate(pmainRadius, psmallRadius, plineWidth) {
    mainRadius = pmainRadius;
    smallRadius = psmallRadius;
    lineWidth = plineWidth;
    
    buffer.width = (mainRadius * 2) + (lineWidth * 2) + smallRadius;
    buffer.height = mainRadius * 2 + (lineWidth * 2) + smallRadius;
    var bctx = buffer.getContext("2d");
    bctx.translate((mainRadius + lineWidth), (mainRadius + lineWidth));
    bctx.beginPath();
      bctx.strokeStyle = "#000000";
      bctx.lineWidth = lineWidth;
      bctx.arc(0, 0, mainRadius, 0, Math.PI * 2);
    bctx.stroke();
    bctx.translate(-(mainRadius + lineWidth), -(mainRadius + lineWidth));
    bctx.translate(2*(mainRadius + lineWidth), (mainRadius + lineWidth));
    bctx.beginPath();
      bctx.arc(0, 0, smallRadius, 0, Math.PI * 2);
    bctx.fill();
  }
  
  function drawInstance(ctx, x, y, angle) {
    var rad = angle * Math.PI / 180;
    ctx.translate(x, y);
    ctx.rotate(rad);
      ctx.drawImage(buffer, -mainRadius - lineWidth, -mainRadius - lineWidth);
    ctx.rotate(-rad);
    ctx.translate(-x, -y);
  }
            
  return function() {
    return {
      get mainRadius() {
        return mainRadius;
      },
      get smallRadius() {
        return smallRadius;
      },
      get lineWidth() {
        return lineWidth;
      },
      instantiate: instantiate,
      drawInstance: drawInstance,
    }
  }
  
})();


function AtomArray() {
  this.atomInstance = new Atom();
  this.atomInstance.instantiate(50, 10, 2);
  this.count = 0;
}
AtomArray.prototype.update = function() {
  this.count += 2;
  this.count % 360;
}
AtomArray.prototype.render = function(ctx) {
  var mr = this.atomInstance.mainRadius;
  var sr = this.atomInstance.smallRadius;
  var lw = this.atomInstance.lineWidth;
  var ch = canvas.height;
  var cw = canvas.width;
  
  var rows = Math.ceil(ch / (mr + lw)) + 1;
  var cols = Math.ceil(cw / (mr + lw)) + 1;
  for (var i = 0; i < rows; i++) {
    for (var j = 0; j < cols; j++) {
      this.atomInstance.drawInstance(ctx, 
                                     j * (mr + lw), 
                                     i * (mr + lw), 
                                     this.count + j * 25 + i * 10);
    }
  }
}


var arr = new AtomArray();
(function update() {
  ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
  arr.update();
  arr.render(ctx);
  requestAnimationFrame(update);
})();

style.css

* {
  padding: 0;
  margin: 0;
}
canvas {
  position: absolute;
  background-color: white;
}

wave.markdown

Wave

A pen based on this gif https://twitter.com/ninjatune/status/688784455217975296

A Pen by B Wilcox on CodePen.

License.