Thanks for sharing! This implicitly answered my question about how you made the particles behave like they do:
> The rendering algorithm is a re-hash of an old approach I detailed in a blog post, Generative Impressionism. Simplex noise is used to drive the particles, which are sometimes reset to a new random position. Each particle is rendered as a small line segment in the direction of its velocity. The scale of the noise is randomized so that some lines curl tightly, while others head straight.
PS: The distortion map is a really neat trick by the way, I'm going to play with that in some next project!
I highly recommend any developer to find a creative coding library and play around. For JS there is P5.js and Processing.js and countless others. For Clojure and Clojurescript there is Quil. Java has Processing, and for C++ there is Open Frameworks.
Any more recommendations for visually interesting JavaScript? I have a kid who is tired of the "just boring text" of Python assignments (things like Project Euler) and wants to start using JavaScript (he can already do static HTML & CSS, but wants to bring it to life with JS), so he can "see cool stuff".
He's already had enough of Scratch, and I don't want a Python graphics library, because it's time for him to add JavaScript to his toolbox (in addition to Python, not instead). He's very artistic (his Photoshop work is amazing), and we both want him to spend the upcoming summer using artistic projects as a vehicle for learning JavaScript programming.
I'll check out P5.js and Processing.js. Any other suggestions or ideas?
I echo the other voices saying canvas and pure JS (or, in my case, CoffeeScript or ClojureScript). The canvas API is extremely intuitive — aside from the boilerplate setup, perhaps — and you can make some really neat things with it very quickly.
The home page for my personal site has a starfield made entirely with canvas: http://ivanish.ca — best to view in a dark room so you can see all the pseudo-nebulae.
I personally really like to just use plain javascript and the canvas API. I found the tutorial on mdn very useful (https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/...), and I enjoy the simplicity of not using libraries and tools.
I've also used EaselJS, which is also pretty good (but doesn't offer me anything I really need), and PixiJS, which is supposed to be very fast, by using WebGL where possible.
I used to make a ton of these sorts of art generators! I love seeing this stuff. Thank you for posting this.
When Flash died off, it took with it a wonderful environment for creating generative/interactive art. Even though we've had the (limited but approachable) canvas API these past few years, I feel like we're only now starting to see a resurgence in the generative web art space. Flash had a wonderful collection of composable filters that were a gentler form of fragment shaders — absolutely battery-melting, but gorgeous and powerful. A small step toward GL, much easier to get into than ShaderToy, more approachable than Max/MSP/Jitter even. I'm glad Flash died, but I'm sad that nothing has sprung up and improved on it since. Perhaps it's time for the second coming of HyperCard.
Ha, I was wondering how every palette looked way too good to be random. Still, I wonder what one could do with a deep learning algorithm on ColourLovers' dataset.
I'm a little confused about system resources use. Does this put load on the browser (user's machine) or the server. Also, could this (reasonably) be used on a site to generate a dynamic image with each visit? Would that be too "heavy" for a site.
It has a browser component and a node component. The browser component does the animation that's being drawn here, and it's entirely computed within the browser.
There is an alternative feature to do this on the server side in order to generate images or videos, but that is not what is showcased here.
And source code – https://github.com/mattdesl/color-wander