Canvas Swarm Demo

Full article: http://humaan.com/canvas-swarm-javascript

by humaan

HTML

<script src="https://cdn.jsdelivr.net/gh/humaan/Canvas-Swarm-Animation@refs/heads/master/js/Helpers.js"></script>
<script src="https://cdn.jsdelivr.net/gh/humaan/Canvas-Swarm-Animation@refs/heads/master/js/Shape.js"></script>
<script src="https://cdn.jsdelivr.net/gh/humaan/Canvas-Swarm-Animation@refs/heads/master/js/Piece.js"></script>
<script src="https://cdn.jsdelivr.net/gh/humaan/Canvas-Swarm-Animation@refs/heads/master/js/CirclePiece.js"></script>
<script src="https://cdn.jsdelivr.net/gh/humaan/Canvas-Swarm-Animation@refs/heads/master/js/BubblePiece.js"></script>
<script src="https://cdn.jsdelivr.net/gh/humaan/Canvas-Swarm-Animation@refs/heads/master/js/Tween.js"></script>
<script src="https://cdn.jsdelivr.net/gh/humaan/Canvas-Swarm-Animation@refs/heads/master/js/Renderer.js"></script>
<div class="buttons-wrapper">
  <button data-shape="circle">one</button>
  <button data-shape="triangle">two</button>
  <button data-shape="heart">three</button> 
  <button data-shape="lee">four</button>
</div>

<div class="canvas-wrapper">
  <canvas id="canvas"></canvas>
</div>

<!-- 
      
      Some images for this demo 
      ===
      You should probably use file URLs instead of data URLs, in that case 
      then you'd have to make sure to check that Shape.loaded property is true 
      before attempting to use a Shape object.
      
-->
<div class="images">
		<img id="circle"...

CSS

body {
			background: #eee;
			padding: 0;
			margin: 0;
		}

		.buttons-wrapper {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 1;
			margin: 10px 0 0 10px;
			text-align:center;
		}

		.canvas-wrapper {
			z-index: 0;
			position: fixed;
			background: #fff;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: 0;
		}

		button {
			background: #ddd;
			border: 0;
			padding: 8px 20px;
			outline: none;
			margin-right: 10px;
			cursor: pointer;
			border-radius: 5px;
			font: 12px Helvetica, sans-serif;
		}
		button:hover {
			background: #aaa;
		}
		button:active {
			background: #444;
			color: #fff;
		}

		.images { 
			display: none; 
		}

JavaScript

var canvas, canvas_dom;
var shapes, piece_collection;
var renderer;
var current_shape = 'blankcanvas';





$(function(){

	

	//On-screen UI
	$('button').click(function(){
		var shape_name = $(this).data('shape')
		var shape = shapes.get( shape_name );
		if (shape){
			current_shape = shape_name;
			makeShape( shape );
		}
	});

	canvas_dom = $('#canvas');
	canvas = canvas_dom[0];

	var window_width = $(window).width();
	var window_height = $(window).height();

	canvas.width = window_width * 2;
	canvas.height = window_height * 2;
	canvas_dom.css({
		width: window_width,
		height: window_height
	});

	initShapes();
	initParticles();
  autoExplode();

	//Some simple resize-handling for aesthetics: we resize the canvas recreate the current shape onto the newly sized canvas
	$(window).resize(function(){
		clearTimeout(this.timer);
		this.timer = setTimeout(function(){

			renderer.stop();

			var window_width = $(window).width();
			var window_height = $(window).height();

			canvas.width = window_width * 2;
			canvas.height = window_height * 2;
			canvas_dom.css({
				width: window_width,
				height: window_height
			});

			//Reinitialize shape to reset centres
			recenterShapes();
			makeShape( shapes.get( current_shape ) );

			renderer.start();

		}, 250);
	});

});

function autoExplode(){
	current_shape = 'lee';
  var shape = shapes.get(current_shape);
  makeShape( shape );
  setTimeout(autoExplode, 3000);
}



function initShapes(){

	shapes = new ShapesCollection();
	/**
	 * 	Initialize a shape with just rectangular dimensions (not an image)
	 *
	 * 	Spread:
	 * 	If specified the image will be divided by the spread factor to reduce the number available pixels. The available pixels
	 * 	are then readjusted back up with the spread factor, this is done to encourage more space between particles.
	*/
	shapes.add('blankcanvas', new Shape({
		width : canvas.width +...