DEV Community: Dr Abstract

Which Framework to use for Making eLearning Apps

Dr Abstract — Fri, 06 Mar 2026 02:45:47 +0000

We asked a prominent code influencer to review and find the best framework for making e-learning apps. Here is the conclusion.

ZIM stands out as the premier framework for interactive learning apps, achieving the highest possible average score of 10 across 20 app types. Its strengths lie in its comprehensive, out-of-the-box toolkit, which covers nearly every type of interactive experience a learning app might need. For kids apps, ZIM excels in educational content, learning games, creativity tools, sandbox play, puzzles, storybooks, habit-building, and safe social interactions. For visual e-learning apps, it dominates in interactive simulations, gamified learning worlds, creative projects, microlearning modules, collaborative learning, and 3D/VR exploration.

Key features make ZIM exceptionally well-suited for these applications: Rich component library including sliders, dials, selectors, indicators, radial menus, making quizzes and assessments more engaging. ZIM Pen for creating dynamic, pattern-rich drawing tools and creative exercises. ZIM Socket for real-time collaborative experiences. Emitter for instant feedback and reward mechanics. Bind + Base for effortless storage and retrieval of user progress. ZIM is strongest for interactive simulations, storytelling, gamified learning, microlearning, creative apps, and skill-building.

Built-in multimedia, animation, and physics support, allowing developers to create highly interactive, playful, and immersive learning experiences without relying on multiple external libraries.

Overall, ZIM’s unparalleled versatility, interactivity, and integrated tools make it the most efficient and powerful choice for developers building both kids apps and visual e-learning apps. Whether creating games, simulations, story-based lessons, or collaborative exercises, ZIM consistently allows rapid prototyping and high-quality delivery.

ZIM can be found at https://zimjs.com. ZIM is a general canvas framework that provides many conveniences, components and controls.

Any questions, please ask!

Use ML5 with ZIM for Integrated Hand Tracking and More on the Canvas!

Dr Abstract — Sat, 13 Sep 2025 19:54:11 +0000

Imagine waving your hand in the air and having your app cursor follow your finger and activate by pinching. We have seen this before in movies and some experimental demonstrations. Now, it is full integrated in ZIM.

This means that any of the fifty ZIM components like sliders, buttons, tabs, etc. work by waving and pinching. ML5 tracks the hand and feeds the information to ZIM which adds the movements to its core interactions. These bubble up and now events that work with mouse or touch also work with levitated fingers and pinch.

Above we demonstrate moving a slider by pinching on its button and dragging our hand in the air. See Hand Tracking with ZIM and ML5.

We also created nine ZIM / ML5 examples in an afternoon.

Here is a vid of using ZIM integrated hand tracking with ML5:

Here is the ZIM Code:

<script src="https://unpkg.com/ml5@1/dist/ml5.min.js"></script>

<script type="module">

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

// See Docs under Frame for FIT, FILL, FULL, and TAG
new Frame(FIT, 1024, 768, black, licorice, ready);
function ready() {

    // given F (Frame), S (Stage), W (width), H (height)
    // put code here

    const ask = new CamAsk().show(yes=>{    

        if (yes) {          
            let cam = new Cam();   
            cam.on("ready", async ()=>{ 

                cam.scaleTo().center().alp(.2);
                const handPose = await ml5.handPose();              
                handPose.detectStart(cam.getCanvas(), result);  
                function result(results) {
                    cam.handTrack(results);             
                }           

                new Circle(50,red).center().drag();
                new Label("pinch to drag circle", 30, null, tin)
                    .pos(0,100,CENTER,BOTTOM);

                const message = new Pane("Button Selected!", green);
                const button = new Button()
                    .pos(0,100,CENTER)
                    .tap(()=>{message.show();});

            });   

            // if the user does not accept the browser asking about cam
            cam.on("error", ()=>{
                new Pane("CAM not accepted",yellow).show();
            });             
        } else { // answered no to CamAsk dialog
            new Pane("CAM not accepted",yellow).show();
        }   
    }); 

}

Interactive Textures in three.js

Dr Abstract — Sat, 28 Oct 2023 17:51:44 +0000

ZIM has introduced ZIM TextureActive to make interactive textures on any mesh material in three.js. See https://zimjs.com/015 for the examples. We show VR examples first and then general three.js examples beneath that.

See the resource post here:

TextureActives Resource on three.js Forum

Hey - want to learn to code the Canvas?

Dr Abstract — Sun, 11 Jun 2023 17:15:04 +0000

ZIM is the easiest fastest way to code the HTML Canvas with nice simple JavaScript!

new Circle(100,red).center().drag();

We have an online editor at https://zimjs.com/editor and this has a Starting Example!

Have fun!

Interactive Animation

Dr Abstract — Wed, 28 Sep 2022 19:32:21 +0000

Here is a full info page with code and ZIP file:
Interactive Animation

And a full article on Medium:
What is an Interactive Animation and how to make one

