ZIM 020

ZIM is a general canvas framework at https://zimjs.com - official updates are at https://zimjs.com/updates.html

Welcome to ZIM 020!

1. CHART MODULE

https://zimjs.com/020.html
Added the ZIM Chart helper module (like Sockets, Game, Three, Physics, Pizzazz, Cam)
Must import https://zimjs.org/cdn/020/zim_chart

• Graph - base class that gives x, y axes for other graphs
• Legend - pass in a graph and it matches colors or icons to plots
• LineGraph - https://zimjs.com/020/linegraph.html - lines
• BarGraph - https://zimjs.com/020/bargraph.html - bars
• PlotGraph - https://zimjs.com/020/plotgraph.html - best fit
• PieChart - https://zimjs.com/020/piechart.html - pie
• RadarGraph - https://zimjs.com/020/radargraph.html - radar
• LiveGraph - https://zimjs.com/020/livegraph.html - for data streams
• GrowthChart - https://zimjs.com/020/growthchart.html - animated over time
• GrowthWidget - legend to show the time
• WordCloud - https://zimjs.com/020/wordcloud.html - frequency to size
• Championship - https://zimjs.com/020/championship.html - round robin chart

// must import zim_chart
const graph = new zim.BarGraph({
	title:"Sales of Vegetables",
	width: 700,
	// comment these out to see with light background
	backgroundColor: black,
	axisColor: light,
	gridColor: grey,
	color: lighter,
	dataColor: silver,
	// end of comment for light background
	info: {
		labelH: "Days",
		labelV: "Sales",
		dataH: {start: 1, end: 7, step: 1},
		dataV: {start: 0, end: 100, step: 10}
	},
	colors: series(purple, yellow, blue),
	data: [
		{item: "Cucumber", icon: null, dataH: [2, 3, 4, 5, 6], dataV: [10, 40, 50, 60, 20]},
		{item: "Lettuce", icon: null, dataH: [2, 3, 4, 5, 6], dataV: [70, 50, 20, 20, 40]},
		{item: "Cilantro", icon: null, dataH: [2, 3, 4, 5, 6], dataV: [20, 50, 80, 90, 50]},
	],
	// gradients:false
});

// optionally put graph in Panel
STYLE = {infoicon: {size: 12, color: white}, onTop: false, collapse: true, titleBar: "Bar Graph", draggable: true};
new Panel(graph.width, graph.height + 30, graph).center();

// optionally put legend in Panel
const legend = new zim.Legend(graph);
STYLE = {infoicon: {size: 12, color: white}, collapse: true, titleBar: "Legend", draggable: true};
new Panel(legend.width + 20, legend.height + 30, legend).pos(60, 50, RIGHT, BOTTOM);
STYLE = {};

There are other charts too - see the example links.

Two slightly different Charts are Word Cloud and Championship as follows.

https://zimjs.com/020/wordcloud.html
http://im.sheridanc.on.ca/promo/book.html (in ZIM Book)

// WordCloud

// we can use WordCloud on raw text - but that takes extra processing
// here are the steps to have WordCloud process and save a data list

// we copied the text from the ZIM Innovation page, 
// saved it as a long string `` in a const words and passed that into WordCloud
// we ran the WordCloud and noticed words we did not want 
// so we manually created this exclude array:
// const exclude = ["complex", "decade", "through", "last", "fully", "63", "allows", "set", "made", "friction", "other", "single", "zims", "still", "every"];
// then we added this coding line 
// zog(JSON.stringify(cloud.prepareWordData(words, 50, 1, exclude)))
// this we stored in this const words instead of the raw text
// a shortened version is shown here

const words = [
	{"text": "Zim", "freq": 100}, 
	{"text": "Canvas", "freq": 44}, 
	// etc., 
	{"text": "Creating", "freq": 6}
];

// words, width, height, scaleFix, font, color, backgroundColor, spacing, verticalMix, uppercase, minSize, maxSize, style, group, inherit
var cloud = new zim.WordCloud({
	width:700,
	words: words			
}).center();

