If you'd like to see an implementation of something that uses Perlin noise, check out this generative art project I did: https://dannyking.uk/artwork/colororbs
Perlin noise is how the lines flow togeher rather than crossing each other during the animations.
I have a technical write up that explains how it works at the bottom.
On the size of the art, with this art project I'm limited to the size of the orbs being 300x300px as the way I implemented the drawing algorithm unfortunately means I can't scale up the size of a render without changing the random seed and causing a different image to be created. So these are necessarily limited to that smaller size unless I introduce pixellation. For future projects I intend to have a resolution independent drawing algorithm rather than hard-coding pixel lengths. Lessons learned!
For future projects though I agree, I'd like to dedicate much more screen real estate to each image. I appreciate you taking the time to draw that mockup, thanks.
On the gallery page not working, could you let me know what browser and device you're using? The animations are .webm video files, which are not supported yet in some browsers so I also provide a .mov fallback for browsers that don't support it, which works here when I test it but it sounds like I've not got that fallback working in all situations yet (unless you have JS disabled). Should work for you on any modern non-Safari browser that isn't on an iOS device, for sure though.
> On the gallery page not working, could you let me know what browser and device you're using?
Firefox on Windows desktop. Further testing reveals that the animation is stuck while the page is loading. So if I click on an orb it won't move until the page has fully loaded (and the gallery takes a long time to load).
Actually I'm not sure why but the gallery page seems to get stuck loading for some reason, and the orb animation is stuck accordingly.
Firefox's dev console shows that these are stuck doing something and the page won't... "settle" into finished state:
It's not I'm afraid, no. To be honest I'm embarrassed about the code quality, since I mostly just hacked it together for myself and was a hobby project more than anything else, so I didn't release the source anywhere or think much about licenses. Having said that, here are the two JS files that power the "make your own color orb" browser tool:
Thanks. And no worries, people won't judge or blame bad codes. In open source world, what we did is collaboration, we help each other :wink: and once again thank you.
Thank you! I totally agree; the curation part is by far the hardest part for me. Tyler Hobbs writes about the curation process nicely here: https://tylerxhobbs.com/process
I've not tried anything in 3D yet, that's a nice idea.
Thank you! I really appreciate that. That sounds like a great project idea. To draw a black and white one, this write up (from the person that inspired my project) would be a great place to start: https://avinayak.github.io/art/2021/01/09/noise-planets.html
Perlin noise is how the lines flow togeher rather than crossing each other during the animations.
I have a technical write up that explains how it works at the bottom.