I'm starting a new "build thread" (not building anything except pixels, but they're good pixels).

This is the "Bubble Universe" graphics hack. I'm going to try to have some fun with it. Follow or ignore hashtag #BubbleUniverse for more.

🧵 1/N

#BubbleUniverse #BuildThread #GenerativeArt

History. As best I can tell, the bubble universe was invented by Twitter user @yuruyurau in 2020 as a very terse Processing.py sketch and first published in this tweet.

https://xcancel.com/yuruyurau/status/1226846058728177665

Edit: add screen capture of tweet.

🧵 2/N

#BubbleUniverse

Paul Dunn ( @zxdunny ) followed a few months later with an even terser BASIC version and a demo on YouTube.

https://www.youtube.com/watch?v=G5aOBh7qQe8

🧵 3/N

#BubbleUniverse

Bubble universe

YouTube

@larsbrinkhoff got into the act with Javascript and PDP-10 assembler versions. The sources are on Github, and a video of the PDP-10 is on YouTube.

(Lars, what display are you emulating on the '10?)

https://github.com/larsbrinkhoff/bubble-universe

https://www.youtube.com/watch?v=hIU7iYWZWSY

🧵 4/N

#BubbleUniverse #Javascript #PDP10

GitHub - larsbrinkhoff/bubble-universe: "Bubble Universe" display hack

"Bubble Universe" display hack. Contribute to larsbrinkhoff/bubble-universe development by creating an account on GitHub.

GitHub

Several others have implemented it; it seems to be popular with the retrocomputing crowd. I found out about it when @PaulaMaddox ported it to her FPGA 6502 simulator a few days ago.

🧵 5/N

#BubbleUniverse #FPGA

https://mastodon.social/@PaulaMaddox/115984089839706205

And now I've implemented it. But instead of porting it to the slowest most decrepit retromachine I can find, I'm going the other direction: What kind of visual effects can I achieve if I throw a decent GPU at it?

The video above in 🧵 1 is a screen capture from my Javascript + WebGPU implementation. It's running at 20 FPS, using about 5% of the CPU and 3% of the GPU. More to come...

🧵 6/N

#BubbleUniverse #Javascript #WebGPU

I wrote another one! I ported my Javascript + WebGPU implementation to Python + wgpu-py, and now I have a desktop app.

And I pushed it to Github. "Share and enjoy!"

https://github.com/kbob/bubble-universe

🧵 7/N

#BubbleUniverse #Javascript #WebGPU #wgpu

GitHub - kbob/bubble-universe: The infamous Bubble Universe graphics hack, using WebGPU

The infamous Bubble Universe graphics hack, using WebGPU - kbob/bubble-universe

GitHub

I finally got my head around WebGPU/wgpu enough to make my own render graph. Now the bubble universe thing is decomposed into a graph of render passes, and I've got some simple parameter animation going.

In this screencap, I'm varying the particle size and transparency and varying the number of particles in two ways in sync with the universe's revolution. The color map is just doing its own thing; that wasn't planned.

🧵 8/N

#BubbleUniverse #wgpu

The problem with programming eye candy tools is that it's easy to get distracted into making pretty pictures and stop working on the tool.

Anyway, here's an interesting spot I found in the universe of bubble universes. If you look at Yuruyurau's original code, there's a parameter, R = Ï„/200. In this image, I vary R between 0.49 and 0.51.

🧵 9/N

#BubbleUniverse

The Bubble Universe tool now can directly record to video, and it's got HDR with tone mapping.

I promised visual effects... Here's one where I made the particles fuzzier at the edges. (I also removed 80% of the particles and enabled HDR/tone mapping.)

🧵 10/N

#BubbleUniverse

I don't think I pushed that effect far enough. MPEG compression adds a lot of grit, so here's a still for comparison.

Meanwhile, I've been working on light bloom. That's the next scheduled effect. This dandelion thing wasn't scheduled, though, and neither were 🧵 9 or 🧵 8.

🧵 11/N

#BubbleUniverse

I've been working on a light bloom filter for the bubble universe. There's this weird checkerboard pattern in the glow - most visible in the southeast corner where the arrow is.

I finally figured it out. That is, I'm pretty sure, caused by floating point overflow. I'm using f16 because wgpu on my GPU doesn't support blending into an f32 buffer.

Anyway. Light bloom. I'll probably turn it down once it's debugged.

🧵 12/N

#BubbleUniverse

Here's the isolated bloom. The checkerboard is easier to see here.

🧵 13/N

#BubbleUniverse

Light bloom is done with multipass blurring. First the image is downsampled 5 times and blurred into a new image half as big using a 6x6 filter. Then each downsampled image is blurred again and added back to its parent
using a 3x3 filter. Finally, the half-size image is blurred and mixed with the original image.

It's cheap! About 80 texture read operations per pixel total.

(See alt. text for video explanation. Or see https://learnopengl.com/Guest-Articles/2022/Phys.-Based-Bloom .)

🧵 14/N

#BubbleUniverse