The Karma Project: Code Less, Teach More

August 4, 2009

Karma Graphics Engine

Filed under: News — subzero @ 2:17 pm

Hi there

During last days I have been working on the Karma plugin (jquery.karma.js).

There’re a lot of questions of how to develop it, let’s start:

About the Canvas and layer support
There’re two options:

  1. Multiple canvases
  2. Each canvas as a single layer, each layer containing one single object (image, shape,…)

    • Pros:
    • Less cpu consumption than option 2.

    • Cons:
    • More memory consumption than option 2. Bemasc has noticed us about this: full-screen Browse resolution = 1200 x 900px. Canvas is 32 bits RGBA (4bytes). Then 1200 x 900 x 4 = 4.11 Mb per full-screen canvas. So imagine what is going to happen with 10 circles = 10 layers = 10 canvas.
      Also Bemasc has suggested to use scaling to reduce the size of the canvases.

  3. One single canvas
  4. All the objects will be rendered here, thus it’s necessary to have a “Objects tree” and render all the tree from time to time. This is the approach that uses Ilmari Heikkinen with Cake-js.

    • Pros:
    • Less memory consumption than option 1.

    • Cons:
    • More cpu consumption than option 1. Since it’s necessary to render all the tree.

To benchmark:
what is rendered faster on the XO: a full-screen size canvas or a medium-screen (full-screen/2) size canvas with x2 scaling?

Although the answer, I think the best option is number 2, since regardless of the size of the canvas it’ll come a moment when Karma will be devouring the XO (or any machine) memory 😦

About the Karma Objects
I’m talking about how to deal with Objects, we need to store what we draw, so we can use them on the future. Here’s a UML design about the actual Karma Objects, I have to say it’s alpha version and there are some JS features that I haven’t been able to put on the UML.


any suggestions?


Leave a Comment »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

Create a free website or blog at

%d bloggers like this: