
Generative Art in HTML5 Canvas - mattdesl
https://color-wander.surge.sh/
======
mattdesl
Here is a blog post about this demo – [https://mattdesl.svbtle.com/generative-
art-with-nodejs-and-c...](https://mattdesl.svbtle.com/generative-art-with-
nodejs-and-canvas)

And source code – [https://github.com/mattdesl/color-
wander](https://github.com/mattdesl/color-wander)

~~~
vanderZwan
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!

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

~~~
SiVal
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?

~~~
spiralganglion
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](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...](https://github.com/ivanreese/ivanish/blob/master/source/script/stars.coffee)

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

------
vanderZwan
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](https://www.youtube.com/watch?v=seEkX1sSk50)

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

------
spiralganglion
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/](http://ivanish.ca/toy/eigenvectors/) —
Flash required, natch.

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

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

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

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

------
glued
source Matt DesLauriers [https://github.com/mattdesl/color-
wander](https://github.com/mattdesl/color-wander)

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

~~~
jszymborski
Hmm... works for me.

FF 46.0.1, Win 10

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

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

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

~~~
mattdesl
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). :)

~~~
Ryuuke
cool :)

