Orbital Resonance
- Pixi.js
- Experiment
- Personal project
- WebGL
9:2
Try changing the values above to explore various patterns.
See more examplesStory
Ever since I was little, I was always interested in stars and planets. I remember once seeing some charts about how some of the planets’ orbital periods resonates with each other, and I wanted to visualise the drawing of these patterns.
After a quick prototype I realized that using SVG wasn’t going to cut it: there’s just too many DOM elements moving and overlapping at the same time, slowing down the frame rate way too much for comfort. For this I needed to draw pixels on a <canvas>
…
I also suspected that this was a job for the GPU rather than the CPU, so I started researching web frameworks that utilized WebGL. First hit on Google was Three.js, which I already knew about, but had never really played around much with. I quickly learned that Three.js is a monster of a framework, and the learning curve seemed scaringly steep.

Me, reading the Three.js docs.
After ripping out a lot of my hair in despair trying to actually understand WebGL and Three.js, I was relieved when I discovered Pixi.js. After spending some time with various simple tutorials and reading through some of their - from this beginner’s point of view - pretty good documentation, I managed to get things moving on the screen.
Once I understood how the PIXI.Graphics()
and PIXI.Sprite()
methods worked, I just needed to apply some trigonometry and write the animation loop and finally tweaking the speeds and opacities until I was happy with the result.
Key takeaways
- Using Pixi.js made rendering 2D graphics accelerated by WebGL a lot easier than with Three.js or other libraries.
- Animation performance with WebGL and
<canvas>
is superb compared with SVG - Math and geometry is super interesting
Tools used for this project
- Pixi.js: The HTML5 Creation Engine
- Trigonometry
Code
and then in Vis.vue
I put the following:
After defining the resonance and size in the component, I can run the script: