Mouse Clicks for HTML5 Cavas Entities via Paths

The canvas element in HTML5 is exciting because it really opens the doors to games, drawing, and animation. This is especially exciting as browsers hardware accelerate canvas and improve its performance. What isn’t so exciting though is that you do have to do a lot more for yourself.

So if you draw something into the canvas, you don’t get to attach event listeners on the objects you create within the canvas, just on the canvas itself. This means that you have to build your own event system. This isn’t that difficult if you organize your entities you’re drawing and rely on isPointInPath to do the searching for you.

Overview

When you use path methods, like arc, bezierCurveTo, or lineTo, the 2D context keeps track of things really nicely for you. After you add your path, you can ask the context whether or not a point is within the area of said path via the isPointInPath method.

The way to find the object is to render each entity in reverse order, draw the path, and then check to see isPointInPath. The reason to go in reverse order is because the most visible, unobstructed object is at the last index in the rendering order.

Paths are great because they are fast, but they are pretty plain. What you if you want to draw images? Well there’s no rule that you can only use one canvas. This means that you can use one canvas to draw your main stage with images, and then use the light-weight paths to draw the hit detection area.

The demo will draw the earth and the moon and will print a the name of the selected planet.

Continue reading

Installing Octave on OSX with MacPorts

Most of the time, installing things with MacPorts is pretty easy; however, I have found that GNU Octave can be a little tricky. That being said, it’s still pretty easy to get Octave up and running in both Snow Leopard and Lion.

At the time of this post, here’s two version of Octave to choose from: octave (version 3.2.4) and octave-devel (version 3.4.3). For my money, I like octave-devel. In my brief testing with the two, the biggest difference for me was that the graphs plotted in octave-devel looked more like their OS counterparts. With octave, I found the scaling of elements on the graph to be different sizes and that bugged me.

To install Octave, run the following from the terminal:

sudo port install octave-devel +gcc45

And then wait…as there are a lot of things that need being compiled.

I added the gcc45 variant because one of the dependencies, atlas, needs gcc45 to compile. This ensures that both of those are in sync.

Feel free to add other variants if you like, like X11 support or offline documentation. To get a full list, run:

port variants octave-devel

Continue reading

Aliases with Google Closure

I’m starting to use the closure library and all of it. The closure compiler is nice because it can compress your JS code down, a LOT. In order to get the biggest bang for your buck. you want to use the advanced optimization settings. It can eliminate unused code, inline functions, and rename variables.

In order for variable renaming to work, you have to behave by closure’s rules. One rule closure has is: Let me do the optimization. One of the main reasons for this is that some shortcuts can make it hard to determine your intent.

One shortcut I like to use is to create alias to JavaScript objects that have long names or long namespaces.

(function() {
  var alias = a.very.long.namespace;
  /** @constructor */
  alias.NewClass = function() {};
})();

Now, to you are I, we can easily tell that I intend to use this self-calling anonymous function as a closure to store my alias; however, how can a compiler know that this was my intent.

Intent is a key concept when you work with the advanced compilation. In the above example, Closure knows that a.very.long.namespace.NewClass is even a class because of the constructor annotation. The way to tell Closure that you intend to make aliases is by using the goog.scope function1.

goog.require('goog.dom');
goog.require('goog.events');
goog.require('goog.events.EventType');

goog.scope(function() {
  var dom = goog.dom;
  var events = goog.events;
  var EventType = goog.events.EventType;

  var elem = dom.getElement('myElement');
  events.addEventListener(elem, EventType.CLICK, function() {
    alert('I was clicked');
  });
});

Continue reading

Snow Leopard and ZendServer CE 4.0.5

So I’m all upgraded onto the new Snow Leopard and I wanted to see what ZendServer CE was all about.  Well, unfortunately, when I try to run it, I see watchdog errors when I try to start the Java Bridge and Lighttpd.  Some have updated the lighttpd service script to not use watchdog (which still hoses the JavaBridge), while others tried to create a new zend user.  What worked for me was to replace the watchdog application.  After doing that, everything worked fine and I didn’t have to modify the lighttpd script or create a zend user.