SPRITES

Image animations can be made with Sprites. A Sprite is created using a SpriteSheet which is an image that holds pictures of all the frames. Animators make animations and can export the images. These can then be packed onto a SpriteSheet using a tool such as TexturePacker. Here is a FREE VERSION.

We use the ZIM JavaScript Canvas Framework to show the Sprite. Here is some sample code to add a Sprite to an HTML page:

<html>
<head>
<title>Sprite on Canvas</title>

<script type=module>

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

// files from TexturePacker have been put in an assets/ folder
const assets = ["drabstract.png", "drabstract.json"];
const path = "assets/";

// See Docs under Frame for FIT, FILL, FULL, and TAG
new Frame(FIT, 1024, 768, dark, light, ready, assets, path);
function ready() {

    new Sprite({json:"drabstract.json"}) 
        .center()
        .run({
            time:3.5,
            rewind:true,
            rewindWait:5,
            loop:true,
            loopWait:5
        });        
}

</script>
<meta name="viewport" content="width=device-width, user-scalable=no" />
</head>
<body></body>
</html>

INTERACTIVITY

With ZIM, we can control the sprite with various events like: mousedown, mousemove, pressmove, keydown, gamestick or a change event from various components like sliders and dials.

ZIM gives us the following features that help with Interactive Animation:

Sprite — the animation, usually runs at a specified speed
Dynamo — makes the Sprite run at variable speeds
Scroller — handles scrolling backgrounds
Accelerator — runs all the animations at a percent speed
MotionController — controls with mouse, key or gamepad

Here is an interactive animation scene that could be used in a portfolio piece or it might be a promo for a game or a little feature on the banner of a Website.

Use CTRL or ⌘ U to view the commented code. In the example:

Moving the mouse moves the scene
Pressing makes the space guy shoot
Scrollers make the scene move in parallax
A Dynamo allows the Sprite to vary speed
An Accelerator provides percent speed
A MotionController operates the Accelerator
A Button toggles the background sound

Here is the code for the page with comments:

<script type=module>

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

// This is an array to list all the sprite, sprite data, pictures and sounds
const assets = [
    "spritesheet.png", "spritesheet.json",
    "ground.png", "foreground.png", "midground.png", "background.png",
    "shoot.mp3", "sneak.mp3"
];
const path = "assets/"; // this is the directory with all the assets

// If there are a few assets then use a Waiter() - moving dots
const progress = new Waiter({backgroundColor:blue, corner:0});

// If there are a lot of assets we might want a Progress bar - use this instead 
// const progress = new ProgressBar({foregroundColor:blue});

