Skip to content

Latest commit

 

History

History
29 lines (17 loc) · 1.64 KB

README.md

File metadata and controls

29 lines (17 loc) · 1.64 KB

Real-time abstract art using a neural net (CPPN) in JavaScript with TensorFlow.js

This is essentially a compositional pattern-producing network (CPPN) except it makes abstract patterns instead of meaningful shapes. Inputs: pixel coordinates, mouse/touch coordinates, cos(time). Output: RGB values. Activations: sin, cos, tanh, linear. Weights: random.

(Architecture diagram generated by http://alexlenail.me/NN-SVG/index.html)

Detailed explanation and live demo in my blog

Requirements

TensorFlow.js utilizes WebGL to make calculations faster. It can also use CPU only, but you'll get much better framerates on a GPU-equipped device.

Edit (2020-03-01): I added vanilla_js.html which uses only plain js without any libraries.

Acknowledgements

The following two resources introduced me to abstract art generation with CPPNs.

https://www.deeplearning.ai/ai-notes/optimization/.

https://tehnokv.com/posts/visualizing-audio-with-cppns/

I "borrowed" the idea of using cos(time) to generate dynamic patterns, but implemented the CPPN in js from scratch on my own. The idea to use mouse/touch coordinates as additional inputs came from my friend, Igor Guzman. It was my idea to add selection of activation functions and amplitude sliders for additional interactivity.