If you prefer to watch this in video format, I got you covered!

The source file for this tutorial can be found at here: Source file.

The finished file, which you can use for reference, is: SVG file.

Once you have the sketch open Inkscape, lock the layer with the sketch and create a new layer to work in. We will be hiding the sketch layer later, so we don’t want to be drawing in it.

With the new layer selected, use the bezier curve tool to draw the outline of the bunny. Just click to place a node, then hold the left mouse button down and drag to adjust the curve.

Don’t worry too much about getting an exact outline, you can go back and tweak it later. Of course if something looks really off, you can always ctrl-z to undo back to the previous node.

Once you close the curve, you should get an outline. We want to turn this into a silhouette, so change the fill color to solid black and set the stroke color to none. We still need to be able to see the sketch under this for now, so let’s temporarily make this translucent by dropping the opacity for the layer down low.

Next, lock the layer we were working on and add a new layer where we will draw in the white area on the bunny. This time we’re only vaguely following the outline and only drawing around the areas that would be getting a lot of light – in a very stylized way of course. Other than that, it’s exactly the same as the black outline we just did. This time, set the fill to white.

If you need to make any adjustments to the curves, you can use he node editing tool. The control points move the curve around, while the two handles attached to these points to alter the curve.

You can also add control points by selecting two adjacent points and clicking add node at the top of the window, or remove excess control points.

Once it looks decent, it’s time to color in the bunny’s head and ears. Exact same procedure.

Ok, layer locked, and it’s time to start adding some details. Before that, drop the opacity of this layer to make it translucent – easier than setting the transparency for each individual component. The translucency allows you to see the sketch under your drawing.

This step is fairly quick, as we’re just drawing lines, and pressing enter or right clicking to end the curve without closing the path.

Add a sublayer for the stitches, as this will allow you to select and modify them in one go.

Use the stroke style to thicken up these lines, and make their ends round.

Moving on, add a nose, and some color to the belly and ears. Same as before, new layer and bezier tool.

Next up, the eyes. Use the ellipse tool to get the overall shape of the buttons. By holding down shift, we can draw the ellipse around a point. 

Using the bezier tool, add a little patch here. Lower the alpha so that the patch shades the underlying color. repeat on the other eye, and add more little ellipses to simulate button holes. Use CTRL-D to duplicate them, then move them in place. For the stitches, you guessed it, bezier tool.

With the eyes done, group each eye separately by selecting the components and pressing CTRL-G. This lets you select and move them around in one unit, rather than having to move every single component. The reason we’re doing this is to find a good position for them, because eye position can make the difference between creepy, funny, and stuff. Just move them around till it looks ok to you.

As a final step, let’s add some shading. To add shading, I just draw shapes where I want the shading to go, turn alpha pretty low, and pick a color. You can also readjust the position of the shape as you prefer.

Ok, that’s it for this post – I hope you found it useful, and if you know someone who might enjoy this please share the video with them! If you have any questions or ideas, please drop me a comment below or on my facebook page! 

Thank you for reading, and see you around!

This is a very simple operation but a lot of people seem to miss it, and try to build their table of contents manually. This might work ok if you’re working on a short document, but if you’re writing anything longer it very quickly becomes a mess. And even if you manage to nail it down, you add an image or change the font size, and boom, you have to renumber all the entries.

So what can you do instead? First off, make sure all the headings you want in your table of contents are marked with Heading styles.

Then, you go to the place in your document where you want your table of contents to go, head to the “Insert” menu and head to the table of contents. Select “Table of contents” and you’re good to go.

creates the following:

Headers creating using Heading 2, Heading 3 styles etc will be indented under their parent heading, which lets you have a nice hierarchical table of contents.

If you move stuff around later, you will just need to head back to your table and select refresh table – and easy as that, all the page numbers are updated.

This is the same way I built the table of contents for my book a few years ago, and let me tell you there’s no way I would have been able to do it manually.

There’s another bonus that comes with styles: styles let you change all items of the same type in one go, so if at some point you decided that all your headings should be in a particular font (in the video I set it to comic sans, here I’m changing it back because comic sans is an abomination), you can just go ahead and edit one heading, right click, and hit “Update `heading 1` to match”. And all the headings of the same type will get updated to match. Again, simple tip but one that many people seem to miss so I hope this will save a lot of frustration.

I hope this was helpful, and if you enjoyed this content please consider sharing this post with someone who might find it useful.

