ZIM JavaScript Framework

ZIM NFT Launches!

Dan Zen — Sat, 29 Jan 2022 03:57:31 +0000

A major version of ZIM has launched called ZIM NFT. This is after ZIM CAT, TEN, NIO, OCT, HEP, SIX, VEE, 4TH, TRI, DUO and ONE.

SEE PRESS RELEASE ON EIN NEWSWIRE

ZIM NFT can be used to make interactive NFTs and is itself an NFT available on hic et nunc. NFTs are non-fungible tokens and are described relative to ZIM on the ZIM NFT page.

Interactive NFTs made with ZIM JavaScript Canvas Framework

Dr Abstract, Founder of ZIM, has made a number of interactive NFTs under the group name the Gadget Minters. If you are interested in joining, talk to us on ZIM Discord or ZIM Slack.

ZIM NFT 00 and ZIM NFT 01 have countless updates found on the News Page and listed in full at https://zimjs.com/updates.

ABOUT ZIM

ZIM at https://zimjs.com is a JavaScript Canvas Framework. The simplicity of ZIM empowers everyone to code. Kids are using physics and particle emitters in their workshops at https://zimjs.org/kids. Full curriculum lessons with interactive and video tutorials are available for high school at https://zimjs.org/skool. Developers around the world are using ZIM in production and ZIM is loaded millions of times daily. https://dev.zimjs.com. ZIM was founded in 2014 by Dr Abstract who teaches ZIM to his Sheridan Post Grad Interactive Media students, many of whom are designers learning and loving to code.

Three New Versions of ZIM Cat!

Dan Zen — Tue, 02 Feb 2021 18:29:49 +0000

Since the launch of ZIM Cat 00, we have launched three new versions and are now on ZIM Cat 03 at https://zimjs.com.

The updates include Generator, Book, Connectors, Effects, a Discord server, a Dev Site and much more! They can be found on the front page and expand open the CAT (OwMe) or here at https://zimjs.com/cat/ This is pretty amazing advancement considering Cat 00 was a huge release – and so were all the ZIM TEN versions right up to version 10.9.0. If these features are aiding your company, please consider donating at https://zimjs.com/patreon which will help spread the news about ZIM and build community.

Here are the bubbling videos:

ZIM Bubbling: 145. ZIM Cat 03 Layout Improvements for Responsive and Adaptive Design on JS Canvas

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
CODEPEN Topic with over 100 example pens

ZIM Icon and Logo for ZIMjs

Dan Zen — Thu, 17 Sep 2020 11:37:37 +0000

Here is the official ZIM icon and logo for ZIMjs. Note: when in ZIM you can use frame.makeIcon() to make the icon. There are parameters for colors too. This is preferable as the icon is vector. But for HTML pages you can use these icons and logos.

ZIM Icon for Light Backgrounds:

ZIM Logo For Light Backgrounds:

ZIM Background Transparent Icon For Dark Backgrounds:

ZIM Background Transparent Logo for Dark Backgrounds

ZIM is a JavaScript Canvas Framework to code creativity!

See more at https://zimjs.com

Welcome ZIM Cat! For the JavaScript Canvas!

Dan Zen — Wed, 26 Aug 2020 19:38:05 +0000

ZIM Cat has launched at https://zimjs.com. This is the version of ZIM after TEN. So TEN is gone and Cat is in!

There are amazing new features like Synth, Wire, Poly, Line, time in seconds and many more. The best way to explore is to go to the ZIM site and press the Cat Eyes. Here you can page through the examples at the left or take a fun quiz at the right.

We hope you enjoy ZIM as much as we have enjoyed making it!

ABOUT ZIM

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
CODEPEN Topic with over 100 example pens

ZIM 10.9.0 Launches with Bind and Flare for the JavaScript Canvas

Dan Zen — Fri, 03 Apr 2020 21:51:03 +0000

ZIM 10.9.0 has launched – another huge launch just dying to be ZIM LEV (11). But we are doing our best to keep ZIM at TEN.

BIND

ZIM now supports binding on any Object. Binding lets you set a connection to localStorage, GET or POST and then bind properties to and/or from this connection. The bind object’s from(), to() or toLock() methods can be called to send or receive data. There are filters, callbacks, extra and master settings. See the ZIM Docs, the Learn JavaScript videos and the source for TOWER TALK.

FLARE

Flare is a handy shape inspired by car tail lights. It lets you make flared rectangles joined together if desired. There are also MultiFlare and FlareBox classes. These overlap Flares and place them around a box to use on Button backgrounds for instance. See the ROCKET example for ideas!

OTHER UPDATES

There are a slew of other important updates – see https://zimjs.com/updates.html – here is an excerpt:

AJAX
ZIM has an internal Ajax class with get(), post() and put() methods
This is very easy to use and examples are provided
ZIM async() can still be used to get around security/CORS issues

LEVEL
https://zimjs.com/ten/bind.html - note the level is stored as well
ZIM DisplayObjects now have a level property to get and set
This just returns the parent getChildIndex() and calls the parent setChildIndex()
A level of higher than numChildren-1 will be set to numChildren-1
A level of lower than 0 will be set to 0

SPECIAL COLORS - IMPROVEMENT
https://zimjs.com/ten/flare.html
ZIM now has GradientColor, RadialColor and BitmapColor available as colors
These can be used anywhere a color is applied to a ZIM shape or component.
new Circle(100, new RadialColor([blue,green],[0,1], 0,0,100, 0,0,0)).center();
and they can be assigned after as a color or borderColor property, etc.
ADDED mist and fog colors #bbb and #aaa - between light and silver

NOTE: for a ZIM Shape() apply these the old way with:
lf()	beginLinearGradientFill
rf()	beginRadialGradientFill
bf()	beginBitmapFill
ls()	beginLinearGradientStroke
rs()	beginRadialGradientStroke
bs()	beginBitmapStroke

SERIES - IMPROVEMENT
the series() function has been really handy so we have give it some more options.
for instance, start at 3, reverse and don't go past 0 (or length-1 if not reverse):
var colors = series(0, 1, 2, 3, 4).jump(3).reverse().constrain();
Here are the new chainable methods and there is also an index property (same as jump)
step(num) - num defaults to 1 - the number of items to move the index - or use index property
jump(index) - jump to an index but do not run it - the next call to the series will run here
reverse(boolean) - boolean defaults to true - reverses direction - or pass in false to cancel reverse
bounce(boolean) - boolean defaults to true - back and forth between 0 and length-1 - or pass in false to cancel bounce
constrain(boolean) - boolean defaults to true - keeps index between 0 and length-1 - or pass in false to cancel constrain

FAST FRAME
It is recommended to use a ZIM Frame or if using Adobe Animate to use the ZIM Shim
but if you are just wanting to use some ZIM features and are working primarily with CreateJS
or legacy CreateJS code - then just call fastFrame() before using ZIM code.
Pass the CreateJS namespace and the current stage into fastFrame().
fastFrame() will create and return a very light placeholder frame as a zimDefaultFrame
and will handle various scaling settings due to ZIM Retina.

WARNING COLORS
zogy() has been used for all ZIM warning colors
ZIM warnings can be turned off by setting zon = false before loading ZIM.

CREATEJS - IMPROVEMENT
CreateJS 1.3.0 is available on the ZIM CDN https://zimjs.org/cdn/1.3.0/createjs.js (and createjs_doc.js)
This has fairly deep adjustments to mouse position, localToGlobal, globalToLocal, hitArea, mask and cursor.
Generally the change relate to scaling the stage for the window devicePixelRatio
There is a createjs.stageTransformable property set to true - this means the adjustments have already been made
this allows us in ZIM to either make the adjustments or not - and avoid a double adjustment
This update is part of a larger directive to maintaining CreateJS
We have started a Slack team and are discussing a path forward with the CreateJS team.
Message Dan Zen on the ZIM Slack at https://zimjs.com/slack if you are interested in getting involved

GENERAL
bot() and top() fix to still return obj for chaining if not yet added to stage
Adjusted talk() on Accessibility to read message only once on NVDA - thanks Nathan IMPROVEMENT
Label outline has been adjusted to align properly - thanks Racheli Golan for the guidance IMPROVEMENT
Label outline property has been removed BREAK - there still is the outlineLabel property to the CreateJS Text outline
The outline property was a container for adjusting the outline - now that it is fixed, it is not in a container

ABOUT ZIM

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
CODEPEN Topic with over 100 example pens

ZIM on CodePen Topics

Dan Zen — Fri, 24 Jan 2020 21:31:23 +0000

The ZIM JavaScript Canvas Framework has been added to the CodePen Topics section at https://codepen.io/topics. At https://codepen.io/topic/zim you will find over 130 Pens on templates, patterns and examples as well as posts introducing ZIM on CodePen, features, treats, philosophy and more.

CODEPEN – excerpt from site:

CodePen is a social development environment. At its heart, it allows you to write code in the browser, and see the results of it as you build. A useful and liberating online code editor for developers of any skill, and particularly empowering for people learning to code. We focus primarily on front-end languages like HTML, CSS, JavaScript, and preprocessing syntaxes that turn into those things.

We say social, because CodePen is a community. Most creations on CodePen are public and open source. They are living things that other people and the community can interact with, from a simple hearting, to leaving a comment, to forking and changing for their own needs.

People use CodePen for all sorts of things: prototyping new ideas, reduced test cases for bugs, sending clients things to look at, evaluating potential hires, to finding inspiration. People also use CodePen as a sort of resume and portfolio, showing off their best design and development work.

ABOUT ZIM

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
CODEPEN Topic with over 100 example pens

ZIM 10.7.0 Launches with Beads!

Dan Zen — Thu, 19 Dec 2019 03:35:53 +0000

ZIM 10.7.0 (and now 10.7.1) has launched with ZIM Beads() that lets you place objects along a path made with a Squiggle or Blob. See the Beads Mini-site.

Paths have been improved with a Bezier() class that adjusts distribution along paths. This has helped adding points, hitTestsPath, and animation along paths as well as Beads.

Animate() on paths now has a startPercent and percent convenience properties which is very handy to start an animation anywhere on a path and animate any percent amount including negative percent and percents greater than 100.

Please read about all the updates here https://zimjs.com/updates.html

ABOUT ZIM

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

ZIM 10.6.0 Launches with Radial Menu and much More for the JavaScript Canvas

Dan Zen — Fri, 25 Oct 2019 04:06:13 +0000

RADIAL MENU

ZIM 10.6.0 has launched to Code Creativity on the JavaScript Canvas now with a new Radial Menu interface for the Canvas that makes use of Label on Arc and the ZIM Hierarchy SIMPLE with EXTRA data structure. This allows the hierarchical menu to be styled down to the individual buttons. The code example page also features animated text with the new ZIM LabelLetters class to break up letters into individual labels for easy animation effects.

DPAD AND MOTIONCONTROLLER

Also introduced is a DPad (Directional Pad) component for the Canvas that replaces keyboard controls for mobile games and apps. Just put your thumb on that and move the player around! There are three example files showing the DPad connected to the ZIM MotionController. The MotionController has a new DPad type (pass in the actual DPad object). There is also a new “pressdrag” type that only drags an object if pressed on to start – remember this is the MotionController – not ZIM drag(), transform() or gesture() all of which drag easily. The pressdrag starts off like the others but then you can set the speed and damping of the object being dragged. The MotionController already has a “pressmove” type but this activates no matter where on the stage you press. Ah… details.

CREATEJS FOR TOUCH and THREEJS ORBIT CONTROLS

ZIM has launched a new version of CreateJS that has improved Touch handling in Firefox for desktop. Recently, Firefox has followed Chrome to disabled certain touch events on Desktop to avoid being detected as mobile. So adjustments were made to the CreateJS doc. ZIM also has launched a special version of ThreeJS OrbitController to work with ZIM overlayed on top of a ThreeJS canvas. In the past, we had to choose one or the other canvas to be interactive – now, we can run orbit controls from the ZIM canvas.

Here is a pre-formatted summary of all the updates – also found at https://zimjs.com/updates.html.

ZIM 10.6.0
DPAD COMPONENT MOBILE IMPROVEMENT
Added DPad() class - a round joy-stick-like controller to replace arrow keys on mobile
good for moving things around by passing the DPad into the MotionController
Adjusted MotionController type parameter to accept "DPad"
SEE https://zimjs.com/ten/dpad.html

RADIAL COMPONENTS
Added LabelOnArc() to put a ZIM Label on an arc (remember there is LabelOnPath as well)
Added Radial() and RadialMenu() classes
These make radial buttons similar to Tabs
The RadialMenu provides a hierarchy menu similar to List Accordion - but on rings
Adusted Hierarchy to be able to add extra properties in simple format
used in RadialMenu for adding styles to each radial
SEE https://zimjs.com/ten/radial.html

ANIMATING TEXT
Added LabelLetters() to break apart a Label into individual letter labels
This is handy for animating letters using animate with a series - also for kerning letters
SEE https://zimjs.com/ten/radial.html

HOLD
Added hold() and noHold() chainable methods
Similar to tap() but will call function when object is held for longer than a specified time
The time is handled with a setInterval at which point it checks if in same position
If it is in a different position then the user must let go and try a hold again to trigger hold
Hold must keep cursor within a certain distance (5px) and be held for a certain time (1500ms)
This can be used to replace shift, ctrl, etc. keys on mobile

HOLD ON BLOB AND SQUIGGLE MOBILE IMPROVEMENT
Added hold on Blob and Squiggle points to remove points
shift click still removes - but now hold on points will allow mobile users to remove points

SHAPE CHANGES
Added tiny API for Shape right on Shape (added 300 Bytes)
So the following can be chained right to the Shape object
This means we can do code like the following:
new Shape().s(red).ss(5).mt(100,100).lt(200,100).addTo().alp(.5);
There is no longer a need for the separate call to the graphics property
See https://www.createjs.com/docs/easeljs/classes/Graphics.html for definitions and parameters
NOTE: only the tiny API has been added to the Shape NOT moveTo() for instance...
mt()	moveTo
lt()	lineTo
a() 	arc
at()	arcTo
bt()	bezierCurveTo
qt()	quadraticCurveTo
r() 	rect
cp()	closePath
c() 	clear
f() 	beginFill
lf()	beginLinearGradientFill
rf()	beginRadialGradientFill
bf()	beginBitmapFill
ef()	endFill
ss()	setStrokeStyle
sd()	setStrokeDash
s() 	beginStroke
ls()	beginLinearGradientStroke
rs()	beginRadialGradientStroke
bs()	beginBitmapStroke
es()	endStroke
dr()	drawRect
rr()	drawRoundRect
rc()	drawRoundRectComplex
dc()	drawCircle
de()	drawEllipse
dp()	drawPolyStar
p() 	decodePath

POS
ZIM pos() now uses constants LEFT, RIGHT, CENTER, MIDDLE, TOP, BOTTOM see below
The parameters have been adjusted to (x, y, horizontal, vertical, etc.) BREAK
Use LEFT, RIGHT, CENTER, MIDDLE for horizontal (or true for legacy RIGHT)
Use TOP, BOTTOM, CENTER, MIDDLE for vertical (or true for legacy BOTTOM)
Docs have been updated to better describe pos()
See https://zimjs.com/positioning/

CONSTANTS
Added new constants: LEFT, RIGHT, CENTER, MIDDLE, TOP, BOTTOM, HORIZONTAL, VERTICAL, BOTH
These are equal to the lowercase strings - so align:LEFT is the same as align:"left"
Added these and the colors to the DOCS under the FRAME module
Also added TAU, DEG and RAD constants to the CODE module
If working in radians, TAU is equal to 2 radians (360).
This allows easy visualization of angles - TAU/2 is 180, TAU/4 is 90, etc.
DEG is 180/Math.PI so you multiply a radian value by DEG to get degrees.
RAD is Math.PI/180 so you multiply a degree value by RAD to get radians.
Math.sin(TAU/4); // sin of 90 degrees (1)
// is same as
Math.sin(90*RAD);
// is same as
Math.sin(90*Math.PI/180);
// and
Math.asin(1)*DEG; // is 90

GENERAL
IMPROVEMENT Updated ZIM Frame resize event.  After a resize, Frame now checks immediately then every 50ms until the delay time is met.
The delay default has been changed 1000 on mobile to catch the unbelievable delay iOS has in reporting new screen size.
The delay is 30 on non-mobile which forces the 50ms delay check to 30 (or whatever the delay is if less than 30).
Thanks Drashya Gohil and Frank Los for reporting and testing - hopefully this is the last time this needs to be worked on.
Added a color property to LabelOnPath
IMPROVEMENT Fixed animate() to animate with just an object literal for the props - eg. circle.animate({x:500})
This used to be read as a ZIM DUO object and therefore not work unless a second parameter was added
So we would always add the time for instance: circle.animate({x:500}, time:1000) - even though that is default
Added a setDefault() method and isDefault read only property to ZIM Frame
The methods addTo(), center(), centerReg(), loc(), pos(), Ticker.add()
default to the stage of the first frame made
Use setDefault() to set a frame to the default frame
Previously (and still), you could use the undocumented zimDefaultFrame global variable
Updated Frame asset parameter and Frame.loadAssets() to handle sound with text after the filename extension
by dividing filename with ? and using first part. - Thanks Cajoek on Slack for the prompting!
Added "pressdrag" type to MotionController that makes target follow mouse when pressed on
this is different than "pressmove" which moves the target to wherever the mouse is pressed and then follows the mouse
Thanks Shan Yuan for the request!

PATCHED - (unlikely) BREAK - Radial, RadialMenu, List and Organizer
now have these parameters in this order: color, rollColor, selectedColor, selectedRollColor
This matches with tabs and Pad

UPDATED - ZIM Code Page to ES6, GitHub, ZIM Templates, TypeScript, NPM, Distill, Bubbling Videos
UPDATED - ZIM Tips and ZIM Skool to ES6
UPDATED - CreateJS to 1.2.2 with important changes to help Touch on Desktop - especially for educators
UPDATED - CDN URL to ThreeJS to https://zimjs.org/cdn/r109/three.min.js
and added OrbitControls that work with ZIM even if on own ThreeJS canvas https://zimjs.org/cdn/r109/OrbitControls.js

ZIM Site Moves To JavaScript 6 ES6

Dan Zen — Fri, 25 Oct 2019 03:19:02 +0000

ZIM Skool at https://zimjs.com/skool.html has been converted to ES6 for its reference and on-line tutorials. It also now features syntax coloring in its reference section and looks great! This is in preparation for a new video series called Learn JavaScript with Creative Coding which follows along the same lesson structure as the popular online coding resource for High Schools, Colleges and coding clubs.

ZIM Tips at https://zimjs.com/tips.html has also been converted to JavaScript 6 and re-organized and has had syntax coloring added. It has become quite the page of information about the ZIM Creative Coding JavaScript Canvas Framework.

The ZIM Template on the CODE page at https://zimjs.com/code.html is ES6 with const, let, arrow functions being the difference. If you would like to read a little about it you can view the JavaScript 6 Tip.

Just a warning… JavaScript 6 does not work on our older test devices like an iPod 5 from about 5 years ago. So… for a production apps you should transpile with Babel for instance.

ABOUT ZIM

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

Code in FIVE Minutes with ZIM – Video Series

Dan Zen — Mon, 29 Jul 2019 14:56:48 +0000

We have launched a new video series called Code in FIVE Minutes with ZIM Here are the topics to date:

It is a fun series because we do not have to explain everything as we go – we do a little explaining but we get to code at actual speed!

The series shows the diversity and efficiency of the ZIM JavaScript Canvas Framework. Please join us in coding with ZIM and you are welcome to join our community at https://zimjs.com/slack