JSFiddle - React, Tailwind, and code Playground

by sandro_paganotti

HTML

<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js"></script>
<!--
Article: http://sandropaganotti.com/2014/05/04/how-to-render-a-dynamic-animated-delaunay-triangulation/
-->

CSS

div{
    width: 1px;
    height: 1px;
    background-color: black;
    position: absolute;
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
}

JavaScript

window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();

var transform = Modernizr.prefixed('transform');
transform = transform.replace(/([A-Z])/g, function(str,m1){ return '-' + m1.toLowerCase(); }).replace(/^ms-/,'-ms-');


var AnimatedDelaunay = function(width, height, vSize){
    this.width = width;
    this.height = height;
    this.vSize = vSize;
    this.vBuffer = new Array(180); // ~ 3 seconds
    this.vertices = new Array(vSize);
    this.speeds = new Array(vSize);
    this.couples = [[0,1],[1,2],[2,0]];
    this.initializeVertices();
    this.x = 0;
    this.y = 0;
    this.k = 0;
};

AnimatedDelaunay.prototype.initializeVertices = function(){
    for(this.x=0; this.x < this.vSize; this.x++){
        this.vertices[this.x] = [Math.random() * this.width, Math.random() * this.height];            
        this.speed = Math.random() * 0.5;
        this.speeds[this.x] = [this.speed - 0.25, 0.25 - this.speed];
    }
};

AnimatedDelaunay.prototype.updatePositions = function(){
  for(this.x=0; this.x < this.vertices.length; this.x++){
      this.vertices[this.x][0] += this.speeds[this.x][0]; 
      this.vertices[this.x][1] += this.speeds[this.x][1];
      if(this.vertices[this.x][0] > this.width || this.vertices[this.x][0] < 0){
          this.speeds[this.x][0] = -1 * this.speeds[this.x][0];
      }
      if(this.vertices[this.x][1] > this.height || this.vertices[this.x][1] < 0){ 
          this.speeds[this.x][1] = -1 * this.speeds[this.x][1];
      }
  }
};

AnimatedDelaunay.prototype.updateLines = function(){
  for(this.y=0; this.y < this.triangles.length; this.y++){
      for(this.x =0; this.x < this.couples.length; this.x++){
          this.point1 = this.triangles[this.y][this.couples[this.x][0]];
          this.point2 =...