Show HN: Color Orbs (Generative Art) | Hacker News Reader

Show HN: Color Orbs (Generative Art)

dannyking.uk

49 pointsdannyking21 comments

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!

Open articleView on HN

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

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.

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)

Hmm, interesting, thanks! I'll try and fix that. Much apprecaited.

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.

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

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!

Ah thanks. Sounds like I need to re-think my video player UI to make that more obvious.

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.

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.

Check out this repo for a 3D version of the same idea by Vinay Bhaip: https://github.com/vbhaip/perlin-planets

On mobile but the first thing I did was search page for “marble”. Not found. These seem like digital marbles.

This guy beat me to that! https://www.youtube.com/watch?v=8uHtffYrXww

The website linked in the description is down, and digging up the Twitter account, the last tweet is from Feb 7 saying the marbles are "nearly ready".

Looks to me like that niche is not filled yet after all!

A well written post, and beautiful art.

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

why not both :)

Thanks! I wanted to keep the focus on the art, especially since it was directly inspired by someone else's art, so NFT-free.

I am interested, is this open source?

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

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.

Very interesting!

Reply on news.ycombinator.com