ZIM js JavaScript Framework

Canvas Components, Controls and more!

ZIM TEN (10) Launches with Integrated Physics for JavaScript Canvas with CreateJS and ZIMjs

logo10

ZIM TEN with Integrated Physics for Canvas

ZIM 10 has launched with a NEW SITE and new features including integrated physics, an accordion List and SVG import to ZIM paths.

The new site features ten banner sections giving examples of the types of Interactive Media that can be created with ZIM.  These are:

GenArt - generative art and making computer art and visualizations with ZIM JavaScript Canvas Framework

Generative Art and making computer art and visualizations on the JavaScript Canvas with CreateJS and ZIMjs.

Canvas Games with ZIM - 2D games, casual games, arcade games, espape games, minigames, flash games, games of chance, isometric games, physics games, simulations, action and educational games good for e-learning, advergaming and gamification

Canvas Games with ZIM – 2D games, casual games, arcade games, espape games, minigames, flash games, games of chance, isometric games, physics games, simulations, action and educational games good for e-learning, advergaming and gamification.

Interactive Logo - play with branding to build engagement with the JavaScript Canvas and ZIMjs

Interactive Logos – play with branding to build engagement with the JavaScript Canvas

Interactive Advertizing, admusements, advergaming engaging brands with the ZIM JavaScript Canvas Framework

Interactive Advertizing, admusements, advergaming engaging brands with the ZIM JavaScript Canvas Framework

Data Visualization, charts, graphs on the Canvas with JavaScript and ZIM

Data Visualization, charts, graphs on the Canvas with JavaScript and ZIM

UI UX - ZIM canvas components such as slider, dial, button, label, keyboard, color picker, check box, radio buttons, toggle, pane, window, layer, waiter, progress bar, tabs, pad, loader, text area and accessibility

UI UX – ZIM canvas components such as slider, dial, button, label, keyboard, color picker, check box, radio buttons, toggle, pane, window, layer, waiter, progress bar, tabs, pad, loader, text area and accessibility

Apps - desktop and mobile apps with JavaScript and Canvas - responsive and adaptive design with ZIM Layout class - swipe pages with ZIM Pages class - gesture control with ZIM Gesture for pinch, pan, and rotate

Learn Apps – desktop and mobile apps with JavaScript and Canvas – responsive and adaptive design with ZIM Layout class – swipe pages with ZIM Pages class – gesture control with ZIM Gesture for pinch, pan, and rotate

Escape Puzzles - challenge your curiousity, problem solving and intuition!

Escape Puzzles – challenge your curiousity, problem solving and intuition!

Interactive Infographics - infoactives - with the ZIM JavaScript Canavas Framework

Interactive Infographics – infoactives – with the ZIM JavaScript Canavas Framework

Wonder Things - gadgets, widgets, inventions and features that defy description

Wonder Cards – interactive holiday cards, gadgets, widgets, inventions and features that defy description

NEW ZIM TEN FEATURES

1. INTEGRATED PHYSICS

ZIM uses Box2D and a wrapper ZIM physics.js file.  Previously, the physics objects and ZIM objects would be made by the coder and then ZIM would map the two.  Now, physics has been fully abstracted.  The coder can create ZIM objects and use the addPhysics() to add the object to a physics world with a host of options like static/dynamic, linear and angular damping, friction, density, etc.   This adds the following methods and properties to the ZIM object:

  • impulse()
  • force()
  • spin()
  • torque()
  • control()
  • follow()
  • contact()

The physics world gets gravity, borders, scroll and:

  • drag()
  • debug()
  • join()

Physics is now included in the ZIM Docs.  Here is a Physics Mini-site:

physics

2. LIST WITH ACCORDION

The new Hierarchy class is used to turn ZIM List into an accordion component.  Try it out here:

ten_accordion

3. SVG Import to ZIM Shapes

SVG (Scalable Vector Graphics) from HTML can be added to a ZIM SVGContainer() so that the paths and shapes get converted to ZIM Squiggle, Blob, Circle and Rectangle shapes.  These then can be transformed and manipulated by the user with Bezier curves.  Objects can be animated and dragged along the curves, and LabelOnPath can be used as well.

Try out SVG on Canvas here:

ten_svg

4. ZIM Pick and MORE!

ZIM Pick is a formalized and generic version of ZIM VEE values launched in ZIM 5 which provide dynamic parameters.  These are so handy, that we decided to give them to the world as a Pick Class.

Generally, Pick() lets a coder pass in parameters for a series, an array for randomly picked, a range object for a range or a function that returns a value.  The function or class can then choose with a Pick.choose() static method.  This is handy for instance with an interval to pick a different time each interval.  Or a ParticleEmitter to choose a different particle to emit.  Or a Tile to choose a different color each tile, etc.

A complete list of new features and changes for ZIM can always be found here: http://zimjs.com/updates.html

ABOUT ZIM

ZIM at http://zimjs.com is an open source JavaScript Framework for the HTML Canvas. You code in a text editor and view the code in a Browser. You can make visually rich games, apps, art and sites. ZIM is powered by the wonderful CreateJS with many thanks to their team!

The ZIM site features the following sections:

  • LEARN tutorials on how to start and code in ZIM
  • CODE ZIM Frame template and code context
  • DOCS the objects and commands all defined
  • NEWS latest features and articles
  • ABOUT features, applications, archives, reviews, etc.
  • EXAMPLES sample projects created in ZIM

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Categories

%d bloggers like this: