DEV Community: Dr Abstract

How the ZIM Master Prompt Solves AI Code Hallucinations for 2D Canvas

Dr Abstract — Sat, 15 Aug 2026 21:21:44 +0000

PROMPTED by Dr Abstract - organized by Gemini.

If you have ever asked a Large Language Model (LLM) to write code for a specialized or evolving framework, you have likely encountered the "Legacy Fallback" trap:

Instead of using the latest idioms, the AI defaults to outdated patterns it saw millions of times in older training data. For ZIM (the JavaScript canvas framework for creative coding), generic LLM queries often hallucinate obsolete Flash or raw CreateJS code—writing messy stage.addChild() calls, manual coordinate math, and unnecessary ticker loops.

To fix this, the ZIM team created the ZIM Master Prompt at https://zimjs.com/prompt which is a structured system prompt backed by two lightweight, AI-optimized reference URLs: docs_ai.php and tips.html.

Here is why this approach works so effectively and how it transforms AI code generation from broken boilerplate into clean, idiomatic canvas code.

1. The Core Challenge: Why LLMs Struggle with Canvas Frameworks

LLMs excel at standard HTML, CSS, and basic React because the web is flooded with examples. However, for specialized interactive frameworks, LLMs face three distinct hurdles:

Parameter Confusion: Display classes often take 5+ arguments. Without active documentation, LLMs guess parameter orders and default values.
Framework Drift: Because ZIM is built on top of CreateJS, an unguided AI defaults to raw createjs methods rather than ZIM’s high-level abstractions.
Context Window Bloat: Full HTML documentation contains thousands of lines of navigation menus, CSS styling, and DOM noise that overwhelm an AI's context window.

2. The Solution: The Two AI Reference Pillars

The ZIM Master Prompt gives the AI immediate access to two distilled, machine-friendly resources:

📄 1. `docs_ai.php` (Machine-Readable API Map)

Instead of feeding full web pages to the model, docs_ai.php delivers a dense, stripped-down summary of modules, classes, and methods:

Exact Parameter Signatures: Eliminates parameter guessing.
DUO Identification: Tells the AI when methods support configuration objects ({props, time, call}).
VEE Flags: Informs the AI which parameters accept dynamic lazy evaluations (e.g., random arrays [red, blue], series(), min/max ranges {min: 10, max: 50}, or functions).

💡 2. `tips.html` (Idiomatic Style Rules)

Having API docs alone isn't enough; the AI needs to know how to write code like the framework's creator (Dr. Abstract):

Enforces chainable 3-letter helpers (.sca(), .rot(), .alp(), .loc()).
Replaces raw coordinate calculations with declarative layout methods (.centerReg(), .pos(0, 0, RIGHT, BOTTOM)).
Prevents unnecessary Ticker loops by letting animate(), drag(), and UI components manage stage updates automatically.
Mandates built-in convenience utilities (loop() over for, rand() over Math.random(), built-in color constants like red and blue).

3. The Difference: Without vs. With the Master Prompt

Let's look at what happens when you ask an AI to create a simple interactive test: Create a centered red rectangle, animate it to 2× scale, and place it at the bottom-right on click.

❌ Without Master Prompt (Generic Hallucinated Code)

The AI falls back to generic canvas boilerplate, manual math, and outdated event loops:

// Clunky, imperative, and misses built-in conveniences
var rect = new createjs.Shape();
rect.graphics.beginFill("red").drawRect(-50, -50, 100, 100);
rect.x = stage.canvas.width / 2;
rect.y = stage.canvas.height / 2;
stage.addChild(rect);

createjs.Tween.get(rect)
  .to({ scaleX: 2, scaleY: 2 }, 1000)
  .call(function() {
    rect.on("mousedown", function() {
      rect.x = stage.canvas.width - 100;
      rect.y = stage.canvas.height - 100;
      stage.update();
    });
  });

createjs.Ticker.on("tick", stage);

✅ With the ZIM Master Prompt (Idiomatic, Clean, Expressive)

With the master prompt and rules active, the AI produces pure, chainable ZIM:

// Clean, declarative, and 65% shorter
new Rectangle(100, 100, red)
  .centerReg()
  .animate({
    props: { scale: 2 },
    time: 1,
    call: (target) => {
      target.on("mousedown", () => {
        target.pos(0, 0, RIGHT, BOTTOM);
        S.update();
      });
    }
  });

4. Key Takeaways for Framework Authors & Developers

The success of the ZIM Master Prompt reveals a powerful blueprint for any open-source library or framework:

Provide an /ai Documentation Endpoint: Create a plain-text, token-dense API cheat sheet (like docs_ai.php) specifically designed for LLMs to read in seconds.
Explicitly Teach Conventions: LLMs don't just need to know what exists; they need strict rules telling them what NOT to do (e.g., "Do not use addChild(), use .center() or .pos()").
Enforce Single-File Outputs: Instructing the AI to deliver ready-to-run, self-contained HTML templates eliminates setup friction for developers testing prototypes.

Try It Out

Want to test AI-assisted creative coding with ZIM?

🌐 Explore the Framework: zimjs.com
📖 AI-Master Prompt: zimjs.com/prompt.html
💻 Interactive Web Editor: zimjs.com/editor

Have you created AI prompts or machine-readable docs for your favorite libraries? Share your workflow in the comments below!

Framework Comparison Report: ZIM vs. PixiJS

Dr Abstract — Sat, 15 Aug 2026 20:45:36 +0000

NOTE: Prompted by Dr Abstract who also requested article from Gemini.

When building interactive 2D canvas experiences on the web—whether mini-games, educational interactives, infographics, or visual tools—developers often debate between low-level rendering speed and high-level developer velocity.

In this article, we compare two popular approaches in the JavaScript ecosystem:

PixiJS (the WebGL/WebGPU rendering engine) paired with GSAP.
ZIM (a high-level, all-in-one interactive canvas framework).

Let's look at code size, dependency friction, and developer experience (DX).

The Challenge: The "Rectangle Test"

To keep the comparison objective, let's implement the exact same simple requirement in both frameworks:

Create a centered 100×100 red rectangle.
Animate it to twice its scale (2x) outward from its center.
Make it interactive after the animation finishes.
On pointer down, snap it flush against the bottom-right corner of the screen.

Approach 1: PixiJS + GSAP

PixiJS is built primarily as a high-performance renderer. Because it does not bundle a tweening engine or declarative layout math by default, you typically import GSAP and write custom coordinate offsets.

import * as PIXI from 'pixi.js';
import gsap from 'gsap';

// 1. Initialize Application
const app = new PIXI.Application();
await app.init({ resizeTo: window, backgroundColor: 0x111111 });
document.body.appendChild(app.canvas);

// 2. Draw & Center Rectangle
// (Drawn from -50,-50 so it scales outward from its center)
const rect = new PIXI.Graphics();
rect.rect(-50, -50, 100, 100);
rect.fill(0xff0000);
rect.x = app.screen.width / 2;
rect.y = app.screen.height / 2;
app.stage.addChild(rect);

// 3. Animate with external tween engine
gsap.to(rect.scale, {
  x: 2,
  y: 2,
  duration: 1,
  ease: "power2.out",
  onComplete: () => {
    // 4. Enable interaction on completion
    rect.eventMode = 'static';
    rect.cursor = 'pointer';

    // 5. On pointerdown, calculate bottom-right position manually
    rect.on('pointerdown', () => {
      rect.x = app.screen.width - (rect.width / 2);
      rect.y = app.screen.height - (rect.height / 2);
    });
  }
});

Approach 2: ZIM

ZIM is designed as a complete interactive creative coding environment. It features built-in animation, chainable methods, human-friendly positioning, and automatic registration point handling out of the box.

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

new Frame(FIT, 1024, 768, dark, darker, () => {

  new Rectangle(100, 100, red)
    .centerReg()
    .animate({
      props: { scale: 2 },
      time: 1,
      call: (target) => {
        target.on("mousedown", () => {
          target.pos(0, 0, RIGHT, BOTTOM);
          S.update();
        });
      }
    });

});

Side-by-Side Comparison

Metric	PixiJS (+ GSAP)	ZIM	Advantage
Logic Lines of Code	~25–35 lines	~8–12 lines	ZIM (~65% reduction)
External Dependencies	`pixi.js` + `gsap` (+ UI plugins if needed)	`zim` (all-in-one)	ZIM (Zero glue code)
Positioning Helpers	Manual coordinate & pivot math	Native `.centerReg()`, `.pos()`	ZIM
Raw WebGL/WebGPU Batching	Millions of sprites at 60+ FPS	Optimized for interactive apps & media	PixiJS

Key Takeaways

1. Rendering Engine vs. Interactive Framework

PixiJS is a renderer. It excels when you need raw WebGL draw call optimization, custom fragment shaders, or thousands of simultaneous particle sprites for a heavy 2D action game.
ZIM is an interactive platform. It comes bundled with everything needed for rich media:
- Full UI component suite (Button, Slider, Dial, Tabs, Pane, Window).
- Built-in vector shapes & paths (Blob, Squiggle).
- Native gestures, multi-touch drag, particle emitters, and physics (Box2D wrapper).

2. Positioning & Responsive Layouts

In PixiJS, snapping an object to a specific corner requires calculating screen width, object width, scale multiplier, and registration offsets.

In ZIM, layout methods understand screen edges natively:

// Pins object 20px from the right and 30px from the bottom
rect.pos(20, 30, RIGHT, BOTTOM);

3. Developer Velocity

For digital agencies, educators, marketing teams, and creative developers building puzzles, interactives, or web UI, high-level abstractions like ZIM allow you to go from concept to working prototype in hours instead of days.

Resources & Sandboxes

🌐 ZIM Official Site: zimjs.com
📖 ZIM Docs & Interactive Editor: zimjs.com/editor
⚡ PixiJS Documentation: pixijs.com

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.

DEV Community: Dr Abstract

How the ZIM Master Prompt Solves AI Code Hallucinations for 2D Canvas

1. The Core Challenge: Why LLMs Struggle with Canvas Frameworks

2. The Solution: The Two AI Reference Pillars

📄 1. docs_ai.php (Machine-Readable API Map)

💡 2. tips.html (Idiomatic Style Rules)

3. The Difference: Without vs. With the Master Prompt

❌ Without Master Prompt (Generic Hallucinated Code)

✅ With the ZIM Master Prompt (Idiomatic, Clean, Expressive)

4. Key Takeaways for Framework Authors & Developers

Try It Out

Framework Comparison Report: ZIM vs. PixiJS

The Challenge: The "Rectangle Test"

Approach 1: PixiJS + GSAP

Approach 2: ZIM

Side-by-Side Comparison

Key Takeaways

1. Rendering Engine vs. Interactive Framework

2. Positioning & Responsive Layouts

3. Developer Velocity

Resources & Sandboxes

Which Framework to use for Making eLearning Apps

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

Interactive Textures in three.js

Hey - want to learn to code the Canvas?

Interactive Animation

SPRITES

INTERACTIVITY

Introducing Rarity

PLUCK, SEEDRANDOM, REPEATS

Creating Interactive NFTs

Next Version?

To Jigsaw or not to Jigsaw?

PWA in 20 Minutes!

📄 1. `docs_ai.php` (Machine-Readable API Map)

💡 2. `tips.html` (Idiomatic Style Rules)