generative-design-library.js

Javascript library for the book Generative Design. Intended to be used with p5.js sketches.

Install

npm install generative-design-library.js

API

timestamp

Returns neatly formated timestamp e.g. "151025_172441_790"

Returns String formated timestamp

RED

Color constant

GREEN

Color constant

BLUE

Color constant

HUE

Color constant

SATURATION

Color constant

BRIGHTNESS

Color constant

GRAYSCALE

Color constant

ALPHA

Color constant

sortColors

Sorts an array of colors according to the given method

Parameters

• colors Array An array of colors.
• method String Either gd.RED, gd.GREEN, gd.BLUE, gd.HUE, gd.SATURATION, gd.BRIGHTNESS, gd.GRAYSCALE or gd.ALPHA.

Returns String formated timestamp as string

ase.encode

Returns an ase swatch definition from an array of p5 colors.

Parameters

• p5colors Array an array of p5 colors

Returns String an ase swatch definition

WacomTablet

• See: http://www.wacomeng.com/web/

Use a Wacom tablet in your browser. Currently works only in Safari. Support of the Wacom browser plugin seems to be fading out. You have to add this to your html:

<object id="wtPlugin" type="application/x-wacomtabletplugin"></object>

values

Get the current values a Wacom tablet

Returns Object with properties: isWacom, isEraser, pressure, sysX, sysY, tabX, tabY, rotationDeg, rotationRad, tiltX, tiltY, tangPressure, version, pointerType, tabletModel, azimuth, altitude

Treemap

Creates a new empty Treemap with position (x, y), width and height. To specify drawing a bit more, you can give drawing options. 'sort' is true or false. If false, the elements will be shuffeled. 'direction' is either "horizontal", "vertical" or "both". With 'ignore', you can easily switch on and off branches of the Treemap. Content may be added using addData() or addTreemap().

Parameters

• x Number x position
• y Number y position
• w Number width
• h Number height
• options Object? drawing and sorting options {sort:true or false, direction:"horizontal", "vertical" or "both", ignore:["abc", "xyz"]}

Returns Treemap the new empty Treemap

x

x position of the rectangle.

y

y position of the rectangle.

w

width of the rectangle.

h

height of the rectangle.

minCount

the minimum count value of the items in the items array

maxCount

the maximum count value of the items in the items array

level

level of the item; the root node has level 0

depth

the depth of the branch; end nodes have depth 0

itemCount

the number of items in the complete branch

index

index of the item in the sorted items array..

addData

Adds data to the Treemap. If you give just one parameter, this value will be added to the items array. If there is already an item which has this value as data, just increase the counter of that item. If not, create a new Treemap with that data and init the counter with 1. If you have a complex object or array of nested subitems, you can give a second parameter, which defines what keys should be used to build the Treemap. This second parameter is in the form {children:"items", count:"size", data:"name"}. The key 'children' defines, where to find the nested arrays. If you have a plain nested array, just leave this out. The key 'count' defines, which value to map to the size of the rectangles of the Treemap. The key 'data' defines, which data to store. If omitted, the complete object or array branch is stored. This might be the way to choose in most cases. That way you keep all the information accessible when drawing the treemap.

Parameters

• data (String | Number | Object | Array) the data element (e.g. a String)
• keys Object? which keys should be used to build the Treemap: e.g. {children:"items", count:"size", data:"name"}. See the example for different ways how to use that.

Returns Boolean returns true, if a new treemap was created

addTreemap

Adds an empty treemap to this treemap. If data is given, this could be used to show and hide a complete sub-treemap from the diagram. There is no check, if there is already another treemap with that data.

Parameters

• data (String | Number | Object | Array) the data element (e.g. a String)
• count Number? the initial counter

Returns Treemap returns the new Treemap

calculate

Calculates the rectangles of each item. While doing this, all counters and ignore flags are updated.

draw

A simple recursive drawing routine. Draws only the rectangles. If you want to draw more of the content you can supply a function for drawing one item. This function gets the actual item as a parameter and has access to all the fields of that item, most important x, y, w, and h. Example:

myTreemap.draw(function(item) { 
  var r = min(item.w/4, item.h/4, 5);
  rect(item.x, item.y, item.w, item.h, r); 
}); 

Parameters

• drawItemFunction Function? a function that draws one item

Developer Setup

Download node.js, then:

Watch for file changes and create new bundles:

$ npm run watch

Create new bundles for dist folder:

$ npm run dist

Update API documentation:

$ npm run documentation

Acknowledgements

• ASE (Adobe Swatch Exchange) exporting is based on node-ase-utils by Dominik Guzei
• Wacom tablet support (only Firefox and Safari) based on Wacom Plugin Table Values Demo
• Azimuth and Altitude calculation function copy and paste from JPEN
• API documentation generated with documentation.js