ZIM - Gen Art - Generative Art with ZIMjs for JavaScript and HTML Canvas with CreateJS


Dr. Abstract explains and defines generative art for the HTML Canvas with JavaScript, CreateJS and ZIMjs interactive media framework Data visualization helps us see the specifics of organization. Patterns emerge that can be both beautiful and educational. Press MORE for thoughts on data.

Data

Data can be thought of as a subset of information. Information is the representation of organization - often in a linear format we call language. Language has a set of delimiters (spaces, punctuation, pages, etc) that when decoded reveals the hierarchy of organization.

Data is usually the repetitive part of information. If information looks like a tree, then data looks like a bush - or even grass. As such, we tend to keep data in an array (a list). Sometimes these are nested as multidimensional arrays or tucked in an object for labelling with properties.
  1. pink, green, orange, blue, brown - comma delimited data (could be numbers, etc.)
  2. pink, green, orange, blue, brown | yellow, purple - comma and pipe delimited
  3. inside = pink, green, orange, blue, brown & outside = yellow, purple - key value pairs
  4. [pink, green, orange, blue, brown] - an array
  5. [[pink, green, orange, blue, brown], [yellow, purple]] - a multidimensional array (nested arrays)
  6. {inside:[pink, green, orange, blue, brown], outside:[yellow, purple]} - object literal with arrays
  7. any combination of the above ;-)

When we have data about the data we call it meta data - such as inside and outside references above. The brown text describing each line is also meta data. Below is a way that we might visualize this data. The top two bars are the array presented as a series and then randomly. At the sides are the multidimensional arrays and at the bottom is the object literal with the inside colors and the outside colors. The code to make this is shown in the next section.

Conveniences

ZIM has many ways to access data:
  • Read data from the server via ZIM async() (like AJAX)
  • Load data as a text, XML or json in the ZIM Frame()
  • Load data later with loadAssets()
  • Access local data with getCookie() or LocalStorage
  • Receive data in file URL with getQueryString()

ZIM has many ways to work with data:
  • Traditional variables, arrays, and object literals
  • ZIM loop() for numbers, arrays, objects, containers
  • ZIM Hierarchy() for hierarchical data
  • ZIM Dictionary() for objects as keys
  • ZIM Pick() for dynamic parameters and series
  • ZIM rand() for ranges and reflected ranges
  • ZIM shuffle() to shuffle arrays
  • ZIM Proportion() and ProportionDamp() for mapping
  • ZIM decimals(), constrain(), sign(), smoothStep()
  • Components that visualize like Tile(), List(), Pen(), etc.
  • zog() and zta() for logging and tabling to the console

Here is what working with the data example looks like in ZIM and vanilla JavaScript. ZIM is 2/3 the number of characters and 3/4 the number of lines. Not only that, it is easier to read and learn.


I've been really impressed with ZIM. It's fun to code, powerful and easy to learn! Chris Spolton

Industry

There are popular JavaScript libraries that are used for data processing such as P5js (a port of Processing) and D3 which has many graphs, charts and a language for data. ZIM uses the canvas and WebGL and can do the same things as these libraries. In addition to coding conveniences, ZIM has components which are helpful for controlling data visualization. Here are examples from Labosims - note the slider, dial, button interfaces.

This data mapping for where Artists live and where Artists work was created in an afternoon:

MORE
Can you see the data!
open links in new tab

Node Globe Radial Hierarchy of XML fragments

Node Globe Radial Hierarchy of XML fragments


ZIM SoundWave Sound Frequency data visualized - classic!

ZIM SoundWave Sound Frequency data visualized - classic!


Physics Data Visualization showing neighbors' ages

Physics Data Visualization showing neighbors' ages


Mini-site that shows Graphing Noise with ZIM Noise

Mini-site that shows Graphing Noise with ZIM Noise


Ornamator for Charting Motion of linked rings

Ornamator for Charting Motion of linked rings


Animated Graph Chart and async data

Fun Animated Graph Chart and async data


Showing Score Chart for ZONG game

Showing Score Chart for ZONG game


Sinusoidal Wave Diagram with ZIM Blob (PaperJS remake)

Sinusoidal Wave Diagram with ZIM Blob (PaperJS remake)


The Data Set behind ZIM Squiggle and Blob

The Data Set behind ZIM Squiggle and Blob

The Data Set behind ZIM Squiggle and Blob


Presenting Data Layers with ZIM Layer

Presenting Data Layers with ZIM Layer


Greys plus 256 Color Data in a ZIM ColorPicker

Greys plus 256 Color Data in a ZIM ColorPicker


Color coded Hierarchy Data with ZIM Hierarchy (and List)

Color coded Hierarchy Data with ZIM Hierarchy (and List)


Showing 64 Bit Examples in Scrollable Data with ZIM Window

Showing 64 Bit Examples in Scrollable Data with ZIM Window


Abandoned GUI Viewer for Coded Data

Abandoned GUI Viewer for Coded Data


Panning Map of 52 exhibits

Panning Map of 52 exhibits


Seventy stories told by Swiping Data on Dan Zen Museum steps

Seventy stories told by Swiping Data on Dan Zen Museum steps

Slide logo to Experience Data for number of viewers
Slide logo to Experience Data for number of viewers

Press people to Visualize Community featuring ZIM Emitter
Press people to Visualize Community featuring ZIM Emitter