ZIM js JavaScript Framework

Canvas Components, Controls and more!

Animated PATTERNS! Bling, Plaid, Stripes, Dots, Pixels, Noise for Canvas with JavaScript, CreateJS and ZIMjs!

patternsZIM 7.3 Launches with Progress Bar and  Pizzazz 3 Patterns!

Here is an example of Animated Patterns for the HTML Canvas with JavaScript, CreateJS and ZIMjs at http://zimjs.com.

There are some excellent updates in ZIM 7.4 so check out the Change Log.  There are also a couple Bubbling videos on the new Progress Bar and the Pizzazz patterns:



The patterns are made with ZIM Tile() so some cool updates were made to the tile system.  Firstly, it has been arranged so that a series of items can be tiled.  This happens through the ZIM VEE values which have traditionally allowed for random picks or picks from ranges.  ZIM VEE also accepts any function that returns a value and this is how we arrange for a sequence of items to be picked in order by providing a new makeSeries() function that receives an array and returns a function that can be used by ZIM VEE to show the array items in order:

var s = makeSeries([new Circle(100,red), new Circle(100,green)]);
new Tile(s, 10, 10).center();

This will make a 10×10 tile of alternating red and green circles where as below will make a 10×10 tile of random red or green circles:

var r = [new Circle(100,red), new Circle(100,green)];
new Tile(r, 10, 10).center();


The ZIM Frame colors are now also stored on the zim namespace which means that if zns is false (the default) that you can use the colors just like this:

circle.color = pink;
frame.outerColor = grey;

Of course, any HTML color with quotes also work “grey” but quotes are annoying!


ZIM now has a ProgressBar() class with a circular or rectangular bar.  The rectangular bar can have animated backings as well!  This can be passed in to the new progress parameters of Frame() or loadAssets() to automatically take care of progress.  The traditional Waiter() can also be passed in to show a waiter component instead.


The DEFAULTFONT constant now operates on components with text for a variety of properties:

size, font, color, rollColor, shadowColor, shadowBlur, fontOptions, 
outlineWidth, outlineColor, padding, shiftHorizontal, shiftVertical
align, valign are available for the Pane



In the future we plan to bolster the GAME module with an Isometric class and also a fully integrated Physics Module with an alternative to Box2D.


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 July 31, 2018 by in interactive media, javascript, launch, physics and tagged , , , , , , , , , , , , , .


%d bloggers like this: