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:
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:
Finally on my main function, I do three things:
- I initialize my canvas object;
- create a pointer in memory for each of my flakes;
- 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.