stars

概要

In July 2012, I created a flying stars effect with the HTML5 2D Canvas API to be a background on my website, later extracted into the standalone stars demo in November 2013. This is probably my favourite of these demos, it's very simple and pretty. It used to run best with Internet Explorer 9's hardware-accelerated 2D. In 2017, I created hikari.noyu.me, the newest incarnation of my personal website, which uses a WebGL version of the effect as its background. Not only does the WebGL version have much lower CPU/power consumption, it also has higher performance! I particularly like how all the animation work is done on the GPU; the JS merely fetches the time each frame. I have made some variations on the effect: 🞄 hoshi.noyu.me (March 2017, improved with instancing November 2018), which has colourful rotating five-point stars. The pre-WebGL version was starrysky (October 2016). That version really shows the problems with the 2D Canvas API, given how much CPU time browsers waste re-parsing the same CSS fill colour strings every frame. :( 🞄 kanji.noyu.me (May 2017), which has random Chinese characters. WebGL, but uses the 2D Canvas API to render the characters into a texture. 🞄 [warning: autoplay music] windows95.noyu.me (May 2017), which uses Windows 95 iconography. WebGL, but its static texture atlas is re-arranged using the 2D Canvas API. 🞄 yule.noyu.me (Christmas Eve 2021). Fully WebGL, and 3D! The snow is a modified version of the flying star effect, and the tree with the star is built using a modified version of the procedural geometry code from hoshi.noyu.me.