two

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/two.js/0.7.0-alpha.1/two.js"></script>
<div id="two-container"></div>

CSS

div {
  width: 100%;
  height: 100%;
}

svg,
canvas {
  border: 1px #000 solid;
}

JavaScript

// get a container element to put your instance of two in it
var container = document.getElementById('two-container');
var two = new Two({
  width: 300,
  height: 300
}).appendTo(container);

// create some shapes with two's built-in methods
var circle = two.makeCircle(100, 150, 50);
var square = two.makeRectangle(200, 150, 50, 50);

// you can then style your shapes in many ways
// two also accepts all valid css color attributes
circle.fill = '#abcdef';
circle.noStroke();
circle.opacity = 0.5;

square.noFill();
square.linewidth = 5;
square.stroke = 'orangered';

// you don't need to call update here because the animation loop will call it automatically
// two.update();

// we need to prepare for vertices animation
// by storing original positions as their native property
square.vertices.forEach(function(vertice){
	vertice.ox = vertice.x; // ox = original x
  vertice.oy = vertice.y;
});

// bind a function to 'update'
two.bind('update',function(){
	// this function is called every time two.update() executes
  if (circle.translation.x >= 400){
  	circle.translation.x = -100;
  }
  circle.translation.x += 2;
  //square.rotation += 0.1;
  square.vertices.forEach(function(vertice){
  	// every vertice will animate from their original position
    // to a random direction with a random distance
  	vertice.x = vertice.ox + (Math.random()-0.5)*4;
    vertice.y = vertice.oy + (Math.random()-0.5)*4;
  });
}).play(); // don't forget to play the animation