ZIM 017

1. CHAT BOT

https://zimjs.com/bot

Created and AI Chat Bot for ZIM.
This uses RAG (Retrieval Augmented Generation)
which uses the best 3 questions and answers from 1000 ZIM question and answers
and the ZIM Template to feed to ChatGPT a special prompt.
The project was done by Suha Islaih https://www.linkedin.com/in/suha-islaih
and we would recommend employing Suha for similar projects.
The 1000 questions and answers were guided by the ZIM team
to get current information as raw ChatGPT was quite out-of-date.
From our tests, we greatly improved the answers from about 2% correct to 80% correct.
Still, that leaves 20% incorrect and possibly quite misleading.
We have included a poll at the bottom that you can do for each question
and which shows live results as to the correctness of the answers.

ZIM STATEMENT ON AI
We love coding and would much rather code than have AI code.
We love creating which is the process from idea to product/service.
How much of that is AI is up to you and your situation.
We would feel sad if people just use AI and do not code.
Initially, we considered saying that using AI is like eating without tasting.
But... if there is no expression in coding as in, it can be automated,
then we should let it be so, and spend time on more ideas, friends, life, etc.
Still, many like to cook even though we can just buy meals.
Code if you want. Use AI if you want.

2. RIVE INTEGRATION

https://zimjs.com/rive/animate.html
https://zimjs.com/rive/input.html
https://zimjs.com/rive/node.html
https://zimjs.com/rive/listen.html

Rive lets you make interactive graphics and animations - https://rive.app/
Rive is an animation tool similar to Adobe Animate (Flash) but with a special StateMachine
that has a cool connector node system to guide animation states.
Personally, I have done interactive animations for years on lots of tools
but at tenth glance, the StateMachine still confuses me ;-). Education would help, I am sure.
Most of these Rive animations can just be done in ZIM - but bones are nice!

Rive apps can be displayed in ZIM using one of two classes under META in Docs (along with QR and GIF)

Rive() handles animation, input and nodes

RiveListener() is for when a listener is assigned in Rive like pressmove, pressdown or pressup

The listener version takes a few seconds to load the WASM code and then is quick.
The Rive JS runtime script or import must be placed at the top of the HTML page.

// at top (note: fix the gap between the h and t below)
<script src="https://unpkg.com/@rive-app/canvas@2.17.3"></script>

// in ZIM code
// Rive, when not used in ZIM, requires an existing canvas and a canvas parameter.
// With Rive in ZIM, we make the canvas based on width and height parameters.
// A canvas parameter is available as well for a predefined canvas.

const r = new Rive({
    src: "rive.riv",
    width: 500,
    height: 500,
    autoplay: true,
    stateMachines: "bumpy", // optional				
});			

// The Rive object has a display property that is a ZIM DisplayObject - a dynamic Bitmap.
// The ZIM Vid() is also a dynamic Bitmap but the difference is the Vid is the Bitmap.
// With Rive, the Rive object is a Rive object so you cannot add it to the stage, for instance.
// You must add the display property to the stage.
// This lets people use the Rive object with all its methods and properties just like in examples.
// For any ZIM methods like center(), animate(), etc. we use the display property of the Rive object.

r.display.center();

3. VALUE AND INDEX

currentValue has been replaced with value and selectedIndex with index.
currentValue and selectedValue will still work for backwards compatibility.
This is for parameters, properties and STYLE of components such as RadioButton, Slider, etc.
Note: not all components with a value have an index and visa versa, although some have both.

STYLE = {index:1}
const r = new RadioButtons().addTo().change(()=>{
	zog(r.index)
});

4. OUTLINE IMAGE

https://zimjs.com/017/outline.html

Added an outlineImage() function to the Code Module
that returns points around a single solid part of a DisplayObject.
Most likely, this will be used on a Pic() that is a png with background transparent outside.
Note: this returns thousands of points so see simplifyPoints()
Added a simplifyPoints() function to the Code Module
that takes lots of points and simplifies them.
The simplified point can then be passed into a ZIM Blob to make a shape.
Thanks Ami Hanya for the prompting
and Emanuele Feronato https://www.emanueleferonato.com/ for earlier Flash examples.

import zim from "https://zimjs.org/cdn/017/zim_physics"; // or latest version
new Frame(FIT, 1024, 768, light, dark, ready, "cathead.png", "h ttps://zimjs.org/assets/");
function ready() {
    const pic = new Pic("cathead.png").center();
    const physics = new Physics().drag();

    const blob = new Blob({
        points:simplifyPoints(outlineImage(pic), 10), // 10 is the default tolerance 
        color:faint, 
        interactive:false
    }).loc(pic).addPhysics();
    pic.addTo(blob);

    zog(physics.validate(blob)); // check validation

    new Circle(50,black).pos(0,100,CENTER).addPhysics();
}

5. CONCAVE BLOB PHYSICS

https://zimjs.com/017/outline.html

ZIM Physics helper module has been updated to version 2.3
ZIM Blob().addPhysics() now supports concave shapes
as long as the Blob does not overlap, it should work (and points in clockwise order)
Internally, concave shapes are converted to multiple convex fixture shapes in Box2D
using the b2Separator class by Antoan Angelov
See the example above

NOTE: previously, we showed an example made up of multiple Physics objects with joins.
IMPROVEMENT Now, joining multiple physics objects are no longer necessary.

const head = new Blob({
    interactive:false,
    points:points,
    controlType:"none"
}).pos(0,floor.height,CENTER,BOTTOM).addPhysics();
const earRight = new Triangle(100,100,-1).loc(661, 341).addPhysics() 
const earLeft = new Triangle(100,-1,100).loc(362, 341).addPhysics()
physics.join(head,earRight);
physics.join(head,earLeft);
// We could now make this with one Blob().addPhysics()

6. LIST ACCORDION TOGGLE INDEX

https://zimjs.com/017/accordion.html
toggle(state, index) - for an accordion, will close the accordion if open or open if closed
passing in true will open (or keep opened), passing in false will close (or keep closed)
pass in an index to open an accordion to that index or see openAtNum()

the way the index works is that it is based on visible items (indexes start at 0)
pass in an array to the index parameter to open inner accordions
remember, the index is based on all visible items and does not restart at 0 for nested items
there is a 50ms delay after each index is chosen as the accordion opens up
EXAMPLE - OPENING NESTED ACCORDION
4 items showing and index 1 (second item) has 5 things, the second of which has 3 things.
toggle(true, [1, 3, 4])
would open outer index 1 showing five more
the 3 index is now the 1 index of the five
so 3 would open the 1 index of those 5 showing 3 more
the 4 index is now the 0 index of those three
so 4 would open the 0 index of those three
Added closeOthers parameter to List() with default false
set to true to close other branches before opening selected branch.
openAtNum(idNum, closeOthers) now has a closeOthers parameter with default false
set to true to close any open branches before opening branch at id.

7. SELECTED INDICATOR TYPE

https://zimjs.com/017/indicator.html

Added a selectedIndicatorType parameter after indicatorType BREAK - rest of parameters moved back one
This allows different indicators to be used for selected versus not selected.
Also, updated the indicators to be center reg and if no height provided, be the max height of any custom indicators.
Thanks Karel Rosseel.

8. ACCESSIBILITY

Improved the docs to note that with Windows Narrator, the scan mode must be toggled OFF - use Caps Lock - Spacebar.
Also, for ENTER key functionality DO NOT use tap() but rather use on("mousedown") or on("click").

9. SVG

added the styles back in for SVG - bitmap:false so SVGContainer version
fixed up color processing issues with rgb() values - we were parsing , out so that messed up the colors.
Made SVG not default to showControls:true when bitmap:true as these were then showing when interactive:false is chosen.
Reversed the direction of the SVGContainer processing so stacking order is correct - thanks Karel Rosseel for report.

10. GLOBALS

