Understanding Animations

Little canvas to show how to derive your own custom animations

by Andrew Holloway

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.2/dat.gui.js"></script>
<div id="container">
  <canvas id="bezierCanvas" width="800" height="550" style="border: 1px solid #ffffff"></canvas>
</div>
<fieldset id="values">

  <legend>
    Values
  </legend>
  <ul>
    <li>X: <span id="xval"></span></li>
    <li>Y: <span id="yval"></span></li>
  </ul>
</fieldset>
<h2>Use "progress" draw the spline point by point</h2>

CSS

#bezierCanvas {
  border: 1px solid black;
  clear: both;
}

#container {
  border: 1px solid black;
  width: 800px;
  height: 550px;
}

#values {
  display: none;
  width: 800px;
}

#values.show {
  display: block;
}

JavaScript

var context, animation, progress, renderer, mouseDown, radius = 6;

// hook up dat.gui
var Animatrix = function() {
  this.progress = 0.0;
	this.showLines = true;
  this.showPoints = true;
  this.showPointLine = false;
  
  this.phase2LinesA = false;
  this.phase2LinesB = false;
  
  this.phase3LinesA = false;
  this.phase3LinesB = false;  
};

var animatrixController = new Animatrix();
var gui = new dat.GUI();

var progressController = gui.add(animatrixController, 'progress', 0, 100);
var showLineController = gui.add(animatrixController, 'showLines');
var pointController = gui.add(animatrixController, 'showPoints');

var phase2 = gui.addFolder('Phase Two');
var p2la = phase2.add(animatrixController, 'phase2LinesA');
var p2lb = phase2.add(animatrixController, 'phase2LinesB');
    

var phase3 = gui.addFolder('Phase Three');
var p3la = phase3.add(animatrixController, 'phase3LinesA');
var p3lb = phase3.add(animatrixController, 'phase3LinesB');


var phase4 = gui.addFolder('Phase Four');
var pointLineController = phase4.add(animatrixController, 'showPointLine');


progressController.onChange(function(value) {
	progress = value/100;
  renderer();
});

showLineController.onChange(function() {
	renderer();
});

pointController.onChange(function() {
	renderer();
});

pointLineController.onChange(function() {
	renderer();
  
  // show/hide the x/y values
	var val = document.getElementById('values');
  if (animatrixController.showPointLine) {
  	val.classList.add('show');
  } else {
  	val.classList.remove('show');
  }
});

[p2la, p2lb, p3la, p3lb].forEach(function(controller) {
	controller.onChange(function() {
  	renderer();
  });
});
  
// helpers

function Point(x, y) {
  this.x = x;
  this.y = y;
}

function init() {
	canvas = document.getElementById('bezierCanvas');
	context = canvas.getContext('2d');
  animation = document.getElementById('animation');
  progress = 0.0;
  mouseDown =...