Now that I have that done, I get to play around to see what all the buzz is about.

Managing Vim Scripts with a Vimball

I am a vim user.  The thing I like about vim is it’s speed, how universal it is, and it’s customizations.  These customizations can come in the form of plugins, syntax files, compilers, and code completion utilities; all of which are scripts.  Scripts can be a single file like MiniBufExplorer or can encompass multple files like vjde.

Single file scripts are fairly easy to manage.  If you notice a new version of your script is released, then simply replace your file with the new version.  Likewise, it’s very easy to remove the script if you want to just try it out.  However, scripts spanning multiple files are much harder to manage.  For one, the script’s files get merged in with all of your other script files.

To help know what files are apart of what plugin, I manage my vim scripts in git.  Another way to keep track of things is to use a vimball.

What Are Vimballs?

Vimballs are essential vim script installers.  Each vimball contains all of the files that are needed for the script to work.  Not only that, but it also has a hook for you to easily uninstall the script as well.

Tail Bundle is a script that mimics tail -f for vim.  The downloadable artifact is a vba file.  That file is the vimball.  To actually install the file:

  1. vim tail-03.vba
  2. :so %
  3. :q

So what that all means is that you’re opening the vimball in vim.  From there, you’re executing the instructions that are in the file.  Lastly, you’re just quitting.  You see, a vimball is a vim script in of itself.  So executing it writes everything out to where it’s supposed to go.

While the tail bundle makes use of the vimball, not every script does.  Luckily, it’s easy to make vimballs out of most script downloads.
Continue reading

Useless Ruby Tricks: DATA and __END__

So maybe not totally useless certainly fun. Normally, ruby scripts are finished when you reach the end of a file; however, this is not always the case. You can end your script sooner by using the __END__ keyword in your script. Once added, everything you type after that will not be parsed by ruby.

So what?

Well, you can use the global variable DATA to get the contents of what you wrote after the __END__ block. DATA is actually a File object to just that piece of text in your script.

Continue reading

Converting ERB to HAML snippet

I’m playing around with merb so I’m using merb-gen to create some basic scaffolding; however, I’m not using ERB, the default rendering engine, I want to use haml

Haml comes with a script, html2haml, which can take HTML with ERB and convert it nicely to haml. Seeing as I would have to run that command more than once, I have a little command snippet that I like to use to aid with the conversion.

$ find . -name '*erb' | \
xargs ruby -e 'ARGV.each { |i| puts "html2haml -r #{i} #{i.sub(/erb$/,"haml")}"}'

That will print out what the html2haml commands would be, it does *not* run the command. I do that step such that I can review what will be converted. If I like what’s going to be done, then I just run that command and pipe it into bash…like so

$ find . -name '*erb' | \
xargs ruby -e 'ARGV.each { |i| puts "html2haml -r #{i} #{i.sub(/erb$/,"haml")}"}' | \
bash

If you like it, it probably wouldn’t hurt storing that as a shell script somewhere :)

Code Reviews – Inherit in Git

Code Reviews are common in software development. One programmer reviews another’s code to find potential issues or to see if the developer could have used something that the system already provided.

With multiple programmers, you can probably expect a versioning system, perhaps a centralized versioning system like SVN or Perforce. With that system, each programmer would make his/her changes and then would check in his/her changes into the repository. From there, the programmer’s peers would review the code.

What’s the problem with this system? The code is already checked in. The pressure is on the peers to ensure that the code is good, and it’s likely that this could slip through the cracks. I mean, those peers are working on getting 10 features complete themselves.

Enter Git

Well, I would argue that Git has a strong code review process built right in. This is due to the process of how distributed version control works.

Continue reading

Issue Tracking + Git = ticgit

So not only is git useful for the small projects it’s also good for keeping track of todos and issues. Ticgit is a distributed ticketing systems based on git. It provides a command line interface as well as a web interface via sinatra and stores all of the ticket info in a separate branch, called ticgit. Rather clever I think.

Continue reading