home.social

#bubbleuniverse — Public Fediverse posts

Live and recent posts from across the Fediverse tagged #bubbleuniverse, aggregated by home.social.

  1. Appearance Panel:
    - Themes: limited selection, sorry.
    - Particle Size: stay below 5 unless the number of particles is very small.
    - Trail Persistence: all the good stuff happens between 0.9 and 1.0 (though this demo shows an alternate use).

    Brightness Panel:
    - it's just a mixer. If your image oversaturates, you might be able to save it here.

    Post Panel:
    - Bloom - I wrote about it above in 🧵12 through 🧵14.
    - Tone Map - Just wrote it. No tips.

    🧵 38/N

    #BubbleUniverse #GenerativeArt

  2. Some notes on the controls:

    Motion Panel:

    - Sequence Count and Length: the number of particles.
    - R: a magic number. Simple fractions (e.g. 0.5 or 0.667) produce different patterns.
    - S: an even more magic number. Explore very small S, 0.000 .. 0.015 or so.
    - S Blocks: most interesting with very small S.

    (continued)

    🧵 37/N

    #BubbleUniverse #GenerativeArt

  3. The bubble universe explorer is now live on the world-wide web. Please try it out. See posts above for some examples of what it can do.

    Thank you!

    kbob.github.io/bubble-universe/

    🧵 36/N

    #BubbleUniverse #GenerativeArt #LLM

  4. The web app is now functionally complete. 18 knobs, most of the space unexplored.

    Building this with the LLM was interesting; I'll write more about that on my LLM thread.

    I'll get it up on a public-facing server soon...

    🧵 34/N

    #BubbleUniverse #GenerativeArt

  5. THIS! This is gonna be awesome!

    It's about half implemented, and 99% LLM-generated. Sorry!

    But it runs in a browser, and soon it'll run in your browser. Good luck!

    🧵 33/N

    #BubbleUniverse #GenerativeArt #LLM

  6. If it weren't for unfamiliarity with front end tech, I think I could probably write this code about as fast myself. But I'd work harder at it. I'd have to keep myself in the flow. Now I'm just watching TV.

    Anyway, these have been some thoughts from somebody with practically no experience with agent coding. More later, most likely. And maybe, a #BubbleUniverse you can play with yourself!

    🧵 15/N

    #LLM

  7. So we wrote some code together. The task I've set is translating the #BubbleUniverse from Python + wgpu-py to Javascript + WebGPU. It's coming along.

    This is faster than I could do myself for a couple of reasons.
    - I don't know HTML, CSS, or Javascript very well. I spend too much time looking things up.
    - I don't type very accurately. I leave typos in my code way too often.

    🧵 12/N

    #LLM

  8. Here's another bubble universe variant. This time it's a 10 minute video with decent quality.

    This isn't very bubbly, but that's kind of the point. It seems the algorithm makes all kinds of swirly shapes, and bubbles are just a special case.

    🧵 32/N

    #BubbleUniverse #GenerativeArt

    makertube.net/w/nHS1HyY1gGMCvD

  9. Here's another variation on the bunched particle sequences I showed in 🧵 21. Slight variation on the triad color scheme, number of particles is 80,000 visible out of 200,000 active. Plus maybe 1,000,000 particle afterimages in the trails. (Default is 20,000 particles.)

    There's way too much fine detail for video, so I'm showing just one still image. Trust me, it looks cool in motion on a 5K monitor. (Zoom in if you're using a smaller display.)

    🧵 31/N

    #BubbleUniverse #GenerativeArt

  10. This week's trendy LLM is QWEN3.6. It's small enough to run at home, so I downloaded a copy and asked it about the bubble universe. 13 CPU hours later*, it told me some things. Pretty good analysis for a machine with no eyes.

    gist.github.com/kbob/4c2da8d0d

    * llama.cpp doesn't use the GPU on Intel Macs.

    🧵 30/N

    #BubbleUniverse #LLM #QWEN36

  11. This idea is also gnawing at me: Suppose you took the particles in one sequence, fed their X, Y coordinates into a DAC, advanced the simulation time and generated those particles' next positions and fed them into the DAC, etc. You'd get a waveform, and it'd have a fundamental frequency of however often you repeated the sequence. That's oscilloscope music, right?

    That's what inspired the oscilloscope theme that appeared briefly in 🧵 22.

    🧵 29/N

    #BubbleUniverse #OscilloscopeMusic

  12. Bubble universe, what's next? I feel like I've reached a stopping point, at least for now.

    Originally, I wanted to make a web page with parameters hooked up to a control panel so anyone with a browser could explore the universe of bubbleverses (bubbleverseiverse?). But I really don't want to translate 4,000 lines of Python into Javascript (I hate JS).

    🧵 21 above shows an interesting direction to explore.

    🧵 28/N

    #BubbleUniverse

  13. This shows what it's doing graphically. The hue wheel around the bubble shows which hues are active at any moment. On the left, there's a color map. Each particle sequence is a column. Particles early in each sequence are at the bottom of the map, and later, more coherent particles at the top.

    🧵 27/N

    #BubbleUniverse

  14. Less is more in the Triad theme.

    - fewer hues (see previous post).

    - fewer particles. Using the alpha channel, the color map turns off 3/4 of the particle sequences.

    - particles sometime hidden. Also using alpha, the color map fades each particle in and out over time. That makes the display less busy without reducing complexity.

    🧵 26/N

    #BubbleUniverse

  15. Triad is my newest bubble universe theme and the first to use a dynamic colormap. I want to explain how it works.

    Triad is based on triadic colors -- three colors evenly spaced around the hue wheel. But the three colors are actually narrow ranges of hues, and they shift with time.

    I like rotating triadic colors. They're bold and colorful, and less stale than the rotating rainbows many LED projects use.

    🧵 25/N

    #BubbleUniverse

  16. Aaaugh. Mastodon's transcoding stamped all over the video quality. Here's a still frame that should retain the quality.

    🧵 24/N

    #BubbleUniverse #GenArt

  17. The vaporwave theme was the first one I thought of adding a background to, and the last one to get "finished". Spousey saw an earlier version and asked why the bubble's background was just solid blue. So I started thinking about reflection and refraction.

    What you see here is in no way "realistic", but it might be "convincing".

    🧵 23/N

    #BubbleUniverse #GenArt

  18. Demo Reel!

    I'm revealing a bunch of new features here.

    - color map shaders
    - animated color maps
    - animated particle opacity
    - animated background shaders
    - text overlay
    - themes
    - theme cycling

    I put it on MakerTube, as it's a little big for Mastodon.

    🧵 22/N

    #BubbleUniverse

    makertube.net/w/pBKXfVfMmH2m4U

  19. Here's another one.

    Too much going on here to explain it all, but the new thing (to me) is bunching up the particle sequences. Instead of spreading them uniformly, they're in five distinct bunches. So some parts of the bubble space are much denser than before, and most of it is empty.

    🧵 21/N

    #BubbleUniverse

  20. Okay, here's a better diffused trail example. The trick was to make the trails really long (and decimate the particles).

    The diffusion blurs each frame with a 5x5 Gaussian and adds it into the next one.

    🧵 19/N

    #BubbleUniverse

  21. Diffusing particle trails. It's hard to find settings where they look good.

    🧵 18/N

    #BubbleUniverse

  22. Just late night messing around... This is different.

    🧵 17/N

    #BubbleUniverse

  23. I added particles contrails to the bubble universe. It's not my original idea; @larsbrinkhoff had them in his Javascript implementation.

    This should be a better video than usual. I ditched pyAV and saved a PNG file for each frame. EDIT: Nope. My mastodon instance reencoded it.

    Coming "soon": I'm thinking about blurring the contrails, and I've also got some new color schemes in the wings.

    🧵 16/N

    #BubbleUniverse

  24. I've been working on adding color themes to the bubble universe. Before today (Easter Sunday) is out, I want to preview the work-in-progress Easter theme.

    🧵 15/N

    #BubbleUniverse #Easter

  25. 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 learnopengl.com/Guest-Articles .)

    🧵 14/N

    #BubbleUniverse

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

    🧵 13/N

    #BubbleUniverse

  27. 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

  28. 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

  29. 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

  30. 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

  31. 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

  32. 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

  33. 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

  34. If you want to browse the source, read the README and then look at the two shaders in the shaders/ directory. Those are the ones that implement the bubble universe algorithm; the other 1,000+ lines is just scaffolding to get data in and out of the GPU.

    EDIT: Do I need to mention that this code is rough as three day stubble? It will get cleaner, then messier, then cleaner...

    🧵 8/N

    #BubbleUniverse #Javascript #WebGPU #wgpu

  35. If you want to browse the source, read the README and then look at the two shaders in the shaders/ directory. Those are the ones that implement the bubble universe algorithm; the other 1,000+ lines is just scaffolding to get data in and out of the GPU.

    EDIT: Do I need to mention that this code is rough as three day stubble? It will get cleaner, then messier, then cleaner...

    🧵 8/N

    #BubbleUniverse #Javascript #WebGPU #wgpu

  36. If you want to browse the source, read the README and then look at the two shaders in the shaders/ directory. Those are the ones that implement the bubble universe algorithm; the other 1,000+ lines is just scaffolding to get data in and out of the GPU.

    EDIT: Do I need to mention that this code is rough as three day stubble? It will get cleaner, then messier, then cleaner...

    🧵 8/N

    #BubbleUniverse #Javascript #WebGPU #wgpu

  37. If you want to browse the source, read the README and then look at the two shaders in the shaders/ directory. Those are the ones that implement the bubble universe algorithm; the other 1,000+ lines is just scaffolding to get data in and out of the GPU.

    EDIT: Do I need to mention that this code is rough as three day stubble? It will get cleaner, then messier, then cleaner...

    🧵 8/N

    #BubbleUniverse #Javascript #WebGPU #wgpu

  38. If you want to browse the source, read the README and then look at the two shaders in the shaders/ directory. Those are the ones that implement the bubble universe algorithm; the other 1,000+ lines is just scaffolding to get data in and out of the GPU.

    EDIT: Do I need to mention that this code is rough as three day stubble? It will get cleaner, then messier, then cleaner...

    🧵 8/N

    #BubbleUniverse #Javascript #WebGPU #wgpu

  39. 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!"

    github.com/kbob/bubble-universe

    🧵 7/N

    #BubbleUniverse #Javascript #WebGPU #wgpu

  40. 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!"

    github.com/kbob/bubble-universe

    🧵 7/N

    #BubbleUniverse #Javascript #WebGPU #wgpu

  41. 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!"

    github.com/kbob/bubble-universe

    🧵 7/N

    #BubbleUniverse #Javascript #WebGPU #wgpu

  42. 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!"

    github.com/kbob/bubble-universe

    🧵 7/N

    #BubbleUniverse #Javascript #WebGPU #wgpu

  43. 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!"

    github.com/kbob/bubble-universe

    🧵 7/N

    #BubbleUniverse #Javascript #WebGPU #wgpu

  44. @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?)

    github.com/larsbrinkhoff/bubbl

    youtube.com/watch?v=hIU7iYWZWSY

    🧵 4/N

    #BubbleUniverse #Javascript #PDP10