Doug McInnes » Coding http://dougmcinnes.com Chuckle and Chortle Wed, 24 Aug 2011 05:51:53 +0000 en hourly 1 http://wordpress.org/?v=3.3 HTML 5 Asteroids on the iPad http://dougmcinnes.com/2010/05/24/html-5-asteroids-on-the-ipad/ http://dougmcinnes.com/2010/05/24/html-5-asteroids-on-the-ipad/#comments Tue, 25 May 2010 07:29:44 +0000 Doug http://dougmcinnes.com/?p=168 Continue reading →]]> I’ve added touch controls to the HTML 5 Asteroids game that will only appear when you’re running it on an iPad.  The game will expand to fill the whole screen for maximum asteroid blasting action.  Orient your iPad in landscape fashion!

Play It!

 

There are a couple caveats (warning some nerdy content ahead):

Tunneling Effect

On the iPad the game runs at around 22 frames per second at its peak, not nearly as good as around 40 on a laptop, though it is enough for gameplay even if it can get choppy at times when there’s a lot of stuff whizzing around.

Unfortunately I’m only testing for collisions when the objects are rendered so it’s quite possible with lower framerates to have a bullet flying out of your ship first get rendered on one side of the asteroid you’re trying to pulverize and in the next frame get rendered on the other side letting it sail undamaged into your ship.  This is called the tunneling effect.  This is not a problem on a laptop or desktop because the framerates are high.  Since we’re sampling less per second (~22 verses ~40) a moving object is drawn less times though it’s traveling the same distance.  In other words if an asteroid travels from the top of the screen to the bottom of the screen in one second, on your computer it will most likely get drawn 40 times during that trip and on an iPad it will get drawn only 22 times leaving larger gaps between the drawings.  These larger gaps leave more of a chance for things to slip through and not collide when your eyes say they should have.

I’m considering augmenting the collision detection to remove the tunneling effect but it will need extra math which means slower framerates, at least initially.  It might be a better use of my time to pump framerates up.

Buggy Touch Events

There’s a bug with the iPad’s implementation of touch events in Javascript: if you have two fingers on the screen and raise one of them, a “touchend” event gets fired containing a reference to both fingers even though the second one hasn’t been raised.  If you then raise the second one, a “touchend” event is not fired.

It drove me nuts trying to figure this out and I haven’t been able to work around it.

What this means for the game is that using two fingers at the same time will get frustrating fast as the control you’re holding down will stop working periodically.  I suggest tapping for the best experience instead of holding.

Oh, this does not happen on the iPhone in case you were wondering, it works as expected! I have sent a bug report to apple (with a sample html page) and hopefully they already have a fix that’s not available yet or they will fix it for a future release.

On a side note, why aren’t Apple’s bug lists searchable by the public?  They must get reams of dupes.

In any case, let me know how it works!

]]> http://dougmcinnes.com/2010/05/24/html-5-asteroids-on-the-ipad/feed/ 2 HTML 5 Asteroids http://dougmcinnes.com/2010/05/12/html-5-asteroids/ http://dougmcinnes.com/2010/05/12/html-5-asteroids/#comments Thu, 13 May 2010 06:42:31 +0000 Doug http://dougmcinnes.com/?p=126 Continue reading →]]> For some months I’ve been playing around with HTML 5′s Canvas element because I was curious about it, especially after seeing it run Flash.  I hacked at it for a while then realized I had produced an Asteroids game.

Play It!

 

The source code is up on GitHub!

The Canvas element is super cool.  Basically all of the sprites in the game are simple paths defined by an array of points.  These points are translated, rotated and scaled based on their state at any given point in the game using the standard Canvas transformations.  Plus it gives it a nice retro feel.

Let me know what you think!

Here’s some cool links to things that helped me out with the game:

  • Determining Whether A Point Is Inside A Complex Polygon.  Firefox does the wrong thing when it comes to isPointInPath(), the main Canvas method I used for collision detection; It doesn’t apply the current transformations before determining if there’s been a collision (and they won’t fix it for some reason).  I implemented this method to get around the problem but it works fast enough it could be used on all browsers.
  • Metanet Software, the makers of the awesome flash game N, have made a couple of extremely useful tutorials on collision detection.  These describe some of the techniques I used in the game, in particular the grid based broad-phase they describe in their second tutorial.
  • I used typeface.js ‘s convert tool to convert the awesome Vector Battle font into some JSON point data that could be easily used in the canvas.  Typeface.js is a neat library for easily embedding arbitrary fonts in the page.  On supported browsers it creates small canvas elements and renders the font inside based on the CSS.  I borrowed bits from the library to get the font rendering.
]]> http://dougmcinnes.com/2010/05/12/html-5-asteroids/feed/ 64 Ruby Vim Fu http://dougmcinnes.com/2010/04/11/ruby-vim-fu/ http://dougmcinnes.com/2010/04/11/ruby-vim-fu/#comments Mon, 12 Apr 2010 06:18:19 +0000 Doug http://dougmcinnes.com/?p=81 Continue reading →]]> This last Thursday Alf and I gave a talk at LA Ruby on Vim, in particular how we use Vim to edit Ruby code.  Giles asked us to present on Vim months ago and we finally got around to doing it.

I think it went well considering we probably spent more time figuring out the background color scheme on our slides than preparing what we were going to say.  I wasn’t worried, I’ve been using Vim for 15 years now so it was my favorite kind of speech: one where I felt completely at ease with the subject matter.

In any case here are the slides in a viewable form on Github, as well as the source.  We used the Slideshow gem to set them up.

The slides probably will not be of any particular use to you since they’re rather sparse.  We however added a bunch of links on the end to blogs/screencasts/cool sites we like as well as all of the plugins we mentioned during the talk.

So you don’t have to hunt through the slides here are those links in all their glory:

Links

http://www.vim.org/

MacVim – http://code.google.com/p/macvim/

http://vim.wikia.com/wiki/Best_Vim_Tips

Cheat Sheet! – http://www.viemu.com/a_vi_vim_graphical_cheat_sheet_tutorial.html

http://items.sjbach.com/319/configuring-vim-right

Screencasts on Vim – http://vimcasts.org/

Vim Tip a Day on Twitter – http://twitter.com/vimtips

http://durdn.com/blog/2008/11/26/vim-mind-share-soaring-roundup-of-10-vim-articles-recent-and-older-gems/

Vim Recipies – http://vim.runpaint.org/toc/

http://biodegradablegeek.com/2007/12/using-vim-as-a-complete-ruby-on-rails-ide/

Plugins

The Rails Plugin – http://rails.vim.tpope.net/

NERD Tree – http://www.vim.org/scripts/script.php?script_id=1658

Command-T – http://www.vim.org/scripts/script.php?script_id=3025

BufExplorer – http://www.vim.org/scripts/script.php?script_id=42

AutoTag – http://www.vim.org/scripts/script.php?script_id=1343

Vimball – http://www.vim.org/scripts/script.php?script_id=1502

NERDCommenter – http://www.vim.org/scripts/script.php?script_id=1218

NERDSnippets – http://github.com/scrooloose/nerdsnippets

Align – http://www.vim.org/scripts/script.php?script_id=294

RubySingleTest – http://www.vim.org/scripts/script.php?script_id=2869

]]> http://dougmcinnes.com/2010/04/11/ruby-vim-fu/feed/ 0 Ruby Single Test http://dougmcinnes.com/2009/02/16/ruby-single-test/ http://dougmcinnes.com/2009/02/16/ruby-single-test/#comments Mon, 16 Feb 2009 15:59:11 +0000 Doug http://dougmcinnes.com/?p=73 Continue reading →]]> I, like many developers, do my best to follow the practice of Test Driven Development (TDD). In practical terms this means you write a test to test your code before you write the code itself. This approach forces your mindset into having a clearer sense of how the code will be used since you’re writing code to use the code first.  Got it?  Increased test coverage also means more robust and maintainable code.

My first formal introduction to TDD was a three-day TDD workshop put on by Jim Weirich and Joe O’Brien while I was at the Los Angeles Times. Jim, an expert EMACS user, had his system setup to run tests quickly from within the editor, even showing a red or green notice indicating the pass/fail status of the test.

This may not seem like a big deal to people using any number of IDEs but personally, I’m a Vim user (specifically MacVim, it’s an extremely well done port of Vim using Cocoa). I love it. I’m way faster editing inside of Vim; my brain has mapped around all of the commands because I’ve been editing with it for so long. I’ve been using vi variants in one form or another since my Freshman year of college when my Computer Science 101 professor forced us all to code with it for our programming projects on the school’s Sun server. While doing Java work two or so years ago, I developed mostly on Eclipse and eventually broke down and purchased a license for the Eclipse vi keybinding plugin. Now that I’m employed for Ruby work I’ve switched back to Vim full-time (after a 1/2 hour dabbling with Textmate).

