Marcos Placona Blog

Programming, technology and the taming of the web.

Matrix effect with Dart

Reading time: 2 – 3 minutes

After my last post on Dart, I decided that I wanted to write something a bit more complex using the language. I had a lot of good feedback on it, but still felt I should try to push the language as much as I could, and see if it was a really enjoyable language to write code in.

So what better than a couple of hours on a Sunday evening to write some code and generate some animations?

I tried my best to be as descriptive as I could on the code. But it’s so simple… some things are better left unsaid.

Dart Matrix

The premise of the code, is the following:

  1. Generate a random character from a list of random characters. I used 1′s & 0′s as when I look at them…

    All I see is blonde, brunette, red-head

  2. I then move the numbers (drops) around the screen, and make sure they are always moving down, ’till they reach the end of the screen. Then it’s time to re-use them again at the top. #perfmatters after all.
  3. Canvas really gives me all I need to give my animation a transitional effect when it starts (it looks a lot nicer on the browser than the animated gif above).
  4. Make the awesomeness happen again and again every 30 milliseconds by only writing 60 enjoyable lines of code.

The code can be found on my GitHub account:

https://github.com/mplacona/dart_matrix

As I said, it’s pretty self explanatory, but it would be really nice to get someone else’s pair of eyes on it, and getting some advice on where I could improve it.

It seems to run on roughly 54fps on Dartium, but I’ve seen dips occurring sometimes.

1 Comment

  1. Nicolas François

    April 6, 2014 at 08:58

    Great result !
    I think you could use requestAnimation instead of Timer.
    Funny thing, a matrix effect was one of the sample I try with canvas when I started Dart and I did this long time ago :

    https://github.com/nfrancois/dartrix

Leave a Reply

Your email address will not be published.

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>