// optionally animate the words in
cloud.animate({
	props: {alpha: 0},
	from: true,
	time: .3,
	sequence: 0.02
});

// must import zim_chart
new Championship({
    title:"Championship!", 
    data:[[],[],[],[],["Best"]], 
    padding:30, 
    align:CENTER, 
    lastScale:1
}).center();

See formatted championships at:

• Best Dance Song - https://zimjs.com/020/decades.html
• Most Frustrating Tech - https://zimjs.com/020/frustration.html
• Best Album - https://zimjs.com/020/albums.html

2. AI MASTER PROMPT

https://zimjs.com/prompt.html
Dr Abstract spent a couple weeks building an AI Master Prompt.
This was done working with Claude 4.7 but can be adapted to any model.

PROMPT SECTIONS

• PREPARATION - leave as-is
• TASK - replace placeholder task
• CONTEXT - leave as-is
• CONVENTIONS - evolve over time
• REASONING - adjust or remove
• STOP CONDITIONS - adjust or remove
• OUTPUT - leave as-is

3. BULLETS

https://zimjs.com/020/bullets.html
Makes traditional bullet list like html ol, ul, li tags.
Can use pizzazz icons and also do nested bullets (see Docs)

new Bullets(["First item", "Second item", "Third item"]).center();

// or for numbers

new Bullets(["First item", "Second item", "Third item"], "numbers").center();

4. GESTURE TRACKPAD SUPPORT

Added laptop trackpad support for ZIM gesture()
Pinch to zoom, swipe two fingers horizontally (same direction) to rotate
objects that have gesture() added. Code assistance from AI Claude 5.
noGesture() removes the events.
Thanks Karel Rosseel for the suggestion.

5. GENERAL

Added onTop parameter to Panel and NumPad default true
Added valueLite to Stepper - should just make stepper not update the stage if setting a value
was resetting 60 steppers and that is 60 stage updates - bogs mobile.
rewindPick in animate moved from end of parameters to after rewindEase

6. SITE UPDATE

Updated front banner with animated Z and simplified side links
The Dr Abstract icon has moved down to a new Dr Abstract and Pragma promo panel
The site now is generally on a light background rather than a dark background
The order of the sections on the front page have been rearranged but generally unchanged
The About, Examples, Learn, and Code secondary pages have been changed.
About, Learn and Code are simplified for promotional impact.
Each page has an ARC link at the bottom to the old full pages with many icons.
The Learn page has been divided into Beginner, Intermediate, Advanced, and Articles

ZIM 019

ZIM is a general canvas framework at https://zimjs.com - official updates are at https://zimjs.com/updates.html

Welcome to ZIM 019!

1. SHADER CHANNELS

https://zimjs.com/019/shader.html
Added channel parameters to Shader() to handle input of any ZIM DisplayObject (or html image or video)
Note, this can be a Pic, Vid, Container, Tile, Shader, etc. So a Shader in a Shader is okay.
These number 0-3 and match the ShaderToy system - but can be used in traditional GLSL too.
Added a replaceChannel() method to replace an existing channel with a different DisplayObject.
ZIM Shader tether tap was adding a cursor to all shaders - the cursor has been set to false to avoid this.
Note: ZIM Perspective() and ZIM Glitch() were made possible with Shader channels.

// Swap colors of a ZIM DisplayObject
const fragment = `
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
	vec2 uv = fragCoord/iResolution.xy;
	vec4 t = texture(iChannel0, uv);
    fragColor = vec4(t.g, t.b, t.r, t.a);
}
`;
	
// could be new Pic(), new Vid(), new Button(), new Tile()
// animated, interactive, etc. just watch your dimensions if animated
// put the object in a container and pass in the container for channel0
const obj = F.makeCircles(); 
	
const shader = new Shader({
	width:pic.width, 
	height:pic.height, 
	fragment:fragment,
	channel0:obj
}).center().drag();

2. PERSPECTIVE

https://zimjs.com/019/perspective.html
Added a ZIM Perspective() class to create a box with four transformable points
that adds perspective to any ZIM DisplayObject - such as a Pic(), Tile(), Vid(), Shader(), etc.
The user can adjust perspective with corner controls or with side controls.
Activating a side control makes the adjacent corners mirror about the side control.
Keyboard arrows with and without the shift key can also control the controls.
The corners or sides can also be set, animated, wiggled, etc.
The Perspective object can also be set to interactive false to present a final perspective.
There is a plane mode that repeats the object to infinity.

const obj = new Container(500,500);
F.makeCircles().center(obj).animate({props:{scale:2}, rewind:true, loop:true});

const perspective = new zim.Perspective(obj).center();

perspective.selectSide(3);
perspective.updateCorner(perspective.selectCorner(0).mov(0,100));
perspective.deselectPoints();

3. GLITCH

https://zimjs.com/019/glitch.html
Glitch applies glitch shaders to a ZIM DisplayObject like a Pic, Vid, Tile, Button, etc.
There are different types of glitches with strength and modifier Uniforms (inputs).
Glitch is a ZIM Container that holds the provided object underneath a Shader which is applied to the object.
The alpha and blendmode can be applied to the shader to help apply the glitch effect as desired.
There are also settings to toggle the alpha of the shader in time to "flicker" the glitch.
This is done with an interval using ZIM VEE values for setting timeOn, timeOff and variance values.
Once the glitch is made, use the shader property of the glitch to change alpha and blendmode settings.
Use the uniforms property to change the strength and modifier settings.
Glitch may not work as well on older mobile devices.

new Glitch({
	obj:F.makeIcon({box:clear}), 
	glitchType:"chunk", 
	alpha:.5, // show the glitch shader at half alpha
})
	.center()
	.drag({all:true}); // important so do not drag parts within Glitch container   

4. CHEAT SHEET

https://zimjs.com/cheatsheet.html
Added a ZIM cheat sheet available on the homepage under the START section
and near the top the Learn Section and in the middle of the DEV page.
It is a visual introduction to ZIM that compliments the Docs and Tips.
Pressing on any area gives sample code that can be copied
The MENU section code is incomplete but code will provided eventually.
Also, ZIM Zapps are planned for the sample code
along with direct links to the code in the ZIM Editor and ZIM Slate.
Thanks Karel Rosseel for the cheat sheet suggestion.

5. ISOMETRIC UPDATES

https://zimjs.com/019/isometric.html
Added isometricRatio at the end of ZIM Board() parameters - default 2 (width is twice as wide as height)
This can be set to accomodate assets with different isometric ratios.
Added a board parameter to the end of Timer() and Scorer() to match isometric angles with a board.
If desired, the angles can be found by using board.getAngleLeft() and board.getAngleRight().
We plan on creating Tile Map makers and working examples in the new year.

6. GAME ASSETS

https://zimjs.com/019/isometric.html
We provide the Kenny files for isometrics
thank you, Kenny - please consider donating - see details in the zip
plus we processed the Kenny blocky characters as isometric
in a spritesheet called characters.png with characters.json data
see https://d309knd7es5f10.cloudfront.net/iso.zip (60M)

7. SHUFFLER

https://zimjs.com/019/shuffler.html
Takes a one-row or one-column ZIM Tile or a string of words and shuffles them in one line.
This means the item sizes can be different unlike the ZIM Scrambler where rows or cols have to be the same size.
The items can then be unshuffled and a complete event will be given.
Great for ordering games or apps where the sizes are different.

STYLE = {Label:{backgroundColor:white}};
const shuffler = new Shuffler("will this wind be so mighty ?").center();
const emitter = new Emitter({startPaused:true}).center();
shuffler.on("complete", ()=>{
	shuffler.shuffle(2, 1, 4); // time, delay, number
	emitter.spurt(20);
});

8. ZIM MONITOR

https://zimjs.com/019/monitor.html
Added a monitoring system - thanks Ami Hanya, Racheli Golan and Team.
Events, Intervals and Tickers are monitored - see the Docs for the mID parameter.
A custom monitor ID can be passed to app events, intervals and tickers.
ZIM uses "z" which gets translated to "ZIM" in the reports. Also "c" for CJS (CreateJS).
Pass in "-" to have the event, interval or ticker ignored.
If no mID is passed then "APP" is the mID reported.
EVENTS
Monitoring events starts with our CreateJS 1.5.1 version.
If future tests go well, we will retro-fit CreateJS 1.5.0.
How it works:
All DisplayObjects eventually extend from a CreateJS EventDispatcher class.
The EventDispatcher is used to handle addEventListener(), and removeEventListener().
The on() and off() methods are short-cuts to the longer names so we will continue with the short terms.
We added a static reporter property to the CreateJS EventDispatcher that is, itself, an EventDispatcher.
We added a static report() method that is called by on() and off()
The on() calls the report method which dispatches an "on" event from the reporter when the on() is set.
The off() calls the report method which dispatches an "off" event from the reporter when the off() is set.
This is just a few lines of code that should not affect the performance
as it only runs when an event is created - not when it runs.
This allows us in ZIM to capture when an event is made, what type, and on which object.
createjs.EventDispatcher.reporter.on("on", (e)=>{zog(e.eventType, e.obj.type)});
and similarily with ...on("off",...)
We really do not need to worry about the events aside from when we accidentally set many events.
This happens if we add the event to a Ticker, or an interval, or everytime we click, etc.
So seeing the events will warn us - so the Monitor, shows the number of events on and off.
INTERVAL, TICKER, WIRE
Added monitor for Interval(). Pass in mID if desired. and for clearInterval, etc.
Added monitor for Ticker.add(), Ticker.always(), Ticker.raw(). Pass in mID if desired. and for Ticker.remove, etc.
Added monitor for wire(), wired(). Pass in mID if desired and for noWire, etc.

// defaults
Monitor.add({
	widget:true,
	level:3,
	time:1,
	ZIM:true, 
	CJS:true, 
	APP:true,
	events:true, 
	intervals:true,
	tickers:true,
	on:true, 
	off:true,
	offs:true,
	redacted:true,
	remember:true,
	cache:false
});

9. SYNTAXCOLOR

A very simple code syntax coloring function.
Receives text and returns a color for code syntax for the following:
operator, class, string, number, color, constant, keywords, brackets, command, comment, other

// note, only one word or character at a time is processed
// so loop through code words and get syntax color for each one
const text = "Circle";
new Label(text, 50, null, syntaxColor(text)).center(); // will be blue from the default light theme

10. ANIMATE AND DRAG STYLE

Added style to animate() and drag()
These are the first two methods with styles
The parameters can be added right to style: STYLE...

ZIM 018

ZIM is a general canvas framework at https://zimjs.com - official updates are at https://zimjs.com/updates.html

Welcome to ZIM 018!

1. HAND TRACKING WITH ML5 AND ZIM CAM

https://zimjs.com/018/handtrack.html

A handTrack(ML5results) method has been added to ZIM Cam(). Must import zim_cam.
By default, this replaces the normal mouse and touch when a hand is detected.
Each pointer finger is a cursor for mousemove, mouseover and mouseout
and pinching the pointer finger and the thumb, triggers mousedown, pressmove, pressup, tap, and click.
There is a cursorMode which defaults to AUTO - there are also true and false values.


CURSOR MODES

AUTO: mouse and touch are replaced by the finger and pinch only when a hand is detected

true: mouse and touch are turned off and only the finger and pinch are used

false: mouse and touch are active and the finger and pinch are not used

In all cases, the hand cursors still show, have data, and dispatch events.