Jim’s EMACS setup made me jealous. During the class I figured out how to set the make program to use ruby (or spec for rspec tests) and Quickfix will run the tests for the file. Here’s the command:

:set makeprg=ruby\ %

The \ escapes the space and the % gets expanded to the current buffer’s filename when Quickfix is activated. Quickfix was originally used for a “quick” way of compiling your program to see if there’s any errors. Vim will even move your cursor to the file and line number of the first error if there are any. This works for ruby tests too! Another Vim setting, errorformat, is how Vim parses errors from running makeprg.

OK, so this is all great, but what if my test file is huge? What if it takes 10+ seconds to run? What if I’m only interested in a single test because I’m being a good developer and practicing TDD?

This is where the Ruby Single Test plugin comes in. The plugin is an extraction of some functions I’ve been playing with in my .vimrc file for the past couple of weeks. All it does is provide a command for running the test block your cursor is hovering over in your test file (<leader>. by default.  <leader> is usually comma or backslash). Most of the time you’re only interested in a single test while you’re editing code so turn-around time is vastly improved. No more jumping back to the console to run a test.

To install just drop the ruby_single_test.vim file in your .vim/plugin directory.

Currently it works for Test::Unit as well as Rspec tests.  I’ve been using this quite a bit recently and I think I’ve worked out most of the bugs. My setup isn’t necessarily the same any everyone’s so please let me know if you have any problems with it! The code is up on Github, so feel free to play with it.

]]> http://dougmcinnes.com/2009/02/16/ruby-single-test/feed/ 3 Javascript Love http://dougmcinnes.com/2008/11/13/javascript-love/ http://dougmcinnes.com/2008/11/13/javascript-love/#comments Fri, 14 Nov 2008 07:17:55 +0000 Doug http://dougmcinnes.com/?p=23 Continue reading →]]>

I’ve been a busy bee releasing stuff into the wild lately. Most of them have been Ruby on Rails plugins but I’ve also been doing some Javascript work. Here’s two tidbits that I developed at the Los Angeles Times.

Inplace_preview

Inplace_preview is the first. It monkeypatches Scriptaculous‘ InPlaceEditor to give it a preview mode. It also includes an ability to do an ajax call for rendering the preview. It comes in handy when using an InPlaceEditor for editing HTML but with the ajax rendering anything would be possible.

Here’s an example (if you save you’ll get a big-ol error since we don’t actually save here):

Click Here to Edit…

Gallery_scroller

Gallery_scroller is small Javascript library for creating a scrolling gallery that we’re using on more projects then I expected. It requires Prototype and Scriptaculous effects.js libraries.

Here’s an example:

The documentation on both of these goes into detail on how they work, so check out their github sites!

]]> http://dougmcinnes.com/2008/11/13/javascript-love/feed/ 0 Couple of Railsy Tidbits http://dougmcinnes.com/2008/11/10/couple-of-railsy-tidbits/ http://dougmcinnes.com/2008/11/10/couple-of-railsy-tidbits/#comments Mon, 10 Nov 2008 19:30:43 +0000 Doug http://dougmcinnes.com/?p=19 Continue reading →]]> I made a post on the Gem Install That blog detailing the simple_admin plugin which adds a simple authentication scheme to your Ruby on Rails application.  It stores usernames and passwords in a YAML file to make it extra easy.

Reid also posted on Gem Install That about another plugin we worked on, Subselector, which extends ActiveRecord to give it subselection capibilities.

]]> http://dougmcinnes.com/2008/11/10/couple-of-railsy-tidbits/feed/ 0 cached_resource http://dougmcinnes.com/2008/10/30/cached_resource/ http://dougmcinnes.com/2008/10/30/cached_resource/#comments Thu, 30 Oct 2008 21:13:06 +0000 Doug http://dougmcinnes.com/?p=16 Continue reading →]]> Another Ruby on Rails plugin that I’ve developed at the Los Angeles Times is cached_resource.

In a nutshell cached_resource automagically caches ActiveResource response objects in a memcached instance.  The plugin requires cache_fu for memcached configuration goodness.  See also: Kickin’ ass with cache-fu.

