mattdesl / color-wander Goto Github PK

View Code? Open in Web Editor NEW

1.6K 32.0 147.0 1.93 MB

:art: Generative artwork in node/browser based on a seeded random

Home Page: http://color-wander.surge.sh/

JavaScript 90.72% HTML 9.28%

color-wander's Introduction

color-wander

Generative artwork in node/browser based on a seeded random.

Blog post and more details:

Generative Art with Node.js and Canvas

Live Demo

You can view the algorithm in real-time here:

http://color-wander.surge.sh/

In Chrome, you can right-click the canvas an "Save As" to get the full resolution.

Outputs

Here are a few examples.

You can download some of these as lossless PNG here.

Usage

git clone https://github.com/mattdesl/color-wander.git
cd color-wander
npm install

To run the browser experience:

npm run start

When you find a seed you like, you can render it as a high-resolution (2560x1440) print. The following will render a PNG into the output/ folder.

node print [seed]

Example:

node print 180423

Note: For this experiment, the Node output resolution is currently the same as the browser canvas. Typically this approach, using node-canvas, is only worthwhile for much larger canvas resolutions.

License

This project has two licenses, depending on the usage. The source code is licensed as MIT. This means you can use a piece of the project, such as one of the utility functions, within your own libraries and projects. However; to maintain my own artistic intellectual property, and to avoid rampant commercialization of the artwork, the "art project" (color-wander) as a whole and any output imagery from it (including current and new output images from the existing and/or slightly modified codebases) is licensed under Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International. This means that if you use the code here to produce something that is close in likeness to the color-wander outputs, and then attempt to commercialize it (i.e. selling the work for profit), it will not fall within the fair use of the project licensing, and will be a form of copyright infringement.

color-wander's People

Contributors

Stargazers

Watchers

Forkers

gillstrom dzoba ryanguill markknol indy9000 jaytoday rwe curtiszimmerman techscientist polo2ro robjac abhishekgahlot mattroid manucutillas krish95 matteomenapace bodonkey roman-murashov jsdario iced-tea kashifmsidd teymur969 abacram oscarsmeulders serendipious marmade zloader brettgregson templeblock jakobhenner caged scytaletleilax filso gis520 djpcoc jayvi abods niln1 fbertola dystudio blissboy tomaszszalda topworld2040 akaanirban matthias723 watkinshughes suavepirate benjaminrbarnes quantixed andresvalderrama ramanan12345 prakhar625 chobdayibm drakh dyllan-to-you entscheidungsproblem drchai randomness38 banjavi chelciebritt d4tocchini rodrijuarez adrianloer marcelfarres dgotrik dnenov iangilman italoadler sandoche pygeek ciaranpark booomji notagenius markusbkoch ffeng271 codingbaobao stackcache mykt0ngc0 nataliawww lucaasdfg cuulee mf0414 bksalte baudtack stoeckley weeb-edu kostimarko magnafeet sdgandhi hhy5277 i5anoff ff6347 kexhest happy-wiggles fourks vishnuroshan miickel joeyfigaro domo9293 juddde

color-wander's Issues

Render to arbitrary large size?

Forgive the noobish question, but: is there any way to output PNGs of any arbitrary (large) size? Or is the current resolution (2560x1440) a hard limit? (i.e. if i wanted to render a PNG at giant poster size for actual poster printing, is there any way to get something with 4x those dimensions)

Problem installing

Would anyone be able to help me look over this problem when I do npm install?

Not sure how I can fix the errors that occur.

log file:
npm-debug.txt

Thanks!

npm run start

'npm run start' returns this:

(node:37226) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
(node:37226) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
(node:37226) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
(node:37226) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.

[email protected] start /Users/kylewagner/Desktop/color-wander
budo browser.js:bundle.js --live -- -t babelify

sh: budo: command not found

npm ERR! Darwin 14.5.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "start"
npm ERR! node v6.1.0
npm ERR! npm v3.8.6
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! [email protected] start: budo browser.js:bundle.js --live -- -t babelify
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the [email protected] start script 'budo browser.js:bundle.js --live -- -t babelify'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the color-wander package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! budo browser.js:bundle.js --live -- -t babelify
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs color-wander
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls color-wander
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /Users/kylewagner/Desktop/color-wander/npm-debug.log

Error: Cannot find module 'canvas'

The app runs great on my machine, but when I try to render out a seed I get this error:

$ node print 681969
module.js:440
    throw err;
    ^

Error: Cannot find module 'canvas'
    at Function.Module._resolveFilename (module.js:438:15)
    at Function.Module._load (module.js:386:25)
    at Module.require (module.js:466:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/todrobbins/dev/color-wander/lib/createFileRenderer.js:3:14)
    at Module._compile (module.js:541:32)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:456:32)
    at tryModuleLoad (module.js:415:12)
    at Function.Module._load (module.js:407:3)

osx 10.11.4
node v6.0.0
npm v3.8.6

Potential Commercial Use

Hey Matt,

