Generative art javascript library without node-canvas?

Question

I am looking for a javascript library that can be run in different servers, but not node.js (for a WordPress site), capable of doing this: https://color-wander.surge.sh/ or something similar.

You can do it with native js or any other canvas based framework. All i see on https://color-wander.surge.sh/ is only client part . What you want to " run in different servers" ? — Nikola Lukic, Dec 20 '16 at 08:39
Hello @NikolaLukic, I think that it isn't client part, it is all about node using npm node-canvas to render what we see. So I need an external library to do it in client part. — Kevin Mamaqi, Dec 20 '16 at 14:45

score 1 · Answer 1 · answered Dec 21 '16 at 20:32

1

If you use the developer tools you can see that it uses a java-script called bundle.js - you can run that through some unminify program to make it readable but I think there is nothing node specific about it.

You can just download index.html and bundle.js You will also need some maps in a subdirectory called maps - sym6.jpg, sym3.jpg, scifi.jpg, nature1.jpg, map7.jpg, geo5.jpg, geo4.jpg and so on

Then you can just run the page and script locally without any need of node.js I just did that and ran it with SimpleHTTPServer of python and it works just fine - you need a server because the maps get loaded

The site itself - color-wanderer.surge is using node and if you want to list the maps directory it will tell you that but the source tab in the developer tools shows you that for different seeds it just wants different maps.

So really there should be no problem getting it into WordPress.

answered Dec 21 '16 at 20:32

Joat Mofa

81
1
5

Could you elaborate more on needing a server? I downloaded the index and the bundle, and the maps directory as well. But is still has some problems. – Kevin Mamaqi Jan 06 '17 at 08:32
If you want to try it out locally you can't just run the index.html file because it will try to load the maps from the local file system which is not allowed. – Joat Mofa Jan 07 '17 at 11:52
So go to the directory which contains the index.html and bundle.js file and start a HTTP server. Python comes with a pretty simple one and you just start it from the command line in the folder with: python -m SimpleHTTPServer 8000 Then in the URL line of your browser you just type: http://127.0.0.1:8000/index.html and the color-wanderer runs locally. Gulp (the comes with node) can do the same. – Joat Mofa Jan 07 '17 at 12:02

score 1 · Accepted Answer · answered Dec 22 '16 at 02:02

How about something starting with a client side option you can upload to any web server afterwards ?

The are quite a few creative coding javascript libraries out there. The simplest to get started with I can think of is p5.js

Have a look at the p5.js Brownian Motion example

On Wordpress, have a look at this article:Embedding p5.js in a WordPress entry

Additionally there's an p5.js video course

Generative art javascript library without node-canvas?

2 Answers2