Skip to content

Top New Best Ask Show Jobs

Show HN: Color Orbs (Generative Art) | Better HN

Show HN: Color Orbs (Generative Art) (opens in new tab)

(dannyking.uk)

49 pointsdannyking3y ago21 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!

21 comments

hypertele-Xii3y ago

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

dannykingOP3y ago

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-Xii3y ago

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)

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.

dannykingOP3y ago

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

BadCookie3y ago

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!

dannykingOP3y ago

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

chapliboy3y ago

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.

dannykingOP3y ago

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.

dannykingOP3y ago

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

browningstreet3y ago

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

dannykingOP3y ago

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

MildlySerious3y ago

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!

teruakohatu3y ago

A well written post, and beautiful art.

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

dannykingOP3y ago

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

jackstraw143y ago

why not both :)

I am interested, is this open source?

dannykingOP3y ago

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.

RaiyanYahya3y ago

Very interesting!

j / k navigate · click thread line to collapse