PlayStation 2, 7 Stars

In 2004 I did video game testing at THQ, and I was seeing a lot of the PlayStation 2 system screens; clearing or copying game saves from play-throughs, changing settings for testing, and things like that. There’s a background graphics effect behind the UI that I’ve been calling “7 Stars”. Seven blue-tinted white orbs spun around forming different patterns and leaving a ghostly blue mist in their wake.

The visual effect these objects created was mesmerizing. Gazing at it so often, I saw a pattern emerge. Here’s how I understood it:

1. The stars are positioned “in orbit”, as if distributed along the arc of a circle
2. That circle rotates along the X-axis and Z-axis over time (like turning a wheel, and flipping a coin, respectively)
3. The stars hold 10 different formations, and change their position based on the change of one formation to another, and their designated positions in each formation
   • Forming a half circle
   • Forming a quarter circle
   • Forming 2 quarter circles, as diagonal opposites
   • Formations of even distribution from 1 to 7 points on the circle
4. When the stars change positions, they are synchronized, in such a way that they reach their new positions at the same time, with the key velocity based on the star with the largest difference in position, and the other stars moving at slower rates in proportion of their distance with that largest distance
5. A new formation is set each time the stars finish moving to position in the previous formation

Mid-2005, I developed my own version of this effect in OpenGL and C++. Fast forward to 2017, WebGL had matured to practical use, and libraries like https://p5js.org/ and https://threejs.org/ were bringing web based 3D graphics within reach. That’s when I decided to revisit my old C++ code and see if I could port it and render it in a browser.

I started with Processing.js, and got very far along, but hit a snag once I found out it didn’t support the blend modes I needed to make the particle effects work. Fortunately it didn’t take too much work to refactor it using three.js, which supported the blend modes; and then I was set.

At the time of the web port, I came across just a hint of information about using a bloom effect, which I’m certain would have rendered a smoother glow than my hundreds of sprites. To my recollection, shaders were not as pervasive then, at least in web rendering, but maybe something to look into for a version 3 of this effect.