5 ms·

Generative Art in HTML5 Canvas

162 points by mattdesl 10y ago

shdon 10y ago
On Chrome, I see nice random images being created. In Firefox, I see only the image that is used as a guide.
- jszymborski 10y ago
  Hmm... works for me. FF 46.0.1, Win 10
  - shdon 10y ago
    It does for me now, too. I assume the creator fixed it.
vanderZwan 10y ago
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)
- deleted 10y ago
  [deleted]
th0ma5 10y ago
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.
- vanderZwan 10y ago
  Don't forget thi.ng for Clojure! Made by the creative coding legend Karsten "Toxi" Schmidt http://thi.ng/ http://thi.ng/
  - th0ma5 10y ago
    Yes, love it, and has changed the way I think about a lot of things!!
  - radiodario 10y ago
    toxi is the boss
- sotojuan 10y ago
  Paper.js is also good: http://paperjs.org http://paperjs.org
- SiVal 10y ago
  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?
  - kaesve 10y ago
    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/Tutorial 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.
glued 10y ago
source Matt DesLauriers https://github.com/mattdesl/color-wander https://github.com/mattdesl/color-wander
mattdesl 10y ago
Here is a blog post about this demo – https://mattdesl.svbtle.com/generative-art-with-nodejs-and-canvas https://mattdesl.svbtle.com/generative-art-with-nodejs-and-c... And source code – https://github.com/mattdesl/color-wander https://github.com/mattdesl/color-wander
- vanderZwan 10y ago
  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!
dk8996 10y ago
Is this a stand alone JS lib or does this require node as well?
- Ryuuke 10y ago
  It requires node, image generation is done on the server, then streamed down to the browser
  - mattdesl 10y ago
    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 10y ago
      cool :)
- mattdesl 10y ago
  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.
deleted 10y ago
[deleted]
kpwagner 10y ago
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 10y ago
  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.
panic 10y ago
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 10y ago
  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.
spiralganglion 10y ago
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.

162 points by mattdesl 10y ago

shdon 10y ago

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

jszymborski 10y ago
Hmm... works for me. FF 46.0.1, Win 10
- shdon 10y ago
  It does for me now, too. I assume the creator fixed it.

vanderZwan 10y ago

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)

deleted 10y ago
[deleted]

th0ma5 10y ago

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.

vanderZwan 10y ago
Don't forget thi.ng for Clojure! Made by the creative coding legend Karsten "Toxi" Schmidt http://thi.ng/ http://thi.ng/
- th0ma5 10y ago
  Yes, love it, and has changed the way I think about a lot of things!!
- radiodario 10y ago
  toxi is the boss
sotojuan 10y ago
Paper.js is also good: http://paperjs.org http://paperjs.org
SiVal 10y ago
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?
- kaesve 10y ago
  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/Tutorial 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.

glued 10y ago

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

mattdesl 10y ago

Here is a blog post about this demo – https://mattdesl.svbtle.com/generative-art-with-nodejs-and-canvas https://mattdesl.svbtle.com/generative-art-with-nodejs-and-c... And source code – https://github.com/mattdesl/color-wander https://github.com/mattdesl/color-wander

vanderZwan 10y ago
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!

dk8996 10y ago

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

Ryuuke 10y ago
It requires node, image generation is done on the server, then streamed down to the browser
- mattdesl 10y ago
  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 10y ago
    cool :)
mattdesl 10y ago
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.

deleted 10y ago

[deleted]

kpwagner 10y ago

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 10y ago
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.

panic 10y ago

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 10y ago
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.

spiralganglion 10y ago

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.