Copy template to a text file on your computer, save as code.html and view in Browser.
older | more | convert | pizzazz | codepen<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>ZIM - Code Creativity</title> <!-- zimjs.com - JavaScript Canvas Framework --> <script type="module"> import zim from "https://zimjs.org/cdn/017/zim"; // See Docs under Frame for FIT, FILL, FULL, and TAG new Frame(FIT, 1024, 768, light, dark, ready); function ready() { // given F (Frame), S (Stage), W (width), H (height) // put code here new Circle(100, purple) .center() .drag(); } // end ready </script> <meta name="viewport" content="width=device-width, user-scalable=no" /> </head> <body></body> </html>
Copy template to a text file on your computer, save as code.html and view in Browser.
newer | more | convert | pizzazz | codepen<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>ZIM - Code Creativity</title> <!-- zimjs.com - JavaScript Canvas Framework --> <script src="https://zimjs.org/cdn/1.4.1/createjs.js"></script> <script src="https://zimjs.org/cdn/017/zim_min.js"></script> <script> // See Docs under Frame for FIT, FILL, FULL, and TAG const frame = new Frame(FIT, 1024, 768, light, dark); frame.on("ready", () => { const stage = frame.stage; let stageW = frame.width; let stageH = frame.height; // put your code here new Circle(100, purple) .center() .drag(); }); // end ready </script> <meta name="viewport" content="width=device-width, user-scalable=no" /> </head> <body></body> </html>
Copy template to a text file on your computer, save as code.html and view in Browser.
newer | older | more | convert | codepen<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>ZIM - Code Creativity</title> <!-- zimjs.com - JavaScript Canvas Framework --> <script type="module"> import zim from "https://zimjs.org/cdn/017/zim_pizzazz"; // See Docs under Frame for FIT, FILL, FULL, and TAG new Frame(FIT, 1024, 768, light, dark, ready); function ready() { // given F (Frame), S (Stage), W (width), H (height) // put code here // for more shapes, icons and patterns see // https://zimjs.com/docs.html?item=pizzazz makePattern("slants", series(fog, mist), 10, 50, 40).center(); new Button({ backing:makeShape("cloud", black), rollBacking:makeShape("cloud", white), icon:makeIcon("home", white), rollIcon:makeIcon("home", black) }).center().tap(()=>{zgo("https://zimjs.com")}); } // end ready </script> <meta name="viewport" content="width=device-width, user-scalable=no" /> </head> <body></body> </html>
Copy template to a text file on your computer, save as code.html and view in Browser.
newer | older | more | pizzazz | codepen<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>ZIM - Code Creativity</title> <!-- zimjs.com - JavaScript Canvas Framework --> <script type="module"> import zim from "https://zimjs.org/cdn/017/zim"; // See Docs under Frame for FIT, FILL, FULL, and TAG new Frame(FIT, 1024, 768, light, dark, ready); function ready(frame, stage, stageW, stageH) { // given F (Frame), S (Stage), W (width), H (height) // but we have also collected frame, stage, stageW, stageH // these are the variables we used in older versions of the template // put code here new Circle(100, purple) .center() .drag(); } // end ready </script> <meta name="viewport" content="width=device-width, user-scalable=no" /> </head> <body></body> </html>
Use ZIM Sprites for INTERACTIVE ANIMATION see info page!
ZIM is perfect for INTERACTIVE NFTS here we show you how!
Make MOBILE APPS with the ZIM PWA TOOL called Zapps!
Visit ZIM SHIM to use ZIM in Adobe Animate with CreateJS!
Explore ZIM on CODEPEN and get TEMPLATES and more!
Use ZIM ACCESSIBILITY for Screen Readers - see the DOCS
The ZIM CDN (Content Delivery Network) holds links to code files stored on the cloud with CloudFlare
Import ES6 MODULES or use SCRIPT TAGS (ZIM Crystal has been discontinued)
ZIM is available on ZIM on NPM along with the helper modules
@zimjs/physics | @zimjs/game | @zimjs/three | @zimjs/socket | @zimjs/cam | @zimjs/pizzazz
Here are ZIM TEMPLATES for Svelte, React, Angular and VUE.
VIDEOSZIM LEARN has tutorials and the DOCS are interlinked with ZIM BITS
See GUIDES on Medium and POSTS on DEV with Dr Abstract!
ZIM TIPS and ZIM BUBBLING have the latest based on DARK PAPERS
CODE ZERO shows starter videos and SHERIDAN has PostGrad learning
SLACK and DISCORD have community and support worth GIT HUB stars!
ZIM Tools! DISTILL, ZAPPS!, WONDER, ASSET LIST and DOCTOR
Perfect particles with EMITTER CONFIGURATOR and find your THRESHOLD!
ZIM BEAM to share code, ZIM EDITOR to test code and include EMOJIS!
Type code in an EDITOR with CODE HINTS and optional TYPESCRIPT!
Make Mobile apps with PWAs and Native Apps with CAPACITOR!
Try ZIM MVC or NPM or make a CUSTOM library!
Use ADOBE ANIMATE for custom shapes and TEXTURE PACKER for Sprites!
CREATEJS powers ZIM and both use JAVASCRIPT
ZIM SOCKET for Multiuser and ZIM GAME with Leader and ISOMETRIC Boards
ZIM TEN PHYSICS with integrated Physics!
ZIM PHYSICS for Box2D with SOUP of course!
ZIM THREE with TEXTUREACTIVE for ZIM in three.js
ZIM THREE for three.js meshes and MODELS in ZIM
ZIM PIZZAZZ for BACKINGS, ICONS, PATTERNS and PATHS
ZIM CAM for Webcam motion and ZIM BASE for database queries!