This post was written by Dedy Lawidjaja

By Dedy Lawidjaja

30 November 2016

No Comments

blog-bees

Swarms are so hot right now. At least, we think so. Just a few months ago, we launched a site with this particle effect, and wanted to share how we went about creating it.

For this project, we needed to visually represent thousands of individual voices uniting as one. So we came up with the idea of using a mass of speech bubbles in animated chaos, finding order by cycling through a set of user-defined iconography. Rather taking a thousand words to explain, how about I just show you?

canvas-swarm

Our swarm is based on transparent PNGs, chosen so we’d only have to check the alpha channel to get the data for generating our particles. Using JavaScript, we load the image onto a temporary canvas, grab every opaque pixel location with getImageData(), and produce a map of individual swarm particles in the shape of the image.

This gives us plenty of particle locations — too many, in fact, to create a suitable swarm. So we incorporate Shape’s spread property that downscales the map by a spread factor to reduce the number of particles, then re-enlarges it again to yield a sparser collection of particles in the coordinate space of the original shape’s size.

how the image template is created with shape scaling

Here’s how to initialise a swarm shape from an image:


shapes = new ShapesCollection();

shapes.add('circle', new Shape({
	src : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAY...',
	width: 500,
	height: 500,
	offset : {
		x : 650,
		y : 550
	},
	spread : 20
}));

This example uses a data URI, but in the live version we set up the CMS so they could upload the images themselves. As long as they used transparent PNGs, our solution would keep on trucking, and the new swarm shapes would automatically appear on their site.

Animation is handled with a Renderer object that manages the run-loop encompassing the four main phases of operation:

  • Clearing the canvas
  • Updating particle (speech bubble) positions
  • Drawing onto the canvas
  • Setting up for the next iteration of the run-loop

Each particle calculates its own position at any time based on whether any active tweens exist in its queue. Tweens are an encapsulation of from-and-to locations, a duration, and an easing function to handle the transition.


var tween = new Tween({
	to : new Point(to_x, to_y),
	easing : 'easeOutQuad',
	duration : 1000,
	repeat : false
});

/**
 * 	piece is an instance of BubblePiece with a built-in orbiting jitter function 
 */

//Optionally replace all previous tweens by clearing beforehand
piece.clearTweens();
piece.addTween(tween);

Alongside motion tweening, we include a custom Jitter function to calculate the position of particles at any point in time. This gets particles to loiter around once it reaches the target location, adding life and suspense to the animation. By slightly varying the jitter speed of each particle, we achieved a semi-random motion effect that more closely emulates a real life swarm.

Putting all of this together gets us to the final masterpiece.

Hope you enjoyed this demo. We’re happy with how our animation turned out, and the client loved it. If you want to play with the code yourself, feel free to check it out it on github.

Like this post? You should follow Humaan on Twitter

Back to Ideas & Insights