// The first parameter is how to scale the stage into the browser window
// There is also FILL, FULL, and TAG - which would embed the animation in the HTML
// See https://zimjs.com/frame.html for more examples
// Then we have the color, outer color, the function to start the app,
// and the assets, path, and optional waiter (or progress bar)
new Frame(FIT, 1024, 618, lighter, darker, ready, assets, path, progress);
function ready() {

    // given F (Frame), S (Stage), W (width), H (height)    

    // ~~~~~~~~  SPRITES  ~~~~~~~~
    // A Sprite is an animation made up of multiple pictures found in a SpriteSheet(s)
    // The Sprite images can be made in an image editor or animation software 

    // SPRITE SHEETS
    // A SpriteSheet is a collection of images that make up the animation
    // We tend to use TexturePacker to pack the animation images into a SpriteSheet 
    // https://www.codeandweb.com/texturepacker
    // Use the Basic Algorithm rather than MaxRects
    // TexturePacker has an "export data to CreateJS (EaselJS)" which is what ZIM is built with
    // The spritesheet.json file is an example of the output from TexturePacker
    // which tells ZIM the dimension and position of the frames on the SpriteSheet
    // We adjusted the data to include the local path: "assets/spritesheet.png"
    // We added optional custom animations to the bottom of the data
    // which have a label followed by the frame [number range] to run
    // In the code below we run() a label to animate those frames to "walk" or "shoot"
    // There are more options for animations than just frame ranges
    // see https://zimjs.com/docs.html?item=Sprite under Parameters > animations

    // DYNAMIC SPRITE CREATION
    // In this example, we control the speed of scene with the mouse position
    // We use a ZIM Dynamo to dynamically control the speed of a Sprite
    // We have backgrounds in a ZIM Scroller() 
    // Each is set with a speed for parallax - distant ones slower, closer ones faster    
    // We use a ZIM Accelerator to combine control of the Dynamo and the Scrollers
    // and the speed of the Accelerator is controlled by a ZIM MotionController 
    // This can be set to keydown, gamestick, pressmove, mousemove, etc. 

    const sprite = new Sprite({json:"spritesheet.json"})
        .centerReg() // centers on stage and also prepares it to flip about its center
        .mov(0, 110) // down is positive in Interactive Media

    // A Dynamo will allow a Sprite to run at varying speed
    // Give the dynamo a default speed and add the dynamo to the accelerator object
    // reversible would make the Sprite walk backwards with negative speed 
    // we do not want that - we want to walk forwards but flip the Sprite
    // flip will automatically be true if reversible is false 
    const dynamo = new Dynamo({sprite:sprite, speed:30, label:"walk", reversible:false});

    // An Accelerator will group all animations so we can control them with one percent speed
    const accelerator = new Accelerator().add(dynamo);

    // ~~~~~~~~  SCROLLERS  ~~~~~~~~
    // Scrollers animate the backgrounds
    // They add a second copy of the object being scrolled and swap them as needed
    // The second copy gets added to the scrolled object's Container as they are created
    // If the Sprite is on the stage, the copy may go overtop of the sprite
    // So we put any scrollers for objects behind the Sprite in a container behind the sprite
    // this prevents the copy from coming up above the Sprite
    // NOTE: we are adding the Scrollers to the Accelerator as well
    // so their percentSpeed will be controlled along with the Sprite's percentSpeed

    const backings = new Container(W, H).addTo(S,0); // add backings to stage at level 0
    accelerator.add([
        // a Scroller gets an image and a speed
        new Scroller(new Pic("background.png").addTo(backings), 1),
        new Scroller(new Pic("ground.png").addTo(backings).mov(0,-150), 3),
        new Scroller(new Pic("midground.png").addTo(backings), 2),
        // the foreground is in front of the Sprite, so it can just get added to the stage
        new zim.Scroller(new Pic("foreground.png").addTo().mov(0,-150), 5)
    ]);


    // ~~~~~~~~  MOTION CONTROLLER  ~~~~~~~~
    // The MotionController can alternatively use keydown, gamestick, pressmove, etc.
    // see https://zimjs.com/docs.html?item=MotionController 

    const mc = new MotionController({
        target:accelerator, 
        type:"mousemove",
        axis:"horizontal",
        speed:100,
        minPercentSpeed:-200,
        maxPercentSpeed:200
    })
    // MotionController would start a 0 speed if no mouse movement 
    // so trick the MotionController to thing there is a value to start
    mc.x = 700;

    // ~~~~~~~~  SPRITE INTERACTION ANIMATION  ~~~~~~~~
    // We want to make the sprite shoot when we click on the stage or press the space bar
    // We will pause the Accelerator and not let them shoot again while they are currently shooting
    // We use the shooting check variable to handle this
    // See https://zimjs.com/zide for a more complex example 
    // with code to make sure we go to the end of the walk cycle before we start shooting

    const shootSound = new Aud("shoot.mp3", .3); // .3 is optional volume

    // capture mousedown events on either the backings or the sprite
    backings.on("mousedown", shoot);
    sprite.on("mousedown", shoot);
    // or capture a key press on the Frame 
    F.on("keydown", e => {if (e.keyCode==32) shoot();});

    let shooting = false;
    function shoot() {
        // only shoot if not shooting - the symbol for not is !
        if (!shooting) {
            shooting = true;
            accelerator.pause();
            shootSound.play();
            sprite.run({
                label:"shoot",
                time:.65,
                loop:true,
                loopCount:rand(1,3), // make sure this is non-zero - which would loop forever
                loopCall:() => { // play the sound as we loop
                    shootSound.play();
                }, 
                call:() => { // calls when animation done
                    shooting = false;
                    accelerator.pause(false);
                } 
            });
        }
    }


    // ~~~~~~~~  CREDIT LABEL  ~~~~~~~~
    const credit = new Container()
        .loc(-500, 30)
        .animate({
            props:{x:150}, 
            time:.7, 
            wait:1.3, 
            ease:"backOut", 
            rewind:true, 
            rewindWait:5
        })
        .tap(() => {
            zgo("http://animation.sheridanc.on.ca/portfolio/2018/caggiano", "antonio");
        });

    STYLE = {align:CENTER, valign:CENTER, color:white};
    new Label({
        text:"ANIMATOR",
        backing:new Rectangle(130,30,"black"),
        size:18
    }).ske(20).addTo(credit).loc(40,0);
    new zim.Label({
        text:"ANTONIO CAGGIANO",
        backing:new Rectangle(250,60,pink,green,3),
        size:20
    }).ske(20).addTo(credit).loc(0,43);
    STYLE = {};


    // ~~~~~~~~  BACKGROUND SOUND  ~~~~~~~~
    // We can't play sounds until the app is interacted with (browser rule) 
    // For a game we often make an intro pane they need to close to start 
    // but for an animation demo we may want to start the animation 
    // and provide a little sound toggle at bottom to turn the sound on 

    const sound = new Aud("sneak.mp3"); // backing sound

    let backingSound;
    const toggle = new Toggle({
        label:"music",
        color:tin,
        backgroundColor:blue,
        toggleBackgroundColor:green,
        startToggled:false
    })
        .sca(.5)
        .pos(30,30,LEFT,BOTTOM)
        .change(() => {
            if (!backingSound) {
                backingSound = sound.play(.3, true); // volume and loop
            }
            backingSound.paused = !toggle.toggled;
        });     
}

