Since late 2022 I've been trying to learn music. I've ended up getting quite interested in MIDI in the process, particularly 1990's General MIDI devices from Roland and Yamaha.
You can hear some of what I've written on my SoundCloud page. Eventually I'll post some of the MIDI files here. I'm most proud of the song I contributed to POWER! GS, a collaboration album of songs for Roland GS devices.
hikari's graphics demos
This page collects various graphics “demos” (for want of a better word) I have made over the years.
Flying 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.
CSS 3D transforms experiments
A cool feature of modern CSS is you can specify a 2D or 3D transformation matrix to be applied to an element during compositing, and you can even compound these to create a 3D scene graph in the DOM, turning the browser into a game engine. I have previously wanted to try using this to build a game engine, thinking it might be easier than WebGL (back when I hadn't grasped it). Unfortunately however, this approach is neither consistently performant nor consistently free of graphical glitches(!) between browsers, even a decade after I first tried it.
- 200blocks (October 2012), which uses random Minecraft Classic block textures. That might give away what kind of game I had wanted to create (^^). This only runs smoothly in Safari for me.
- spoopy (October 2015), the remains of an abandoned project to create a Halloween-themed game.
In November 2022 I wrote a tool called obj-to-html which lets you turn arbitrary low-poly textured 3D models into HTML and CSS. I guess that's the culmination of my decade of off-and-on experimentation with this topic! In January 2023 I wrote a blog post about how I did it, if you're interested.
Other
- Warring floodfill cellular automata. It's not really a graphics demo per se, but it is fun to watch. Uses the 2D Canvas API to throw the pixels at the screen; the cellular automata could probably be ported to WebGL if I felt like it, but it runs fast enough on the CPU as-is.
About this page
To view a demo in its own tab/window for the full experience, you can middle-click/command-click/ctrl-click/etc in whatever way you normally would.
The Windows 95 styling of this page was obsessively hand-crafted by myself, aiming for pixel-accuracy. I originally made it in early 2016 for another project which never got finished; I decided to reuse and improve it when I made this page in June 2020.