The cursorMode property can be used to change the mode dynamically. There is also a toggleReplace parameter and property (default true) which lets the user toggle using the hand rather than mouse and press but pinchin thumb and pinky. When a hand replaces the mouse and touch, the cam.replaceCursor is true as is the zim.handCursor. When the mouse and touch are being used then cam.replaceCursor and zim.handCursor are false. The handTrack() method automatically calls a prepareTrack() method if prepareTrack() is not already called. Optionally, the prepareTrack() can be called first to set a variety of options including the cursorMode parameter. The tracking cursors will still show and the cam dispatches "handmove", "handdown", and "handup" events.

// INSIDE A CAM ASK - see docs for Cam()

// optional - use prepareTrack() with the following parameters:
// width, height, hand, pinchColor, pinchHide, leftColor, rightColor,
// handScale, handAlpha, damp, gapTime, tapTime, cursorMode, toggleReplace
// cam.prepareTrack();

// ML5
const handPose = ml5.handPose(modelLoaded);
function modelLoaded() {
	handPose.detectStart(cam.getCanvas(), result);							
	function result(results) {
		// handTrack() replaces mouse and touch 
		// with hand and pinch interaction if a hand is detected
		// prepareTrack() is automatically called 
		cam.handTrack(results); 		
	}
}		

WORKINGS
When replaceCursor is true, We pass the finger location directly into CreateJS.
We use the remoteCursor system that we made in CreateJS for handling TextureActive raycast data from threejs.
The ZIM cam module alreay had a CamCursor() class... but it is custom pixel tracking and a little slow.
The ML5 Tracking is the best we have seen... and we have been doing this for 20 years (back in Flash).

2. ML5 EXAMPLES IN ZIM

https://zimjs.com/ml5

ML5 - Machine Learning library at https://ml5js.org/
has a bunch of AI features built on TensorFlow - from Google AI.
We have made a mini-site demonstrating most but not all features.


ML5 EXAMPLES

https://zimjs.com/ml5/image.html Image Classifier

https://zimjs.com/ml5/hands.html Hand Tracking

https://zimjs.com/ml5/finger.html Finger Tracking

https://zimjs.com/ml5/skeleton.html Hand Skeleton

https://zimjs.com/ml5/pinch.html Pinch Tracking

https://zimjs.com/ml5/face.html Face Tracking

https://zimjs.com/ml5/box.html Face Box

https://zimjs.com/ml5/eyes.html Face Eyes

https://zimjs.com/ml5/body.html Body Tracking

ML5 can give very accurate hand poses, face poses and body poses and results return points.
These points can be used to place ZIM objects or with a ZIM Shape to make circles, etc.
There are other features too like shape recognition, blurring backgrounds, etc.
These can all be used in ZIM - for using ML5 for interaction see the HAND TRACKING section above.

3. ZIM CAROUSEL3D

https://zimjs.com/018/carousel3D.html

A 3D carousel that cycles through items as it is swiped
or using next(), prev() or go() methods or index property.
Can be horizontal or vertical.

// widthFactor 2.5 will spread the items more in the width 
// heightFactor 10 will increase height difference 
// curve .6 will curve them a little more
const carousel = new zim.Carousel3D(700, 500, pages, 2.5, 10, .6)
	.center()
	.change(()=>{
		indicator.index = carousel.index;		
	});	

// optional indicator
const indicator = new Indicator({
	width:pages.length*20,
	height:25,
	num:pages.length,
	interactive:true,
	toggleFirst:false,
	delayLights:true
}).pos(0,80,CENTER,BOTTOM).change(()=>{
	carousel.go(indicator.index);
});

// optional arrows
new Arrow().pos(50,0,RIGHT,CENTER).tap(()=>{
	carousel.next();
});
new Arrow().rot(180).pos(50,0,LEFT,CENTER).tap(()=>{
	carousel.prev();
});

4. ZIM DAT

https://zimjs.com/018/dat.html ZIM Dat(file) can now be used for preloaded txt or json files. This is a wrapper class for ZIM asset(file). Use the data property to get the data - for instance, new Dat(file).data. JSON files will be automatically parsed. The asset(file) can still be used if desired. This can be lazy loaded with and comes with a complete (or ready) event but it is not like a promise or a lazy loaded image or sound it can't be used until it is complete.

new Frame(FIT, 1024, 768, light, dark, ready, "stats.json");
function ready() {	
	zog( new Dat("stats.json").data ) // a JSON parsed object		
}

5. ZIM PHYSICS PUPPET

https://zimjs.com/018/puppet.html
Normally, objects with physics should not be animated or dragged with ZIM
but rather they should be moved with physics forces or the physics drag.
Now, we can use puppet() to make an object with physics follow an object without physics.
The object without physics can be animated, wiggled, dragged with ZIM drag(), etc.
and the object with physics will be joined with the equivilant of a mouseJoin
objectWithPhysics.puppet(objectWithoutPhysics) - there is also puppetOff().
Then animate(), wiggle(), zim drag(), gesture(), transform(), etc. can be used.
note: it is the x and y property only, not rotation or scale.

// make sure to import zim_physics
new Physics();
const circle = new Circle(20,red)
	.center()
	.wiggle("x", null, 100,200,1,2)
	.wiggle("y", null, 100,200,1,2); // note - no physics
const ring = new Circle(100,clear,purple,2)
	.center()
	.addPhysics()
	.puppet(circle); // ring will follow circle
new Rectangle(100,100,purple)
	.reg(CENTER)
	.center()
	.mov(50,50)
	.addPhysics(false); // static

6. LABEL LETTERS IMPROVEMENTS
   https://zimjs.com/018/justify.html
   Added labelWidth to LabelLetters to line break at LabelWidth
   Added lineAlign JUSTIFY to LabelLetters and lineAlignLast parameters.
   Added JUSTIFY to global variables

new LabelLetters({
	label: "Will this wind be so mighty as to lay low the mountains of the uuuug?",
	lineWidth: 400,
	lineAlign:JUSTIFY,
	// lineAlignLast:JUSTIFY, // or LEFT, RIGHT, CENTER
});

7. ZIM MOTIONCONTROLLER TILEOBJ

https://zimjs.com/018/tileobj.html

Added tileObj to MotionController for keydown, dPad, gamebutton, and gamestick
Added moveGrid property to get or set the allowed moves specified by the tileObj
This let users move an object on a tile game board. Off-limit tiles can also be set.
This is not path finding - for path finding, use the game module Board with EasyStar.

const tileObj = {
	animate:true,
	cols:10,
	rows:4,
	w:70,
	h:70,
	spacingH:3,
	spacingV:3,
	startCol:1,
	startRow:1,
	moves:[
		[1,1,1,1,1,1,1,1,1,1],
		[1,1,1,1,1,0,1,1,1,1],
		[1,1,1,0,0,0,0,0,1,1],
		[1,1,0,0,0,0,0,1,1,1],
		[1,1,1,1,0,1,1,1,1,1],
		[1,1,1,1,1,1,1,1,1,1]
	]
}

if (tileObj.moves) {
	tileObj.cols = tileObj.moves[0].length;
	tileObj.rows = tileObj.moves.length;
}
const tile = new Tile(
	new Rectangle(tileObj.w,tileObj.h,white).reg(CENTER),
	tileObj.cols,tileObj.rows,
	tileObj.spacingH,tileObj.spacingV
)
	.alp(.8)
	.center();	
// hide tiles that are off limits
if (tileObj.moves) {
	loop(tile.items2D, (row,j)=>{
		loop(row, (item,i)=>{
			if (!tileObj.moves[j][i]) item.color = clear;
		});
	});
}
const player = new Circle(25,red).loc(tile.items[1]);
new MotionController({target:player, damp:1,  type:dPad, tileObj:tileObj});

8. PERMISSIONASK

Removed ZIM Frame() sensors parameter and added creating the events to PermissionAsk()
So now, always use PermissionAsk() for cam, mic, devicemotion, or deviceorientation events
Tidied up the code for PermissionAsk().

const ask = new CamAsk().show(yes=>{
	// if the user answers yes to the CamAsk
	if (yes) {
		// new Cam() will trigger the Browser asking for permission
		// unless already have given permission in this session
		let cam = new Cam(1280,720);
		cam.on("ready", ()=>{
			// code here
			cam.scaleTo().center().alp(.2);		

		});            
		// if the user does not accept the browser asking...

ZIM 017

0. BUBBLING VIDS

https://www.youtube.com/watch?v=yfgpkRGkwXc - ZIM 017 Has Launched!
https://www.youtube.com/watch?v=i4GyEDK-W6Q - ZIM Chat Bot for AI Coding
https://www.youtube.com/watch?v=BQUrLWlLHv4 - Rive Integration - Interactive Graphics Tool
https://www.youtube.com/watch?v=WBvLtb9d3HM - Outline Image and Concave Physics
https://www.youtube.com/watch?v=ZCiR8lMwR4g - Accordion, Indicator, Continuous Pages updates
https://www.youtube.com/watch?v=X4ius2KLY74 - General Updates
https://www.youtube.com/watch?v=-OTI4l2zY7M - Data to and from NodeJS
https://www.youtube.com/watch?v=WC4fAcr2EUw - Drop with Drag and Lists
https://www.youtube.com/watch?v=R81uUfEsiOc - Slicer for n-Slicing and 9-Slicing

1. CHAT BOT

https://zimjs.com/bot

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

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

2. RIVE INTEGRATION

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

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

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

Rive() handles animation, input and nodes

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

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

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

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

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

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

r.display.center();

3. VALUE AND INDEX

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

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

4. DROP FOR LIST AND DRAG
   https://zimjs.com/017/canvas.html
   https://zimjs.com/017/dropping.html

We can now drag and drop items from one list to another.
And from a list to a target display object and from a display object to a list.
And in general drop any display object onto another target display object.
The dropping example above shows dropping in and out of lists.
The two code examples below have dropping between lists and without lists.

// between Lists
const w = 60;
const h = 60;
STYLE = {
    Rectangle:{width:w, height:h, color:series(blue,green,orange,yellow,pink)},
    List:{vertical:false, spacing:null, viewNum:9, drop:true}
}
const items = [];
loop(40,()=>{items.push(new Rectangle())})
const list = new List(600, h*1.5, items).center().mov(0, -100);

const items2 = [];
loop(40,()=>{items2.push(new Rectangle())})
const list2 = new List(600, h*1.5, items2).center().mov(0,100);

list.dropTargets = list2;
list2.dropTargets = list;

// with just drag()
const rectangles = new Tile(new Rectangle(130,130).reg(CENTER),3,1,50,0).pos(0,100,CENTER,CENTER);
new Tile(new Circle(50,series(red,blue,pink)),3,1,70,0).pos(0,-100,CENTER,CENTER).drag({
    dropTargets:rectangles.items,
    // dropEnd:false,
    // dropCopy:true,
    // dropBack:false // and more!
});

See the many drop parameters of List() and drag() - these are quite similar.

// LIST
drop - get or set to allow drag and drop of items onto the current lists - see drop parameter
dropTargets - get or set a list or an array of lists to drop an item from the current list - see dropTargets parameter
dropColor - get or set the color of the diamond reticle that indicates where an item will be dropped - see dropColor
dropReticle - each list that can be dropped on gets a dropReticle property that is the ZIM rectangle
so individual reticles can be adjusted - say different colors for different lists
dropItem - after a dropdown event, the dropItem is the ghost being dragged
dropIndex - after a dropdown event, the dropIndex is the original index of the item being dragged
dropTarget - after a dropup event, the dropTarget is the object the item was dropped into (could be original list)
dropNewIndex - after a dropup event, the dropNewIndex is the index in the list the item has been dropped

// DRAG
dropTargets - an object or an array of objects that can receive a drop
this can be a List or a Container or a single object
if it is a list see the dropListProps as well to set reticle properties and scroll speed
dropCopy - (default false) make a copy of the object as it is being dragged
dropSnap - (default true) snap to the target object
dropBack - (default true) go back to start if not dropped on a target
dropEnd - (default true) once dropped on a target a noMouse() is set on the object
dropFull - (default true) do not drop on a full target
note - if the object is removed from the target then a drop can occur again on that target
dropHitTest - (default "bounds") can also be "reg", "circles", "circle", "rect" - see ZIM HitTests
dropScale - set a scale for the dropped object
dropWidth - set a width for the dropped object - overrides scale
height will keep aspect ratio unless dropHeight is provided
dropHeight - set a height for the dropped object - overrides scale
width will keep aspect ratio unless dropWidth is provided

Dropped objects have a dropTarget property saying which target was dropped on
and a dropList for which list, if any, the object came from.

5. N-SLICING

https://zimjs.com/slicer/

Added ZIM SlicedBitmap() to DisplayObjects, Slicer() to Components, and SlicerTypes() to Meta.
These work with n-slicing which is an advanced version of traditional 9-slicing.
The Slicer lets you make slices and types data to pass to a SlicedBitmap.
The SlicedBitmap can then have its slicesWidth and slicesHeight changed - and transform() now defaults to use these.
Certain regions will then be fixed, stretched or tiled depending on the types setting.

// Assuming a new Pic is preloaded
// slice the pic in four at 25% from the edges, scale the middle and keep the sides and corners not scaled.
new SlicedBitmap(1600, pic.height, pic, [[0.25,0.75],[0.25,0.75]], [[0,1,0],[0,1,0]])
    .center()
    .transform({minScaleX:.05, minScaleY:.05});

6. OUTLINE IMAGE

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

Added an outlineImage() function to the Code Module
that returns poi...

ZIM 016

1. SHADERS

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

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

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

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

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

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

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

2. EMITTER CONFIGURATOR

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

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

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

3. NORMALIZE AND RATIO - IMPROVEMENT

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

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

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

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

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

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

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

tile.dispose();

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

4. SORTBY

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

5. RANGE - IMPROVEMENT

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

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

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

6. WIGGLE DEFAULT BASEAMOUNT AND END ON START - IMPROVEMENT

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

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

7. NEW FORUM - IMPROVEMENT

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

The messages will persist and not be removed after three months

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

8. LABELWORDS - IMPROVEMENT

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

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

9. OBJECTCONTROLS - IMPROVEMENT

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

ZIM 015

BUBBLING VIDEOS

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

1. TEXTURE ACTIVES

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2. THREE HELPER MODULE

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

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

3. NPM, GITHUB, TYPESCRIPT

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

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

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

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

4. TIMELINE

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

ZIM 014

ZIM 014 - https://zimjs.com

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

https://zimjs.com/updates.html

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

STORE

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

NEW SITE HEADER

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

NEW SITE

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

EDITOR

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

MOBILE SYSTEM KEYBOARD STAGE SHIFT

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

GLOBAL CUSTOM CURSORS

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

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

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

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

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

DRAG SLIDE FRICTION

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

ZIM PHYSICS

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

HIERARCHY - (AND LIST)

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

ZIM 02

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

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

ZIM 02

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

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

ZIM 01

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

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

ZIM 01

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

ZIM 00

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

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

ZIM ZIM 00

PIC, VID, AUD, SVG CLASSES

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

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

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

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

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

PATH = "assets/";

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

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

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

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

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

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

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

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

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

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

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

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

1. ES6 MODULES

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

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

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

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

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

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

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

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

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

</script>

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

2. PIXEL

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

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

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

3. SITE

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

4. COLOR PICKER SPECTRUM

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