ZIM js JavaScript Framework

Canvas Components, Controls and more!

ZIM 4.6 New Updates for HTML Canvas Coding!


ZIM 4.6.0 has launched with a new Swiper class added to the Pages module.  Swiper is like an invisible slider with Damping.  It is good for controlling rotation and scale on 3D objects for instance – here we rotate the phone around the y axis (y property of phone.rotation):

var swiper = new zim.Swiper(stage, phone.rotation, "y", .01);

The Sprite class has been given some love.  Loading and running a Sprite is a lot easier and the run method piggy backs on zim.animate so you can specify the time, wait, loop, rewind, and all the associated calls to functions – we can run sprites at a rate different than the frame rate:

var sprite = new Sprite(bitmap, cols, rows).addTo(stage).run(time);

More options are available – see docs.  You may have noticed the addTo() method chained in the middle…  this is one of a half dozen new ZIM 4TH chainable methods:

addTo() - adds object to container inside the brackets
removeFrom() - removes object from container
pos(x, y) - positions x and y
mov(x, y) - relative position - like x+= and y+= (pronounce mawv)
alp(alpha) - sets the alpha
rot(rotation) - sets the rotation of the object
ske(x, y) - sets the skewX and skewY of the object

On the Frame we have added keydown and keyup events just so we do not have to exit out to addEventListener on the window for these.  This type of thing is just a wrapper and only takes a few lines of code with no performance loss.  We gain the ease of the CreateJS on() method including the fourth parameter to remove the listener after running once.

frame.on("keydown", function(e) {zog(e.keyCode);});

Finalized the zim.loop() to always pass index, total, min, max, obj consistently as final params to call function.  Total has been added to give the total number of times the loop will run. The first parameters vary based on the four loop modes:

zim.loop(100, function(index, total, min, max, obj){});
zim.loop(array, function(element, index, total, min, max, obj){});
zim.loop(object, function(property, value, index, total, min, max, obj){});
zim.loop(container, function(child, index, total, min, max, obj){});

Note that there are more parameters to add to zim.Loop:

zim.loop(obj, call, reverse, step, start, end);

This has been an interesting experiment to re-imagine looping – been using it for a month and it is very handy and much more straight-forward than a for loop and subsequent manipulations to get the values you want.

NOTE: Should just point out that usually you do not need to collect all the parameters sent to the call function – for instance, if you wanted to loop through children in a container:

zim.loop(monsters, function(monster) {monster.x += zim.rand(5,10,true,true);});
// each monster would move to the right or left randomly between 5 and 10.
// we are immediately given the child - no muss no fuss!
// also note the new negative range parameter for zim.rand() - the last true.



This has been an extremely busy quarter for ZIM.  We have launched 64 examples in ZIM Bits – all updated to ZIM 4.5 and 36 brand new ZIM Captures along with workshops and a lesson module.  Through this all, the code has grown, been refactored and tested.

There are nine more workshops planned and two more lesson modules.  After these we move to ZIM VEE (5).  This will include live component makers.  After that we move to ZIM SIX (6) which may be adjusted to ECMAScript 6 if necessary – although as far as we know, ZIM works fine with JS6.

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


This entry was posted on January 8, 2017 by in components, design, interactive media, javascript, launch, library, mobile, physics, tutorials and tagged , , , , , .


%d bloggers like this: