ZIM

JavaScript Canvas Framework - Code Creativity!
https://zimjs.com

A consistent, complete, simple and colorful Canvas Framework that provides quick visual results. ZIM is great for learning to code but also powerful for professionals to make games, apps, art and more for desktop and mobile!

Please see the About section for why we use ZIM to make Interactive Media.
https://zimjs.com/about.html

Examples

ZIM is great for games, puzzles, art, visualizations, interfaces and more! See:
https://zimjs.com/examples.html

Coding in ZIM looks like this:

new Rectangle(50, 50, green).center().drag(); // for a centered draggable rectangle!

new MotionController(new Emitter().center(), "mousemove"); // for a particle emitter following the mouse

const squiggle = new Squiggle().loc(100, 100); // wavy line with Bezier handles
new Circle(20, pink).addTo().animate({path:squiggle}, 1); // animate along a squiggle

new Button(200, 70, "TRY ME")
  .pos(30,30,RIGHT,BOTTOM) 
  .tap(()=>{zgo("https://zimjs.com");}); // go to URL

Getting Started

Copy the template on the Code page into an editor like VS Code and view results in any Browser.
https://zimjs.com/code.html

This uses ES6 Modules or Script tags from our CDN at https://zimjs.org/cdn
Alternatively, see the NPM instructions in the section down below.

ZIM EDITOR - an online editor with lots of examples, file saving and sharing
https://zimjs.com/editor

ZIM INTRO - sample code with comments
https://zimjs.com/intro.html

ZIM BASICS - video series on YouTube
https://www.youtube.com/watch?v=G4K0PwtwXRQ&list=PLCIzupgRt1pYPy1ufRjssbGuPKMviuFvB

ZIM CODEPEN TOPIC
https://codepen.io/topic/zim/

ZIM LEARN has many code and video tutorials including:
ZIM Bits - 64 common techniques, ZIM Capture, What IZ tutorials, ZIM Badges, Code Zero and more!
https://zimjs.com/learn.html

ZIM SKOOL is great for learning with 8 full lessons including in Browser code examples.
https://zimjs.com/skool.html and for kids https://zimjs.com/kids.html - like Magic!

LEARN JAVASCRIPT WITH CREATIVE CODING
https://zimjs.com/learnjavascript.html

ZIM TIPS has a listing of the elegant ways we code in ZIM
https://zimjs.com/tips.html

ZIM DOCS has all the Classes and Functions broken down by module - expand the topics
to see descriptions, examples, methods, properties, events, source, bits, vids, demos and more!
https://zimjs.com/docs.html

NPM

Here is ZIM on NPM: https://www.npmjs.com/package/zimjs
There are additional helper modules matching the CDN helper modules:
@zimjs/physics | @zimjs/game | @zimjs/three | @zimjs/socket | @zimjs/cam | @zimjs/pizzazz

These steps describe setting up ZIM with Vite and NPM for vanilla JavaScript or TypeScript.
There are also templates for VUE, Svelte, React and Angular further down.

A. SETUP