What you see may look like a lot of code but ZIM saves hundreds of lines of code and is actually very concise and fun to use! Here are some comparisons with other Frameworks.

We hope you have a look at the INFO SITE and the ARTICLE and are successful in making interactive animations! Please join us on SLACK or DISCORD if you have any questions.

Dr Abstract

Introducing Rarity

Dr Abstract — Sun, 20 Feb 2022 16:51:21 +0000

FXHash is an NFT MarketPlace that focuses on Generative Art. They also let artists specify features of the art and calculate a rarity based on the number of times certain values appear for the features.

Above, we have the TimeLord WatchBands by the Author, Dr Abstract. The features can be seen at the right along with the percentages for their values. The total rarity is in the description at the left. The rarity can factor in the resell price for the NFT. The features are sent to FXHash with their specified object literal:

// FXHash feautures format
window.$fxhashFeatures = {
    "Bands (Trio)": bands,
    "Fidelity (Trio)": capitalizeFirst(size),
    "Complexity (Trio)": capitalizeFirst(complexity), 
    "Watch (Trio)": capitalizeFirst(watchType),
    "Material (Hex)": capitalizeFirst(effects),
    "Lineage (Trio)":lineage
}

Rather than using a random number for a feature value it is best to pick certain values so the rarity calculations work better. For instance, if complexity could be a random number in a range from 0-100 then everyone would likely get a high rarity but if the odds are distributed to certain values then we can control the rarity.

ZIM at https://zimjs.com is a JavaScript Canvas Framework for coding creativity. We have added a rarity() function that helps distribute rarity. The function has two main settings, a simple setting and a payload setting - which builds in a look-up table.

// a simple version of rarity()
// pass in an object literal with feature and frequency
// rarity returns an array of features matching their frequency
// so there are 80 Mysterious, 5 Lady and 15 Lord strings
// the odds then will e 80/100, 5/100 and 15/100
// the total does not need to add to 100 
// note, the array is auto shuffled and we get the first item
const lineage = rarity({Mysterious:80, Lady:5, Lord:15})[0];

Above we have the simple example - this returns a shuffled array of strings that match the frequency values. We get the first element so lineage will be probably Mysterious, but maybe Lord and unlikely be Lady. We then passed that into the Linage property of the FXHash object. If we needed to later, we could use a conditional on lineage to add a certain signature in the art.

// a payload version of rarity()
// here, we pass an array in as the feature value
// the array has the frequency first and then a payload 
// the payload can be any object
// again, we are getting the first element
// of the returned randomized rarity array
const size = rarity({
    tight:[1,5],
    perfect:[10,7],
    loose:[10,10],
})[0];

// we now have a String object stored in size
// for instance, this might be perfect.
// note we use capitalizeFirst(size) 
// this has two effects - it capitalizes
// but also converts the String object to a primitive string
// FXHash requires a primitive string
// but for the payload to work, size is a new String object

// here we use the payload that is stored on the String object
circle.scale = size.payload;

Above we show how to access the payload. We could have used another object literal as a lookup table for the feature. But we decided to build it right in to the rarity() function. The only drawback is that the feature becomes a String or Number object so that it can hold the payload. So the result must be cast as a String or Number to turn it to a primitive - which happens to be needed by FXHash for its object. We have contacted them to request they auto cast and we shall see...

Here is a sample where we wanted to call the feature something special but then want blend modes to use. So we add the blend mode name to the payload position:

const effects = rarity({
    "electric":[20,"overlay"],
    "pixel":[5,"color"],
    "soft":[5,"soft-light"],
    "tron":[1,"destination-in"],
    "aztec":[1,"saturation"],
})[0];

PLUCK, SEEDRANDOM, REPEATS

We have also added pluck() to grab a random element from an array. Previously, we would use shuffle(array)[0].

We have added repeats() to return how many times repeats occur in an array. This is a handy thing to base rarity on. For instance, rather than doing a rarity for a color of four different things, instead, base rarity on how many times a color repeats across the four different things.

let colors = [
    green.darken(.2),
    blue.darken(.2),
    yellow.darken(.2),
    pink.darken(.2)
]
let color1 = pluck(colors);
let color2 = pluck(colors);
let color3 = pluck(colors);
let color4 = pluck(colors);

let colorRepeats = repeats([color1, color2, color3, color4]); 
// will be 0,1,2 or 3

We have added seedRandom() to seed the random number. This is important in how FXHash works - where based on the NFT ID, the generative art should generate the same art each time for that ID. So we just pass the FXHash variable to seedRandom() and it works perfectly. Any rand() we use or any of the ZIM VEE values for dynamic parameters, etc. will make the same set of random numbers for a specific seed.

seedRandom(FXHash);

// r1 will always be same for same seed
const r1 = rand(100); 

// r2 will probably different from above
// but will always be the same for the same seed
const r2 = rand(100);

So you see, we are working to make creating interactive and generative NFTs as simple as possible with ZIM.

To find out more - see our previous DEV post on making interactive NFTs or visit https://zimjs.com/nft

Cheers - please join us at https://zimjs.com/slack and https://zimjs.com/discord for our ZIM community!

Dr Abstract

Creating Interactive NFTs

Dr Abstract — Fri, 05 Nov 2021 03:24:42 +0000

I have made TWENTY interactive NFTs in two months and made $2000 from them! Here is the information:

https://zimjs.com/nft

This uses the ZIM JavaScript Canvas to code creativity.

https://zimjs.com

The reason we did this is not to make money but to show you that you can make interactive NFTs with ZIM.

For instance, here is the code to make an interactive puzzle in ZIM:

const scaling = FIT; 
const w = 1000;
const h = 1000;
const color = darker;
const outerColor = darker;
const pic = "danzen_0000.jpg";
const path = "assets/";

var frame = new Frame(scaling, w, h, color, outerColor, pic, path);
frame.on("ready", () => {

    const num = 4;    
    const t = chop(asset(pic), num, num);
    const s = new Scrambler(t).center();
    s.scramble(2,0,4); // time, wait, num
    s.on("complete", () => {
        // show and animate final picture
        asset(pic).centerReg().animate({
            props:{scale:1.3},
            rewind:true,
            time:.2,
            loopCount:2,
            call:a=>{a.removeFrom();}
        })
        s.scramble(2,3,4);
    });

});

These are selling quickly and are up for resale at 60 Tez which is approximately $400.

https://www.hicetnunc.xyz/objkt/466071

Now, I would rather you not flood the market with such puzzles as I am doing that! But we have made all sorts of wonderful gadgets and if you want to as well, please see:

https://zimjs.com/gadgetminters

All the best, and we are happy to discuss further at:

https://zimjs.com/discord
https://zimjs.com/slack

Next Version?

Dr Abstract — Sat, 24 Jul 2021 16:19:40 +0000

Dr Abstract will announce the next version of ZIM at the ZIM ZOOM on Thursday, July 29 at 12pm EST. The invite link can be found here https://zimjs.com/zoom

ZIM is a JavaScript Canvas Framework with conveniences, components and controls to help code creativity! https://zimjs.com

Currently, we are on ZIM Cat 04 and will move to a new major version beyond Cat. Please join us - all are welcome - on ZOOM as we announce the next version and will have time for conversation and questions.

ZIM has been called a "criminally underrated framework" - come see why!

To Jigsaw or not to Jigsaw?

Dr Abstract — Wed, 21 Apr 2021 16:45:37 +0000

I have been making interactive media since 1995... I have always avoided making jigsaw puzzles as they are the classic example and quite overdone. I would encourage my students to go beyond and at least make the pieces moving video parts or something different.

Well, on Discord https://zimjs.com/discord, someone was posting problems using code with a blog post from a while back - https://www.emanueleferonato.com/2018/03/13/build-a-html5-jigsaw-puzzle-game-with-zim-framework/ - I started to help but then felt it would be better to update the code as the blog post was quite popular. The result is found on CodePen at - come give it a fork and heart!

https://codepen.io/danzen/pen/rNjQWRY

It is fairly tricky to do a jigsaw puzzle. We have an alternative in ZIM called the Scrambler() which is just a few lines of code to implement. See https://zimjs.com/cat/scrambler.html. But in doing the Jigsaw, we really had to use many parts of interactive media.

The puzzle parts themselves are drawn with a Shape. We figured it would be good use a class here and make it so we can pass the format of the piece as an array of four sides with 1 being a bump out, 0 being no bump and -1 being a bump in:

// ~~~~~~~~~~~~~~~~~~~~~
// CLASS to make JigSaw piece with bumps out or in or no bump on any four edges
class Piece extends Shape {
    // format is 1 for bump out, -1 for bump in and 0 for no bump
    constructor(w=100,h=100,format=[1,1,1,1],s=black,ss=4,f=white) {
        super(w,h);
        const p = Piece.part; // static property - defined below class
        const g = Piece.gap;
        // s() stroke, ss() strokeStyle, f() fill
        // mt() moveTo, lt() lineTo, ct() curveTo()
        this.s(s).ss(ss).f(f).mt(0,0);
        if (format[0]==0) this.lt(w,0); // top left-right
        else {
            this.lt(w*p,0);
            let s = format[0]==1?-1:1; // sign                
            this.ct(w*(p-g/2), s*w*g, w/2, s*w*g); // curve left to middle
            this.ct(w*(p+g+g/2), s*w*g, w*(1-p), 0); // curve middle to right           
            this.lt(w,0)
        }            
        if (format[1]==0) this.lt(w,h); // right top-bottom
        else {
            this.lt(w,h*p);
            let s = format[1]==1?1:-1; 
            this.ct(w+s*w*g, h*(p-g/2), w+s*w*g, h/2);
            this.ct(w+s*w*g, h*(p+g+g/2), w, h*(1-p));                
            this.lt(w,h)
        }            
        if (format[2]==0) this.lt(0,h); // bottom right-left
        else {
            this.lt(w*(1-p),h);
            let s = format[2]==1?1:-1;           
            this.ct(w*(p+g+g/2), h+s*w*g, w/2, h+s*w*g);
            this.ct(w*(p-g/2), h+s*w*g, w*p, h+0);                
            this.lt(0,h)
        }            
        if (format[3]==0) this.lt(0,0); // left bottom-top
        else {
            this.lt(0,h*(1-p));
            let s = format[3]==1?-1:1;             
            this.ct(s*w*g, h*(p+g+g/2), s*w*g, h/2);
            this.ct(s*w*g, h*(p-g/2), 0, h*p);             
            this.lt(0,0)
        }
        this.cp(); // close path
    }        
}
Piece.part = .37; // part of the edge with no gap ratio
Piece.gap = 1-Piece.part*2; // gap ratio of edge

As you can see, it is tricky to do the four sides using absolute positioning. Would have perhaps been better to use ZIM Generator() which does relative position - so we could use the same code for each side and rotate 90 before going to the next side. Anyway - it was not that bad, just a bit of mental twisting.

We wanted to have a version of the puzzle without the images that we could use as a hint. So the puzzle piece class did not use images - but rather just the shape.

Placing the shapes in position was also a challenge. We do not want bumps on the edges and the bumps have to align going from one piece to the next. We put a system in place inside the loop to handle the opposite of the last bump. Then we made sure there were no bumps for the edges.

// ~~~~~~~~~~~~~~~~~~~~~
// PIECES
// makePieces gets called from Tile - for each piece
let count=0;
let lastX = rand()>.5?1:-1; // 1 or -1 for out or in horizontally
let lastYs = []; // 1 or -1 vertically - remember with array and modulus
loop(numX, i=>{lastYs.push(rand()>.5?1:-1);});
function makePiece() {   

    // prepare format for jigsaw piece [1,0,-1,0] 
    // 1 bump out, 0 no bump, -1 bump in, etc.
    let currentX = lastX*-1; // opposite of last x
    let currentY = lastYs[count%numX]*-1; // opposite of last y
    let nextX = rand()>.5?1:-1; // randomize the next 1 or -1 for out or in horizontally
    let nextY = rand()>.5?1:-1; // and vertically
    // top, right, bottom, left
    let format = [currentY, nextX, nextY, currentX]; 
    lastX = nextX;
    lastYs[count%numX] = nextY;       

    // override edges to 0
    if (count < numX) format[0] = 0;
    else if (count >= numX*numY-numX) format[2] = 0;
    if (count%numX==0) format[3] = 0;
    else if ((count-numX+1)%numX==0) format[1] = 0;

    // make a container to hold jigsaw shape and later picture part
    let piece = new Container(w,h).centerReg({add:false});
    piece.puzzle = new Piece(w, h, format).addTo(piece);      
    piece.mouseChildren = false;  
    count++;
    return piece;
}

const pieces = new Tile({
    obj:makePiece, 
    cols:numX, 
    rows:numY,
    clone:false // otherwise makes clone of piece
})
    .center()
    .drag(stage).animate({
        props:{alpha:1},
        time:.1,
        sequence:.05
    });

