Canvas Animation using interpolation

While drawing things on the canvas and scooting around them is nice, it gets old very fast. Instantaneously, if you’re an end user (unless you’re on a page for looking at things, in which case, no foul). On the other hand, there are far more efficient ways of rendering porn and/or amusing pictures of cats, so I’m going to go ahead and assume that we want to liven things up with some animation.

Continue reading “Canvas Animation using interpolation”

Reading Tiled maps for Canvas

In my previous post, I showed an example of a tile map in a viewport, but didn’t go into the details of explaining how the map was generated or loaded. In this post, we’re going to have a look at that.

The map file itself was created using an open source application called Tiled. It’s a neat application, and definitely beats writing out tile maps by hand. If you’re planning to do much work with tile maps, it’s worth checking out.

Continue reading “Reading Tiled maps for Canvas”

A Rough Path Finder in CoffeeScript

I’ve recently been playing with CoffeeScript, a neat little language that compiles to JavaScript. It’s a lot more concise than plain old javascript and can be organised much more tightly, so I’m really having a blast with it. That said, its conventions are a bit different to what I’m used to working with, so more bit of practice is in order.

One of the practice scripts I wrote is a very basic 2d pathfinder, hooked up to an html5 canvas element. The original idea was to get a good feel for the CoffeeScript syntax and then write a bit about it, but a screenshot of the finder on Facebook generated a bit of curiosity among some friends, so this post will be about the pathfinding algorithm instead; the CoffeeScript post will just have to wait a bit longer.

finder

Continue reading “A Rough Path Finder in CoffeeScript”

Visualizing data with Google Maps

map-screenshot A few weeks ago, a club I’m a member of was updating its membership information. Since the data was being collected in a Google spread sheet, I thought it would be interesting to create a map visualization to show where the members come from. In this post, we’ll write a map overlay which will generate a display like the one in the following image using data drawn from a Google spread sheet. Basically, we’re going to give a map a nasty rash.

You can also see the map here, or download the files here. Note that the size of each location has been fudged and bears no relation to the values originally collected in the membership survey.

Continue reading “Visualizing data with Google Maps”

Because we can

A few days ago, my next desk neighbour, Joe, put together a neat little Chrome extension which adds keyboard shortcuts for use in NeoGAF. It looked like fun, so I wanted to make one too, and, over the course of a smoking break, decided that it should tell me how many days are left until next St. Patrick’s day. Because hey, beer.

so_far

Version 0.1 of the plugin can be installed from its own page in the Chrome extensions repository. Enjoy!
The icons used in the plugin are from the Windows Beer Set from iconka.com.

Build even less (or incredibly more) useful stuff. Check out The Little Book of JavaScript!

Revisiting the JavaScript Calendar Control – Part 3

Be the JavaScript. Check out The Little Book of JavaScript!

It’s been some time since I started writing this three part series, and it certainly took a while longer to get done than I expected. A busy work schedule does tend to do that, but if it makes anyone feel better, having left the third part hanging did give my conscience a field trip. So let’s do a quick recap and get on with it 🙂

  • In part 1, we created a jQuery plugin which displays a simple static calendar.
  • In part 2, we added the facility to pick a date, and to switch the month on display.
  • In part 3 (this post), we will add some sanity checks, and the ability to display events on given days.

Continue reading “Revisiting the JavaScript Calendar Control – Part 3”

Revisiting the JavaScript Calendar Control – Part 2

Show your scripts who’s the boss! Check out The Little Book of JavaScript!

Following last week’s implementation of the basic shape of the calendar, this week we will add behaviours so that we can pick a date on it.

This post is part of a series of three posts: