'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:

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.

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

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.