Skip to content
Abstract art using a neural net (CPPN)
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
LICENSE
README.md
abstract-art-cppn.html
abstract-art-cppn.js
architecture.png
gif1.gif
gif2.gif

README.md

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.

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.

You can’t perform that action at this time.