generative-design/code-package-p5.js

Code package of the book: Generative Design – Creative Coding for the Web with JavaScript in p5.js

Generative Design Code Package (for P5.js)

Hi! This GitHub repository contains all of the source code for the book Generative Design: Creative Coding for the Web with JavaScript in p5.js. To get started, please follow the intructions in the sections: Setup and Running the Sketches. Enjoy!

---

Authors:

• Benedikt Groß
• Hartmut Bohnacker
• Julia Laub
• Claudius Lazzeroni

with contributions by:

• Joey Lee
• Niels Poldervaart

Setup

The setup allows you to download the dependencies related to contributing changes to the project (e.g. generative-design-library.js). It also allows you to run a local web server using node. If any of that sounds too foreign or is not of interest and you just want to run the sketches, jump down to Running the Sketches.

1. Install node.js (go for the latest stable version)
2. Open Terminal and navigate over to the Code-Package-p5.js folder that you downloaded onto your computer:

$ cd path/to/folder
# e.g. cd /Users/GG/Documents/Code-Package-p5.js

3. Run:

$ npm install

Running the Sketches

While most of the sketches work without running a local webserver, there are some sketches that will not run properly since they use external files² (e.g. images or data) to create and inform the visualization. To run the sketches, you are welcome to use a local webserver of your liking.

There are many ways to start a local webserver. Please see the options below (not in any particular order)

Option 1

One method is to to use the local webserver of your choice (e.g. simple python webserver) and open up localhost:<port>in your browser¹.

$ cd path/to/folder
# e.g. cd /Users/GG/Documents/Code-Package-p5.js

$ python -m SimpleHTTPServer
# check localhost:8000

Option 2

If you've already followed the instructions in the Setup section and you're using Node.js, you can follow the instructions below:

1. Start a local web server (with live reload) by typing in your Terminal or Commandline the command below. This will open the index.html file (list of all sketches) a new browser window.

$ npm start

2. Click on any of the links 🔗 listed to view and interact with the sketches.
3. Interact, create, save, and share your work! 🌈#GenerativeGestaltung #generativedesign #p5js

¹The default port is 8000, but you can change the port number by specifying the number after the command e.g. python -m SimpleHTTPServer 5000

²Some sketches work only as expected when the files are placed online, as the rely on "security" sensitive functionality like loading external files. If you try to view them locally without running a web server, you get some kind of "cross-origin" errors 😭 (see your browser's console). The solution is to serve the files using what's called a local web server. This is what happens when you run npm start as shown above or when you run your own local server.

License

All of the book's source code is licensed under the Apache License Version 2.0

code-package-p5.js's Issues

General: missing pdf/svg export

P_1_2_1_01: lerpColor in HSB, chroma.js, saveASE

• lerpColor with key 2 is buggy, seems to be an bug in p5.js. Bug report is issued processing/p5.js#1029
• if (key == 'c' || key == 'C') GenerativeDesign.saveASE();
• Would be cool the extent modes with http://gka.github.io/chroma.js/

Maintenance + updating to more recent p5.js version

Hi @Niels-NTG @joeyklee @bohnacker, hope this github issue finds you alle well!

It think it would be a good idea to do some maintenance for the new/upcoming version JP/EN of the book. There will be a new wave of attention and we should be best possible prepared for this. Hence could all of us invest a little time in this? I'm thinking of:

• Update p5.js dependency to the most recent stable p5.js version
• @joeyklee could you reach out to your p5.js friends and ask for advice? Which recent version is the best bet for long term support?
• Create a dev branch for this
• Check and fix every sketch, with local webserver
• Check and fix every sketch, with the http://alpha.editor.p5js.org/generative-design/
  ...

Happy to split the work ... :)

PS. @Niels-NTG kind of related ... is there still the plan to have the sketches running interactively on http://www.generative-gestaltung.de/2/

Cross check data/README.md

Hi @joeyklee

Reorganised the centralised /data folder and introduced a dedicated readme. Could you please cross check whether understandable/spelling?

https://github.com/generative-design/Code-Package-p5.js/blob/pre-release/data/README.md

cc @Niels-NTG

P_2_2_3_02 needs to be synchronised with P_2_2_3_01

P_2_2_3_02 needs to be synchronised with P_2_2_3_01:

• Variable names as much as possible
• Key interaction
• Code cleaning

P_2_1_2_02 to _04 needs to be synchronised with P_2_1_2_01

P_2_1_2_02 to _04 needs to be synchronised with P_2_1_2_01:

• Variable names as much as possible
• Key interaction
• Code cleaning

P_4_3_3_02 needs to be synchronised with P_4_3_3_01

P_4_3_3_02 needs to be synchronised with P_4_3_3_01:

• Variable names as much as possible
• Key interaction
• Code cleaning

P_4_2_1_02 needs to be synchronised with P_4_2_1_01

P_4_2_1_02 needs to be synchronised with P_4_2_1_01:

• Variable names as much as possible
• Key interaction
• Code cleaning

P_2_1_4_02 to _05 needs to be synchronised with P_2_1_4_01

P_2_1_4_02 to _05 needs to be synchronised with P_2_1_4_01:
-Variable names as much as possible
-Key interaction
-Code cleaning

Either improve P_2_1_4_05 or delete it.

P_2_1_1_02 to _04 needs to be synchronised with P_2_1_1_01

P_2_1_1_02 to _04 needs to be synchronised with P_2_1_1_01:

• Variable names as much as possible
• Key interaction
• Code cleaning

P_3_1_4_01 not feasible to completely rewrite in JS

Was attempting to port P_3_1_4_01.pde and its external classes. Trying to replicate the workings of Ben Fry's TreeMap library proves to be quite difficult. Too many classes. I don't think it's feasible to create a sketch that behaves exactly the same as the Java version. We might have to consider replacing this sketch with one that is less complicated, or at least less awkward to write in JavaScript.

P_2_3_7_MacPaint_TABLET needs to be synchronised with P_2_3_7_MacPaint_1

P_2_3_7_MacPaint_TABLET needs to be synchronised with P_2_3_7_MacPaint_1:

• Variable names as much as possible
• Key interaction
• Code cleaning

Remove MacPaint from sketch names and rename to _01 and _02_TABLET

index.html (sketch list)

@Niels-NTG

The new index look much nicer! Many thanks for this!

Quickly two small comments:

• there are some broken images
• would vote to crop all images to square format (also on gg website)

Could you fix this?

General: missing saveASE() in generativedesign.js

Task:

• Porting of https://github.com/generative-design/GenerativeDesignLibrary3/blob/master/src/generativedesign/GenerativeDesign.java#L267 to js
• Add it to generativedesign.js

P_2_2_5_01: Code is cool, but has to many new commands and structures

We should keep the code closer to the already learned commands. Of course, having the circles as Objects is a good way to do it, but is completely new for the reader at this point. That might be confusing.
Still, we could keep this kind of code for P_2_2_5_02.

assign sketches to avoid multiple contributions

How can we assign sketches so that we don't work on the same ones? Create an issue for each one? or maybe submit a comment on this issue with what each contributor is working on.

Performance slowdown since p5js v0.5.14

Since using p5js version 0.5.14 the speed of drawing things slowed down noticably on my machine. I haven't measured but sketches that are drawing a lot of elements are about four times slower.

Am I the only one with this problem? I haven't found any similar issues posted on https://github.com/processing/p5.js/issues.

Readme: Add Acknowledgments and Contributors Link

P_3_1_4_02 recursive version of treemap

I've already done a recursive version, but didn't use it for word counting. If anybody has a good idea, if we could do something nice with it, we could still do it.

Very low priority

P_4_3_1_02 needs to be synchronised with P_4_3_1_01

P_4_3_1_02 needs to be synchronised with P_4_3_1_01:

• Variable names as much as possible
• Key interaction
• Code cleaning

P_1_2_3_02 to _04 needs to be synchronised with P_1_2_3_01

P_1_2_3_02 to _04 needs to be synchronised with P_1_2_3_01:

• Variable names as much as possible
• Key interaction
• Code cleaning

P_2_3_6_02 needs to be synchronised with P_2_3_6_01

P_2_3_6_02 needs to be synchronised with P_2_3_6_01:

• Variable names as much as possible
• Key interaction
• Code cleaning

P_4_2_2_02 needs to be synchronised with P_4_2_2_01

P_4_2_2_02 needs to be synchronised with P_4_2_2_01:

• Variable names as much as possible
• Key interaction
• Code cleaning

P_2_2_4_02 needs to be synchronised with P_2_2_4_01

P_2_2_4_02 needs to be synchronised with P_2_2_4_01:

• Variable names as much as possible
• Key interaction
• Code cleaning

P_3_1_3_02 to _04 needs to be synchronised with P_3_1_3_01

P_3_1_3_02 to _04 needs to be synchronised with P_3_1_3_01:

• Variable names as much as possible
• Key interaction
• Code cleaning

Add 'use strict'; to top of every script

It might be a good idea to add 'use strict'; to the top of every script. This get rid of many "silent" errors that can occur whilst running JS and promotes writing better code.

P_3_1_4_01: put Treemap class into the gd-library

I'm wondering if the class should be more general in terms of data input. But then it might be changing something in the printed code...

P_2_3_1_02 needs to be synchronised with P_2_3_1_01

P_2_3_1_02 needs to be synchronised with P_2_3_1_01:

• Variable names as much as possible
• Key interaction
• Code cleaning

P_2_1_1_04 does not load (SVGs in Firefox)

It seems maybe to be an issue with loadImage() and svg. I get the following error:

InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable  p5.js:14640
	[49]</p5.Renderer2D.prototype.image http://localhost:8000/libraries/p5/p5.js:14640:5
	[61]</p5.prototype.image http://localhost:8000/libraries/p5/p5.js:20795:3
	bound  self-hosted:918:17
	setup http://localhost:8000/01_P/P_2_1_1_04/:62:3
	p5/this._setup< http://localhost:8000/libraries/p5/p5.js:11564:7
	bound  self-hosted:912:17
	p5/this._runIfPreloadsAreDone http://localhost:8000/libraries/p5/p5.js:11507:7
	p5/this._decrementPreload http://localhost:8000/libraries/p5/p5.js:11516:5
	bound  self-hosted:914:17
	[61]</p5.prototype.loadImage/img.onload

While something seems to get loaded when testing the loadImage() with a callback, if you try to console.log() any of the images in the shapes array, it doesn't return anything in Firefox.

Things seem to work in Chrome.

P_1_2_1_01: extend modes with chroma.js

Would be cool the extent modes with http://gka.github.io/chroma.js/

loadImage() pushed to array fails in Firefox

loadImage() does not complete loading images on svg's when run in a loop in Firefox (it works for Chrome and in Firefox Developer Edition). See for example in sketch P_2_3_6_02.

P_2_2_2_02 needs to be synchronised with P_2_2_2_01

P_2_2_2_02 needs to be synchronised with P_2_2_2_01:

• Variable names as much as possible
• Key interaction
• Code cleaning

P_3_1_2_02 needs to be synchronised with P_3_1_2_01

P_3_1_2_02 needs to be synchronised with P_3_1_2_01:

• Variable names as much as possible
• Key interaction
• Code cleaning

Synchronize and check P_1_2_3_02 to _05

P_1_2_3_02 to _05 needs to be synchronized with P_1_2_3_01:

• Variable names as much as possible
• Key interaction
• Code cleaning

P_1_2_2_01, missing GenerativeDesign.sortColors()

Missing:

• if (key == 'c' || key == 'C') GenerativeDesign.saveASE()
• GenerativeDesign.sortColors()
  if (key == '5') sortMode = GenerativeDesign.HUE;
  if (key == '6') sortMode = GenerativeDesign.SATURATION;
  if (key == '7') sortMode = GenerativeDesign.BRIGHTNESS;
  if (key == '8') sortMode = GenerativeDesign.GRAYSCALE;

Task:
Implment sortColor() in generativedesign.js. Has to be most likely be implemented with webworkers: http://www.html5rocks.com/en/tutorials/workers/basics/

FYI / Please check for 1.0 release

Hi @Niels-NTG @bohnacker @joeyklee!

Just tweaked the IMO very last things for the 1.0 release of the code packe / repo. Please cross-check. Will go online tomorrow/Tuesday morning 8 CET. Please fix/change what should go in.

🚀Yay!

Best,
B

P_2_2_1_02 needs to be synchronised with P_2_2_1_01

P_2_2_1_02 needs to be synchronised with P_2_2_1_01:

• Variable names as much as possible
• Key interaction
• Code cleaning

P_2_3_6_02 needs to be synchronised with P_2_3_6_01

P_2_3_6_02 needs to be synchronised with P_2_3_6_01:

• Variable names as much as possible
• Key interaction
• Code cleaning

P_3_2_1_02 is missing

We need it, because there will be images of it in the book.

Code-Package-p5.js for p5js-web-editor

@b-g
Regarding getting the sketches into the p5-web-editor, the idea is to pull the sketches from github. However, this means we would need to put the "encapsulated" sketches somewhere on github. Problem is that when the sketches contain the GG library, etc for each sketch the projects is an unweildy ~610mb (~550 excluding the node_modules).

Question is, should we put the encapsulated code package in the generative-design org or in a separate dummy account?

thanks!

P_4_1_2_02 needs to be checked and synchronised with P_4_1_2_01

P_4_1_2_02 needs to be checked and synchronised with P_4_1_2_01:

• Variable names as much as possible
• Key interaction
• Code cleaning

Attention: the _01 sketch wasn't working correctly. Now it should. But there might be the same problem with the _02

Readme: improve local webserver and setup instructions

@joeyklee

Could you go once more over the readme?

At the moment it reads like you have to install node to run everything, but running index.html in any kind of local webserver would be enough. Could you make the node thing more optional and point out that any local webserver will do?

Fix Broken P_3_1_2_02

P_2_2_5_02 needs to be synchronised with P_2_2_5_01

P_2_2_5_02 needs to be synchronised with P_2_2_5_01:

• Variable names as much as possible
• Key interaction
• Code cleaning

P_2_1_5_02 to _04 needs to be synchronised with P_2_1_5_01

P_2_1_5_02 to _04 needs to be synchronised with P_2_1_5_01:

• Variable names as much as possible
• Key interaction
• Code cleaning

P_2_1_3_02 to _05 needs to be synchronised with P_2_1_3_01

P_2_1_3_02 to _05 needs to be synchronised with P_2_1_3_01:

• Variable names as much as possible
• Key interaction
• Code cleaning

Fix broken M_1_5_03

Hi @Niels-NTG, could you fix this one at some time? Ran into it accidentally ... not urgent. Best, B

P_1_2_2_01: color sorting works somehow but still not completely

Changing the image and pressing one of the sorting keys multiple times, I always get different results. That can't be right.

P_2_0_02 to _03 needs to be synchronised with P_2_0_01

P_2_0_02 to _03 needs to be synchronised with P_2_0_01:

• Variable names as much as possible
• Key interaction
• Code cleaning

better vector based SVG import

Currently the imported svg shapes are drawn as images e.g. P_2_3_4_01 and are very pixellated, not so nice. Find a ways to have proper vectors form the SVG to canvas.