The Karma Project: Code Less, Teach More

June 9, 2009

Animation with JavaScript: that little beast

Filed under: News — subzero @ 2:53 am

Hi guys.

In the past post I told you about “can and can’t” audio troubles. And here I told you about animation problems using jQuery. The final “can and can’t” activity’s version is approaching..

I have spent some days wondering how to join animation version + everything else version. All the possible ways I figured end in a bunch of code. That’s not the only thing and unfortunately there are more to worry about it.

First, what do we want?
Take a look about the original activity following these steps:

go to http://karma.sugarlabs.org/framework_original/MenuStage.html
choose english
choose something like “3”
click “can & can’t” image
click “can & can’t” title

The Karma version principal problems:

  • how to run parallel animations?. In fact, parrallel js code?
    I have been using setTimeOut but this solution stinks.
    Bryan and kbrosnan (#firefox) has directed me to web workers. I’m new with this but I’m excited, it seems useful!.
  • how to get something like layers?. It’s hard to work in the same layer.
    I have been using div html tag and z-index property, it works, but.. does it exists something better?
  • js framerate?
    Inspired by processingjs I wrote a minimalist draw function but… seems that I need to adjust the framerate depending of the cpu, I wonder if it exists a way to get the cpu lag…:S

what do you think?
any advise is welcomed. 🙂

Advertisements

2 Comments »

  1. Webkit (at least the nightlies) also has WebWorkers. Cool thing is, Gears has the very similar WorkerPool. If I were you I’d concentrate on Firefox and maybe Webkit for GSoC and worry about supporting older browsers later.

    About layers, there’s nothing better. Suck it up 😛

    For lag, use setTimeout. I know you’re looking for a sleep() function, but there’s no such thing. You’ll have to make a lot of functions with setTimeout, there’s no way around it.

    Comment by Lucian — June 9, 2009 @ 8:55 am

    • yes, you’re right, I’m focusing in firefox 🙂
      my early approach is to use threads to handle calculations (i. e. new X and Y positions) and pass that values to the main thread in order to update the DOM values. (I know, it’s clumsy)

      About layers.. mmmm… I’ll continue using

      For lag, use setTimeout. I know you’re looking for a sleep() function, but there’s no such thing. You’ll have to make a lot of functions with setTimeout, there’s no way around it.

      damn..

      Comment by subzero — June 11, 2009 @ 7:12 am


RSS feed for comments on this post. TrackBack URI

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

Blog at WordPress.com.

%d bloggers like this: