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 Infoactives are interactive infographics. This is a relatively new field with lots of potential. See how we distinguish this from an information site by pressing the MORE button!

History

Here are some examples of traditional infographics - images that generally show sectioned data with icons, charts, etc. in a nicely designed and friendly story-like manner.

InfoActive

Now imagine an infographic where the charts, statistics, characters, etc. are animated. This might get a little busy or visually complicated. So instead, make the infographic interactive. On a simple level, we could let the viewer chose a section to animate. But more engaging interactivity goes beyond selection. Here is a scale of interactivity:

Opportunity

This is really just Interactive Media. We have been doing this since the days of CD-ROMs where a page has all sorts of little things to activate or play with. Infographics are beautiful - so nicely designed, so magical. They feel NEW. Using interactivity with this same aesthetic provides opportunity to build careers and help humanity.
  • rolling over or pressing provides a little animation
  • SEE arrows and toggles can reveal different information
  • SEE sliders and dials can change data
  • dragging items to targets shows related statistics
  • SEE repeated interaction can simulate time
  • SEE emitters can recreate data
None of the ZIM examples is quite an infoactive. They do let people interact with and experience information but they are not in the cute concise format visualized. Frank Los is heading this way and makes good use of scaling. Bigger sliding pages that offer more freedom have been around for a while and may ultimately make more sense but it would be good to try working on the tighter infographic scale.

Scrolling

Animating while scrolling or swiping is an excellent way to dynamically show information. This can also be achieved with a slider, dial, mouse position on a page for non-mobile and tilt for mobile. Microsoft does a nice job on their By the Numbers story information but it is primarily decorative.

The Holiday Card and Scroll Parallax  show possibilities with ZIM and scroll parallax as do the Frank Los Parallax Banners.

Education

The ZIM Learn section has all you need to know to learn about coding with ZIM. Many of the Interactive Examples can be applied to infoactives. View the source (CTRL U) most are commented. You can paste the source into Docs Customizer to get a documentation list of all the commands in the code. Try using:

MORE
Let's interact with information!
open links in new tab

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

A unique way to View Lists by dragging on a path
A unique way to View Lists by dragging on a path

Integrate Data in your design with scrolling lists
Integrate Data in your design with scrolling lists

Animated and Alternate Information demonstrated
Animated and Alternate Information demonstrated

Interactive info pages to demo functionality A1 A2 B1 B2
Interactive info pages to demo functionality A1 A2 B1 B2

Flash Interactive Demo showing responsive design info
Flash Wrapper interactive demo

Flash Interactive Demo showing responsive design info
Flash Interactive Demo showing responsive design info

Learn about Scroll Parallax - self referential!


Learn about Scroll Parallax - self referential!


Learn about Scroll Parallax - self referential!


Learn about Scroll Parallax - self referential!


Learn about Scroll Parallax - self referential!
Learn about Scroll Parallax - self referential!

Practical example showing Parallax Product info!
Practical example showing Parallax Product info!