Want to host your own website? Check out Bluehost (full disclosure – affiliate link) – I have been using their services for all of my sites for some time and so far I’ve only got good things to say about them!

In his tutorial, Steve demonstrates how you can capture a large object, and I highly recommend watching it because he explains the process very well. What I’ll be discussing in this post is capturing a small object using a slightly different technique which should be easier for this size. If you prefer to follow along with a video, I got you covered:

I am going to use is a technique called photogrammetry, where you can take a bunch of reference pictures, run them through your software, and get a 3d model out the other end. Below is a sample of the scanned miniature after it was run through Blender:

1. Pick your subject

First, choose your subject. Miniatures are almost a worst case scenario for this kind of work  because they are very small, and the detail is tiny. We’re talking fractions of a millimeter here. Add that to the fact that I’m going to be running a painted miniature through this process, and it makes it even worse. 

The first miniature I tried to scan was this one I sculpted about 20 years ago.

Unfortunately, it has very little detail for the software to latch on to, and it includes parts covered in metallic paint and a layer of varnish, which totally confused the software. The results were, let’s say trippy.

Instead, now I’m going to try with this Games Workshop zombie, purely for experiment; people, do not copy copyrighted stuff. It’s not cool. This model has more clearly defined detail and color variations, which should help.

2. Lighting

Step two, lighting. To begin with, I taped down my home made light box to a solid surface so it wouldn’t move as I worked. The light box ensures that the lighting is consistent and that the object is properly illuminated. I am not using a background in the light box here since the depth of field seems to help the process. Also… well, the results with a background were kind of funky.

If you do not have a light box and don’t fancy making or buying one, don’t worry – just use indirect sunlight – an overcast day is perfect for this. What you are looking for here is even lighting with no weird shadows.

3. Set up the camera and subject

Third, photograph the mini at consistent angle intervals. From experiments I did yesterday, I determined that my hands are not good at this level of precision. Instead, I made a small jig I can use to turn the mini 10 degrees each time. This is literally just two paper circles with angle markings held together with a pin

This allowed me to rotate the miniature around a fixed center, and by lining up the markings on the smaller and the larger circle I could guarantee that the rotation was a consistent 10 degrees. The numbers on the segments were added in case I had to re-take any angles. Since the pin stuck some way out of the surface, I also added a bottle cap so the mini would sit flat, and taped the mini on top.

With the subject in place, I set up the camera on a tripod and made sure that all the settings were set to manual. This ensures that all the settings remain the same through the shooting. I used my video camera to take stills here, though you should be able to get better results from a photo camera or even some mobile cameras since the sensor tends to be larger. 

4. Start snapping photos

Step four, I started snapping photos. After every photo, I rotated the subject 10 degrees. Then I repeated this a couple of times from different heights.

5. Run the photos through Meshroom

Step five, I took my SD card and imported all the photos into Meshroom. This software is free to download and use, and you can find the link in the description below. It is a magnificent tool, honestly, to the team who made this: you blew my mind. It’s literally a case of dropping the photos in the application and hitting start.

In my first run through, most of the model looked great but was missing some parts like the jaw and the fingers on the left hand. This corresponds to areas where the software couldn’t extract enough information from the image. I was still very impressed by the quality of what did get modelled, so I tried to bump up the definer preset to high and made another run with the same set of images to see if I could get a better model.

Unfortunately that stopped working because it ran into a known issue, a known bug in version 2019.01. No big deal. What I did was I went back and downloaded version 2018.01 and set it running again, and worked fine with the high preset.

I don’t think that’s a big deal for me and to be honest, if I had used a better camera in the first place, I don’t think I would have needed the high preset anyway.

I’m also told that the next version with the fix for this will be out in the coming months; to be honest though, if you’re going to try this what I would suggest is get 2019 anyway and chances are that if you’re using a decent camera you’re not going to have this problem anyway.

The model was completely scanned this time, with only a couple of artefacts around the armpits and near the crotch; this is great for a scan of a miniature, and it’s stuff I can clean up in blender anyway.

When importing a model scanned with Meshroom into Blender, it’s a good idea to switch to the Cycles renderer, as this allows it to import and attach all the texture nodes.

Considering this is a photo scan of a 28mm mini with an ok camera, what the software did was pretty amazing.

And that’s it for this experiment. Of course I barely scratched the surface here and there’s a lot I need to learn about preparing images and tweaking settings. However I am now confident that this is doable.

