7 ms·

Show HN: Color Orbs (Generative Art)

49 points by dannyking 4y ago

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 https://dannyking.uk/artwork/colororbs You can play with my interactive demo and make your own here: https://dannyking.uk/artwork/colororbs/designer https://dannyking.uk/artwork/colororbs/designer And the gallery is here: https://dannyking.uk/artwork/colororbs/gallery 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 https://news.ycombinator.com/item?id=25712767) by Atul Vinayak on generating beautiful 'Noise Planets' and I got kind of obsessed from there!

BadCookie 4y 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!
- dannyking 4y ago
  Ah thanks. Sounds like I need to re-think my video player UI to make that more obvious.
deleted 4y ago
[deleted]
teruakohatu 4y ago
A well written post, and beautiful art. Thanks for writing it up instead of creating 10,000 NFTs!
- jackstraw14 4y ago
  why not both :)
- dannyking 4y 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.
nhecker 4y ago
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.
- dannyking 4y 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 https://avinayak.github.io/art/2021/01/09/noise-planets.html
browningstreet 4y ago
On mobile but the first thing I did was search page for “marble”. Not found. These seem like digital marbles.
- dannyking 4y ago
  This guy beat me to that! https://www.youtube.com/watch?v=8uHtffYrXww https://www.youtube.com/watch?v=8uHtffYrXww
  - MildlySerious 4y 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!
chapliboy 4y 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.
- dannyking 4y 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 https://tylerxhobbs.com/process I've not tried anything in 3D yet, that's a nice idea.
  - dannyking 4y ago
    Check out this repo for a 3D version of the same idea by Vinay Bhaip: https://github.com/vbhaip/perlin-planets https://github.com/vbhaip/perlin-planets
oknoorap 4y ago
I am interested, is this open source?
- dannyking 4y 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/dna.js https://www.dannyking.uk/js/colororbs/sketch.js https://www.dannyking.uk/js/colororbs/sketch.js The latter being the core rendering algorithm (inside the setup() and draw() functions).
  - oknoorap 4y ago
    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 4y 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 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 https://www.dannyking.uk/artwork/colororbs [1] https://dannyking.uk/artwork/colororbs/gallery https://dannyking.uk/artwork/colororbs/gallery
- dannyking 4y 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-Xii 4y 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)
RaiyanYahya 4y ago
Very interesting!

49 points by dannyking 4y ago

BadCookie 4y 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!

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

deleted 4y ago

[deleted]

teruakohatu 4y ago

A well written post, and beautiful art. Thanks for writing it up instead of creating 10,000 NFTs!

jackstraw14 4y ago
why not both :)
dannyking 4y 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.

nhecker 4y ago

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.

dannyking 4y 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 https://avinayak.github.io/art/2021/01/09/noise-planets.html

browningstreet 4y ago

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

dannyking 4y ago
This guy beat me to that! https://www.youtube.com/watch?v=8uHtffYrXww https://www.youtube.com/watch?v=8uHtffYrXww
- MildlySerious 4y 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!

chapliboy 4y 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.

dannyking 4y 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 https://tylerxhobbs.com/process I've not tried anything in 3D yet, that's a nice idea.
- dannyking 4y ago
  Check out this repo for a 3D version of the same idea by Vinay Bhaip: https://github.com/vbhaip/perlin-planets https://github.com/vbhaip/perlin-planets

oknoorap 4y ago

I am interested, is this open source?

dannyking 4y 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/dna.js https://www.dannyking.uk/js/colororbs/sketch.js https://www.dannyking.uk/js/colororbs/sketch.js The latter being the core rendering algorithm (inside the setup() and draw() functions).
- oknoorap 4y ago
  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 4y 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 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 https://www.dannyking.uk/artwork/colororbs [1] https://dannyking.uk/artwork/colororbs/gallery https://dannyking.uk/artwork/colororbs/gallery

dannyking 4y 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-Xii 4y 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)

RaiyanYahya 4y ago

Very interesting!