November 22, 2025
Check out my awesome Kaleidoscope app here at brooksdubois.com/Visuals
Well, that should be self-explanatory. It's very relaxing to look at and tons of fun to pass the time!
It's written in fully client-side SolidJS so it's blazing fast!
Upload a cool image or an animated gif and try adjusting the sliders for maximum comfort. You can change the axis, my favorites are 10 and 12-axis symmetry.
One cool thing to do is load it up in chrome and route your audio to it directly with the awesome LoopBack app by Rogeu Amoeba. The animations will automatically adjust to the music for you based on the BPM, and "bounce" with the bass of the track your listening to!
Give it a shot! It's truly awesome!
Built initially using codex with an agents file that specifically requested enums, rx.js, and a domain-driven pattern. From there, I was able to tweak the shaders and get them right. Codex did some heavy lifting on the shader code! The result was immediately interesting.
From there I decided I'd like to add tiling effects into the mix, but my prompts were having trouble describing the patterns I wanted. I tried a few things but GPT was having trouble parsing my images into patterns.
These Ascii's became the tiling effects:
square:
___________________________
| | | | | |
| | | | | |
|----|-----|-----|-----|----|
| | | | | |
| | | | | |
|----|-----|-----|-----|----|
| | | | | |
| | | | | |
|----|-----|-----|-----|----|
"""""""""""""""""""""""""""
diamond:
___________________________
|\ / \ / \ / \ / \ |
| \ / \ / \ / \ / \ |
| X X X X X|
| / \ / \ / \ / \ / |
|/ \ / \ / \ / \ / |
| X X X X |
|\ / \ / \ / \ / \ |
| \ / \ / \ / \ / \ |
| X X X X X|
"""""""""""""""""""""""""""
hexagonal:
___________________________
| / \ / \ |
|_/ \_____/ \___|
| \ / \ / |
| \_____/ \_____/ |
| / \ / \ |
|_/ \_____/ \___|
| \ / \ / |
| \_____/ \_____/ |
| / \ / \ |
"""""""""""""""""""""""""""
octagonal:
___________________________
| | | | | ||
|_/ \___/ \___/ \___/ \___/ |
| \ / \ / \ / \ / \ |
| | | | | ||
| / \___/ \___/ \___/ \___/\|
| \ / \ / \ / \ / \ |
| | | | | ||
| / \___/ \___/ \___/ \___/\|
| \ / \ / \ / \ / \ |
"""""""""""""""""""""""""""From there, I decided to go full send on prompting with Asciig for the gui even.
This is what I used to actually fully redesign the initial slider based designed into menus:
(all closed)
.--------------------------------------------------------------------------.
| ⇽ anim speed ⇾ [image settings] [axis settings] [tile settings] (+) |
|""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""|
| |
(Image settings open)
.--------------------------------------------------------------------------.
| ⇽ anim speed ⇾ [image settings] [axis settings] [tile settings] (+) |
|""""""""""""""""."""""""""""""""""""""""".""""""""""""""""""""""""""""""""|
| | [choose file] filename | |
| | ⇽ gif anim playback ⇾ | |
| '""""""""""""""""""""""""' |
(Axis settings open)
.--------------------------------------------------------------------------.
| ⇽ anim speed ⇾ [image settings] [axis settings] [tile settings] (+) |
|""""""""""""""""""""""""""""""""."""""""""""""""""""""""".""""""""""""""""|
| | ( ) 3-axis | |
| | ( ) 4-axis | |
| | ( ) 5-axis | |
| | (o) 8-axis | |
| | ( ) 10-axis | |
| | ( ) 12-axis | |
| | ( ) 16-axis | |
| | ( ) 20-axis | |
| | ( ) 24-axis | |
| | ( ) 32-axis | |
| | ⇽ axis rotation ⇾ | |
| '""""""""""""""""""""""""' |
(Tile settings open)
.--------------------------------------------------------------------------.
| ⇽ anim speed ⇾ [image settings] [axis settings] [tile settings] (+) |
|""""""""""""""""""""""""""""""""""""""""""""""."""""""""""""""""""""""".""|
| | (o) none | |
| | ( ) square | |
| | ( ) diamond | |
| | ( ) hexagonal | |
| | ( ) octagonal | |
| | ⇽ tile scale ⇾ | |
| | ⇽ tile rotation ⇾ | |
| '""""""""""""""""""""""""' |I found this to be an awesome way to work with Codex and quickly draft my thoughts into real code.
I used these prompts, no more, no less, as a starting point to branch off of and bring you the complete picture! And it worked!