Open a folder in an IDE such as VS Code (The project folder will be made inside this folder)
Open a terminal - see Terminal in the menu - or CTRL SHIFT `
Check to see if you have node - type:
```
node - v
```
If not then install from https://nodejs.org
Run Vite - type:
```
npm create vite
```
If this needs to install, press y for yes
Give the project a name - it will make a directory
Select a framework - use arrow to see all options
Eg. choose Vanilla
Select a variant
Eg. choose JavaScript
Change to your project folder - type:
```
cd yourProject
```
Get the ZIM package and dependencies - type:
```
npm i zimjs
```

B. TEMPLATE

replace the code in main.js with the template:

// ZIM - JavaScript Canvas Framework - https://zimjs.com - code creativity
import zim from "zimjs";

// make ZIM global - if this is not used then would use zim.Frame() and zim.Circle()
zimplify();

// or make all globals except need to use zim.Blob and zim.Window
// these are two classes that have occassionally conflicted with other libraries
// zimplify(["Blob", "Window"]);

// 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

or with TypeScript - replace the src/main.ts code with:

// ZIM - JavaScript Canvas Framework - https://zimjs.com - code creativity
import {Frame, Circle} from "zimjs";

// 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

In the index.html file, optionally replace the Vite icon with:

<link rel="apple-touch-icon-precomposed" sizes="57x57" href="https://zimjs.com/icons/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://zimjs.com/icons/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://zimjs.com/icons/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://zimjs.com/icons/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="https://zimjs.com/icons/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="https://zimjs.com/icons/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="https://zimjs.com/icons/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="https://zimjs.com/icons/apple-touch-icon-152x152.png" />
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="https://zimjs.com/icons/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="https://zimjs.com/icons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="192x192" href="https://zimjs.com/icons/android-chrome-192x192.png" />
<link rel="icon" type="image/png" sizes="512x512" href="https://zimjs.com/icons/android-chrome-512x512.png" />

Replace the title with your app title

C. DEVELOPMENT

Start a Dev server - type:
```
npm run dev
```
Alt-click the Local link in the terminal
This opens up a browser to see the file with the purple circle
Make edits to your ZIM app
- See https://zimjs.com/learn for how to use ZIM
- See https://zimjs.com/docs for reference to commands
When done developing use CTRL C to exit the dev terminal

D. DEPLOYMENT

Bundle the files for distribution - type:
```
npm run build
```
This makes a dist/ folder with the minified code
Currently, Vite puts the js code in /assets/
Which means to run it in a browser, it needs to be in the root
Or you can remove the / and use assets/ to run relatively
like with "open in default browser" extension locally
For local images and sounds see https://zimjs.com/tips.html#IMAGES

E. NOTICE

ZIM is a front-end framework at https://zimjs.com
We make so much without npm at all...
You can avoid all of the above by going to https://zimjs.com/code
pressing the copy button and pasting into an empty html file
Then view the html file in a browser
This takes 1 minute and kids can do it
You can also use ZIM online at https://zimjs.com/editor

F. OTHER FRAMEWORKS

See the sections below for using ZIM with other frameworks
The setup is the same as above but the app code is as follows

VUE, SVELTE, REACT, ANGULAR

ZIM can be used in other frameworks. Thank you @yoanhg421 for the setup
See https://github.com/danzen/zimjs-templates for full files.
Follow the SETUP instructions above and then adjust the code as follows:

VUE - with zim namespace

<script setup>  
  import { onMounted, onBeforeUnmount } from "vue";
  import zim from "zimjs";

  let frame;
  onMounted(() => {
    frame = new zim.Frame({
      scaling: "zim",
      width: 500,
      height: 400,
      color:light,
      ready: () => {
          // put code here
          new zim.Circle(50, red).center().drag();
      }
    });
  });

  onBeforeUnmount(() => {
    frame.dispose();
  });  
</script>

<template>
  <div id="zim"></div>
</template>

<style>
</style>

VUE - without zim namespace

<script setup>  
  import { onMounted, onBeforeUnmount } from "vue";
  import zim from "zimjs";

  zim.zimplify(); // make zim commands global

  let frame;
  onMounted(() => {
    frame = new Frame({
      scaling: "zim",
      width: 500,
      height: 400,
      color:light,
      ready: () => {
          // put code here
          new Circle(50, red).center().drag();
      }
    });
  });

  onBeforeUnmount(() => {
    frame.dispose();
  });  
</script>

<template>
  <div id="zim"></div>
</template>

<style>
</style>

SVELTE - with zim namespace and Typescript

<script lang="ts">  
  import { onMount, onDestroy } from "svelte";
  import zim from "zimjs";

  let frame: Frame;
  onMount(() => {
    frame = new zim.Frame({
      scaling: "zim",
      width: 500,
      height: 400,
      color:light,
      ready: () => {
          // put code here
          new zim.Circle(50, red).center().drag();
      }
    });
    function ready() {
      // put code here
      new zim.Circle(50, red).center().drag();
    }
  });

  onDestroy(() => {
    frame.dispose();
  });
</script>

<main>
  <div id="zim">
</main>

<style>
</style>

SVELTE - without zim namespace and no Typescript

<script>  
  import { onMount, onDestroy } from "svelte";
  import zim from "zimjs";

  zim.zimplify(); // make zim commands global
  
  let frame;
  onMount(() => {
    frame = new Frame({
      scaling: "zim",
      width: 500,
      height: 400,
      color:light,
      ready: () => {
          // put code here
          new Circle(50, red).center().drag();
      }
    });
  });

  onDestroy(() => {
    frame.dispose();
  });
</script>

<main>
  <div id="zim">
</main>

<style>
</style>

REACT - with zim namespace

import { Component, ReactNode, StrictMode } from "react";
import "./App.css";
import zim from "zimjs";

class ZimFrame extends Component {
  frame: zim.Frame | undefined;

  componentDidMount(): void {
      this.frame = new zim.Frame({
        scaling: "zim",
        width: 500,
        height: 400,
        color:light,
        ready: () => {
            // put code here
            new zim.Circle(50, red).center().drag();
        }
      });
  }
  componentWillUnmount(): void {
      this.frame?.dispose();
  }
  render(): ReactNode {
      return null;
  }
}

function App() {
  return (
      <>
      <div>
          {/* Move StrictMove from the root to here */}
          <StrictMode>
          <div id='zim'></div>
          </StrictMode>
          {/* Include ZIM code outside StrictMode */}
          <ZimFrame />
      </div>
      </>
  )
}
export default App;

REACT - without zim namespace

import { Component, ReactNode, StrictMode } from "react";
import "./App.css";
import zim from "zimjs";

zim.zimplify(); // make zim commands global

class ZimFrame extends Component {
  frame: Frame | undefined;

  componentDidMount(): void {
      this.frame = new Frame({
        scaling: "zim",
        width: 500,
        height: 400,
        color:light,
        ready: () => {
            // put code here
            new Circle(50, red).center().drag();
        }
      });
  }
  componentWillUnmount(): void {
      this.frame?.dispose();
  }
  render(): ReactNode {
      return null;
  }
}

function App() {
  return (
      <>
      <div>
          {/* Move StrictMove from the root to here */}
          <StrictMode>
          <div id='zim'></div>
          </StrictMode>
          {/* Include ZIM code outside StrictMode */}
          <ZimFrame />
      </div>
      </>
  )
}
export default App;

ANGULAR - with zim namespace and TypeScript (always)

import { AfterContentInit, Component, OnDestroy } from '@angular/core';
import { Frame, Circle } from 'zimjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnDestroy, AfterContentInit {
  frame: Frame | undefined;
  ngOnDestroy(): void {
    this.frame?.dispose();
  }

  ngAfterContentInit(): void {
    this.frame = new Frame({
      scaling: FIT,
      width: 600,
      height: 300,
      ready: () => {
        new Circle(50, red).center().drag();
      },
    });
  }

  title = 'ZIM in Angular';
}

Issues & Community

You are welcome to add issues here but we tend to use our Forum for issues and support
We would love to see you there!
https://forum.zimjs.com

You are welcome to join us on Discord as well
https://zimjs.com/discord

An easy view of updates can be found here:
https://zimjs.com/updates.html

Dependencies

ZIM is powered by the robust CreateJS Library and adds many conveniences, components and controls.
Cheers to Grant, Lanny and the CreateJS Team!
https://createjs.com - here is the ZIM version of CreateJS

Authors

Dr Abstract (Inventor Dan Zen)
Canadian New Media Awards Programmer of the Year
Canadian New Media Awards Educator of the Year
https://zimjs.com/interactivemedia
Hamilton Arts Awards for Media Arts
http://danzen.com - Museum of Interactive Works

License

This project is licensed under the MIT License - see the LICENSE.txt file for details

Acknowledgments

Thanks to the folks here and on Slack with reports, requests and enthusiasm!
Thanks Sheridan College and the Interactive Media Post Grad Program for the testing grounds!
Thanks to family for keeping me active in the "real world"
Thanks for giving us a STAR on GitHub!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

README.md

README.md

ZIM

Examples

Getting Started

NPM

VUE, SVELTE, REACT, ANGULAR

VUE - with zim namespace

VUE - without zim namespace

SVELTE - with zim namespace and Typescript

SVELTE - without zim namespace and no Typescript

REACT - with zim namespace

REACT - without zim namespace

ANGULAR - with zim namespace and TypeScript (always)

Issues & Community

Dependencies

Authors

License

Acknowledgments

Files

README.md

Latest commit

History

README.md

File metadata and controls

ZIM

Examples

Getting Started

NPM

VUE, SVELTE, REACT, ANGULAR

VUE - with zim namespace

VUE - without zim namespace

SVELTE - with zim namespace and Typescript

SVELTE - without zim namespace and no Typescript

REACT - with zim namespace

REACT - without zim namespace

ANGULAR - with zim namespace and TypeScript (always)

Issues & Community

Dependencies

Authors

License

Acknowledgments