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 from https://github.com/albertopiras/threeJS-object-controls They allow any object in three.js to be rotated or animated independently. This will appear somewhat like OrbitControls but OrbitControls move and rotate the camera around the scene - not individual objects. Thanks Pettis Brendan for the suggestion.

10. FADE AND PAN SOUND METHODS - IMPROVEMENT

https://zimjs.com/016/sound.html The ZIM Aud() play() method returns a CreateJS AbtractSoundInstance. We have added a fade(volume, time, call) method to the AbstractSoundInstance and a panSound(pan, time, call) - this cannot be pan() as there is a pan property. We could have called fade() as fadeSound() to be consistent, but fadeSound() will probably be rarely used whereas fade() quite a lot. So chose the shorter name.

let sound; // do not try and play sound before interacting
const toggle = new Toggle(100, 60, "SOUND").center().change(()=>{  

	// if there is not a sound then make one
	if (!sound) sound = new Aud("caves.mp3").play(0, true);

	// fade in or out the sound
	if (toggle.toggled) sound.fade(1); // default fade time is 2 seconds
	else sound.fade(0, 1.5); // fade out a little faster
});

11. SPEECH

https://zimjs.com/016/speech.html https://zimjs.com/016/speech2.html https://zimjs.com/016/voices.html Create a new Speech() and use talk() or listen() The talk() will speak words The listen() will turn voice into words This is a short wrapper class for the Web Speech API https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API Thanks Karel Rosseel for the initial research on Speech. Just a note - this has been around for about 6 years... The performance now is excellent! Read more options at https://zimjs.com/docs.html?item=Speech

const speech = new Speech();  // new Speech object
speech.talk("words") // tell Speech to say words 
speech.listen(); // tell Speech to listen
speech.on("result", e=>{zog(e.words, e.confidence)});

12. PERMISSION ASK - IMPROVEMENT

https://zimjs.com/docs.html?item=PermissionAsk Renamed SensorsAsk() to PermissionAsk() to handle mic and cam on iOS - BREAK as well as the deviceorientation and devicemotion

// on iOS, the app must be interacted with before using mic or cam
// this goes right to permissions on computer and android
// but pops up a PermissionAsk Pane on iOS then if yes, goes to permissions on iOS
new PermissionAsk(init, "mic"); // or "cam" or "miccam" - see docs for orientation and motion
function init(val) {
	zog(val); // media stream if yes to permissions otherwise false
	S.update();
}

13. GOOGLE FONTS SHORTCUT - IMPROVEMENT

https://zimjs.com/016/fonts.html Added a Google Fonts shortcut - use gf_ then the font name with capital first letter The spacing can be left + in the assets parameter or left as a space. But the spacing cannot be + in the font name so just put spaces. Note that case matters and they are all uppercase first letters.

new Frame(FIT, 1024, 768, light, dark, ready, "gf_Roboto");
function ready() {    
    new Label({text:"Am I a Robot?", font:"Roboto"}).center();
}

14. TILE BACKGROUND PADDING - IMPROVEMENT

https://zimjs.com/016/fonts.html Added backgroundPadding, backgroundPaddingH, backgroundPaddingV parameters to ZIM Tile() - BREAK These come just after the backgroundColor parameter

15. ZIM CIRCLE PERCENT ARC

https://zimjs.com/016/percentarc.html Added a percentArc parameter before the strokeObj and a percentArc property - BREAK that makes an arc when used with percent.
This is good for making moon shapes. Note, due to canvas winding, the arc will not do very thin cresents as expected instead once the inner arc is as wide as the outer arc, it makes a straight line. For thin crecents, overlap the circle with a circle that matches the background color. Or if the background is an image, etc. then mask a clone of the background with the arc circle.

// make a moon - use 60% of the circle 
// then cut into that with a circle at point 30% the radius in towards middle
new Circle({percent:60, percentArc:-30, radius:200, color:white})
	.rot(-120)
	.center();

16. INDICATOR DISPLAY OBJECT - IMPROVEMENT

https://zimjs.com/016/indicator.html The ZIM Indicator() indicatorType can now accept any DisplayObject (watch the size). Thanks Karel Rosseel for the suggestion.

new Indicator({
	indicatorType:new Label("Z",40,null,white), // using a label to make indicator lights
	foregroundColor:white,
	backgroundColor:red,
	backgroundAlpha:1,
	selectedIndex:1,
	fill:true,
	interactive:true
}).sca(2.5).center();

17. STYLE GROUP ONLY - IMPROVEMENT

https://zimjs.com/docs.html?item=STYLE ZIM STYLE now will use group styles even if style=false on the object. This is handy as all object styles except for the group styles can be turned off.

// the circle will not be red but will get percent 50
STYLE = {color:red, wonder:{percent:50}};
new Circle({style:false, group:"wonder"}).center();

18. GENERAL

fixed ZIM Series reverse to not automatically start at the end - but rather from its current state - IMPROVEMENT BREAK unless the current state is 0 then it goes from the end. Thanks Karel Rosseel for the report. Adjusted ZIM convertColor() to accept HEX NUMBER in the form of 0x as input - IMPROVEMENT Updated ZIM Skool - Statements image to include const. Changed all anonymous functions to arrow functions. Fixed bug in Pane so "display" property also points to backing. Made transformControls methods return the transformControls object rather than the object the transforms are on - BREAK Added decimals to List().slider() to set the decimals for the Stepper - IMPROVEMENT Also added a call property to List.slider(), List.checkBox() and List.colorPicker() - IMPROVEMENT Fixed Pane and Panel so textArea, tag, loader are removed and added as opened and closed - IMPROVEMENT Note - in general, do not add these to Window() unless non-scrolling and then must manually handle collapsing, closing, resizing, dragging The overhead is too much for a Window in general as it handles things like Wrappers and Lists that may have many items - usually not TextAreas, etc. Fixed Button() so roll background color on toggle and wait operates properly - was being overridden by new down background color - IMPROVEMENT Also added wait, waitTime and toggle to STYLE - this was an oversight. Made Button not show default "CLICK" if showing icon or backing - IMPROVEMENT Fixed trace setting on Emitter - it needed to be adjusted due to moving particles into their own container - IMPROVEMENT Now the cache size is the stage and setting traceShiftX and traceShiftY will move both sides of the bounds bigger (or smaller) Fixed Emitter to use that.trace, that.sinkForce, and that.width so these update on property change. Fixed default traceDecayTime needed to be put after decayTime gets its defaults No "" needed if icon or backing provided and no label set - IMPROVEMENT Added a RANDOM constant with value of "random" Added uppercase as a convenience STYLE to set any object with a label or text property to uppercase cursor and shadow have been added for STYLE - these were an oversight - IMPROVEMENT Made Pane() have a keyboardActive parameter - so it invisibly sets F.keyboardMessage to get keyboard on iFrame and close pane when pressed - IMPROVEMENT Added Keyboard entry to TIPS Fixed a bug in animate() where animating the same properties over again was not removing the previous ticker function - IMPROVEMENT This is basically a blank function in the queue to tell the stage to update but it would then leave the app on permanent stage.update() To put this in perspective, three.js, P5js, etc. have permanent update - still we are glad we found the bug. Adjusted corner for Rectangle to be 0 of array is missing any of its 4 points - IMPROVEMENT Added rounded corners to Blob Rectangle points

// use a rounded Rectangle to make a Blob with a rounded rectangle shape
new Blob({
	points:new Rectangle(200,200,red,null,null,50)
}).sca(2).center();

Label italic will skew(10) a background on the label if there is one - IMPROVEMENT Made transformControls methods return the transformControls object rather than the object the transforms are on - BREAK ZIM TextInput() no longer dispatches an input event if the text property is changed progromattically - BREAK Generally, events are not triggered if the value is programmatically changed. For instance, setting slider.currentValue = 10 will no trigger a change event - only the user using the slider triggers the event. Made the ZIM TextEditor() show the placeholder text in the label for the TextEditor - IMPROVEMENT Added adjustBounds property to options of cache() so that when set to true - IMPROVEMENT cached items with dimensions not equal to their original have their bounds and registraction adjusted as expected. This was not the default for CreateJS which was keeping the original, full object bounds and registration point. See https://codepen.io/zimjs/pen/RwdbdRg - where we have added the adjustment (here patched in ZIM 015). Making this default breaks many ZIM things from transform handles to TextureActives, etc. So we have added it as an option property to use when needed. See cache() in the docs for more info. On Container(), Bitmap() and Shape() Fixed the cursor spacing on TextInput when the size is changed and resize() called - IMPROVEMENT ZIM loop() with interval now works properly with start and end values different than defaults - thanks Kirk Goble for the report - IMPROVEMENT Fixed Window scrollbar so it ignores the top corner curve if there is a titleBar as that curve is up in the title bar - IMPROVEMENT Adjusted ZIM Frame() so assetObject uses a path provided to the assetObject even if there is no id (just src) - IMPROVEMENT and font in assetObject uses a path provided in assetObject - was missing the path addition. Fixed tap() equation for distance - was using Math.abs(lastX+lastY-currentX-currentY) < distance - IMPROVEMENT well, this equation does not work if the mouse is moved on a 45 degree angle so long distance taps were happening on a 45 degree angle List - hahaha! have to test Math.abs(lastX-currentX) < distance && Math.abs(lastY-currentY) < distance

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 Timeline() class which has a slider that scrubs any animations added to it. This is similar to a MovieClip but adapted to ZIM animate() and used primarily for testing and education. We had looked fondly on the GSAP timeline so thanks again GSAP for the inspiration. Note that it was a joy to put together with the ZIM components! We updated how animate() deals with percentComplete - see below.

const path = new Squiggle({showControls:false}).transformPoints("scale", 2).center();
new Circle(50,red).addTo().animate({path:path},4);

const timeline = new Timeline();

ZIM Timeline to scrub animations

5. ANIMATE

TWO NEW CALLS https://zimjs.com/015/animate.html Added animateCall and animateParams to animate() that offer an alternative to the events:true and "animation" event This is primarily because if the target being animated does not extend a createjs EventDispatcher then events:true does not work Also added startCall and startParams for when a target starts animating (after a wait) or series animations start (after their wait) - thanks Ami Hanya for the request. These have been inserted after rewindEase and before sequence.

const label = new Label("").pos(600,250);
const label2 = new Label("").pos(600,150);
new Circle(50,blue).pos(200,250).animate({
    wait:1, // the startCall would dispatch right away without the wait - which is fine, of course
    props:{x:500},
    startCall:()=>{label.text = "start " + rand(10000);},
    animateCall:()=>{label2.text = "animate " + rand(10000);},
    rewind:true,
    loopCount:2
});

PERCENTCOMPETE UPDATES Adjusted animate to handle percentComplete on each CreateJS Tween for specific control. There is still a percentComplete on a target but it now spans all tweens on the target (including wait). To get a reference to each specific tween capture the target's latestTween property at the desired time. Or they are available as target zimTweens but not necessarily in order there so query the zimObj perhaps. Note: a wait tween is overwritten by the final animation so a loop does not include the wait. So if wanting to use percentComplete on an animation that comes after a wait then ask for the target.latestTween in the callWaited event function. This createjs tween will not include the wait that came before it in its percentComplete. The target percentComplete now starts when the first tween starts and goes until the longest lasting tween currently on the target. This is adapted if more tweens are added to the target later. The target percentComplete is not affected by individual createjs tweens having their percentComplete changed.

const circle = new Circle(50,purple).loc(200,300);
circle.animate([
    {wait:2,props:{x:500}},
    {wait:1,time:2,props:{color:orange}},
    {props:{y:"100"},rewind:true},
    {time:1.5,props:{x:250},ease:"backOut"}
]);
circle.pauseAnimate();
const slider = new Slider({min:0, max:100})
    .pos(0,100,CENTER,TOP)
    .change(()=>{
        circle.percentComplete = slider.currentValue;
        S.update();
    });    

6. LIST CONTINUOUS

https://zimjs.com/015/continuous.html Added continuous parameter that defaults to false for List Set to true to continously scroll the list. This will turn the scrollbar off. removeItem() will work but not addItem(). Probably will not work with accordion, not sure about pulldown. It does this by cloning the items and shifting the tabs as it approaches the ends This means any custom events on the objects might not work (half the time) So use selectedIndex which does work as it uses the modulus to make it seem like only one set of tabs. Also added a continuous parameter to Window at the end This is used more internally and will stop the window from thinking it is at the end of the content This parameter is a little different where true is converted to "vertical" and it can accept a VERTICAL or HORIZONTAL value to lock the axis of the drag. Unless you do your own content swapping in Window, this parameter will probably be of no direct usage.

new List({continuous:true}).center(); // can spin forever

7. CAROUSEL CONTINUOUS