https://zimjs.com/docs.html?item=globals
Rewrote the ZIM Globals entry in the Docs to list all globals and describe the global situation.
Read the docs for description of the zim namespace, zimplify, ES modules/scripts versus NPM
LIST OF GLOBALS
WW (JavaScript window - saves 1.5K as win...

ZIM 016

1. SHADERS

https://zimjs.com/016/shaders.html
ZIM now supports shaders converted to 2D canvas as a dynamic Bitmap (similar to video in ZIM).
This means that shaders can be layered into ZIM features the same as other DisplayObjects.

// makes a gradient changing across the width
// note the multiline back tick quote - that is just JavaScript 6
// but inside is GLSL and in particular OpenGL shader coding language
const fragment = `  
    void mainImage(out vec4 fragColor, in vec2 fragCoord) {
        fragColor = mix(vec4(1,1,0,1), vec4(0,1,1,1), fragCoord.x/iResolution.x);
    }
`; 
new Shader(W, H, fragment).center();

WHAT ARE SHADERS
Shaders have their own language GLSL to code the GPU (Graphical Processor Unit).
They are the basis of 3D and can also make very cool 2D effects!

The code is in two parts: Vertex Shaders and Fragment Shaders.
Vertex shaders control the points (vertices) of shapes (triangles).
Fragment Shaders control the color the pixels of the shapes.
We tend to use fragment shaders on the Canvas 2D.
The code is very low level and tricky so that it runs as fast as possible.

You will probably start by using existing code as there are lots of examples.
For instance - see ShaderToy:
https://www.shadertoy.com/

Also see the Docs for more information and examples:
https://zimjs.com/docs.html?item=Shaders

Note that the site banner is a shader that can be controlled with a little slider at right.
We control shaders from the outside with Uniforms (shader properties we can set)

2. EMITTER CONFIGURATOR

https://zimjs.com/016/emitter.html
On request, we have made an Emitter Configurator that uses sliders and checkboxes to set the many parameters,
visually see the results, and copy the resulting code.

Emitters can emit any DisplayObject as a particle
so not all configurations are shown here. Also the Shape option for the obj is not here.
See https://zimjs.com/docs.html?item=Emitter for more possibilities.

We are keeping ZIM a coding language rather than moving into an authoring environment like Flash.
Recall our discontinued (draft) visual editor https://zimjs.com/snips/
But perhaps we can make a few CONFIGURATORS over time - like for a Button next?
These we can list in the tools section - but will not call them raw tools like our set of tools so far:
Distill, Zapps, Wonder, AssetList and Doctor which are more HTML-based admin tools.
We have made a new line there for the Configurators.

3. NORMALIZE AND RATIO - IMPROVEMENT

https://zimjs.com/016/normalize.html
ZIM animate() with sequence animates each item in a container,
but this can be awkward when animating a tile for instance.
The sequence starts at to left and goes across the columns and down the rows.
Or a sequenceReverse will do the opposite.
But what about animating from the middle and out radially?
We noticed that GSAP was doing very cool effects from the center (or any sides) of containers.

Introducing the normalize() method and ratio property of a Container to solve this!
Normalize can take any property and assign a ratio for each child in a container
that is how close 1-0 that child is to the maximum property (among all the children).
Using a sequence time of 0 to animate each child individually
and setting the rate property relative to the ratio will have the same effect as the cool GSAP animations.

// animate based on how far from the center 
// "reg" will also automatically adjust the registration points to the start position 
const tile = new Tile(new Rectangle(10, 10, series(green,blue,yellow)), 20, 20, 5, 5)
	.normalize("reg", CENTER)
	.center()
	.noMouse()
	.animate({
		props:{scale:2},
		time:2,
		ease:"elasticOut",
		rate:target=>{return 1 + target.ratio*4},
		sequence:0 // turn on per item animation
	});

The ratio can also be used on its own without animate().
For instance, the scale of the child could be set to the ratio
depending on how close it is to the center of the container.

const tile = new Tile(new Rectangle(70,70,white,black).reg(CENTER), 9, 1, 20)
	.normalize("x", CENTER)
	.center();

// scale the items based on the distance from the center
// note, could set the strokeObj:{ignoreScale:true} param of Rectangle above too
tile.loop(item=>{
	zogy(decimals(item.ratio)); // 0, .3, .5, .8, 1, .8, .5, .3, 0
	item.sca(.5 + item.ratio*2);
});

// adjust the spacing by re-tiling the scaled items
const final = new Tile({
	obj:tile.items, 
	cols:tile.items.length,
	rows:1,
	spacingH:-10, // or make positive to avoid overlapping
	unique:true, // make sure we do not pick (ZIM VEE) from the array
	valign:CENTER
}).center()

tile.dispose();

final.sortBy("ratio"); // make more central objects come to front

4. SORTBY

https://zimjs.com/016/normalize.html
The Container now has a sortBy(prop, inverse) method to sort children levels based on a numeric property.
This uses the CreateJS sortChildren(sortFunction) but reduces thinking needed to construct the sortFunction.
However, if a more complex sort function is needed, then use sortChildren() - see CreateJS docs.
Also, see the last example up above where we sortBy("ratio")
Using sortBy("ratio", true); for inverse would make the middle objects behind the side objects.

5. RANGE - IMPROVEMENT

https://zimjs.com/016/range.html
ZIM Slider() now has a range parameter to set two buttons on the slider that give range values:

// SLIDER RANGE PARAMETERS
range - (default null) make the slider a range slider with two circle buttons
this will provide read and write rangeMin, rangeMax and rangeAve values instead of currentValue
also will provide a read only rangeAmount
rangeBar, rangeSliderA, rangeSliderB, rangeButtonA and rangeButtonB properties will be added
rangeColor - (default purple) set the color of the range bar
rangeWidth - (default 3 pixels wider than the barWidth on both sides) set the thickness of the range bar (not its lenght)
rangeMin - (default min) set the minimum value of the range
rangeMax - (default (max-min)/2) set the maximum value of the range
rangeAve - (default null) set the range average value - this may relocate rangeMin and rangeMax settings

SLIDER RANGE PROPERTIES
rangeBar - access to the ZIM Rectangle that makes the bar between the range buttons
rangeSliderA - access to the first slider made - which is the same as this (the Slider object)
rangeSliderB - access to the second slider made which is a ZIM Slider added to this slider with the bar, ticks, labels, accents removed
rangeButtonA - access to the first slider's button - so the same as button
rangeButtonB - access to the second slider's button - so the same as ranageSilderB.button
rangeMin - get or set the minimum value of the range
in some cases, it may be better to animate the rangeSliderA.currentValue and rangeSliderB.currentValue
rather than the rangeMin and rangeMax for instance when wiggling to avoid crossover issues
rangeMax - get or set the maximum value of the range
rangeAve - get or set the average value of the range
rangeAmount - read only get the range amount

6. WIGGLE DEFAULT BASEAMOUNT AND END ON START - IMPROVEMENT

https://zimjs.com/docs.html?item=wiggle
ZIM wiggle() now has a default baseAmount that matches the property's current value
amd now ends on its start position if totalTime is set. Thanks Ami Hanya for the prompting.
There is an endOnStart parameter added to the end that defaults to true - set to false to not force end on start.

// the baseAmount parameter is null which means it will wiggle about the target's current x in this case
// after 4 seconds the circle will end its wiggle at the start x (in the center)
new Circle().centerReg().wiggle("x", null, 10, 100, .5, 1, 4);

7. NEW FORUM - IMPROVEMENT

ZIM has a new Forum and we will phase out Slack over the next couple months.
We are keeping Discord. There are two main reasons for moving:
The forum content will show in Web searches

The messages will persist and not be removed after three months

Discourse has been used for many tech communities including three.js, Cloudflare, FreeCodeCamp, OpenAI, etc. We hope you like it!
We will refer to this as the ZIM Forum, not Discourse, as we are still keeping Discord - and it would just be too confusing.
We will post the URL to the forum once we get settled there a bit more.
We are looking into setting up an invite system as well.

8. LABELWORDS - IMPROVEMENT

https://zimjs.com/016/labelwords.html
ZIM LabelWords() splits text up into individual word labels.
LabelWords is similar to LabelLetters but extends a Wrapper so it has all the settings of a Wrapper.

new LabelWords({
	label:"Here is LabelWords that divides text into words for individual control!",
	color:white, 
	itemRegY:BOTTOM, 
	itemCache:true,
	backgroundColor:series(red,orange,pink,green,blue,purple),
	size:50,
	width:700,
	align:CENTER
}).center().animate({
	props:{scaleY:0},
	time:.5,
	rewind:true,
	loop:true,
	sequence:.1
});

9. OBJECTCONTROLS - IMPROVEMENT

https://zimjs.com/016/objectcontrols.html
ObjectControls were coded outside ZIM for three.js
We have added them automatically to the zim_three helper module.
They come fro...

ZIM 015

BUBBLING VIDEOS

https://www.youtube.com/watch?v=hy53jxlJ_nA - ZIM 015 - Animation Timeline Tool
https://www.youtube.com/watch?v=_oBfU92Q6fA - ZIM 015 - Emitter Warm
https://www.youtube.com/watch?v=fJMI_FJiQI4 - ZIM 015 - Continuous List and Carousel
https://www.youtube.com/watch?v=OQkIAYDz62Y - ZIM 015 - TextureActives 1 - with threejs
https://www.youtube.com/watch?v=us8TrX890rk - ZIM 015 - TextureActives 2 - with threejs
https://www.youtube.com/watch?v=G6uCnioPcRk - ZIM 015 - TextureActives 3 - the code

1. TEXTURE ACTIVES

ZIM IN THREEJS
ZIM can now be used inside three.js as an animated and interactive texture.
This is amazing as ZIM can now be used as interface in VR,
provide games and puzzles on any material on any mesh object
such as planes, boxes, cylinders, spheres, and models.
This includes everything in ZIM - components, emitter, dragging on paths, pen, etc.
Hopefully, this will introduce ZIM to the three.js community as well.

https://zimjs.com/015/textureactive.html - panel with various components
https://zimjs.com/015/textureactive_raw.html - same but without ZIM Three
https://zimjs.com/015/textureactive2.html - first person interactive cylinders
https://zimjs.com/015/textureactive3.html - model with scrambler
https://zimjs.com/015/textureactive4.html - HUD, Noise, Synth
https://zimjs.com/015/textureactive5.html - Physics
https://zimjs.com/015/textureactive_hud.html - HUD affecting three object
https://zimjs.com/015/textureactive_hud_raw.html - same but without ZIM Three

HOW IT WORKS
A TextureActive() class extends a ZIM Page() and prepares the needed settings.
A TextureActives() class (plural) manages these and matching three.js meshes
to capture x and y data on the mesh material with raycasting and pass the x and y to CreateJS.
CreateJS has been updated to 1.4.0 with a couple dozen new lines of code including
a createjs.remotePointers setting that turns off the regular DOM events and receives the three.js x and y.
The update() code in CreateJS has a single added conditional that tests for a createjs.remoteQueue array
and if so, updates the cache of any TextureActive objects and sets the required material update flag.

// TEXTUREACTIVE
// a TextureActive() is very much like a ZIM Page()
// it adds borderWidth, borderColor and corner
// also can specify animated and interactive - both default to true
const panel = new TextureActive({
    width:W,
    height:H,
    color:white.toAlpha(.8),
    corner:20
});
const circle = new Circle(100,red).center(panel).drag(); 

// from the ZIM Three helper module
const three = new Three({
    width:window.innerWidth, 
    height:window.innerHeight, 
    cameraPosition:new THREE.Vector3(0,0,500),
    textureActive:true
});
const renderer = three.renderer;
const scene = three.scene;
const camera = three.camera;

const controls = new OrbitControls(camera, three.canvas);

// TEXTUREACTIVES
// if more than one TextureActive object (likely) then pass in an array [panel, wall, arm, etc.]
const textureActives = new TextureActives(panel, THREE, three, renderer, scene, camera, controls);

const canvasWindow = three.makePanel(panel, textureActives);
scene.add(canvasWindow);

// there is now a three.js plane with a draggable circle on it 
// orbitControls will let you move the camera around and it still drags perfectly!

// the code above looks simple but it was quite complex to achieve working with three different systems
// and once we got it working we reduced dozens of lines to just a few - in the normal ZIM fashion!

THREEJS
Above, we have used a makePanel() method in ZIM Three, that simplifies the three.js side
when a three.js Plane is needed. This is quite common for 2D like interfaces, games, puzzles, etc.
But makePanel() is optional. Otherwise on the three.js side everything is pretty well the same:
use a THREE.CanvasMaterial(textureActive.canvas) which gets mapped to a material as usual
the material is then meshed with the geometry and the mesh added to a scene again as usual
and the mesh is also added to the TextureActives() object with the addMesh() method.

AUTOMATIC
The TextureActives object receives the TextureActive objects
and matches these automatically to the provided meshes - as their material and textures are known.
The TextureActives does the raycasting which is a way to find x and y positions on the material of the 3D object.
These are passed in to CreateJS and replace the traditional mouse coordinates
in the very basic down, move and up functions in CreateJS which automatically flow through to ZIM.
The TextureActive objects are cached but we have recorded them for update in the CreateJS update (used by stage.update())
and the updateCache() and a three.js needsUpdating flag are done automatically.
This means there is no extra code needed in ZIM and minimal code in three.js.

VIEWER
A TextureActive object is just a ZIM Page - which is just a ZIM Container with a backing rectangle.
It is being mapped onto a three.js object but the ZIM object is still there on the stage.

We normally hide the stage but we have made a toggle key (t) to hide the three.js and show the ZIM stage.
This can be used during development to see and test the ZIM directly
and it is live - so any changes on the ZIM stage affect the three.js and visa versa.
The TextureActive objects are tiled horizontally and a slider and swiping is available to scroll through.
The TextureActive logo uses the toggle() method of the TextureActives manager property to toggle between the canvases.
This is controlled but a ZIM TextureActiveManager object that is made automatically when the first TextureActives object is made
it is available as the manager property of the TextureActives object
and has a toggle(state) method, a toggled property and a toggleKey property

ZIM TextureActive for interfaces, games, puzzles interactive texture in three.js

EXCEPTIONS
The ZIM custom cursor system works directly with window pointer events
and would need to be converted to receive the information from CreateJS.
It is very complicated as createjs toggles between DOM cursors, pointers and now the remotePointers from three.js
so at the moment, custom cursors is not available in TextureActive.
There can also only be one physics TextureActive although this can appear on any number of three.js materials.

2. THREE HELPER MODULE

https://zimjs.com/docs.html?item=Three
The ZIM Three module has been updated to 2.3 to accomodate the TextureActive system (above)
Added ortho, textureActive, colorSpace (THREE.LinearSRGBColorSpace),
colorManagement (false), legacyLights (false) to the end of the Three() parameters
The ortho sets up an orthographic camera and scene good for flat HUD elements or pop-ups
The textureActive parameter needs to be set to true to handle scaling for TextureActives
See the three.js links for
https://threejs.org/docs/#manual/en/introduction/Color-management
https://discourse.threejs.org/t/updates-to-color-management-in-three-js-r152/50791
https://discourse.threejs.org/t/updates-to-lighting-in-three-js-r155/53733/23

THREEJS UPDATE
The version of three.js has been updated to R155
and the colorSpace has been adjusted in recent three.js to default to linear
which needs some minor adjustments otherwise colors will be washed out.
So we have set the default colorspace to THREE.LinearSRGBColorSpace which should make things easier
Basically, light intensity needs to be multiplied by Math.PI (and perhaps increased we have found)
Could not get the PointLight to work so used a DirectionalLight
Try setting colorManagement to true in Three() and see which you like better - will have to adjust intensity.
GLTF models were giving errors with colorManagement which is why the default is false for now.

3. NPM, GITHUB, TYPESCRIPT

Updated our NPM format so that import and require work the traditional way for developers.
This was a solid week of work under the leadership of Yoan Herrera who did a fantastic job.
We would definitely recommend contacting @yoan Herrera on our Slack for this type of work.
GitHub has been adjusted to show the system where we can now publish to NPM from VS Code.
The ZIM package on NPM now includes:

• dist/zim.js - module for web target (React, Angular, Vue, Svelte, etc.)
• dist/zim.cjs - module for node
• combined/zim.js - ES6 module like the ZIM CDN - optional

There were adjustments to the Typings primarily to remove the duplicate set of defines,
do a final export and export globals. This does mean that classes will need to be imported
to see type hints when not using the zim namespace - they work by default for using the namespace.

TEMPLATES
Templates were made for popular dev environtments. The specific links below all are set for TypeScript
See the main TEMPLATES link and scroll down for formats without TypeScript (except for Angular)
TEMPLATES: https://github.com/yoanhg421/zimjs-templates
REACT: https://github.com/yoanhg421/zimjs-templates/tree/master/templates/react-zim-ts
VUE: https://github.com/yoanhg421/zimjs-templates/tree/master/templates/vue-zim-ts
ANGULAR: https://github.com/yoanhg421/zimjs-templates/tree/master/templates/angular-zim-ts
SVELTE: target=_blank>https://github.com/yoanhg421/zimjs-templates/tree/master/templates/svelte-zim-ts

4. TIMELINE

https://zimjs.com/015/timeline.html
Added a ...

ZIM 014

ZIM 014 - https://zimjs.com

ZIM has now moved to a three number major release 014. Past versions are ZIM ONE, TWO, TRI, 4TH, VEE, SIX, HEP, OCT, NIO, TEN, CAT, NFT, ZIM and now we have ZIM 014. We will continue to 015, etc. ZIM version ZIM 00, 01, 02 was fun while but we have decided to leave that system. Here are the updates which can be seen formatted here:

https://zimjs.com/updates.html

A large part of this update was external to the actual ZIM code including a STORE, SITE REDESIGN and EDITOR updates.

STORE

https://zimjs.com/store
Added a new STORE page to ZIM along the top.
And moved NEWS into ABOUT under VERSIONS section.
The Zapp Store has sample mobile / desktop apps made with ZIM and the PWA tool.
ZAPPS:
Dazzle Finger - https://zimjs.com/finger - finger follows path to make magic
Odd Robots - https://zimjs.com/robots - find the good and bad robots
Plasma Points - https://zimjs.com/points - collect plasma points
Leader Board - https://zimjs.com/board - top scores from the zapps
The Plasma Points zapp has 100 points available
You can collect them on pages in the site, by accomplishing social tasks
and by making a zapp in the ZIM Editor.
We hope you enjoy the Zapps - but it is also a demonstration
of using ZIM for mobile apps and things like collectables, logins, etc.
The four zapps were made in less than a month
along with all the other updates to ZIM and the site.
Now, go get some high scores!

NEW SITE HEADER

Added a new interactive banner to the site
The banner lets you change the vapourwave landscape
You can double click the blob points to change to curves
and the landscape is saved across pages and time
which is easy to do with ZIM Blob and TransformManager.
Plasma Pods animate giving a preview of the new ZIM Store.
Discord and Slack have been moved to the top right
and makes way for TikTok and Dev in the Social Media links
Come follow us!

NEW SITE

Made the font bigger on the home page and did a little rearranging.
Added the new STORE and EDITOR to the top nav bar
Removed the HOME link on the bar for space - click the logo to go home.
With Editor moved up from the Gold Bars, there is room for a TOP
gold bar at the bottom right to take you to the top!
The top nav bar still secretly links to the bottom if pressed off a link.
Moved the following pages into new 014 template with header and footer
Home, About, Examples, Learn, Code, Docs, Updates
Frame, InteractiveAnimation, Make NFTs, Zapps PWA Tool, Mobile, ZIM Shim for Animate
CDN page, ES6 and Script pages, Tips, Dark Papers, Typescript, Hints, NPM, MVC, Library, Base
Intro, Tips, Map, Zap, Lab, Creative Coding, College, Explore, Five

EDITOR

Added individual INFO pages to the Editor that have a preview image, info, and links to
full screen, editor, code, origin, share and print.
The info pages can properly be share, will show up in search engines, etc.
Thanks Ami Hanya for the suggestion.
The print page has the image, info and QR codes to INFO, FULL, EDITOR and CODE.
Thanks Karel Rosseel for the suggestion.
Added reference field to file for reference links to codepen / youtube / etc.
This is a single link - if more links are desired then add them to the description
Made links in the description automatically become clickable.
Added Origin concept to Editor - if code is transfered with the little yellow arrow
then a "forked" checkmark shows at the top.
This also keeps track of the zapp that it was copied from for reference on the info page.
You can uncheck the Forked checkbox if desired to clear this connection.
There is no getting the connection back if saved - just remake the fork if desired.

MOBILE SYSTEM KEYBOARD STAGE SHIFT

https://zimjs.com/014/keyboard.html
We have added an optional keyboardShift parameter for TextInput and TextArea - thanks Ami Hanya for request
The default is false for now, so must be turned on
This will for mobile when the stystem keyboard is activated
Currently, the TextArea text shifts - we are trying to adjust it but it is complex.
BREAK - the ZIM TextArea() now has the placeholder parameter moved and a text parameter added
after width and height and before size like the TextInput

GLOBAL CUSTOM CURSORS

https://zimjs.com/014/cursors.html
Frame now has a cursors property to apply custom cursors beyond CSS cursors.
F.cursors = {
default:DisplayObject,
pointer:DisplayObject,
alert:DisplayObject
etc.
}
If the CSS cursor name is used these will override the CSS cursors with the custom cursors
Any name is fine for custom cursors - for example:
F.cursors = {yellow:new Circle(10,yellow)}
new Pic("earth.png").center().cur("yellow"); // will add a yellow circle for the pic's cursor
Setting F.cursors = null; will clear the custom cursors.
Any cursor type not assigned will use the regular CSS cursor for the type.

For reference, the CSS cursor names are as follows:
CSS2 - auto, crosshair, default, help, move, pointer, progress, text, wait, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize
CSS3 - none, context-menu, cell, vertical-text, alias, copy, no-drop, not-allowed, ew-resize, ns-resize, nesw-resize, nwse-resize, col-resize, row-resize, all-scroll, grab, grabbing, zoom-in, zoom-out
ZIM uses pointer for most rollover, press, drag, move scenarios and default when not interacting.
There are various resize cursors with Transform.

NOTE: please use the cur() to set any cursors and not the cursor property.
This will add an _cursor property to the object to help keep track of the custom cursor.
We have adjusted ZIM in about 100 places to all call cur() so the system can work.
No need to worry about cursors for drag(), transform(), Blob(), Squiggle(), tap(), etc.
These have all been adjusted to work automatically with F.cursors.

There is a F.cursorList property that is a ZIM Dictionary that keeps track of objects with cursors
When Frame cursors is on, any object with a cursor set that has a matching type will have its CSS cursor turned off
and the object's _cursor property is used to set the F.cursorObj.
If the Frame cursors are turned off, the cursorList is used to reset the CSS cursors on the objects.
Any DisplayObject used for a custom cursor should most-likely be center reg and sized or scaled properly - for instance:
F.cursors = {
default:new Pic("myFinger.png").reg(CENTER).siz(20),
pointer:new Rectangle(10,10,red).reg(CENTER).animate({props:{scale:2}, rewind:true, loop:true})
}
Note that we can animate custom cursors or use an Emitter, etc.
A set of retro cursors is available as F.makeCursors("retro", [optionalTypes]);
So use F.cursors = F.makeCursors("retro");
or F.cursors = {pointer:F.makeCursors("retro", "pointer")};

WARNING: If an object has its level set to the top of the stage in a timeout, interval, call, etc.
then also set the F.cursorObj.top() afterwards so the cursor remains on top.
This has been automatically handled in drag(), transform(), etc.

DRAG SLIDE FRICTION

https://zimjs.com/014/slide.html
BREAK / IMPROVEMENT - added an axis parameter as second parameter to drag() with values of ALL/BOTH or HORIZONTAL or VERTICAL
The boundary can still be set with a value of 0 for either width or height to drag vertically or horizontally with limits
BREAK - the localBounds parameter has been changed to localBoundary
BREAK / IMPROVEMENT - changed all slideDamp to slideFactor with a better sliding equation.
A damping equation was used (slideDamp) but the better equation is just a velocity that decreases by a factor
If the slideFactor is 1 then there is no decrease in velocity - the default is .9 and a value of .6 slows quite quickly.
The velocity is determined by the mouse/finger calculated by the time and distance between 50 milliseconds before release to release.
This change affects drag() with slide:true and also Window() and List().
Thanks Anton Kotenko for the request.
This leads to smoother scrolling lists like most mobile scrolling.

ZIM PHYSICS

https://zimjs.com/014/blobphysics.html
Updated to phsyics_2.2
ZIM Blob() can now recieve addPhysics() but it must be a convex Blob - so no angles less than 90 degrees
This is a limitation of Box2D and can be solved by joining shapes
Added makePoly() method used by addPhysics() for Blob - so there is no need to use makePoly directly.
Fixed drag() and noDrag() to not convert an array of ZIM objects passed in to an array of physics bodies
This is confusing from the outside if using that array for other things.

HIERARCHY - (AND LIST)

https://zimjs.com/014/hierarchy.html
Added new methods to edit the ZIM Hierarchy which can be used to remake associated List() objects
insertBefore(items, id, innerItems) - insert item or an array of items before an id with optional children
this will insert at the same level as the id - also see insertAfter()
can pass in an array for items such as ["TEST", "TEST2"]
can pass in a third parameter for children of a single item
The third parameter can also be an array but if there is a third parameter
and if the first parameter is a list then it only uses the first item in the list
as the parent for the third parameter.
insertAfter(items, id, innerItems) - insert item or an array of items after an id with optional children
this will insert at the same level as the id - also see insertBefore()
can pass in an array for items such as ["TEST", "TEST2"]
can pass in a third parameter for children of a single item
The third parameter can also be an array but if there is a third parameter
and if the first parameter is a list then it only uses the first item in the list
as the parent for the third parameter.
replaceItem(item, id) - replace the current item at the id with the provided item
removeItem(id)...

ZIM 02

NOTE: ZIM has gone through major versions ONE, TWO, TRI, 4TH, VEE, SIX, HEP, OCT, NIO, TEN, CAT, NFT.

We are now on major version ZIM and started with ZIM version ZIM 00.
This is ZIM version ZIM 02. Going forward we will be ZIM 03, ZIM 04, etc.
We can now just start calling the releases ZIM 01, ZIM 02, ZIM 03, etc.
But please note that historically, we have gone through many major releases
with over 8,000 updates and approximately 80,000 lines of code.

ZIM 02

Along with this code release there is also a new ZIM EDITOR at https://zimjs.com/editor

Please see https://zimjs.com/updates.html - rather than repeat updates in two places.

ZIM 01

NOTE: ZIM has gone through major versions ONE, TWO, TRI, 4TH, VEE, SIX, HEP, OCT, NIO, TEN, CAT, NFT.

We are now on major version ZIM and started with ZIM version ZIM 00.
This is ZIM version ZIM 01. Going forward we will be ZIM 02, ZIM 03, etc.
We can now just start calling the releases ZIM 01, ZIM 02, ZIM 03, etc.
But please note that historically, we have gone through many major releases
with over 8,000 updates and approximately 80,000 lines of code.

ZIM 01

Please see https://zimjs.com/updates.html - rather than repeat updates in two places.

ZIM 00

NOTE: ZIM has gone through major versions ONE, TWO, TRI, 4TH, VEE, SIX, HEP, OCT, NIO, TEN, CAT, NFT.

This major release is version ZIM. So we are on ZIM version ZIM 00 - but we are fine calling it ZIM version 00.
Future releases will be ZIM 01, ZIM 02, etc.
As a framework gets more complete, updates and versions slow down - and ZIM is nearing completion.
So it is somewhat ironic referring to ZIM as 00 after nearly 8000 updates on 77,000 lines of code.

ZIM ZIM 00

PIC, VID, AUD, SVG CLASSES

https://zimjs.com/zim/assets.html
The asset process is now wrapped with Pic(), Vid(), Aud() and SVG() classes.
It is still recommended to preload assets in the Frame() or in loadAssets().
asset() will work as always but now there are additional ways to access asset().
The asset system was somewhat inherited from CreateJS to simplify their PreloadJS manifest structure.
In ZIM CAT 00, we introduced auto-loading (lazy-loading) of images and then in ZIM CAT 04 of sounds.
In ZIM ZIM 00, we provide wrappers for these and new video and SVG wrappers too!

HOW IT WORKS
Pic(), Vid(), Aud() and SVG() are ZIM Container objects (except Aud) with types of "Pic", "Vid", "Aud" and "SVG".
** Their parameters use ZIM DUO and ZIM OCT style - the file parameters accept ZIM VEE.
The classes are used as follows:

new Pic(file).center();
new Vid(file).center().play(); // must interact with app first
new Aud(file).play(); // must interact with app first
new SVG(file).center();

Pic() will call asset() and if the asset was preloaded will add the resulting Bitmap to its container.
If the asset was not preloaded, Pic() will lazy-load and transfer the resulting Bitmap to its container.
In both cases, the bitmap (if needed) is available as its bitmap property.
new Pic() will always clone the original asset this will be easier to remember and more intuitive.
Cloning lazy-loaded Pic objects now works without needing to wait for a complete event.
Also, Pic() will provide a "ready" and "complete" event when loaded.
Lazy-loading works with many methods such as center(), centerReg(), scaleTo() and pos()

There are certain things such as Tile() and Scroller() that will warn they need dimensions to be set
Dimesions will be available when preloading using the Frame assets parameter or loadAssets()
or if a width and height is provided to the Pic() parameters
or after the object's "ready" or "complete" event is dispatched.

PATH = "assets/";

new Pic("examples.jpg") // lazy-load the picture from assets/ folder
    .scaleTo() // Fill the stage with the picture (more options too)
    .center();

Vid() is new and will automatically create and HTML video tag and a source tag (display:none)
and then handle the HTML events and dispatch a "ready" event.
Vid() also wraps the play() and pause() methods and provides duration, currentTime and volume properties
ZIM has also added a keyOut(color, tolerance) - see the CHROMA KEY section.
Note: the app must be interacted with before the video can be played (same as sound).
Vid() has a source property to the HTML video tag and a bitmap property to the ZIM Bitmap.

const video = new Vid("video.mp4")        
    .cur()
    .center();
    
// init gets called when pane is closed
const pane = new Pane(600,200,"VIDEO ON CANVAS!").show(init); 

function init() {
    video
        .keyOut("#01b03f", .2) // key out the green            
        .play();
    
    video.on("mousedown", () => { 
        // note videoPaused property
        // not paused (which is for animation)
        video.pause(!video.videoPaused);        
    });
}

Aud() is similar to Pic where it calls asset() which loads from preloaded or lazy-loaded sounds
but default play() parameters have been made available on the main class.
These include file, volume, loop, loopCount, pan, offset, interrupt, maxNum.
Setting a volume of .5 will affect audSound.play() unless a volume is provide in play().
maxNum has been made easier to deal with - it now is a parameter on the Frame(), loadAssets() and asset()
and we provide a parameter right on each Aud() object.
maxNum specifies how many copies of a sound can play at the same time.
interrupt specifies primarily whether to let the first sound play or start it over again.
Sound can only be played after the user interacts with the app.
The result of the play() method works like before to pause the sound, dynamically adjust volume, etc.
and to capture events like complete and loop.

STYLE = {
    maxNum:1,
    interrupt:"any"
}
const press = new Aud("press.mp3");    
circle.on("mousedown", () => {
    press.play(); 
}); 

SVG() wraps either the existing svgToBitmap() or the SVGContainer() depending on parameters.
An SVG file or a tag can be passed in and will be available as the svg property.
The default svgToBitmap works flawlessly as far as we know but results in a Bitmap.
Basic SVG should work for an SVGContainer, but CSS styles will not (let us know if things are missing).
The advantage of an SVGContainer is that the parts can be transformed or controlled with Beziers.

Note: alternatively, an SVG path can be passed directly to a Blob or Squiggle to:

• turn the paths editable
• animate objects on the path
• add Beads to the path
• animate the path
• shape animate the path to another path
• do hitTestPath on the path

Note: SVG can now be lazy-loaded into asset() without preloading - it will become a container with a bitmap inside.
this was added to allow SVG() to work.

const tile = new Tile(new SVG("forest.svg", 130, 100), 2, 1)    
    .center();

ALERT
It is still optimal to preload in Frame() or loadAssets() first and then use Pic() and Aud().
In doing so, the loading is batched and all dimensions are known before usage.
This avoids double calls to scaling and positioning.

1. ES6 MODULES

https://zimjs.com/es6.html#MODULES
https://zimjs.com/es6/zim_module.html
ZIM has now moved to ES6 Modules as the default way to load ZIM.
The ZIM Crystal scripts have been replaced with modules.
The scripts can still be loaded with conventional script tags:
https://zimjs.com/script.html
The Code page shows modules to start but has a link to toggle to scripts.

The CDN lists ZIM under cdn/00/ - these will increase to cdn/01/, etc.
The module scripts are as follows:

• https://zimjs.org/cdn/00/zim.js
• https://zimjs.org/cdn/00/zim_game.js
• https://zimjs.org/cdn/00/zim_physics.js
• https://zimjs.org/cdn/00/zim_socket.js (must import socket.io in script tag)
• https://zimjs.org/cdn/00/zim_three.js
• https://zimjs.org/cdn/00/zim_cam.js
• https://zimjs.org/cdn/00/zim_pizzazz.js
• https://zimjs.org/cdn/00/zim_test.js (calls docs for readable errors)

These all call ZIM and the latest CreateJS.
There are also the following independent modules:

• https://zimjs.org/cdn/1.3.4/createjs_module.js
• https://zimjs.org/cdn/1.3.4/createjs_doc_module.js
• https://zimjs.org/cdn/00/zim_module.js (CreateJS independent)

Use zns=true in an earlier script tag to force the ZIM namespace

// to use an ES6 module the module file must be on a server
// use a script tag with type=module 
// and import the desired module
// Note: this is the only script tag needed
<script type=module>

import zim from "https://zimjs.org/cdn/00/zim"; 

const frame = new Frame(FIT, 1024, 768, light, dark);
frame.on("ready", ()=>{
    const stage = frame.stage;
    const stageW = frame.stageW;
    const stageH = frame.stageH;
    
    new Circle(100, red).center().drag();
    
    stage.update();
});

</script>

Renamed the Socket file to socket.js (was zimsocket.js)
Made a code page for modules at https://zimjs.com/es6.html
Made a mini-site for modules at https://zimjs.com/es6/zim_module.html

2. PIXEL

https://zimjs.com/zim/pixel.html
https://zimjs.com/zim/pixel2.html
Uses raw canvas processing to pixilate a Display Object.
This is not a pixel by pixel process like the ZIM Effects (BlurEffect, GlowEffect, etc.)
So the speed is very fast.
The Display Object is cached, scaled down and scaled back up with image smoothing disabled.
The scaling procedure is actually faster than scaling with image smoothing turned on.
This effect has been available on the canvas all along, ZIM Pixel makes it easier to use.

// pixelate a Circle
var circle = new Pixel(new Circle(200,red)).center().drag();

// emit pixels
frame.color = darker;
function makePixel() {
	return new Pixel(new Circle(40,[pink,blue,purple]),.3)
		.alp(.5)
		.reg(CENTER);
}
new Emitter({
	obj:makePixel,
	force:{min:.5, max:2},
	gravity:0,
	life:3,
	shrink:false,
	layers:BOTTOM,
	animation:{
		props:{rotation:[-360, 360]}, 
		time:{min:1,max:10}, 
		ease:"linear", 
		loop:true
	}
}).center();

3. SITE

The ZIM Site has an updated header and footer on all pages.
This header features generative art banner made with ZIM
There is a Dr Abstract signature at the right which links through to a synops.
The synops is a synopsis of Dr Abstract's career of creations
We hope that you enjoy the video - you are welocome to give it a thumbs up on YouTube!
Beneath the banner is a main link bar that is now present on all pages.
This includes the ZIM Docs and Updates pages.
A couple exceptions, ZIM Skool, ZIM Ten, ZIM Cat pages retain the ZIM TEN look.
The Map page has been updated with recent updates.
The Code Page has been updated to the new template with modules.
A toggle link has been added to the template to go to the scripts version.

4. COLOR PICKER SPECTRUM

https://zimjs.com/zim/chromakey.html
The ColorPicker has been redesigned to default to a colors value of "spectrum".
Setting thi...

ZIM NFT 01

A major sub release to ZIM NFT
See examples at https://zimjs.com/nft/bubbling

We have released 12 major versions: ONE, TWO, TRI, 4TH, VEE, SIX, HEP, OCT, NIO, TEN, CAT and NFT.
This is a lot of progress over 7 years. ZIM is one of the largest Canvas frameworks, indeed of any code frameworks.

The goal of our NFT release is to bring more artists on board.
ZIM has a good e-learning and kids app following but it is also built for artists.
We have been making interactive NFTs with ZIM and are seeing more artists in the forums.
Many artists use Processing or P5js and we have extended an invitation to these artists to consider ZIM:
https://medium.com/javascript-in-plain-english/an-invite-for-generative-art-makers-and-interactive-artists-106f3ed186ab

As a framework becomes more stable, major releases slow down.
We have turned to a single digit sub release and slower release cycle.
Generally, we can manage with patches between releases.

This release, the second of the ZIM NFT has two main updates the cam helper module and the Dialog class in the game module.
There are also a number of exciting important additions to the main zim file as shown below.
About half of these come from requests in the forums so many thanks for the suggestions.

It is nice to see these changes in our https://zimjs.com/updates.html page
where we format them and add code examples.

Please join us at https://zimjs.com/slack and https://zimjs.com/discord
where we have community and support.

Here are the new features in ZIM NFT 01

DIALOG

https://zimjs.com/nft/bubbling/dialog.html
Added a Dialog() class to ZIM Game helper library.
This makes speech bubbles or boxes with text and arrows.
Updated GAME MODULE to game_2.6.js

ZIM CAM

https://zimjs.com/cam
Added a cam.js helper module (like socket, game, physics, three, pizzazz, etc.)
This has Cam, CamMotion, CamCursor, CamAlpha and CamControls classes
to capture cam screenshots, add effects or a cursor at cam motion.
This is a recreation of the Ostrich Library made in Flash in 2009 by Dr Abstract (Dan Zen).
It has been planned to bring into ZIM since ZIM ONE! Yay, it is here and works well.

EMOJI

https://zimjs.com/nft/bubbling/emoji.html
https://zimjs.com/emoji
Added a ZIM Emoji class that extends a Label to show an emoji.
This could be done with a plain Label but the Emoji class makes it more apparent.
Also added a ZIM EmojiPicker to allow users to pick an emoji and make an Emoji object.
For coding, the ZIM Emoji tool is provided to get UTF strings for emojis to add to code.
Added a unicodeToUTF() function under the CODE Module to support conversions for Emoji and EmojiPicker
Thanks Karel Rosseel and Chris Spolton for the guidance.

ZIM CRYSTAL UPDATES

https://zimjs.com/crystal.html
Added crystals for ZIM NFT 01
and new crystal formats: zim_cam.js to add the new cam.js library
and zim_pizzazz.js - this adds pizzazz_01, 02 and 03 for backings, icons and patterns

BLENDMODES

https://zimjs.com/nft/bubbling/variety.html
Added a helper method called blendmodes() that cycles through the blendmodes - ble() - on an object
Click the object to toggle the cycling

ODDS

https://zimjs.com/nft/bubbling/variety.html
Added an odds(percent) function to the Code section.
This is the same as rand() < percent/100 but a little easier to understand
if (odds(20)) new Emitter().center(); // add an emitter 20% of the time

SEEDRANDOM

https://zimjs.com/nft/bubbling/variety.html
Seed the Math.random() and therefore ZIM rand() and ZIM VEE values using rand()
This allows you to repeat the random numbers for the same seed.
Handy for making specific random art, or game levels, etc.
This is the main feature of FXHash where you can find captured generative art and scenes:
Here is a Dr Abstract collectible example https://www.fxhash.xyz/generative/5810

QR

https://zimjs.com/nft/bubbling/variety.html
Added a QR Code helper - must import https://zimjs.org/cdn/qrcode.js
This is a library by David Shim at https://github.com/davidshimjs/qrcodejs
The ZIM Class makes a ZIM Bitmap of the QR Code - thanks Bart Libert for the suggestion

DIR

https://zimjs.com/nft/bubbling/variety.html
Set a global DIR constant to either "ltr" or "rtl"
Use along with START and END constants
for pos(), reg(), Label(), LabelLetters(), and List()
START for horizontal position or align will be "left" if DIR is "ltr" and "right" if DIR is "rtl"
END for horizontal position or align will be "right" if DIR is "ltr" and "left" if DIR is "rtl"
Thanks Marva for the idea and Xuntar for the confirm.

REG

https://zimjs.com/nft/bubbling/variety.html
Added LEFT, RIGHT, CENTER, TOP, CENTER, BOTTOM and START, END to reg()
Thanks Karel Rosseel for the request!

STYLE ONCE

https://zimjs.com/nft/bubbling/variety.html
Added a once property to STYLE
Set this to true to run the STYLE setting only once.
Once will delete the STYLE after the next object is made
regardless of the whether the style is applied.
STYLE = {color:red, once:true}
new Circle().center(); // this will be red
new Circle().center().mov(20); // this will be black
Set a once property to a type such as "Label" and the STYLE will be cleared after a label has been made
Note: some objects like an Arrow is made from a Button which has a Label so this sometimes can be tricky.
If it does not work, just turn the STYLE = {} or Style.clear() manually.

CONVERTCOLOR UPDATES

Adjusted the convertColor to handle 8 (and 4) character hex numbers - thanks Ami Hanja for the suggestion
where the alpha is on the right side.
Passing in an alpha parameter (or RGBA as color) and HEX as output will add alpha on the end of the hex

TILT

Added device motion and orientation docs entry to the Frame module (thanks Karel Rosseel)
This is similar to adding Image, Sound and Font to the Frame module
It just helps the topic be found in the docs - even though it is already described in Frame

FRAME TAB FOCUS/BLUR

Frame now has "tabfocus" and "tabblur" events for when tab is hidden
This is not focus on the page but rather the tab.

INDICATOR UPDATES

https://zimjs.com/nft/bubbling/indicator.html
Added Emoji support to Indicator indicatorType - add an Emoji and it will show them
also added backgroundAlpha as parameter for setting unselected Emoji alpha.
Added heart and star to the indicatorType of a ZIM Indicator() - thanks Karel Rosseel for suggestion
Combine these with interactive:true parameter to get an easy rating scale
Adjusted Indicator to toggle off and on last light so can set to zero lights

COLLAPSE

https://zimjs.com/nft/bubbling/collapse.html
Window, List and Panel now have collapse, collapseColor and collapsed parameters - thanks Karel Rosseel for the request
Also collapseIcon and collapsed properties as well as a collapse(state) method.
BREAK - changed the name of the close icon and fullScreen icon to closeIcon and fullScreenIcon for Window
and added a fullScreen(state) method to Window

PANEL UPDATES

With the addition of the collapse button the Panel parameters have been rearranged to:
corner, close, closeColor, next, nextColor, extraButton, collapse, collapseColor, collapsed, align
and the arrow parameter has been called next and a nextColor added.
Added a content container and add(object, center, replace) method to Panel to help collapsed content be hidden
So this is like Window() where content can be added with add() method - and removed with removeFrom()

WINDOW UPDATES

In addition to the collapse functionality,
also added adjusted add(object, center, replace) to Window BREAK
Added the following events to Window
dispatches a "resize" event if resizing
dispatches a "collapse" event if collapsing
dispatches a "expand" event if expanding after being collapsed
dispatches a "fullsize" event if made fullscreen
dispatches a "originalsize" event if reduced from fullscreen

GENERAL

Fixed Emitter on text - was flashing due to placement of alpha IMPROVEMENT
Adjusted ZIM Label in labelWidth + labelHeight mode so shiftHorizontal and shiftVertical happens once
Fixed when toggling a button the text color is now returning to rollColor
Made scramble() method return the scrambler object so we can chain it.
Cloning DisplayObjects were set with the following for cloning bounds:
if ((!this.type || this.type=="Shape" || this.type=="Blob" || this.type=="Squiggle") && this._bounds) // clone the bounds
We are not sure why this limitation - there was probably a reason... but we now think all DisplayObjects should have bounds cloned
So are adjust this accordingly.
Added stickThickness parameter to Blob and Squiggle.
Added the borderWidth to titleBar of Window - seemed to be off otherwise.
Fixed lineOrientation glitch in ZIM Connectors - thanks @chu4ng on GitHub issue.
Added an AVE constant to represent average - and has a value of "ave" (not "average")
Made a lazy loading asset be queueOnly loading so it does not trigger the Frame complete event
as they each have their own complete event.

PATCHES

There were 90 lines of patches for ZIM NFT 00 - these of course are all in ZIM NFT 01.

ZIM SHIM

Reorganized ZIM SHIM folder to have just the basic example (zim) in the main folder
and four other examples in folders: (thanks Paul Ruda for the inspiration)
data - an example of loading comma delimited file into Animate with ZIM
full - like the basic example but with full screen with scaling
physics - a physics example
local - a version with CreateJS and ZIM files locally in the directory

DOCS

Added individual doc pages for each entry - thanks ZIMsters for the suggestion

ZIM NFT

ZIM NFT (the next major version after ZIM CAT and ZIM TEN) features:

instructions to make Interactive NFTs with ZIM. See https://zimjs.com/nft

a new Crystal system has been created where one script call calls multiple library scripts

a TextInput() for editable text right on the Canvas

for these and other features please see formatted UPDATES at https://zimjs.com/updates.html

1. INTERACTIVE NFTS
https://zimjs.com/nft 
NFTs (Non-Fungible Tokens) are a lastest craze for Artists and Collectors
with some like Beeple and CryptoPunks selling for millions!
ZIM NFT is actually an NFT that you can collect if you are quick enough. 
At the bottom of the page linked above we tell you how to collect the ZIM NFT.
ZIM can be used to make interactive NFTs 
to sell as art on Web apps such as hic et nunc https://hicetnunc.xyz 
Please see the NFT page for more! https://zimjs.com/nft
Incuding a guide to making NFTs, setting up a Wallet
and COLLECTING the ZIM NFT!
https://www.youtube.com/watch?v=brIWbJ8QYO8
https://www.youtube.com/watch?v=gwMdtCT3Kbo

2. ZIM CRYSTAL - IMPROVEMENT
https://zimjs.com/crystal
We now present seven single files that can be used to load ZIM Crystals.
zim.js          // a crystal of createjs.js, zim_min.js 
zim_game.js     // a crystal of createjs.js, zim_min.js, game.js  
zim_physics.js  // a crystal of createjs.js, zim_min.js, box2d.js, physics.js, game.js
zim_three.js    // a crystal of createjs.js, zim_min.js, three.min.js, orbitControls.js, three.js
zim_socket.js   // a crystal of createjs.js, zim_min.js, socketio.js, socket.js, zimserver_urls.js
zim_distill.js  // a crystal of createjs.js, a distilled.js placeholder URL
zim_test.js     // a crystal of createjs.js, zim_doc.js
<script src=https://zimjs.com/cdn/nft/00/zim.js></script> 
<!-- will load ZIM and CreateJS -->
The crystals are all available at the top of the CDN
All the traditional files are still available in the CDN 
and can be brought in as separate script calls instead of using crystals. 
ZIM Crystal just calls sets of the individual files from a single script.
The crystal scripts are made automatically and stored in each MAIN version folder 
They will use the current scripts at the time the main version folder is created.
If a script within the crystal changes versions the crystal script will NOT be updated 
but rather an subdirectory will be made for the new Crystal

3. TEXTINPUT - IMPROVEMENT
https://zimjs.com/explore/textinput.html 
The ZIM TextInput() class provides editable text on the Canvas.
Three cheers for Cajoek who created a LabelInput that mirrors an HTML input field.
We then wrapped this in a Window to provide a scrollable TextInput box.
Now input text is a proper part of the canvas - as opposed to an overlay like ZIM TextArea.
It is a proper DisplayObject that extends from a ZIM Window and has a ZIM Label. 
There is a blinker which is a ZIM Rectangle and all this can be rotated, layered, etc.
For this release, the TextInput is one line and behaves very much like an HTML input of type text.
See the docs for more features https://zimjs.com/docs.html?item=TextInput

4. NEW SQUIGGLE AND BLOB EDITS - IMPROVEMENT
https://zimjs.com/explore/pathediting.html
Added the following functions to the code module to help cut up, join, reverse and trim paths.  
These are also available as methods on the Squiggle and Blob (availability depends on relevance).
reversePoints(points)
    Reverses Squiggle formatted points
appendPoints(original, points, controlType)
    Adds a set of Squiggle points to after an original set of Squiggle points
    The joining point is merged with the provided optional controlType
    ** appendPoints() expects the first point on points (the second parameter)
    to be at the last point of the original (the first parameter)
prependPoints(original, points, controlType)    
    Adds a set of Squiggle points to before an original set of Squiggle points
    The joining point is merged with the provided optional controlType
    ** prependPoints() expects the last point on points (the second parameter)
    to be at the first point of the original (the first parameter)
splitPoints(points, index, trimEnds)
    Splits Squiggle points into two sets of Squiggle points
    Also used by Squiggle splitPoints() and Blob makeSquiggle()
trimEndPoints(points)
    Take outside Bezier rectangles off end points of Squiggle
    Modifies the points but then will have to make Squiggle from modified points
    Used internally, but might want to create a Squiggle from half the points or every other point
    this function would make sure ends are clean.
SQUIGGLE: gets reversePoints(), appendPoints(), prependPoints(), splitPoints(), and
    makeBlob(controlType, mergeDist) - makes a new Blob from the Squiggle 
    	returns the new Blob - the Squiggle remains unchanged so may need to remove it
    	controlType (default "free" if not merged and "mirror" if merged) 
    		controlType for the joined end points - also see mergeDist below
    		this will not change the control sticks until their handles are dragged
    	mergeDist (default 5) merges overlapping end points (within this pixel distance) 
BLOB: gets eversePoints() and 
    makeSquiggle(index) - create a new Squiggle by cutting Blob at index (default 0)
    	returns the new Squiggle - the Blob remains unchanged - so may need to remove it

5. SCALETO - BREAK
ZIM scaleTo() now defaults to FILL if no percentages are provided.
This is so we can easily set backgrounds that fill the stage:
backing.scaleTo().center(); // will now FILL the stage 
// we no longer have to use backing.scaleTo({type:FILL}).center();
// to FIT 100% to the stage use:
obj.scaleTo({type:FIT}).center();
// note that the default if a percentage is applied is FIT
obj.scaleTo(stage,80,80).center();
// so this would also FIT to the stage 100%
obj.scaleTo(stage,100,100).center();

6. GENERAL
Added countDecimals(num) to Code module - to count decimals in number.
Added backgroundColor property to Window 
Changed Circle percent property (not parameter) to percentage BREAK
to not conflict with animate() percent
Added blendMode:"difference", etc. to STYLE as part of the transformations
Added a "closing" event to Pane that triggers before the stage update of the closed Pane 
this provides for reloading the page without closing the pane which might cause a flash
The pane now closes and dispatches the "close" event 10ms after being pressed.
Adjusted Frame to wait for its width and height to be >= 1 before triggering a ready event 
This came up on hic et nunc which shows NFTs in a React component IMPROVEMENT
it seemed to start with a width and height of 0 when loading from cache.

7. PATCHES
Note that there were 77 patches to ZIM Cat 04 - all of which have improved ZIM NFT.

8. ZIM HELPER MODULES
ZIM game module has been updated to 2.5
the registration point on the Scorer and Timer for isometric RIGHT has been set to the center (thanks Karel Rosseel)
Patched ZIM physics_2.2.js to make gravity a get/set property - was just a get property. 

9. ZIM DOCS - IMPROVEMENT
Added link to EXPAND button so specific docs link can be copied with right click or long click on mobile (thanks Karel Rosseel)
Updated dozens of docs examples to latest ZIM practice 
Thanks Karel Rosseel for close to 50 refinements -if anyone else sees things, please report.
Added examples and descriptions for Pizzazz 4 - paths 
Added search proxies - so searching visible will find vis, etc. 
{
    visible:"vis", 
    blendmode:"ble", 
    registration:"reg", 
    registrationPoint:"reg", 
    shadow:"sha", 
    name:"nam", 
    alpha:"alp", 
    rotation:"rot", 
    scale:"sca", 
    scaleX:"sca", 
    scaleY:"sca", 
    x:"loc", 
    y:"loc", 
    skew:"ske", 
    skewX:"ske", 
    skewY:"ske", 
    width:"siz", 
    height:"siz", 
    cursor:"cur", 
    asset:"images", 
    picture:"images", 
    assets:"images", 
    pictures:"images"
};
Added base methods to ZIM Docs - these are mostly CreateJS DisplayObject methods

cache(), updateCache(), uncache(), on(), off(), removeAllEventListeners(), getBounds(), setBounds(), clone(), dispose()

Added filter for Docs search to ignore text inside wrong answers when they come first

for instance, searching for ble for blendMode would find Scrambler first - now it does not

If YOU find a wrong answer like this, please let us know and we can add it to the filter

Make sure you are at the TOP when you do your search.  Cheers.

Added videos links for:

CAT: "Book", "effect", "updateEffects", "noEffect", "BlurEffect", "GlowEffect", "ShadowEffect",

"ColorEffect", "MultiEffect", "AlphaEffect", "zimEase", "zimEase"

HELPER: "PIZZAZZ 4 makePath"

10. ZIM SITE - IMPROVEMENT
Added 40 examples to Examples including Feature, NFTS (new!), Collection, CodePen and Magical.
Updated the NEWS and ABOUT to ZIM NFT
Added NFT and Crystal pages and links on the CODE page.
Added TIPS to top of Bits View Code pages - and changed copyright to ZIM (left 2016 as that is when they were made)
Changed the faveicon to latest ZIM icon stem. 

11. ZIM KIDS  - IMPROVEMENT
Made major updates to ZIM Kids Slate editor.  Thanks Karel Rosseel for the prompting.
Added over 600 Backing, Nature, People and Things images and Sounds
These can be checkmarked and then automatically used in slate as asset("name") 
Included a six level expandable help section to describe how to use assets. 
Added STORE functionality to store code while trying other code then retreive the code. 
Organized and provide DEMO code for Slate.
Added Physics option to SLATE and sounds to the as...

ZIM Cat

ZIM Cat takes care of anything left that still bothered the team - here are a few examples:

• A major change is that time is now in Seconds not Milliseconds. ZIM is for the people and people in general do not want to think in Milliseconds. We provide a TIME = "ms"; constant that can be set to change back to Milliseconds.
• ZIM Cat introduces "lazy loading" so images and sound can be loaded with just asset() and not passed into asset parameters of Frame or loadAssest(). It is still recommended that the assets parameter be used as the lazy loading just calls loadAssets for each asset loaded. So it is slightly more efficient using an array in the parameters. We also worked out several ways to defeat CORS errors - but these should be used sparingly. Image, sound and font loading have been added as categories in the Docs under the Frame module.
Docs and Updates now have dark and light mode and feature code syntax coloring.
• Versioning was moved to a single numeric version of Cat as ZIM has become more stable and requires less sub version updates.
• Many new features have been added - please see formatted UPDATES at https://zimjs.com/updates.html

ZIM Cat 04 (Diamond) - added 10K - April 7, 2021
1. ZIM EASE - IMPROVEMENT
https://zimjs.com/ease 
https://zimjs.com/cat/easeexamples.html
Customize the easing equation with sliders 
and pass results into ZIM animate() 
Looks like this:    
// inside a ZIM animate() - made with graph from link above

ease:zimEase([1.746,0.4,-0.91,0.8])

// also added "snap", "ballistic" and "slowmo" eases 
// with In, Out and InOut settings - see examples link

ease:"snapOut"
    
2. ZAPPS TOOL

https://zimjs.com/zapps.html 
Made a tool to create and zip the files for a PWA (Progressive Web App)
This looks like Distill, Wonder and AssetTool (which have been slightly modernized).
This was quite a large undertaking and we hope it turned out well.
The system takes the place of 70 steps to make mobile apps using GitHub, PhoneGapBuild, signing keys, etc.

Added a PWA() class in ZIM that the tool will insert (or can be done manually) 
This is used to make a custom message when on mobile browser to add to mobile home screen (A2HS)
This code will be inserted into zapps.html by the tool:
frame.on("ready", function() {
    
    new PWA(runZapp);
	function runZapp() {
        
		// normal template...
		var stage = frame.stage;
		var stageW = frame.width;
		var stageH = frame.height;
        // your code
        
    } // end runZapp
    
}); // end of ready

The system creates the following files:
    manifest.json
    serviceworker.js 
    libraries/ directory with local zim and createjs files
    icons/ directory with icons
    zapp.html with file calls and meta tags (and PWA call)
    readme.txt - with instructions to replace index with zapp.html code
The code page has been updated to feature the tool (see Code Page updates)

3. ZAPPS vs ZAP
We know that we already have a ZIM Zap tool down in the gold bars 
this is for sharing files and will remain as is. 
We will refer to the new Zapps tool in the plural. 
Zapps is what we would like to call projects made with ZIM 
You are welcome to call your projects Zapps too - or a Zapp (singular)
It is Z for ZIM and apps for apps - but Zapps also sound really fast!
And that is a great thing about ZIM - we can make apps fast!  Zapps!

4. SVG ASSETS
https://zimjs.com/cat/svg.html
SVG is now automatically converted to a Bitmap
when passed into the Frame assets parameter 
or frame.loadAssets() assets parameter.
const frame = new Frame({assets:"pic.svg"});
frame.on("ready", ()=>{
    
    asset("pic.svg").center(); // etc.
    
    // the actual SVG is stored in the svg property
    zog(asset("pic.svg").svg);
    
    // the SVGContainer has been adjusted to parse this properly
    new SVGContainer(asset("pic.svg")).center(); // will still work    
    
    frame.stage.update();        
});
        
Thanks carddealer for the prompting
The SVGContainer is still considered experimental and may not accept all SVG 
But a while back, it was improved to handle arcs properly.
Added width and height parameters to svgToBitmap()
Added params parameter to svgToBitmap to pass object through to callback after bitmap param
used internally by Frame to handle SVG images

5. TIMECHECK
 TIMECHECK now defaults to false.  
Set it to true if converting older code - to make sure that your times are good.

6. MOBILE FPS
 Default FPS for mobile has been changed to 60fps from 30fps now that most devices are more powerful 
this can be set back with Ticker.setFPS(30,60); for 30 on mobile and 60 on desktop.

7. KIDS
 https://zimjs.com/slate
Added Phone and Portrait CheckBoxes to ZIM Kids - thanks Karel Rosseel for the idea

8. KEYBOARD LAYOUTS - IMPROVEMENT
https://zimjs.com/cat/keyboard.html
Added layout parameter (at end) with "arabic", "hebrew", "turkish" and "azerty" settings (or "querty" default).
These change the data to show different keyboards. 
new Keyboard({label:label, layout:"arabic"}).show();
    
Thanks Hussein Ghaly (arabic), Racheli Golan (hebrew), Ferudun Vural (turkish) and Karel Rosseel (azerty).
Also added an override mapping for lower to upper and upper to lower case letters to the data parameter data.
Adjusted data to handle any number of rows (min 10) for custom layouts 
And added a "back" special key that is like "backspace" but only takes up one key size
The "spacebar" now takes up whatever space is left so the bottom row is always at the max number of columns

9. GRID
 Added allowToggle, cache and numbers parameters before style parameter 
Added numbersX and numbersY properties to individually set visible false if desired
These changes make the Grid ready to be used for charts

10. GENERAL
 Added dragPaused property to objects with drag() to pause or unpause dragging - IMPROVEMENT
this keeps setting like boundary where noDrag() does not
BREAK Added a corner parameter and property to Triangle after borderWidth and before center parameter
new Triangle(500,500,500,red,black,5,[20,20,100]).center()
A negative wait time can be provided to animations in the animate() series - IMPROVEMENT 
this will start an animation before the previous animation ends - thanks Ami Hanya for the excellent idea
Added a toggle() method and toggled property to List when accordion is set 
this will toggle the outermost (first) accordion - good for opening and closing a pulldown - thanks Ofweird Top for the suggestion!
Removed a test for touch to scroll page in tag mode if swiping on stage on allowDefault true -BREAK
It was causing double mouse events - will see if we can figure out a way to do the page scroll - IMPROVEMENT
Made Dial accept currentValue style - left it out previously
Made Slider and Dial accept VEE for min, max, step and currentValue 
also set these so delayPick works for instance, when tiling
List animateTo() has its timePerItem fixed = was switched the wrong way for s/ms
Adjusted List to capture selectedIndex, selected when tabs are used
Adjusted List to animateTo() an item if tabbing and the item is not in view (top left reg assumed)
Tabs - added keyLoop parameter at end before style which defaults to true to wrap tabs when tab key reaches end or start 
made List set keyLoop to false so List does not go past its ends when the tab key is used. 
Made Layout accept DisplayObjects as region objects - for default values 
eg. new Layout(stage, [header, content, footer]) gets converted to 
new Layout(stage, [{object:header}, {object:content}, {object:footer}])
Made it so an object passed into Layout as a region will update its outline() if there is one
Made debug() chainable in physics (and updateDebug(), removeDebug())
Made ColorPicker have a selectedColor parameter along with the existing selectedIndex parameter
BREAK for the List accordion tree object, changed the arrow property to expander 
with three types: "plus", "arrow" or "none" - thanks Ofweird Top for the suggestion.
Also adjusted list to not apply backgroundColor style for label (not item, but actual label) that messes up rollover and shade colors
Fixed ZIM ISO example https://zimjs.com/iso/ to not have scaling problem with older game module.
Added STYLE support for label and labelLeft for Toggle
Added STYLE support for always for RadioButtons 
Made toggled for Toggle get and set.

11. CODE PAGE
Updated Code template to include less comments.
Reorganized the Code Page as follows:
    removed the last sections: organization, treats, createjs, principles, programming
    and added them to a darkpaper page - linked to in the Code Help section.
    Converted these to latest ZIM and ES6 as well.
    Shortened the template and removed the "minimal" template.
    Made more link go to the rest of the templates so removed the second template section.
    Added a FEATURES section with Mobile (Zapps), SHIM for Animate and Accessibility. 
    This leaves the following sections:
    START, FEATURES, CDN, HELP, TOOLS and LIBRARIES 
    Inserted a link bar to these in between each of the sections for easy navigation 
    Took Badges out of HELP and added Medium and DevTO site in HELP.
    
12. PATCHED
Fixed Pen so that it draws curves between each point rather than straight lines 
The curves were there but were curving through a midpoint between points.
Well, this was making a straight line!  
We needed to start at the previous midpoint and curve through the last point to the next midpoint
Thanks Ferudun Vural for pointing out that we still had straight lines when animated quickly.
This is an excellent change to Pen whe...