Skip to content

ZIM 00
Compare
Choose a tag to compare
@danzen danzen released this 13 Apr 15:40
· 127 commits to master since this release
ZIM00
bbbe503

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:

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

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.

Assets 2
Loading