Added continuous parameter that defaults to true to let arrows wrap the items It does this by cloning the items and shifting the tile as it approaches the ends This means any custom events on the objects might not work (half the time) So use selectedIndex which does work as it uses the modulus to make it seem like only one set of items.

new Carousel().center(); // now defaults to continuous

8. SYNTH

https://zimjs.com/015/pan.html BREAK / IMPROVEMENT added pan parameter to start of play() before the ZzFX parameters (often in ...[params] format) Sorry this was missed the first time around... perhaps because here is the format synthSound.pan = zzfxX.createStereoPanner(); synthSound.pan.pan.value = pan; source.connect(synthSound.pan); synthSound.pan.connect(zzfxX.destination); Added pan parameter to tone after shape parameter and added rampPan(pan, time) method and pan property

const synth = new Synth();

let tone;
const maxH = 400; // max horizontal
const maxV = 300; // max vertical

const saucer = new Container(300,100).centerReg();
new Button({label:"PLAY", bgColor:silver, gradient:.5, corner:[70,70,0,0]}).center(saucer).tap(()=>{

    zog((saucer.x-W/2)/maxH) // will be from -1 on left to 1 on right
    synth.play((saucer.x-W/2)/maxH,...[.1,,925,.04,.3,.6,1,.3,,6.27,-184,.09,.17]);
    if (!tone) {            
        tone = synth.tone({
            volume:.1, 
            note:"A3", 
            shape:SINE, 
            pan:0,
            vibratoAmount:20
        }); 
        toggle.animate({alpha:1});
        interval(.1, ()=>{
            tone.pan = (saucer.x-W/2)/maxH
            tone.vibratoRate = 4-(saucer.y-H/2)/maxV*2
        });
        saucer
            .wiggle("x",W/2,100,maxH,2,6)
            .wiggle("y",H/2,50,maxV,2,6)
            .wiggle("rotation",0,2,5,2,5);
    } else {
        tone.pause(false);
    }        

});

9. STEPPER ARROWS

Now has arrowColor and arrowScale parameters to set stepper arrow values

new Stepper({arrowColor:red, arrowScale:.5}).center();

10. EMITTER WARM

https://zimjs.com/015/emitter.html BREAK / IMPROVEMENT added a warm parameter after shrink and before decayTime This will star the emitter off with already emitted particles Set to true to add life/interval number of particles this would be how many particles until repeating the number although any number can be set - just do not over-do it, there is no point This loops through creation and calculations rather than an interval and then the interval is started. It temporarily will turn off pooling. Added focusWarm to pauseOnBlur function so warms Emitter when coming back from blur This defaults to true no matter what the warm parameter but can be set to false or a number. new Emitter({warm:true}).center(); // starts off with existing particles dispersed in time

11. SORTOBJECT

https://zimjs.com/docs.html?item=sortObject Added a sortObject(obj, property, reverse) function to the CODE module under Basics This will sort an object by a property of its inner objects

const sortData = {
    Z_JJK34:{
       date:"2023-06-29",
       prefix:"Bits",
       title:"Basic Physics" // etc.
    },
    Z_92KL1:{
       date:"2023-06-28",
       prefix:"CodePen",
       title:"Art Puzzle with Scrambler"
    }
 }
    
 const sorted = sortObject(sortData, "date");
 loop(sorted, (key, val)=>{
    zog(key + " : " + val.date); // sorted by date
 });

12. DOCS

Docs now has versions in a pulldown at the top right - thanks Chris Spolton for the request.

13. EDITOR

The Editor can now have its version and its scaling set. These are directives - they would not do anything outside the Editor. We parse the code and look for these and if they are there adjust the resulting view, test or full file. The GUIDE has been updated with a SPECIAL section to keep track of these.

F.version = "014"; // set the version to 014 
F.scaling = FULL; // change scaling to full

14. GENERAL

Added Ticker.getFPS() as a wrapper to the createjs.getMeasureFPS() Fixed a bug in expand() that was causing hitBox to sometime not get applied properly IMPROVEMENT if it worked it worked but sometimes it did not seem to work - it was because we use a color of "0" setting this to a proper color seems to have fixed it! Woot! Fixed drag() axis parameter to work properly with slide IMPROVEMENT Added interstellar color that is #123 or #112233 - the dark blue of the ZIM 014 site. Updated RadioButtons to not toggle when an index is set - when that index is already selected. Fixed Stepper with decimals to include the max value IMPROVEMENT Adjusted bug in module creator to export all individual functions - was cutting off at loop there have two loops and a test to avoid adding a second accidentally cut off further additions. This would not be noticed unless importing individual ZIM functions. IMPROVEMENT

15. CREATEJS

https://zimjs.org/cdn/1.4.0/createjs.js https://zimjs.org/cdn/1.4.0/createjs_doc.js Updated the ZIM version of CreateJS to 1.4.0 The ZIM CreateJS has been updated with a couple dozen lines under the heading remotePointers that more easily lets CreateJS receive custom x and y rather than DOM events. CreateJS had already abstracted this to handle pointers so it was not too difficult to do. However, there were a few places where extra code was inserted. The main update also has a single added conditional to look for a createjs.remoteQueue This holds an array of ZIM TextureActive objects to have their cache updated and any associated texture to have its needsUpdate flag set to true.

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) - remove the item at the id Also added a method to get an object's parent getParent(id) - gets the parent object of the item at the id or null if no parent

CODE HINTS

Code Hints are available for your editor as follows NOTE: currently VS Code only shows the code hints for JS files - not for JS in HTML. We have copied our TypeScript Typings to a Node Package So these need to be installed in the project folder - here are 2 minute the steps. In the IDE open your project folder Open a Terminal - in VS Code see Terminal in menu (CTRL SHIFT `) type node -v to check if you have node if not then install node here: https://nodejs.org, etc. run the command below npm i zimtypes only gives auto completes for ZIM in a JS or TS file - not HTML at this time

FRAME POINTER EVENTS

Added Frame pointer events (mouse or touch) that match JavaScript pointer events F.on("pointerdown", e=>{}) // down on stage F.on("pointerup", e=>{}) // up on or off stage (yay) F.on("pointermove", e=>{}) // move on stage F.on("pointerenter", e=>{}) // when entering stage F.on("pointerleave", e=>{}) // when leaving stage (yay) These are complete with e.pointerID, etc. for multitouch

TICKER

Added Ticker.isUpdating(stage) to determine if the Ticker is currently updating

SQUIGGLE AND BLOB

Added circleColor and circleBorderColor to Squiggle and Blob just before stickColor BREAK Blob can now accept a ZIM Flare() as its points parameter (like Circle, Rectangle, Triangle)

KEYBOARD CONTROL

Added a keyboardMessage() method to Frame to request pressing on screen for keyboard access. This also solves getting key access on iFrames! If the app is in an iFrame then The F.keyboardMessage() will turn off pointer events on the canvas so a press will go through to the iframe - otherwise pointer events remain on. We then capture a document mousedown and turn pointer events back on (if off) and remove the message At that point, we can use keyboard.

GENERAL

The Stepper now defaults to a height of 60 (default Button height) instead of 100 and the default font size is reduced The Stepper can have its width set and it can be scaled if a different height is desired. Added ALL and RADIAL global constants that equal "all" and "radial" IMPORTANT - Updated ZIM Frame() so setBlurDetect() only is called if not already called This was in place in all the Timeout, Interval, etc. but in ZIM NFT we added it to the Frame without the proper check This meant that items paused would be thought paused if a second frame called the blur detect and when they were to be unpaused they were marked as previously paused - leading to animations, Emitters, etc. not starting again. We have gone back and adjusted ZIM O2 as well. Fixed Frame so W, H, S are definitely the first frame called (not made) - this can be overwritten with F.setDefault() Adjusted ZIM Triangle() to accept a -1 for the second parameter that will make the triangle 90 degrees this is like the -1 for the third parameter which still does the same. So it now can have a right angle at the bottom left (or the bottom right as before) Added a type of Dictionary to ZIM Dictionary. ZIM Loop() now loops through a Dictionary as it would an object literal. Added obj.zimLastMouseEnabled setting to noMouse() and mouse() to handle animate() busy check if set after animation starts Made particles in ZIM Emitter when added back to the stage after removing be visible false so can't see old particles Fixed InputText clone() to include placeholderInstant - had accidentally added it to the TextInput parameters directly below.

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.

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.

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 this to "legacy" will revert back to the traditional 256 colors or setting this to an array of colors will revert back to how the Picker worked previously too. The "spectrum" setting will use a color gradient spectrum with a color dropper. By default the dropper works on the spectrum. Set dropperTarget parameter to a DisplayObject such as the stage to make the dropper work on that object. The dropperTarget property can be changed to updated where the dropper will work.

var picker = new ColorPicker({    
    dropperTarget:pic,  
    // spectrumCollapse:false,
    // spectrumClose:false, 
    // spectrumMode:false,
    // spectrumOk:false,
    alphaPicker:false
});

ColorPicker Events have been adjusted: BREAK Previously, there was a "set" event and only a "change" event if the OK button was pressed (or no OK button). Now, there is an "ok" event for the button and a "change" event whenever a color is picked.

• dispatches a "change" event when the color swatch changes or if no swatch when a color is picked.
• also dispatches when the alpha is changed if there is an alpha picker.
• dispatches a "swatch" event when the swatch is pressed.
• dispatches an "ok" event when the OK button is pressed.
• dispatches a "close" event when the close button is pressed. Automatically closes the ColorPicker.
• dispatches a "collapsed" event when collapsed in spectrum color mode.
• dispatches a "expanded" event when expanded in spectrum color mode.

4. CHROMA KEY

https://zimjs.com/zim/chromakey.html ZIM Bitmap has a new keyOut(color, tolerance) method to key out color the tolerance is 0-1 with .1 being the default. Thanks Karel Rouseel for the suggestion.

asset("pic.jpg").center().keyOut(red); // take ZIM red color out

5. ESLINT - IMPROVEMENT

This is one of those large behind-the-scene changes - you do not need to read all these ;-). We used ESLINT on ZIM to make sure ES6 export/import will work without fail on all classes This caught about 1000 redefined and unused variables and a few other things such as: loop was changed to zim.loop in Squiggle, Blob, LabelLetters zob() and any other place where hasOwnProperty or isPrototypeOf was called is now called on the Object.prototype functions were moved to outside conditionals in the SVGContainer, Label, LabelLetters Label was changed to zim.Label in LabelLetters TextInput was referencing a Rectangle rather than a zim.Rectangle Slider and Dial refered to Label rather than zim.Label and Container not zim.Container EmojiPicker had a Rectangle rather than zim.Rectangle TextEditor used a Shape rather than zim.Shape KeyBoard had a Label rather than a zim.Label Arrow was missing a zim on clear Adjusted Radialcolor for Layout Background - was using GradientColor ShadowEffect had black rather than zim.Black Default multipliers on ColorEffect were wrong Book used a Rectangle and a Shape rather than a zim.Rectangle and a zim.Shape and black rather than zim.black and dist rather than zim.dist, Point rather than zim.Point and constrain rather than zim.constrain and Ticker rather than zim.Ticker and timeout rather than zim.timeout and DEG rather than zim.DEG GIF was using Ticker rather than zim.Ticker Interesting case with applying this before ZIM DUO call - needed to use that - see Container.clone()

6. COLORS REMOVED ON FRAME OBJECT

ZIM colors are no longer available on the Frame object. Way back in ZIM HEP (7.3.0), these were added to global or on the zim namespace if zns=true is set.

// for instance
const frame = new Frame();
frame.on("ready", () {
    new Circle(100,frame.red).center(); // will no longer work (or be black) 
    // use 
    new Circle(100,red).center(); // or new Circle(100, zim.red);
});

7. PHYSICS SPEED

Added speed and speedY properties to phsyics objects controlled by control() This is good for different levels in games Note: speed will adjust both x and y speed if the speedY parameter is null for control() but if the speedY property is then set, speed would only adjust the speed x.

const physics = new Physics({gravity:0})
const colors = series(dark,grey,tin,silver,white)
const circle = new Circle(50,black,darker)
    .center()
    .addPhysics()
    .control(null,5);
// increase speed every 2 seconds (5 times)
interval(2, () => {
    circle.color = colors();
    circle.speed += 10;
}, 5);

8. WINDOW OPTIMIZE - IMPROVEMENT

Added code to hide (visible false) an object in the window that does not have bounds hitting the stage This greatly improves Windows with lots of content - thanks Ami Hanya and team for the suggestion. This checks for objects directly in content and then objects one level deep inside those objects. The feature can be turned off by setting the new optimize parameter or the optimize property to false. BREAK - an optimize parameter has been added to Window and List - just before style near the end of the parameters. These are true by default. Also, inserted (BREAK) an index parameter into Window.add() after the object and before the center parameter and made this method accept ZIM DUO configuration object.

const w = new Window({scrollBarDrag:true, padding:20}).center();
// 2000 rows - works no problem now on mobile with objects not in view being visible=false
const t = new Tile(new Circle(20, red), 4, 2000, 20, 20);
w.add(t);
// the above would only drag on the circles (or the scrollbars)
// adding a Rectangle to help dragging   
w.add(new Rectangle(w.width-20,t.height,dark), 0);

9. SINGLE TOUCH - IMPROVEMENT

Added a singleTouch parameter to the end of the Frame() parameters and to the end of the drag() method - both these default to false. Setting singleTouch to true will force single touch on the stage - or on a specific drag. Frame is touch:true by default and this will default to multitouch. Setting touch:false, will turn off touch on mobile which is good to do for performance if not needed. Setting singleTouch:true will override the touch setting and make touch:true but single touch. Changed the Scrambler() to use singleTouch on drag and adjusted other code to ensure single touch on Scrambler. Added touch and singleTouch parameters to Stage() and StageGL().

const frame = new Frame({singleTouch:true}); // a single touch full frame 
// or with default Frame settings
new Circle().drag({singleTouch:true}); // single touch drag on circle

10. GENERAL

Added collapse, collapseColor and collapsed parameters to end of EmojiPicker - thanks Karel Rouseel for the prompting.

new EmojiPicker({collapse:true}).center();

Added PATH global variable for Lazy Loaded assets (assets not loaed with Frame assets parameter or loadAssets() method) This will be automatically set to the last path parameter used in Frame() or in loadAssets() or it can be manually set - see the Docs https://zimjs.com/docs.html?item=PATH

// EXAMPLE 1
// inside a ZIM Frame where no assets or path are provided:
asset("image.png").center(); // will look in local directory 
asset("images/image.png").center(); // will look in images/ directory 

PATH = "assets/";
asset("image.png").center(); // will look in assets/ directory
asset("sound.mp3").play(); // will look in assets/ directory
asset("test/image.png").center(); // will look in test/ directory

// EXAMPLE 2
// inside a ZIM Frame with assets parameter of "image.png" and path parameter of "assets/" 
asset("image.png").center(); // will look in the assets/ directory 
asset("other.png").center(); // will look in the assets/ directory

PATH = null;
asset("image.png").center(); // will look in assets/ directory
asset("other.png").center(); // will look in local directory

const load = frame.loadAssets("test.png", "test/");
load.on("complete", ()=>{
	asset("test.png").center(); // will look in test/ directory
	stage.update();
});

asset("new.png").center(); // will look in test/ directory

The Frame loadFailObj parameter is working again when loading assets. If no loadFailObj is provided frame.makeCircles() will show - this represents a broken asset. Set to new Container() if wanting to hide the broken image - but really, should fix the broken asset. The asset() global function is now NOT global if zns=true (zim namespace is on) it would be used as zim.asset() or if there is a Frame object called frame then frame.asset() Adjusted reg() CENTER will center both regX and regY - thanks Karel Rouseel

new Rectangle().reg(CENTER).loc(100,100); // object has its registration in center
new Rectangle().reg(CENTER,DEFAULT).loc(300,100); // object has its regX at center and regY at 0
new Rectangle().reg(null,CENTER).loc(600,100); // object has its regX at 0 and regY at center

Added dispose() method for sound asset()

new Button().center().tap(() => {
    const sound = asset("backing.mp3").play()
    timeout(2, () => {
        sound.dispose(); // destroys instance
        // below would remove reference so could not play again
        // asset("backing.mp3").dispose(); 
    });
});

Added reverse and continuous parameters to Flipper and fixed manual flip() issue. See https://zimjs.com/explore/flipper

const flipper = new Flipper({
    front:page1, 
    back:page2,
    reverse:true,
    continuous:true
}).center()

Added rtl support to CheckBox and RadioButtons - thanks Racheli Golan for the request.

DIR = "rtl";
new CheckBox(30, "Hello").center().mov(0,-150);  // text on left of button
new RadioButtons(30, ["Yes","No"], true).center(); // text on left of buttons

Adjusted Tile() to not clone objects that are a ZIM VEE function IMPROVEMENT.
function makeCircle() {
    return new Circle().tap(e=>{e.target.removeFrom(); stage.update()});
}
new Tile(makeCircle).center(); // circles are not cloned

Added CSS transform animating support - it was there in CreateJS but we missed it in ZIM Thanks Yanwenge for the prompting

zss("tagID").transform = "translate(20px, 30px)"; // set this even if it is default
animate({
    target:zid("tagID"),
    props:{transform:"translate(100px, 150px)"},
    time:2,
    loop:true,
    rewind:true
});

Added delay, time and mouseClose parameters to ZIM Tip() before size BREAK as size and the rest of the parameters match Label parameters.

STYLE = {
    delay:1,
    time:1,
    mouseClose:false
}
new Tip("ZIM 00").show();
// delay - (default 0) set the default delay for show() - can override with show() parameters
// time - (default 2) set the default time for show() - can override with show() parameters
// mouseClose - (default true) set to false to not hide tip on mouse press

Added a reset() method to GIF.

const gif = new GIF("assets/animated.gif", 600, 600).center();
timeout(1, () => {
    gif.reset(); // starts it from the beginning
});

Squiggle and Blob with custom points now start with approximateBounds() called IMPROVEMENT (possible BREAK) but approximateBounds() must be called manually if object has been adjusted and new bounds are needed.

new Blob({points:[
    [0,-40.7,0,0,-57.3,-76.6,41.8,-80.3,"mirror"],
    [100,0,0,0,23.7,-45.4,-23.7,45.4,"mirror"],
    [0,100,0,0,0,0,0,0,"mirror"],
    [-100,0,0,0,21.9,48.2,-21.9,-48.2,"mirror"]
]}).center().outline(); // outline around heart

Adjusted Bitmap getColorAt() to return 0-1 for alpha rather than 0-255 Adjusted ZIM convertColor() to handle alpha properly with hex added array value to convertColor toColorType parameter to return an array with [r,g,b,a] Added a zimPos property to a Display Object that has pos() done to it. This returns an object with the x,y,h,v,i (for index) use parent to get the container see https://zimjs.com/test3/posrecord.html - thanks Ami Hanya for the request. Fixed Slider to allow step of 0 along with useTicks - was supposed to be like Dial IMPROVEMENT but the code for setting the step to the tickStep was left in. Fixed Style.remember() to work without an ID. Adjusted Pages to automatically mask pages and transition effects IMPROVEMENT. if a ZIM Rectangle is provided as a holder for pages size smaller than the stage. This will turn the mouse on for objects inside the rectangle too. Adjusted Bitmap to include a scale parameter after width and height before id - BREAK Fixed rewind on CSS animate() - was not parsing the px from start value - thanks Yan Weng Made lazy-loading work with outline(); Adjusted STYLE to work with type:value for a main style - was conflicting with STYLE.type... Fixed bug in Pen where drawing was off if paper was not at 0,0 - thanks Yanwenge.

CHEERS!

Thank you to all ZIM users - and community at https://zimjs.com/slack and https://zimjs.com/discord. Please come and join us!

Dr Abstract, Pragma and ZIM team.

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 Rouseel 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 Rouseel 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 Rouseel) 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 Roseel 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

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 (the next major version after ZIM CAT and ZIM TEN) features:

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 -->

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 assets. 
Added Pizzazz 01, 02, 03 automatically to Slate. 
Made updating Docs also update Spells so two stay in sync.

12. ZIM DOCTOR 
https://zimjs.com/doctor 
Changed name of Docs customize page to Doctor in a ZIM Tool format.
This lets you paste ZIM Code and get a docs link that features commands in the code.
Added this as a tool to the Code page.

13. MEDIUM
Published stories on using ZIM for Interactive Art and NFTs
https://javascript.plainenglish.io/an-invite-for-generative-art-makers-and-interactive-artists-106f3ed186ab
https://levelup.gitconnected.com/making-interactive-nfts-4a50a8f8feb3

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

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 -->

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 assets. 
Added Pizzazz 01, 02, 03 automatically to Slate. 
Made updating Docs also update Spells so two stay in sync.

12. ZIM DOCTOR 
https://zimjs.com/doctor 
Changed name of Docs customize page to Doctor in a ZIM Tool format.
This lets you paste ZIM Code and get a docs link that features commands in the code.
Added this as a tool to the Code page.

13. MEDIUM
Published stories on using ZIM for Interactive Art and NFTs
https://javascript.plainenglish.io/an-invite-for-generative-art-makers-and-interactive-artists-106f3ed186ab
https://levelup.gitconnected.com/making-interactive-nfts-4a50a8f8feb3