The code for cached_resource is also up on GitHub along with a many other Los Angeles Times plugins and other tidbits.  You can find it here: http://github.com/latimes/cached_resource/tree/master

So, how do you get it to work?  After dropping the plugins in vendor/plugins, set up your cache_fu configuration then drop this single line in any of your ActiveResource models:

class MyClass < ActiveResource::Base
  cached_resource
end

The cached_resource call also takes normal cache_fu options:

class MyClass < ActiveResource::Base
  cached_resource :ttl => 15.minutes
end

So now every time you run a .find() on MyClass the results will be cached for the next time you do the same kind of find.  The cache key is the URI of the ActiveRecord generated REST query.

In addition, if you do MyClass.find(:all) or the like to get a list of resources, individual instances in the returned list will be cached separately and the list itself will be distilled down to IDs before it’s stuffed in its own cache bucket.  When pulled from the cache the list will be reconstituted by pulling the individual objects from the cache by ID or making additional ActiveResource queries to get objects that have fallen out for one reason or another. The upshot of this is you’ll have less of a chance of stale data between mixed finds.

The cached_resource plugin makes some assumptions about how your REST service is set up.  If the REST service you’re pointing to with ActiveResource are wacky, i.e. not conforming to exactly what ActiveResource expects its URLs to be, this plugin will probably not work for you.  That said, if you can do normal finds with IDs, like MyClass.find(123), you’ll probably be fine.

This plugin was written before memcached support was baked into Rails 2.1 so if anyone wants to fork and get it working please be my guest!  I’ll be happy to pull it back in :)

Credit where credit is due: Josh Kleinpeter originally came up with the cached_resource concept and Subba Rao helped to lay the groundwork.

]]> http://dougmcinnes.com/2008/10/30/cached_resource/feed/ 0 Craken http://dougmcinnes.com/2008/07/14/craken/ http://dougmcinnes.com/2008/07/14/craken/#comments Mon, 14 Jul 2008 18:53:09 +0000 Doug http://dougmcinnes.com/?p=14 Continue reading →]]> This is the first of hopefully many (a few?) Ruby on Rails plugins I’ve created as a developer for the Los Angeles Times.

This one is called Craken.  In a nutshell it manages and installs rake-centric cron jobs.  Coupled with Capistrano goodness it is the answer to your recurring task needs in Rails.

It’s up on GitHub: http://github.com/latimes/craken/tree/master

Here’s the deal: with many web applications comes the need to do recurring tasks on the servers the application runs on.  These sorts of tasks can range from running backups, clearing caches, emailing notices and other such maintenance-y things.

Who manages these tasks?  Ideally the task code as well as configuration and timing should be kept with the source code of the application itself and not as part of some further set of scripts that reside in a dubious location in your source control.  This is what Craken does.

The tasks are defined as rake tasks within the application.  Craken itself is a rake task that sets up a crontab for defined tasks based on your current application configuration.  The plugin also includes a Capistrano recipe that runs the Craken rake task on remote servers making deployment a breeze.

Craken, by default, looks for recurring task definitions here:

RAILS_ROOT/config/craken/crontab

You can also define tasks for a particular machine by prefixing the machine name (separated with an underscore):

RAILS_ROOT/config/craken/MyMachineName_crontab

The file format is modeled after crontab:

30 1 * * * thing:to_do

In this case thing:to_do is a rake task.  It will run at 1:30 AM every morning (take a look at the crontab format if this makes no sense).

The command to install the cron job locally:

% rake craken:install

If you’re using Capistrano for deployment (and you really should) a recipe is provided to run craken:install on remote machines.  Your Capistrano configuration needs to define a :cron role so the recipe knows which machines it should run the command on.

% cap craken:install

Ideally you can make craken:install part of your deployment configuration, :after_deploy would be a good place to put it.  Craken overwrites the existing configuration for the application on the machine so running it multiple times is not a problem.  Running multiple apps on the same machine or cron jobs placed by hand?  No worries, Craken delimits the lines it generates in crontab with comments and doesn’t disturb existing entries.

For more information about the plugin, peruse the README file.

If you have any questions/comments/suggestions about Craken please leave a comment!

The name “Craken” generously suggested by Giles Bowkett.

]]> http://dougmcinnes.com/2008/07/14/craken/feed/ 9