ZIM has dynamic parameters (called ZIM VEE values - with Pick() https://zimjs.com/docs.html?item=Pick). That means we can pass a function into the obj parameter of the Tile and each time it goes to make an item it will take the return value of the function. This is one of the formats of a dynamic parameter in ZIM. You can also pass in an array which it will randomly pick from or a series that it pics from in order, or a {min, max} object or a combination of these. Very powerful!

For figuring if the puzzle piece is in the right place we made little hit boxes and added them to the hint version of the puzzle which always stays in the right place. We could have used hitTestGrid() to calculate the right place but the hit boxes is easier to visualize and work with.

// ~~~~~~~~~~~~~~~~~~~~~
// HINT AND SNAP HIT BOX
const hint = pieces.clone(true) // exact
    .center()
    .ord(-1) // under pieces     
    .cache(-5,-5,pic.width+10,pic.height+10) // cache by default does not include outside border 
    .alp(.2)
    .vis(0); // checkbox below to show

// make a little box to do hit test to see if in right place
const snap = 50; // pixel distance considered correct
loop(hint, h=>{
    h.box = new Rectangle(snap,snap).centerReg(h).vis(0); // do not use alpha=0 as that will make it not hittable        
});

We then want to scramble the pieces both in position and rotation and add events to test if the piece is in the right place and if the whole puzzle is done. This is tricky as a single tap should rotate the piece but this should not happen if the piece is dragged. ZIM has tap() built in to handle a quick tap at one location. We are also animating rotation and do not want that process interrupted as that might leave us with a partially rotated piece.

// ~~~~~~~~~~~~~~~~~~~~~
// ADD PICTURE TO PIECES, ADD EVENTS, ROTATE AND SCRAMBLE
const padding = 50;
const rotate = true;
loop(pieces, (piece,i)=>{
    piece.alp(0); // sequence animation above will animate in alpha
    pics[i].addTo(piece).setMask(piece.puzzle);  
    // test on mobile and see if you need to cache...
    // usually this is just cache() but the bumps are outside the piece 
    // and the cache size really does not make a difference if rest is background transparent 
    if (mob) piece.cache(-100,-100,piece.width+200,piece.width+200);
    if (rotate) {
        piece.rotation = shuffle([0,90,180,270])[0];
        piece.tap({
            time:.5, // within .5 seconds
            call:() => {   
                pieces.noMouse(); // do not let anything happen while animating until done
                piece.animate({
                    props:{rotation:String(frame.shiftKey?-90:90)}, // string makes relative
                    time:.2,
                    call:() => {
                        pieces.mouse();
                        test(piece);
                    }
                });                
                stage.update();
            }, 
            call2:() => { // if no tap
                test(piece);   
            }                
        }); 
    } else {
        piece.on("pressup", () => {
            test(piece); 
        });
    }        
    piece.on("pressdown", () => {
        // shadows are expensive on mobile
        // could add it to container so shadow inside container 
        // then cache the container but might not be worth it
        if (!mob) piece.sha("rgba(0,0,0,.4)",5,5,5);
    });

    // scramble location     
    piece.loc(padding+w/2+rand(stageW-w-padding*2)-pieces.x, padding+h/2+rand(stageH-h-padding*2)-pieces.y);        
});

There are several places where we want to test the piece so we have put this functionality in a... function! We also quickly made an emitter for a reward here is the emitter code, followed by the test.

// EMITTER    
const emitter = new Emitter({
    obj:new Poly({min:40, max:70}, [5,6], .5, [orange, blue, green]),
    num:2,
    force:6,
    startPaused:true
});

// TEST FOR PIECE IN RIGHT PLACE AND END
function test(piece) {
    piece.sha(-1);
    let box = hint.items[piece.tileNum].box;
    if (piece.rotation%360==0 && box.hitTestReg(piece)) {
        piece.loc(box).bot().noMouse();
        emitter.loc(box).spurt(30);
        placed++;
        if (placed==num) {
            stats.text = `Congratulations all ${num} pieces placed!`;
            timeout(1, function () {
                emitter.emitterForce = 8;
                emitter.center().mov(0,-170).spurt(100)
            })
            timeout(2, function () {
                hintCheck.removeFrom();
                picCheck.removeFrom();
                picCheck.checked = true;                    
                pieces.animate({alpha:0}, .7);
                outline.animate({alpha:0}, .7);
                hint.animate({alpha:0}, .7);
                pic.alp(0).animate({alpha:1}, .7);   
                new Button({
                    label:"AGAIN", 
                    color:white, 
                    corner:[60,0,60,0],
                    backgroundColor:blue.darken(.3), 
                    rollBackgroundColor:blue
                })
                    .sca(.5)
                    .pos(150,30,LEFT,BOTTOM)
                    .alp(0)
                    .animate({alpha:1})
                    .tap(()=>{zgo("index.html")})
            });                             
        } else stats.text = `Placed ${placed} piece${placed==1?"":"s"} of ${num}`;
    } else stage.update();    
}

To see the full code please fork and heart the CodePen page at

https://codepen.io/danzen/pen/rNjQWRY

All the best,

Dr Abstract - finally, a maker of a Jigsaw Puzzle.

PWA in 20 Minutes!

Dr Abstract — Fri, 12 Mar 2021 13:32:06 +0000

Progressive Web Apps (PWA) are how Web apps can act like Mobile apps. People can save them to their device home screen and launch them from an icon just like a mobile app. They can then open in full screen without the Browser interface. They are also loaded from cache so are fast to load and can run offline. PWAs can access device APIs as well.

Here is a 20 minute video that takes you through the following:

Here is the PWA mobile page for ZIM on the Canvas including and example ZIP and resource links.

Making a mobile app has never been easier. This replaces 70 steps of work to do something similar in Phone Gap / Phone Gap Build. However a main difference is that the mobile app is not in stores. PWAs can be in stores - see Trusted Web Activities for Android and perhaps this article for Apple - or turn to Capacitor.

An important aspect of PWA that we did not talk about is getting a good LightHouse rating to ensure a good user experience.

Fun with Sockets!

Dr Abstract — Wed, 03 Feb 2021 22:05:19 +0000

Sockets are used in mulituser apps like chats, shared spaces, avatar based games, etc. They are the height of Interactive Media and tricky to code as you have to code for the current user and the other users in the same code.

Traditionally socket work is done on the server which means working with sockets can be daunting for front-end coders. We have made it easy with ZIM by abstracting common code to ZIM Socket Server running on Node and SocketIO. And then providing ZIM Socket on the front end. Get the code and see examples at https://zimjs.com/socket

A. Before starting we need to import CreateJS and ZIM and then SocketIO and ZIM socket.js. We also include a zimserver_urls.js just in case the Socket server ever changes - so add this in the head of an HTML page:

<script src="https://zimjs.org/cdn/1.3.2/createjs.js"></script>
<script src="https://zimjs.org/cdn/cat/03/zim_doc.js"></script>

<script src="https://zimjs.org/cdn/2.3.0/socket.io.js"></script>
<script src="https://zimjs.org/cdn/zimserver_urls.js"></script>
<script src="https://zimjs.org/cdn/zimsocket_1.1.js"></script>

B. Here is the ZIM Template to add underneath:

<script>
var scaling = "fit"; 
var width = 1024;
var height = 768;
var color = darker;
var outerColor = dark;
var frame = new Frame(scaling, width, height, color, outerColor);
frame.on("ready", function() {
    zog("ready from ZIM Frame");

    var stage = frame.stage;
    var stageW = frame.width;
    var stageH = frame.height;

    // put your code here:

}); // end of ready
</script>
</head>
<body>
<!-- canvas with id="myCanvas" is made by zim Frame -->
</body>
</html>

C. And here is what that ZIM Socket code looks like for a shared ball! Add this under the "put your code here" then open up a couple browser windows and you can drag the ball in one and see it change in the other - or put it on a server and get a friend from across the world try it!

    // get the app name here: https://zimjs.com/request.html
    var appName = "balls";
    var socket = new zim.Socket(zimSocketURL, appName); 
    socket.on("ready", data=>{        
        zogg("socket connected");        
        const ball = new Circle(100, red)
            .loc(data.ball||{x:stageW/2, y:stageH/2})
            .drag();        
        ball.on("pressmove", ()=>{
            socket.setProperty("ball", {x:ball.x, y:ball.y});
        });        
        socket.on("data", data=>{
            ball.loc(data.ball);
            stage.update();
        });        
        stage.update();
    });

We have made lots of exciting things with ZIM Socket. See the examples at:

https://zimjs.com/socket

and here is a CodePen to try:

https://codepen.io/danzen/pen/jOrzNyp

If you have not checked out the Canvas recently - you simply must! Here is the ZIM Dev Site and some In-depth Guides by Dr Abstract including Your Guide to Coding Creativity on the Canvas.

Model View Controller with Truchet App

Dr Abstract — Mon, 01 Feb 2021 05:20:42 +0000

Truchet patterns can be scaled and rotated to make cool pictures. Try out the tool here https://zimjs.com/truchet. We have seen them around but recently decided to find out what they are and learned about them here https://christophercarlson.com/portfolio/multi-scale-truchet-patterns/

Here is the format of the ZIM MVC - model, view, controller.

const model = new app.Model();
const view = new app.View(model);
const controller = new app.Controller(model, view);

In each of the remote js files we store the classes on a namespace. We could have used ES6 import but, I prefer testing locally and import order is not an issue here. Here is start of the https://zimjs.com/truchet/model.js file:

var app = app||{}; // set the app namespace

// The model holds starting data 
// and handles accessing data from a database, localStorage, etc.

app.Model = class { 
    constructor() {
        const m = this; // shortcut        
        // hold the base size for the Truchet        
        m.size = 200;
        m.highlightAlpha = .3;
        // etc.
    }            
}

Here is the start of the https://zimjs.com/truchet/view.js

var app = app||{};

// The View holds all the objects that will be seen
// The View may be guided by the Model and gets passed to the Controller
// Anything the Controller will need to control store on v (this)

app.View = class {
    constructor(m) { 

        // receive m for the model
        const v = this;

        // frame is global - or can send and receive as parameter
        const stage = frame.stage; 
        const stageW = stage.width;
        const stageH = stage.height;        

        v.backing = new Rectangle(stageW, stageH, red).addTo();
        // etc.
    }            
}

And the start of the https://zimjs.com/truchet/controller.js

var app = app||{};

// The Controller is the last MVC made 
// and receives the Model (m) and the View (v)
// The Controller holds all the events 
// and updates the View and the Model when needed

app.Controller = class {
    constructor(m, v) {    
        const c = this;

        const stage = frame.stage; 
        const stageW = stage.width;
        const stageH = stage.height;

        // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        // TRUCHET EVENTS

        let current;
        v.holders.on("mousedown", e=>{
            current = e.target;
            // etc.
        });
        // etc.
    }            
}

You can see that it is quite a nice set-up. It is a dream to code in ZIM with JavaScript on the Canvas! We are happy, like this guy!

If you have not checked out the Canvas recently - you simply must! Here is the ZIM Dev Site and some In-depth Guides by Dr Abstract including Your Guide to Coding Creativity on the Canvas.