Fork me on GitHub

Simplifying Color Selection for ImpactJS Entities

The Matlab HSV colormap rendered using 162,000 different colors generated by color-picker.js

The other day I set out to make a quick way to eliminate the need for sprites when rendering very simple entities with ImpactJS.  For example the particle effects, paddles and puck in PiSpace.  These entities are now rendered using direct canvas methods and constructed on the fly from input verticies.  This allows for a more dynamic nature in the game and much better performance with Box2D v2.1a.  More on that in a later post.

Along with using raw verticies to render the odjects, I wanted to be able to change the color on any entity in the game based on different conditions.  Also, I wanted to produce a smooth gradient fade effect between any set of input colors. A direct example of this in PiSpace is the “HEAT” bar that changes from Green -> Yellow -> Red dependent on how long you have used your boost.  Previously, in order to obtain the color fading I would like I used the ImpactJS sprite animation engine to select a frame from a supplied asset.  This required that I have an art asset that had a frame with the color I wanted to use available for each effect I wanted to create.  I am not much an artist, so my asset pipeline is slow moving for these types of things. Fading from green to red is boring and bland, but throw yellow in there and you get a more interesting effect. So, I put together a color-picker.js plugin for ImpactJS that allows me to quickly generate an array of colors in any gradient combination that I want. Click here for a demo. Below is a sample of a few different combinations:

CW starting in the upper left: 1) 2 color fade with 400 steps. 2) 6 color fade (Jet) with 480 steps. 3) 7 color fade (HSV) with 420 steps. 4) 7 color fade (HSV) with 162,000 steps.

»Read More

Particle Generation in ImpactJS

many fireworks on title screen

Particle effects are made easy in ImpactJS

I can’t say it enough just how empowering the ImpactJS Engine is as a developer. I thoroughly enjoy working with it everyday. Check out PiSpace to see the code below in action.  Also, all my code for PiSpace is available on github as an open repo.  The ImpactJS engine uses a modified version of John Resig’s Simple Java Script Inheritance which makes extending and handling objects a breeze.  I enjoy working at a lower level than a GUI game editor, so this suits me well.  The process of creating a particle effect is as easy as spawning any other entity in the game world.  Start off by creating an EntityParticle by extending the ImpactJS Entity:

EntityParticle = ig.Entity.extend({
  // single pixel sprites
  size: { x:1, y:1 },
  offset: { x:0, y:0 },
  // particle will collide but not effect other entities
  type: ig.Entity.TYPE.NONE,
  checkAgainst: ig.Entity.TYPE.NONE,
  collides: ig.Entity.COLLIDES.LITE,
  // default particle lifetime & fadetime
  lifetime: 5,
  fadetime: 1,
  // particles will bounce off other entities when it collides
  minBounceVelocity: 0,
  bounciness: 1.0,
  friction: { x:0, y:0 },

Set some initial values to make the particle less interactive with other entities in the game world since we want the particle effects more for graphics and less for physics. In the init function we want to add some standard randomness to the velocities and tweak the animations to add a flickering effect by using the currentAnim.gotoRandomFrame() feature. This looks really good. »Read More

PiSpace Alpha Update: 2 Player Mode & Improved AI

PiSpace Title Screen

PiSpace Ttile Screen

It’s been a busy week and lots of fun work has been completed on PiSpace.  I have updated the version online and released the code on GitHub!  Please feel free to fork the code and tweak what you like.  The published code includes assets and code entities.  The Impact Engine is a licensed engine, so if you have a license then just place the code in the standard impact root directory.  Also, I am on PointOfImpact which is a great source for the Impact Engine. »Read More

Introducing PiSpace

Pong in Space a.k.a. PiSpace

So much fun to make.

A week later and another fun Sunday afternoon with Impact and Box2D has amounted to the PiSpace Alpha.  ‘Pong in Space’ was a simple idea that came about during a talk I attended at last year’s GDC.  The lead physics programmer at Volition commented that, “Pong with physics is a horrible game, that’s why it’s best to fake some results to make things fun.”  After working on this game I have to disagree with him.  This is very much an alpha and a work in progress, but I am very happy with it’s current state. New features below! »Read More

emacs find ; and replace with blank line

Emac After/Before

GNU Emacs 23.1

The power of a capable editor can’t be overvalued as a developer.  From the “simplicity” of VI at the surface to the feature-full display of an IDE like Eclipse, each editor has it’s group of fans and haters.  I am, personally, a GNU Emacs user and proud of it.  There is nothing that Emacs can’t do and if somehow you can’t figure out how to do it in Emacs you can always just write an EmacsLisp extension to do it.  I could go on and on about the joys of getting to know Emacs, but I will just keep this short.

This weekend I ran into some ported C++ to ActionScript, then ported from ActionScript to JavaScript code that was then baked.  I was finding it hard to debug some run-time errors that I had, so I wanted to take the baked code and make it more useful for debugging.  The library was roughly 500 “lines” in the form I was working with. It all looked much like this:

a=b2.Vec2.prototype;a.x=0;a.y=0;a.SetZero=function(){this.y=this.x=0};a.Set=function(b,c){this.x=b;this.y=c};a.SetV=function(b){this.x=b.x;this.y=b.y};a.Negative=function(){return new b2.Vec2(-this.x,-this.y)};a.Copy=function(){return new b2.Vec2(this.x,this.y)};a.Add=function(b){this.x+=b.x;this.y+=b.y};a.Subtract=function(b){this.x-=b.x;this.y-=b.y};
a.Multiply=function(b){this.x*=b;this.y*=b};a.MulM=function(b){var c=this.x;this.x=b.col1.x*c+b.col2.x*this.y;this.y=b.col1.y*c+b.col2.y*this.y};a.MulTM=function(b){var c=b2.Math.Dot(this,b.col1);this.y=b2.Math.Dot(this,b.col2);this.x=c};a.CrossVF=function(b){var c=this.x;this.x=b*this.y;this.y=-b*c};a.CrossFV=function(b){var c=this.x;this.x=-b*this.y;this.y=b*c};

This made it VERY difficult to understand why my objects weren’t behaving properly.  Using the following commands I (1) found all `;` and added a blank line after it, (2) found all `{` added a blank line after it, (3) found all `};` added a blank line after it, and (4) auto formatted it to 4 space tabs. »Read More

Impact.js, Box2D and a Sunday afternoon

'Pong' style game made with Impact Engine and Box2D

'Pong' style game made with Impact Engine and Box2D

I recently started using the Impact Engine for some hobby game development. I spent Sunday working with a JavaScript port of the awesome Box2D physics engine making some fun little demos.  Here is a link to a simple ‘Pong Inspired’ demo.  It’s nothing special, but it was an education in JavaScript, Box2D and Impact getting it all to work.


Memory “Management” in Perl

This is bad.

In my early days with Perl I have found myself viewing the memory management of a Perl app much like the Wizard of Oz. Magically it just works, but I knew there was something logical happening behind the curtain.  Some peculiar behavior in my early scripts, namely memory growth explosions, had me looking behind the curtain to better understand how Perl works and how to build my objects more efficiently.

For nearly all small scale scripts there is no need to worry about how memory works in Perl. Perl uses reference counting for its garbage collection and it functions very well.  Some considerations should be taken when using different lexical types (hash, array, etc). Perl will hold onto the memory that is allocated for these types, even if undef‘d and when they fall out of scope, in case these named types are used again. You can’t always trust Perl to figure out what you want to have happen, so I have found it useful to move reused my‘d variables to the outer most logical scope to try and take advantage of this feature. Perl holds onto this memory in an attempt to increase performance since Perl is not releasing the memory to the OS and reserving it for internal use. This memory will be released by Perl while running if absolutely needed by the OS, otherwise the garbage collection will not release the memory until death. Below is a very simple example of this in action: »Read More

Initial Comments

Here is a quick background of what I do – I work in an environment where I am resource restricted, yet I work on big-data problems.  I find myself designing, refactoring, improving and optimizing my code as new challenges arise.  It’s a fun and engaging process that has taught me a lot in my professional career.  I tend to lean on Perl and Python often in my work due to the fast turn around of code and ease of debugging.  I use Perl more often than Python, but that is changing.

I find a significant advantage in working with an interpreted language as a data analyst.  I recognize that compiled C++ has many performance advantages over the interpreted counterparts, but being able to quickly prototype a module, data model or data miner allows me the agility I need to gain the insight to characterize a system.

Typically I am asked to provide a report on some new concept within days of the request.  This is when the data mining really pays off.  I have developed a wide variety of data miners, analysis tools and automators that perform passive and persistent monitoring of our systems.  The real time system I work on utilizes 2 flavors of Unix, a distro of Linux and 3 different chip architectures.  There are a lot of moving pieces with multiple baselines of our product being maintained by a large group of dedicated developers.  As the only analyst on the program, I do not have the time to maintain multiple baselines of my tools.  An advantage of using an interpreted language is that the need for maintaining multiple baselines of my tools is minimized to a few very rare cases.  As long as care is taken in my design, a single script or a series of modules can be deployed on all the systems at once, transparent to the user.

In the upcoming post I will be going into detail about the techniques I use and the interesting things I have learned that help me with my hobbies and work.  The next few post will focus on memory “management” in Perl, run-time optimization, data mining techniques and data visualization ideas.  Hopefully, you will find these post helpful in avoiding some of the pitfalls I first fell into.

See you soon!

– Derek

Introduce Yourself


Thank you for visiting!

Please check out the “About Me” page and enjoy your stay.

– Derek


“The vis insita, or innate force of matter, is a power of resisting by which every body, as much as in it lies, endeavours to preserve its present state, whether it be of rest or of moving uniformly forward in a straight line.” – Sir Isaac Newton