Was interested in using this script to generate art for musicians on a hobby project I'm working on. I hope to commercialize the site. I'm not looking to commercialize the code. The generated art themselves would just be placeholder images for album art musicians have yet to upload. I'd like to speak to you about what kind of license you'd like, if anything more what is given.

If this sounds cool, let's email and figure it out.

Thanks!

Commercial License for NFT Generation Project

Hello, would love to do a collaboration on an NFT generative project using this, with a fair amount of extension, randomization design, data feed experimentation and such. Happy to do a % that is basically whatever you want.

npm install error

Hello, when i try install color-wander occurs this following error:

Your environment has been set up for using Node.js 8.2.1 (x64) and npm.

E:\Documents\GitHub>git clone https://github.com/mattdesl/color-wander.git
Cloning into 'color-wander'...
remote: Counting objects: 122, done.
remote: Total 122 (delta 0), reused 0 (delta 0), pack-reused 122R
Receiving objects: 100% (122/122), 1.93 MiB | 546.00 KiB/s, done.
Resolving deltas: 100% (57/57), done.

E:\Documents\GitHub>cd color-wander

E:\Documents\GitHub\color-wander>npm install
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: Use uuid module instead

[email protected] install E:\Documents\GitHub\color-wander\node_modules\canvas
node-gyp rebuild

E:\Documents\GitHub\color-wander\node_modules\canvas>if not defined npm_config_node_gyp (node "C:\Users\My User\AppData\Roaming\npm\node_modules\npm\bin\node-gyp-bin\....\node_modules\node-gyp\bin\node-gyp.js" rebuild ) else (node "" rebuild )
Warning: Missing input files:
C:\GTK\bin\zlib1.dll
C:\GTK\bin\libexpat-1.dll
C:\GTK\bin\libpng14-14.dll
C:\GTK\bin\libcairo-2.dll
C:\GTK\bin\libfontconfig-1.dll
C:\GTK\bin\libfreetype-6.dll
Building the projects in this solution one at a time. To enable parallel build, please add the "/m" switch.
Canvas.cc
CanvasGradient.cc
CanvasPattern.cc
CanvasRenderingContext2d.cc
color.cc
Image.cc
ImageData.cc
init.cc
win_delay_load_hook.cc
e:\documents\github\color-wander\node_modules\canvas\src\Canvas.h(19): fatal error C1083: Cannot open include file: 'ca
iro.h': No such file or directory (compiling source file ..\src\init.cc) [E:\Documents\GitHub\color-wander\node_modules
\canvas\build\canvas.vcxproj]
e:\documents\github\color-wander\node_modules\canvas\src\Canvas.h(19): fatal error C1083: Cannot open include file: 'ca
iro.h': No such file or directory (compiling source file ..\src\CanvasRenderingContext2d.cc) [E:\Documents\GitHub\color
-wander\node_modules\canvas\build\canvas.vcxproj]
e:\documents\github\color-wander\node_modules\canvas\src\Canvas.h(19): fatal error C1083: Cannot open include file: 'ca
iro.h': No such file or directory (compiling source file ..\src\Image.cc) [E:\Documents\GitHub\color-wander\node_module
s\canvas\build\canvas.vcxproj]
e:\documents\github\color-wander\node_modules\canvas\src\Canvas.h(19): fatal error C1083: Cannot open include file: 'ca
iro.h': No such file or directory (compiling source file ..\src\Canvas.cc) [E:\Documents\GitHub\color-wander\node_modul
es\canvas\build\canvas.vcxproj]
e:\documents\github\color-wander\node_modules\canvas\src\Canvas.h(19): fatal error C1083: Cannot open include file: 'ca
iro.h': No such file or directory (compiling source file ..\src\CanvasPattern.cc) [E:\Documents\GitHub\color-wander\nod
e_modules\canvas\build\canvas.vcxproj]
e:\documents\github\color-wander\node_modules\canvas\src\Canvas.h(19): fatal error C1083: Cannot open include file: 'ca
iro.h': No such file or directory (compiling source file ..\src\ImageData.cc) [E:\Documents\GitHub\color-wander\node_mo
dules\canvas\build\canvas.vcxproj]
e:\documents\github\color-wander\node_modules\canvas\src\Canvas.h(19): fatal error C1083: Cannot open include file: 'ca
iro.h': No such file or directory (compiling source file ..\src\CanvasGradient.cc) [E:\Documents\GitHub\color-wander\no
de_modules\canvas\build\canvas.vcxproj]
gyp ERR! build error
gyp ERR! stack Error: C:\Program Files (x86)\MSBuild\14.0\bin\msbuild.exe failed with exit code: 1
gyp ERR! stack at ChildProcess.onExit (C:\Users\My User\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\build.js:258:23)
gyp ERR! stack at emitTwo (events.js:125:13)
gyp ERR! stack at ChildProcess.emit (events.js:213:7)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:200:12)
gyp ERR! System Windows_NT 10.0.15063
gyp ERR! command "C:\Program Files\nodejs\node.exe" "C:\Users\My User\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js" "rebuild"
gyp ERR! cwd E:\Documents\GitHub\color-wander\node_modules\canvas
gyp ERR! node -v v8.2.1
gyp ERR! node-gyp -v v3.6.2
gyp ERR! not ok
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] install: node-gyp rebuild
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\My User\AppData\Roaming\npm-cache_logs\2017-08-08T01_42_52_812Z-debug.log

E:\Documents\GitHub\color-wander

Windows 10
Visual Studio 2015
node v8.2.1
npm v.5.3.0

How to solve this? Thanks you all.

How record videos from frames

Is there a way to do it in this state of art? I looked up the package.json and showed the ffmpeg command, but did not seem to take of, and on print.js it looks like we need some tweaking.

Tutorial on how to modify and control it

Would be nice for beginners like me a tutorial or a few links to understand what's going on in a more step-by-step level. I am trying to modify it to fill given imagens and is a bit hard to know what each parameter is doing.

How to set the background color to white

Hello,

I would like to set the background-color to white. I think that it is assigned via browser.js file on line 69: document.body.style.background = opts.palette[0];

When I change the value to white, or rgba white the script wont work.

How to change it?

Error when trying to print a seed to output

$ node print 879372
/Users/lh/Code/Playground/color-wander/lib/createFileRenderer.js:27
  fs.readFile(path.resolve(cwd, opt.backgroundSrc), (err, buffer) => {
                                                                  ^^
SyntaxError: Unexpected token =>
    at exports.runInThisContext (vm.js:73:16)
    at Module._compile (module.js:443:25)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/Users/lh/Code/Playground/color-wander/print.js:2:26)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)

Commercial use

Hey mattdesl,

first of all thanks for so much inspiration! Your work is truely amazing.

I'm interested in using the output of color-wander for commercial use. What am I allowed to do? And what am I not allowed to do?

E.g. would it be fine if I modify the rendering and drawing algorithm to fit my own needs and also use my own images for the distortion maps?

Thanks in advance!

Thank you - Angular 2 and your permission?

Hi @mattdesl thank you for sharing this. It is incredibly inspiring to me. Well all your work is inspiring to me :)

I would like to create an Angular 2 (https://angular.io/) implementation of this if I could have your permission?

Additionally, if you would like to be part of something this weekend (would not require any of your time unless you wanted to), then ping me on Twitter with @wwwalkerrun and I'll fill you in.

nothing in the maps folder

Just put all the *.jpg files in the map folder. I use npm's http-server to serve the directory it works fine

Need help running local

Hi i am new to this all, and i make my first steps with node.js. But when i try to run it local at my pc ( in my area the internet connection is not strong ) it shows a empty page in chrome.
What i did
Install python 3.10
install node.js
go to your unpack zip and run the index,html
but empty page .. can you help me plz
i really want to play with the parameters and learn more about it.
Greets and thx for such a code

NPM Install Issue

[email protected] install /Users/nesiehr/Documents/node/color-wander/node_modules/canvas
node-gyp rebuild

Package cairo was not found in the pkg-config search path.
Perhaps you should add the directory containing cairo.pc' to the PKG_CONFIG_PATH environment variable No package 'cairo' found gyp: Call to './util/has_lib.sh freetype' returned exit status 0 while in binding.gyp. while trying to load binding.gyp gyp ERR! configure error gyp ERR! stack Error:gyp` failed with exit code: 1
gyp ERR! stack at ChildProcess.onCpExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:305:16)
gyp ERR! stack at emitTwo (events.js:87:13)
gyp ERR! stack at ChildProcess.emit (events.js:172:7)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:200:12)
gyp ERR! System Darwin 15.4.0
gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/nesiehr/Documents/node/color-wander/node_modules/canvas
gyp ERR! node -v v4.4.2
gyp ERR! node-gyp -v v3.3.1
gyp ERR! not ok
npm ERR! Darwin 15.4.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install"
npm ERR! node v4.4.2
npm ERR! npm v3.8.6
npm ERR! code ELIFECYCLE

npm ERR! [email protected] install: node-gyp rebuild
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script 'node-gyp rebuild'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the canvas package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node-gyp rebuild
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs canvas
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls canvas
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /Users/nesiehr/Documents/node/color-wander/npm-debug.log

Ability to export as PDF (for printing)

They are so cool. I'd like to print on a wall.

App threw an error during load ReferenceError: navigator is not defined

When I run npm start I receive the following error message

App threw an error during load
ReferenceError: navigator is not defined
at /Users/hampton/Desktop/dev/app/color-wander/node_modules/fastclick/lib/fastclick.js:181:29
at Object. (/Users/hampton/Desktop/dev/app/color-wander/node_modules/fastclick/lib/fastclick.js:841:2)

Put seed into url for reproduction of wandering

Would be nice if the seed was updated in the url, and on refresh you could get the same art. Would be nice for sharing something cool, instead of screenshoting.