Starshower

Aug 28 2018

A little while back I completed another HTML5 canvas piece titled Starshower. It's basically a non-interactive animation that shows stars crashing and bouncing of the ground while producing 'sparks' or effects. This was in some sense similar to the Circles cover page in that it also relies on Object creation and it was fun to once again work using these techniques.

This was created with the help of Chris Courses on Youtube, a great resource for HTML5, I recommend his tutorials. The link to this particular series is https://www.youtube.com/watch?v=EO6OkltgudE&t=283s. My Starshower differs in a few ways to Chris' end result. I added the trees to the foreground as well as adding another class in order to create different coloured sparks. I also had to remove the shadowColor and shadowBlur in some instances which I will discuss next.

I ran into a couple of issues while completing this project. One of them was lag due to shadowBlur. Initially, the plan was to implement a shadowColor and shadowBlur to the stars in the background, the falling star object and the sparks that are produced. However, when I did this I noticed a huge difference in performance. The lag was obvious. It took me a little while by the way to be certain that it was shadowBlur that was causing it, but after some trial and error and research I became convinced.

My solution for this problem was first to deal with the stars in the background, as they are the same Objects as the falling star I didn't want to mess around with their properties too much. Instead I made sure that the background stars appear only in the top third portion of the view window instead of the whole screen and reduced their number from 200 to 50. I didn't lose too much visual appeal this way. Then I decided to remove shadowBlur from the sparks completely, instead I focused on trying to get their colour right (and added another colour) so it still looks good, because to be honest shadowBlur makes a pretty big difference. If I removed it from the falling stars as well, it kind of just looks like white balls falling and bouncing around; not as appealing. Yet, through these solutions I was able to keep shadowBlur involved and the results look decent.

The other slightly annoying thing is how it looks on a mobile screen. It shrinks to fit, but in doing so the trees and mountains become stretched and it looks strange. So this is definitely better suited to a wider screen. I decided to leave this issue for now, messing about with it would involve some doable if statements though.