HN Explorer

Show HN: Color Orbs (Generative Art) (dannyking.uk)

49 points by dannyking ↗ HN
Hi all,

This is a generative art project I worked on over the past year or so consisting of about 100 little artworks generated using P5.js.

I have an overview and technical write up here: https://dannyking.uk/artwork/colororbs

You can play with my interactive demo and make your own here: https://dannyking.uk/artwork/colororbs/designer

And the gallery is here: https://dannyking.uk/artwork/colororbs/gallery

This project came about after reading a HN post about a year ago (https://news.ycombinator.com/item?id=25712767) by Atul Vinayak on generating beautiful 'Noise Planets' and I got kind of obsessed from there!

22 comments

[ 2.3 ms ] story [ 51.9 ms ] thread
[deleted]
(comment deleted)
teruakohatu
A well written post, and beautiful art.

Thanks for writing it up instead of creating 10,000 NFTs!

dannyking
Thanks! I wanted to keep the focus on the art, especially since it was directly inspired by someone else's art, so NFT-free.
nhecker
I suppose my comment is more supportive than constructive, but I really like this concept; everything from the site design to the art itself is A+. I wasn't at all familiar with p5.js but the explanation you make is pretty accessible and gets me thinking. I'd love to have a slow-running b&w orb being drawn in a framed e-ink display. Thanks for sharing.
browningstreet
On mobile but the first thing I did was search page for “marble”. Not found. These seem like digital marbles.
chapliboy
I think one of the hardest parts of procedural generation is curation. Finding the interesting results and then somehow highlighting them.

Your approach of having both the curated galleries as well as an interactive version is really nice.

I wonder whether you have also experimented with a 3d version. It would be nice to spin these around.

oknoorap
I am interested, is this open source?
dannyking
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:

https://www.dannyking.uk/js/colororbs/dna.js https://www.dannyking.uk/js/colororbs/sketch.js

The latter being the core rendering algorithm (inside the setup() and draw() functions).

oknoorap
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.
hypertele-Xii
For a webpage [0] about visual art, the art itself disappointly gets less than 5% of screen space. When you present art you're supposed to present the art. This page is a massive waste of empty space, asking the viewer to employ a magnifying glass to see the thing being talked about.

Here's a quick mockup of how I'd do it:

https://hypertele.fi/temp/i7b46v465q3c54qtvh.png

The gallery page [1] doesn't even work. Clicking on an orb just makes it black, nothing happens.

[0] https://www.dannyking.uk/artwork/colororbs

[1] https://dannyking.uk/artwork/colororbs/gallery

dannyking
Thanks for the feedback, much appreciated.

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.

hypertele-Xii
Very good.

> 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:

FaviconLoader.jsm:191 (img)

tracker.js:1 (xhr)

dannyking
Hmm, interesting, thanks! I'll try and fix that. Much apprecaited.
BadCookie
I feel a bit silly, but I didn’t realize at the beginning that each art piece is a video to be played. (My bad for skimming the text probably, but the UI is a bit unusual as well.) Anyway, once I realized that, I understood much better why the author loves these. Each one has a lot of “character.” Thank you for sharing!
dannyking
Ah thanks. Sounds like I need to re-think my video player UI to make that more obvious.