Marcos Placona Blog

Programming, technology and the taming of the web.

Making it snow with Dart

Reading time: 3 – 4 minutes

After my last example showing you how to create a matrix effect with Dart, I thought it would be cool, to follow up with another example that used the same concepts, but went into slightly more details.

It’s also a bit more complex than the last one, as on this one, we use a few more canvas properties, such as arc to generate our flurries, and beginPath to reset my objects so they’re actual flakes, and not a long rain trace (more on this later).

As per the previous example, I will be using canvas to display my animation.

The final product should look like the following:

Dart Snow

Although the animation will be way better than the gif image above.

I start by creating a class that will hold each of my flakes. Not much to explain here. This is only a PODO (Patent Pending) ;-)

I then go ahead and initialize some of the variables and constants that will be used by my application. I do it in such way I can experiment with values and get my application to behave in different ways depending on what values I choose.

Following, I have the brains of my little animation. Everything happens here, from canvas set-up, to flake creation to positioning. I have put together lots of different steps on the same method here. This is almost a tl;dr for code. I don’t want to bore anyone very semantic code. The idea here is to get people going. We all know separation of concerns and good semantics.

Notice we use beginPath every time we call the snowFall() method. This is to make sure the path for each of our flakes get reset, and don’t end up drawing its entire path ton the screen. If we hadn’t used that, we would end up with something like:

Dart Rain

This could be useful if you wanted rain instead of snow :-)

Finally on my main function, I do three things:

  1. I initialize my canvas object;
  2. create a pointer in memory for each of my flakes;
  3. make sure the animation runs every 30 milliseconds,

You can find the entire code published on my GitHub account, and obviously fork it and send me pull requests if you think you can make it any better.

https://github.com/mplacona/snowy_dart

2 Comments

  1. Theodoor van Donge

    April 28, 2014 at 08:39

    To get more smooth animations, you could use window.requestAnimationFrame https://api.dartlang.org/apidocs/channels/stable/dartdoc-viewer/dart-dom-html.Window#id_requestAnimationFrame

  2. Marcos Placona

    April 28, 2014 at 08:52

    Theodor,

    Good point. I had already updated my matrix example to do that same thing after getting the same sort of feedback.
    Completely forgot about this one. I’ll get it updated when I have some time, but also feel free to send a pull request if you’re keen.

    Thanks for the great advice!

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>