I hope you found this useful and if you have any comments or suggestions, I’d love to hear them so do leave a comment.

Before I close this off, I’d just like to thank the people who made Meshroom, they really made a fantastic product – maximum respect. Thanks also go to CG Geek for the smashing tutorial.

Want to host your own website? Check out Bluehost (full disclosure – affiliate link) – I have been using their services for all of my sites for some time and so far I’ve only got good things to say about them!

One way to do this is to use bit operations to reduce a state to a single number. This is nothing new; anyone who has ever used flags knows how it works. The catch is that you cannot crunch detailed information in this way; it only works for boolean values. Even so, depending on the structure of your data you should be able to leverage it rather easily.

For these examples we’ll use JavaScript; however the concepts apply to any language.

Let’s start with a JSON object. JSON is great, but even if it’s a massive step up from good old XML, it can still be rather verbose. Say we have the following state object we want to save or send.

var gameStateFlags = {
	"mission.abc.complete": false,
	"mission.xyz.complete": true,
	"mission.123.complete": false,
	"collected.gizmo.123": true,
	"talked.to.npc.ssadf": false,
	"talked.to.npc.eoesk": true
}

We can easily compress this, as long as we have a set of numeric values we can map to each property. Let’s say:

var states = {
	"mission.abc.complete": 1,
	"mission.xyz.complete": 2,
	"mission.123.complete": 4,
	"collected.gizmo.123": 8,
	"talked.to.npc.ssadf": 16,
	"talked.to.npc.eoesk": 32
}

Each successive property name is mapped to 2 to the power of n. You could even autogenerate this, though I’m not a fan of that approach; changing the order would cause different values to be mapped, leading to glitches when reading data stored using a different map.

Now that we have a numeric value for the properties, we can OR them together where they are true:

var serialize = function(state) {
	var serializedState = 0;

	Object.keys(state).forEach(function(flag) {
		if (state[flag]) serializedState |= states[flag];
	});

	return serializedState;
}

Let’s call serialize(gameStateFlags). We start with a serializedState of 0 (or 00000000 if we assume an 8 bit number). If we try to process each property in turn:
“mission.abc.complete” is false so nothing happens.
“mission.xyz.complete” is true, so we find its value (2, or 00000010) and OR it into the state. 00000000 | 00000010 gives us 00000010.
“mission.123.complete” is false so nothing happens.
“collected.gizmo.123”: is true, so we find its value (8, or 00001000) and OR it into the state. 00000010 | 00001000 gives us 00001010.
“talked.to.npc.ssadf”: is false so nothing happens.
“talked.to.npc.eoesk”: is true, so we find its value (32, or 00100000) and OR it into the state. 00001010 | 00100000 gives us 00101010.

The end result is 00101010, or 42. (Sure, we could have found this just by doing 2 + 8 + 32, but bear with me – it will help understand the reading later). We can send this over the wire, or store it, using much less space than it would have taken to store the entire object.

Now, how do we turn our number back into a usable object? Provided (and this is important) that the reader has the same set of mapped values, we can just reverse the process using the AND operator:

var deserialize = function(stateValue) {
	var deserializedState = {};

	Object.keys(states).forEach(function(flag) {
		deserializedState[flag] = ((stateValue & states[flag]) != 0);
	});

	return deserializedState;
}

If we deserialize(42), we will compare the bit for each property against the bits that make up our number. The & will work as a bit mask, and the result will only contain bits which appear in both numbers. Let’s take the first one, “mission.abc.complete”. The value for that is 1, or 00000001.

42: 00101010
01: 00000001
————
&: 00000000

In this case, since there are no matching bits we get 0, which we interpret as false.

Taking the second one (“mission.xyz.complete”, value 2):

42: 00101010
01: 00000010
————
&: 00000010

This time we do have a matching bit at position 2, so we get a non-zero value which we interpret as 2.

This is the reason we only use 2^n for the mapping, rather than just picking any which number. “3” would be ambiguous, since it can be the result of both 1 and 2 being present. That said, the reader can use this to advantage if it is only interested in knowing some facts without processing the whole thing. Let’s say your reader only needs to know if “mission.abc.complete” or “collected.gizmo.123” are true. Rather than desrializing the whole thing, you could just use the following:

var missionAbcCompleteOrCollectedGizmo123Mask = states["mission.abc.complete"] + states["collected.gizmo.123"];

This will set the value to 9 (1 + 8). Checking this against our original value, 42:

var missionAbcCompleteOrCollectedGizmo123 = (42 & missionAbcCompleteOrCollectedGizmo123Mask) != 0;

42: 00101010
01: 00001001
————
&: 00001000

This gives 8 (the matching bit), a non-zero value, so we know that one of the two criteria was met.

While this is a pretty old school way of doing things, it’s still a useful trick to have up one’s sleeve, especially if one is working with smaller, low power devices. If you have any questions or thoughts on the subject, let me know in the comments below!

It won’t take you through writing a complete application, and I’m assuming that the people who read it are a bit past the “hello world” phase. It’s aimed at people who have dabbled a little, but need a few gaps filled in. The book focuses on raw JavaScript concepts as opposed to their use in any particular framework.

The print version of “The Little Book of JavaScript” is available from Amazon and Lulu.com.

The eBook is available from Lulu.com, Amazon, Nook and Kobo

[Edit 30/09/2014]Just received my printed copy, and it looks great! I’d happily recommend lulu.com for anyone who wants to publish something.

Here’s a list of topics covered:

• Some basics
  • Variable definition
  • Undefined variables
  • Strict and Lenient Equality
  • Logical and Bitwise operators
    • And: & and &&
    • Or: | and ||
    • The Negation Operator
  • The Ternary Operator
  • Scopes
    • Redefining variables in a scope
  • Closures
• Functions
  • Declaring functions
  • Function parameters
    • Value and reference arguments
  • Return values
    • Fluent APIs
  • Functions as variables
  • “this”
    • Preserving context using closures
    • Bind
  • Callbacks
• Object Oriented JavaScript
  • Classes
    • Constructors
    • Creating instances
    • “Singleton” constructors
  • Objects
    • Adding Properties or Functions to Objects
    • Namespaces
  • Prototypes
    • The Constructor property
  • Inline Definitions and JSON
• Strict Mode JavaScript
  • Enabling Strict Mode
  • Effects of Strict Mode

I’d like to thank Claire, Chris, David and Matthew for checking the book and making sure nothing in it can accidentally awaken Chtulhu or cause a rain of angry goats or anything.

The print version of “The Little Book of JavaScript” is available from Amazon and Lulu.com.

The eBook is available from Lulu.com, Amazon, Nook and Kobo

{% for post in posts %}
	{% set format = site.get_post_format() %}
	{% include format 
              ? "content-" ~ format ~ ".html.twig" 
              : "content.html.twig" %}
{% else %} 
	{% include "content-none.html.twig" %}
{% endfor %>

Where “posts” was a php iterator that used the WordPress loop. We were also using a proxy class to access wordpress functions in the template. While this works, I wasn’t too happy with the situation in general. The template was making too many decisions and calling functions. Templates shouldn’t be heavy on logic, because their only purpose should be to display stuff, not to decide what gets displayed.

It also fails to address another problem that I find annoying in wordpress – the content tree is generated during the construction of the page, not before it. That means that certain information isn’t normally available while building the header, for example. In the past, I’ve used a workaround which involves multiple queries and resetting the loop, but this time, I wanted it built into the theme.

The solution is as simple as iterating through the loop completely before starting to render the templates. In this way, we can build up everything the template needs beforehand, so it does not need to make any additional calls. Data is accessible all through the template, and the template itself becomes much simpler. Here’s the part of index.php where we’re building up the content:

	
if (have_posts()) {
    while (have_posts()) {
        the_post();

        $additional_classes = (is_sticky() && is_home() && !is_paged()) ? "featured" : "";

        $p = array(
            'id' => get_the_ID(),
            'template' => $site->get_format(),
            'title' => get_the_title(),
            'permalink' => get_permalink(),
            'author' => get_the_author(),	
            'classes' => get_post_class($additional_classes),
            'date' => get_the_time(get_option('date_format'))
        );

        if (is_single()) {
            $p['content'] = get_the_content();				
            $meta['description'] = get_the_excerpt();
        } else {
            $p['content'] = get_the_excerpt();

            if (has_post_thumbnail()) {
                $image_attributes = wp_get_attachment_image_src(get_post_thumbnail_id(), 'thumbnail');
                $p['thumbnail'] = $image_attributes[0];
            }
        }

        if ($editable) {
            $p['editlink'] = get_edit_post_link();	
        }

        array_push($content, $p);
    }
}

In the excerpt above, you can see that we’re pulling data in from wordpress itself, and adding some metadata of our own. For example,

'template' => $site->get_format()

tells the post which template file it should use, for example, content.html.twig, summary-gallery.html.twig, and so on. The template doesn’t need to make any decisions. We’re also taking the opportunity to make the fields consistent. In

	if (is_single()) {
		$p['content'] = get_the_content();				
		$meta['description'] = get_the_excerpt();
	} else {
		$p['content'] = get_the_excerpt();
		...
	}

We’re setting the post content to the value of content if we’re showing a single post, or the value of the summary if we’re showing a list of posts. Both the summary and the full post templates will receive a ‘content’ property that represents their primary content:

<article id="post-{{ p.id ?: "0" }}" class="{{ p.classes|join(" ") ?: "post no-results not-found" }}">
	<header class="entry-header row-fluid">
		<h1 class="entry-title">
			{% block articleHeader %}
				<a href="{{ p.permalink }}" title="{{ site.text('Permalink to %s')|format(p.title)|e }}" rel="bookmark">{{ p.title }}</a>
			{% endblock %}
		</h1>
	</header>

	<div class="entry-content row-fluid">{% block articleContent %}{{ p.content|raw }}{% endblock %}</div>

	<footer class="entry-meta row-fluid">
		{% block articleFooter %}
			<div class="meta">{{ site.text('Posted on <span class="date">%s</span>'|format(p.date))|raw }} {{ site.text('by <span class="author">%s</span>')|format(p.author)|raw }}</div>
			{% if meta.editable %}<a href="{{ p.editlink }}" class="edit">{{ site.text("Edit") }}</a>{% endif %}
		{% endblock %}
	</footer>
</article>

content-master.html.twig

<article
	id="post-{{ p.id }}" 
	class="{{ p.classes|join(" ") }} summary row-fluid">

	<a href="{{ p.permalink }}" title="{{ site.text('Permalink to %s')|format(p.title)|e }}" rel="bookmark">

	{% if p.thumbnail %}
		<img src="{{ p.thumbnail }}" class="thumbnail span2" title="{{ p.title()|e }}" />
	{% else %}
		<div class="no thumbnail span2">{{ site.text("no thumbnail") }}</div>
	{% endif %}

	<article class="summary span8">
		<header class="entry-header row-fluid">
			<h1 class="entry-title">
				{% block articleHeader %}{{ p.title }}{% endblock %}
			</h1>
		</header>

		<section class="entry-content row-fluid">
			{% block articleContent %}{{ p.content|raw }}{% endblock %}
		</section>

		<footer class="entry-meta row-fluid">
			{% block articleFooter %}
				{% if meta.editable %}
					<a href="{{ p.editlink }}" class="edit">{{ site.text("Edit") }}</a>
				{% endif %}
			{% endblock %}
		</footer>
	</article>
</a>
</article>

summary-master.html.twig

While the main template now simply looks like this:

{% extends "master.html.twig" %}
{% block pageContent %}

{% endblock %}

index.html.twig

The only function I’m still calling directly is site.text, which wraps the wordpress __ function for text localization. This is intentional as I’m planning to replace it at a later stage. Most plugins and systems which are used to support localization depend scan the theme files for uses of that function, and wrapping it in this way can prevent them from working properly. I’ll probably make some sort of localization file for the theme which sets up the localized values, but it’s not something I’ll be looking at right now.

Next up: Styling the template

Twig is a templating engine for php. It has more than enough features to get me going, setting it up is as easy as falling off a tree, and I haven’t used it much, which makes it a good candidate for me.

Making WordPress call Twig

Once we’ve downloaded Twig and put it somewhere convenient (in my case, in my theme folder – I’d like to move it out eventually, but it can stay there while I work it out), we need to tell WordPress to initialize the Twig engine. Darko Goles’ blog post, TWIG with WordPress part 1, covers this admirably. In his post, he’s initializing the engine through a plugin, which I wanted to avoid as I didn’t want a theme to depend on a plugin. Luckily the mechanism is the same, since the hooking mechanism in WordPress papers over these issues – we can initialize from a theme exactly like we do from a plugin, by specifying the actions in a functions.php file:

<?php 
    // theme functions.php
    require_once dirname(__FILE__).'/twig.helper.php';
?>

<?php
    // twig.helper.php
    require_once dirname(__FILE__).'/lib/Twig/Autoloader.php';

    class Twig_Helper {
	public static function register() {
	    ini_set('unserialize_callback_func', 
                'spl_autoload_call');
            spl_autoload_register(array(new self, 'autoload'));
	}

	public static function autoload($class) {

            if (0 !== strpos($class, 'Wp_TwigEngine'))
	        return;

            if (file_exists($file = dirname(__FILE__) . '/../' 
                . str_replace(array('_', "\0"), array('/', ''), 
                $class) . '.php')) {
		     echo($file);
		     exit;
                     require $file;
	    }
	}

	...
	...
    }

    ...

    function autoload_twig() {
        Twig_Autoloader::register();
	Twig_Helper::register();
    }

    add_action('init', 'autoload_twig');
?>

The above is copied nearly verbatim from the post I mentioned above, and works fine. It registers twig and loads all the classes it needs to work. I put this in a separate file and referenced it from functions.php so it wouldn’t get mixed in with any theming functions I might need to add later.

Getting to the data

Now we’re able to load templates, but we still need to be able to pass data to them. The solution came, again, from Mr. Goles’ blog, this time from TWIG with WordPress part 2 – we pass a proxy object to the template, which it can then use to call functions on. Again, I used the code from this post almost as provided, except that I used the same TwigHelper class to provide this proxy. I also added another method, text, to wrap the __(string, key) function used for localization.

Writing templates

The template file looks like this:

{% extends "master.html.twig" %}
{% block pageContent %}
	<section id="content" role="main">
		{% for post in posts %}
			{% set format = site.get_post_format() %}
			{% include format 
                               ? "content-" ~ format ~ ".html.twig" 
                               : "content.html.twig" %}
		{% else %} 
			{% include "content-none.html.twig" %}
		{% endfor %>	
	</section>
{% endblock %}

Not much of it, is there? In reality, that’s because most of the layout is defined in master.html.twig, which we’re extending in the first line. This file has placeholders for the pageContent block which is being filled up here, and the rest of the page around it. I’ve also delegated the no-content section to its own file. The snippet above is the equivalent of:

	<div id="content" role="main">
	    <?php if ( have_posts() ) : ?>	
	        <?php while ( have_posts() ) : the_post(); ?>
	            <?php get_template_part('content', 
                                 get_post_format() ); ?>
	        <?php endwhile; ?>
	<?php else : ?>
		<?!-- stuff to show if there's no content -->
	<?php endif; ?>
	</div>

It may not be significantly shorter, but it’s a damn sight easier to read. The readability and size gains are much greater when you have more markup, but I don’t want this to be a templating post.

While… hang on, where’s while?

As I was working on the loop, I realized that Twig doesn’t have a “while” control. This was a problem as WordPress is heavily dependent on The Loop. This can be worked around, as demonstrated in this blog post by Luis Cordova, by making an iterator and using it in a for loop. It’s a good enough solution and the template doesn’t look bad.

Current status

At this point I have a barely functional them (still need to port over a lot of stuff) but getting here took a lot less time than I thought it would. My next step will probably be to port over as much of the old theme as I can, and then work from there.

The Plan

“Whut’s the plan, Rob?” said one of them.
“OK lads, this is what we’ll do. As soon as we see somethin’, we’ll attack it. Right?”
– Sir Terry Pratchett, “The Wee Free Men”

Right now I have a few ideas and tools I want to experiment with, which will somehow get roped into this project.

On the scripting side, I want to organize all the loose scripts I have running around. Some of them will inevitably added by WordPress plugins – that can’t be helped, but I’d like to keep the internal stuff as tight as possible. Require.js seems to be a good idea – might even be able to modularize some of the external scripts and load them through it.

For my own stuff I want to use Coffeescript as much as possible, so I get in as much practice as I can. The more I use it, the more I’m liking it.

The stylesheets will get redone in Sass, and compiled in Compass. Again, it’s partly because it’s more efficient, and partly because I need the practice.

I also want the page to be a bit more fluid, so it can be read more easily on devices of different size. I’ve had a play around with Bootstrap, and that seems to do nicely, so in it goes.

The final item on this shopping list is really the first one I’m tackling right now. I’d really like to clean up the templates; right now it’s really just php code, but I’d much rather cut it up into templates of some kind. Some digging around here will be needed, but I’ll allocate a time limit of two or three evenings so I don’t get stuck on that, or wander off bored when my attention span catches up with me.

So far, I’ve set up a local Git repository, cobbled together a Node script to sort out the different apps I’ll be using (CoffeeScript compiler, Compass, and later on the Require.js optimizer) and gathered all the dependencies mentioned above. We’ll see how this goes.

You can see a demo for this post here.

There are two kinds of animation I’m interested in right now. The first kind, that we’re going to look at today, is moving things around the screen. The other kind, that I’m still working on (largely because I’m terrible at image editing) is sprite animation; I’ll post some more information about that as soon as I’ve finished something worth seeing.

Moving an object on the screen is as simple as updating its coordinates before redrawing it. That causes it to jump to a new position on screen, which is fantastic if you’re working on a game where the only means of locomotion is teleportation, but since most of us have to deal with rather more mundane activities, what we really want is for the object to cross the intervening space. We can achieve this by repeatedly updating the position of the object in small jumps, creating the illusion of movement.

Now, we know where the object is before it starts moving, and we know where we want it to end up, but how do we determine all the points in between? And how do we make sure it moves smoothly?

Simple Interpolation

Interpolators are a simple answer to both questions. Since we have two points, we can derive a line of travel; if we know the speed at which the object is supposed to travel, we can calculate where the object will be at any time after it started moving. This lets us bind the movement to a timer or a cycle which updates the position every so often.

Let’s say we have an object at 0,0, and we want it to go to 100,0 at 10 pixels per second. The line it’s going to travel is 100 pixels long in total, so it will take 10 seconds (distance/speed) to get to the end.

Let’s set it going and start a stopwatch.

Right at the start, when 0 seconds have elapsed, the distance travelled is 0.
At 5 seconds, or 0.5 of the total time, distance travelled is 50.
At 10 seconds, or 1 whole of the total time, the distance travelled is 100.

In other words, the distance travelled is

([elapsed time] / [total time]) * [full distance]

We can also calculate the x and y coordinates from the ratio of elapsed time to total time:

x = (x2 - x1) * ([elapsed time] / [total time])
y = (y2 - y1) * ([elapsed time] / [total time])

Where x1 and y1 are the coordinates of the starting point, and x2 and y2 are the coordinates of the destination. Plugging the examples above here:

At 0 seconds:

x = (100 - 0) * (0/10) = 100 * 0 = 0
y = (0 - 0) * (0/10) = 0 * 0 = 0

At 5 seconds:

x = (100 - 0) * (5/10) = 100 * 0.5 = 50
y = (0 - 0) * (0/10) = 0 * 0 = 0

At 10 seconds:

x = (100 - 0) * (10/10) = 100 * 1 = 100
y = (0 - 0) * (0/10) = 0 * 0 = 0

Easing

The linear interpolator above does it’s job well enough, but once you see it in action, you’ll notice that the rate of movement is perfectly constant across the whole length of the movement. In most cases in the physical world (you know, the one with smells and stuff) when something starts moving it will start off slow, pick up momentum, and eventually slow down to a stop.

Unless you’re in space, in which case you’ll just keep hurtling through the void until you crash into something or get sucked into a black hole.

Luckily, modelling different types of acceleration and deceleration isn’t that tricky (“it just takes a lot of tweaking or some good math skills”, he didn’t say). The interpolation above is defines a line (hence the linear); we can define a basic system of easing by changing it so that it defines a curve.

Suppose you plot the linear interpolation out on a graph: the distance travelled is a straight line based on the elapsed time (blue), and the speed is constant throughout (red, not to scale):

It’s pretty straightforward; y = x stuff. Now let’s say we change it a little so that y = x² and we have ourselves a nice ease-in:

That gives us a nice curve, which means that the movement will start off nice and slow, and pick up speed until the end of the path. Perfect if you ever need to animate someone running face-first into a wall.

As you can see, tweaking the interpolator a little gives you control over the speed and acceleration of your moving objects. I’ve added ease-out and ease-in-out interpolators in the example, both based on the square of the time coefficient, but there’s really a cubic buttload of different functions you could use if that’s the kind of thing you dig.

Other stuff you can animate

Although I wrote this for practice with canvas, there are a bunch of different areas you could apply it to besides positioning. For example, you could use an interpolation to smoothly change the opacity or colour of an element; there’s nothing that ties this concept to the canvas element. If you’re looking to do this though, you might be better served looking into css3 transitions or jQuery animation.

No, seriously. Don’t reinvent the wheel.