ZIM js JavaScript Framework

Canvas Components, Controls and more!

PaperJS Famous Wave recreated in ZIM on the #HTML #Canvas with #JavaScript #CreateJS and #ZIMjs

wave

ZIM 5.1.0 has launched with a new Blob class complete with multiple types of Bezier controls.  The ZIM Blob can be edited and recorded.  The Bezier points can be animated and controlled dynamically with zim.animate() or zim.wiggle() or with zim.MotionController().  The Blob is a ZIM Shape so it can be dragged, scaled, centered, rotated, have its color or alpha changed, etc.

The above image is a ZIM reproduction of PaperJS wave that has been on their front page for a few years…  The real power of ZIM Blob though comes with letting people edit blobs and save them – see the Bubbling Series videos: Blobs and Blobs 2.

The Bezier controls consist of a point and two handles that change the curve of the Blob as it comes in and out of the point – just like in PhotoShop, Illustrator, Flash, etc.  There are four types of controls:

  1. “none” – this will make a corner (not shown in pic below)
  2. “mirror” – this keeps the stick straight and mirrors the handles
  3. “straight” – this keeps the stick straight but lengths can differ
  4. “free” – this lets sticks move independently at any angle

blob

Here is an oil drop light show created with ZIM Blob in a few hours:

oildrop

 

 

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

Information

This entry was posted on May 2, 2017 by in animation, design, interactive media, javascript, launch and tagged , , , , , , , , .
%d bloggers like this: