Tag Archives: brain_dump

CraftJS; interesting potential

The other month/week I resumed some dabbling/hacking experiments in working with HTML5’s canvas. This go around, I decided to give CraftyJS a try.

The short version of my experiments, CraftyJS has a lot of potential if it can get it’s memory leaks under control, which might be a daunting task.

Here’s the example Pong game implementation that can be found on CraftyJS’s website:

 
Crafty.init(600,300);
Crafty.background("rgb(127,127,127)");
 
//Paddles
Crafty.e("Paddle, 2D, DOM, Color, Multiway")
    .color('rgb(255,0,0)')
    .attr({ x: 20, y: 100, w: 10, h: 100 })
    .multiway(4, { W: -90, S: 90 });
 
Crafty.e("Paddle, 2D, DOM, Color, Multiway")
    .color('rgb(0,255,0)')
    .attr({ x: 580, y: 100, w: 10, h: 100 })
    .multiway(4, { UP_ARROW: -90, DOWN_ARROW: 90 });
 
//Ball
Crafty.e("2D, DOM, Color, Collision")
    .color('rgb(0,0,255)')
    .attr({ x: 300, y: 150, w: 10, h: 10,
            dX: Crafty.math.randomInt(2, 5),
            dY: Crafty.math.randomInt(2, 5) })
    .bind('EnterFrame', function () {
        //hit floor or roof
        if (this.y <= 0 || this.y >= 290)
            this.dY *= -1;
 
        if (this.x > 600) {
            this.x = 300;
            Crafty("LeftPoints").each(function () {
                this.text(++this.points + " Points") });
        }
        if (this.x < 10) {
            this.x = 300;
            Crafty("RightPoints").each(function () {
                this.text(++this.points + " Points") });
        }
 
        this.x += this.dX;
        this.y += this.dY;
    })
    .onHit('Paddle', function () {
    this.dX *= -1;
})
 
//Score boards
Crafty.e("LeftPoints, DOM, 2D, Text")
    .attr({ x: 20, y: 20, w: 100, h: 20, points: 0 })
    .text("0 Points");
Crafty.e("RightPoints, DOM, 2D, Text")
    .attr({ x: 515, y: 20, w: 100, h: 20, points: 0 })
    .text("0 Points");

Now I will break this down.

Crafty.init(600,300);
Crafty.background("rgb(127,127,127)");

Relatively straight forward; this generates a HTML5 canvas element of 600×300 pixels, sets the color to a neutral color range.

Crafty.e("Paddle, 2D, DOM, Color, Multiway")
    .color('rgb(255,0,0)')
    .attr({ x: 20, y: 100, w: 10, h: 100 })
    .multiway(4, { W: -90, S: 90 });

Part of Crafty’s cleverness is in it’s component based entity system. The first line tells the Crafty library that you’re defining a new entity called “Paddle” which is a 2D, DOM behavior like, color’d objected that reacts to multiple user inputs. Break down:

.color(…) defines the paddles color
.attr(…) defines the entities dimensions AND position.
.multiway(…) is a clear API method which states
the entities movement speed, and then which direction a triggered keyboard input will send the entitiy. So in the above case W is north, and S is south.

Skipping the other paddle, we come to the ball in a pong game.

Crafty.e("2D, DOM, Color, Collision")
    .color('rgb(0,0,255)')
    .attr({ x: 300, y: 150, w: 10, h: 10,
            dX: Crafty.math.randomInt(2, 5),
            dY: Crafty.math.randomInt(2, 5) })
    .bind('EnterFrame', function () {
        //hit floor or roof
        if (this.y <= 0 || this.y >= 290)
            this.dY *= -1;
 
        if (this.x > 600) {
            this.x = 300;
            Crafty("LeftPoints").each(function () {
                this.text(++this.points + " Points") });
        }
        if (this.x < 10) {
            this.x = 300;
            Crafty("RightPoints").each(function () {
                this.text(++this.points + " Points") });
        }
 
        this.x += this.dX;
        this.y += this.dY;
    })
    .onHit('Paddle', function () {
    this.dX *= -1;
})

Something I glossed over, Crafty’s e(…) function is actually a Javascript prototype class generator. It’s important to note that because of the interplay between .attr() and every other post e(…) method call.

In the above

.attr({ x: 300, y: 150, w: 10, h: 10,
            dX: Crafty.math.randomInt(2, 5),
            dY: Crafty.math.randomInt(2, 5) })

defines additional properties of the entity. x/y & w/h are already used by the 2D and DOM components to determine the entities position on but in the later .bind(“EnterFrame”) notice that the logic involved is referencing this attributes.

So inside the EnterFrame handler for the Ball are two crucial sections.

if (this.x > 600) {
            this.x = 300;
            Crafty("LeftPoints").each(function () {
                this.text(++this.points + " Points") });
        }
        if (this.x < 10) {
            this.x = 300;
            Crafty("RightPoints").each(function () {
                this.text(++this.points + " Points") });
        }
<pre>
 
These two if clauses handle bounds check's and then depending on position award the appropriate side a point.
 
Notice the Crafty("") calls.  In this case Crafty("LeftPoints") calls up the appropriate entity or entities ( in this case there are only 1 per side ) and applies a closure to increment the winning side's this.points and body text.
 
 
The other crucial section is the 2 line closure 
 
