Generative Art in HTML5 Canvas | Hacker News Reader

Generative Art in HTML5 Canvas

color-wander.surge.sh

162 pointsmattdesl28 comments

Here is a blog post about this demo – https://mattdesl.svbtle.com/generative-art-with-nodejs-and-c...

And source code – https://github.com/mattdesl/color-wander

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.

Don't forget thi.ng for Clojure! Made by the creative coding legend Karsten "Toxi" Schmidt

http://thi.ng/

Yes, love it, and has changed the way I think about a lot of things!!

toxi is the boss

Paper.js is also good:

http://paperjs.org

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

Not super comparable but three.js makes WebGl pretty accessible http://threejs.org

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.

Source code (if it helps): https://github.com/ivanreese/ivanish/blob/master/source/scri...

You might also want to consider Elm, but I have very little first-hand experience with it: http://elm-lang.org

Why do you recommend this?

Well try some creative coding out and maybe you'll tell me?

Nice! It reminds me a lot of my own little playthings[0], except more polished.

Do you also use a feedback cycle based on velocity/acceleration/snap combined with randomization to get smooth-but-unpredictable paths?[1]

[0] https://www.youtube.com/watch?v=seEkX1sSk50

[1] https://www.youtube.com/watch?v=WLISmtaa5b0&t=6m53s (shitty video I recorded as extra material for a design class I taught)

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.

If anyone's curious, here's one of mine: http://ivanish.ca/toy/eigenvectors/ — Flash required, natch.

The colors are really good! I was hoping they were generated as well, but apparently they're just the top 200 palettes from ColourLovers.com.

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.

source Matt DesLauriers https://github.com/mattdesl/color-wander

On Chrome, I see nice random images being created. In Firefox, I see only the image that is used as a guide.

Hmm... works for me.

FF 46.0.1, Win 10

It does for me now, too. I assume the creator fixed it.

Is this a stand alone JS lib or does this require node as well?

It requires node, image generation is done on the server, then streamed down to the browser

Actually - the browser demo is just using plain HTML and frontend JavaScript.

The node part is only for generating higher resolution prints, offline (no server). :)

cool :)

It works in the browser - the demo is just a static site. The same rendering code can also run in Node if you want a higher res print.

Reply on news.ycombinator.com