JS Hash: Simple and easy!

Hello 🙂

Ima to publish my hash, yo! It is super-small easy to use, but do the job done lika pro, check it out!

Initialize

h = {}
//or...
h = { 'a' : 1, 2 : 'b', 'c' : 3}

Add a pair

h['z'] = 4
//or..
h.z = 4

Remove a pair

h[2] = null
//or
h[2] = undefined

Get the size

h.size()

Iterate All

// It outputs in the insertion order in my tests! BONUS :D
h.each( function(k,v){ console.log(k,v) } )

The souce-code:


Object.prototype.size = function() {
    var size = 0, key;
    for (key in this) {
        if (this.hasOwnProperty(key) && this[key] != null && this[key] != undefined ) size++;
    }
    return size;
};

Object.prototype.each = function(f )
{
  if (typeof f != "function") throw new TypeError();

  for (key in this) {
    if (this.hasOwnProperty(key) && this[key] != null && this[key] != undefined ) f.call(this, key, this[key]);
  }
};

Conclusion

In my opinion this is the easiest way to use a Hash in JS, for it is very natural to use the Object like a hash in JavaScript (– and not rightful :P)
It may occur some problems in the way that some people say it is not ok to prototype from Object (makes sense), i.e: this is not compatible with jQuery! For it does break with any Object extension (there is a issue currently about this)

Advertisements

The coordinate system – InMotion

Hello! This post is about how we’ll deal with coordinate system In Motion way. This goes while I build the editor.

I decided to go with the Cartesian System, centered in the middle for 2 main reasons:

We are used to it, what makes it simple! And, It is not bounded to any edge, what makes it adaptable for no matter how big the editor canvas gets.

Notice that is does differ from the HTML5 Canvas Tag orientation, where all the values are positive, as illustrated here.

coordinate

An example of the translation

The translation is very easy to be done from the raw click to the InMotion system:

x: click.x – canvas.center_x,
y: canvas.center_y – click.y

Also, going the opposite conversion is just the inverse.

inMotion – a Tween engine for Javascript

Hello!

I’m glad to announce the begin of my development of In Motion, my implementation of (movement ) Tween over the CANVAS tag of HTML5 😀

In Motion - Very Early Preview

In Motion - Very Early Preview

The features included are expect to be by 1.0:

  • A few shapes of Bones
  • Each bone is defined by 2 dots and an ID
  • The animation of each bone is done by moving each dot of the bone
  • A few animations included (mostly the same as this guy)
  • An editor for the animation functions
  • Each bone can have specific animation and duration for each keyframe
  • They will be able to appear and hide

The implementation targets:

  • Performance
  • Flexible
  • Easy to Use

What is to be expected? A 2D bone-jointless system for animation focusing games. Editor included 🙂

When should be the first release? I still don’t have a schedule, but it is one of FlockonUS project, so it is a priority along with a few.

Why? I want to make games and sites using cool JavaScript, so far I found no libs that do what I’m looking for.

On the next posts there will be follow ups of some interesting stuff over the implementation

This is the first post of the category inmotion.