<pre lang="javascript">
.onHit('Paddle', function () {
    this.dX *= -1;
}

A fairly cool concept in Crafty is that collision detection between almost any entity is dealt with by Crafty, so to determine if the Ball hits a paddle, you just have to ask Crafty.

Summary

I was fairly impressed with CraftyJS, it is very much the spiritual relative of jQuery for a dirt simple and comfortably clever API. Unfortunately Crafty can blind side you with it’s cleverness if you’re not careful. What I mean is that in experimenting with CraftyJS I found it fairly easy to create non-obvious memory leaks and or abuse closures to much.

Still it’s a fairly nice library and though this post is slightly long, I am only covering a thin scratch of the depth that is in CraftJS. This could be a fantastic building stage for making a slew of quick and dirty games.

What’s in a title?

With my latest contract, I will be celebrating almost seven years ( 6 continuous years ) as a senior consultant.  I’m comfortable with that title for some very simple reasons:  I started my first business ( onsite tech. support ) when I was 13 then got bought out by a larger firm and became a junior partner at 16.  Then after moving from Florida to Philadelphia ( trust me, official records say Philadelphia is a city but it’s really a state of it’s own ) I started college and multiple companies.  I know the cardinal rule of business, which is to provide less for more but appear to be providing more for less ) regardless of domain.

As a consultant, your technical know how usually plays second fiddle to finding ways for your client’s to be profitable and self-sustaining.  Not to say that you can be technically inept but I’ve worked with a few consultants that were/are.  It doesn’t really matter what the most elegant choice is sometimes if its going to take to long to ensure your client keeps the initiative in their business domain.  That really sucks, but its the truth.

That said, both my clients and my consultancy agencies I’ve worked for have thrown all sorts of crazy titles at me.  Chief engineer, chief sys. admin, architect, senior engineer, lead engineer, software developer, etc.  I’ve been somewhat dumbfounded by the naming choices as the reality doesn’t always match the title.

During the interview for my recent client, when they asked what grade/title I felt I was at I told them I was a competent software engineer with full stack experience.  It would have been quicker to just say “I’m the mother fucking man” but I refuse to do that because all it takes is one little estoric piece of knowledge I don’t know about to blow that card house down.  Somehow we got into a monologue where I explained my opinion on titles:

Apprentice

What’s the difference between a POST & GET based form?   I don’t know how to setup a development workstation.   Of course I know SOAP but why do we have to use all this XML?  Why do I need to use a quicksort when this works? ( emergent bubble sort ).

I don’t know what you’re saying.

Journeymen

Caching is stupid, it gets in the way.  Why should we use that open source framework when we can write our own?  Documentation sucks and we don’t have enough time to implement unit-testing!  Yo dawg, I herd you like patterns so I put a singleton factory in your observer so that I can command pattern inject your dependancies…. uhm no, I’ve got no idea how to fix that bug, let me get back to you in a couple days ( turns out to be an entire week).   But we’re going to need all this extra complexity because I’m bored and figured will need it someday soon.

I don’t know how to implement that and won’t tell you that until I’ve fucked things all to hell.

Craftsmen

I think I can get that done in the needed timeframe.  I hate this language/framework/database but will bear down and get this done while looking for opportunities to make things better.  I refactored feature X to use a factory pattern and will make notes to try and reinforce that change elsewhere.  I’m hesistent to add more complexity here and realize this will be a problem in the future so I’m going to add a quick unit-test to ensure integrity.

Here is how I would implement that, what do you think?

Master

No I won’t/can’t implement that right now until we get the core features down.  Why don’t you like technology X,Y,Z and how can we compromise?  I appreciate your input and will take that into consideration.  Hey boss, check out what minion 12 accomplished, I think he/she/it has a bright future.   It’s unacceptable to modify the system tier framework to resolve your issue, asking the framework mailing list/group for advice/criticism and if they accept it then submit a path.

I will delivery these features in this time frame and if I can’t I will tell you why and a better target date.

Summary

I’ve been writing software since I was 7 or 8, I’ve made a couple million dollars in revenue writing software over a decade or two, and my clients have made several more million using that software.  I’ve worked with people with decades of “experience” but no practical knowledge and inversely people with literally a year or two of experience but are masters at their trade.  I remember working with a Ruby on Rails developer a couple years back who was a goddamn bad ass combat developer knocking out reliable code and pulling epic 90 hours weeks..he learned to program the year prior.  The conclusion is that I think titles are a bit of crap.  Sticking around long enough with a company and you’ll end up being the lead/chief/senior company minion by default.  OR have enough clients you half-assed through and you can claim the title of senior… but neither is an indicator of competence.

Return to canvas tag

Currently in between clients and waiting for the silent alpha of my delicious clone to wrap up….so its back to experiments with the canvas tag.

That means back to my unframework canvas library Ping. Some of the code still makes sense, but other bits are… well special. Currently there is an .ex object thats appended to the CanvasRenderingContext2D internal class and it works, but what I’m thinking of is re-working the code so that they’re added post-instantiation like a factory.

 
canvasMaker = function(elemId, options){
    var element = document.getElementById(elemId);
    var context = element.getContext("2d");
    //Here is where all the extension methods would be dynamically assigned to the 2d canvas instance
    wrappedContext = wrapContext(context);
    //Maybe add a singleton check around the bulk of this that keys on the elemId
    return wrappedContext;
}

The problem I’m trying to work around specifically is the need should ever arise to have n+1 managed tags on the same document. Currently there is so many hardwired references that it would be impossible to have the two cooperate without collisions and undesirable behavior.