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
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
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
Here is ZIM on NPM: https://www.npmjs.com/package/zimjs Use:
import zim from "zimjs";
// or
import {Frame, Circle} from "zimjs";
// to remove the zim namespace requirement on all use:
zim.zimplify();
// or make all globals but use zim.Blob and zim.Window (two potential culprits)
zim.zimplify([Blob, Window]);ZIM can be used in other frameworks. Thank you @yoanhg421 for the setup
See https://github.com/yoanhg421/zimjs-templates for full files.
<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><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 zim.Circle(50, red).center().drag();
}
});
});
onBeforeUnmount(() => {
frame.dispose();
});
</script>
<template>
<div id="zim"></div>
</template>
<style>
</style><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><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 zim.Circle(50, red).center().drag();
}
});
});
onDestroy(() => {
frame.dispose();
});
</script>
<main>
<div id="zim">
</main>
<style>
</style>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;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;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';
}You are welcome to add issues here but we tend to use Slack at for issues and support
We would love to see you there!
https://zimjs.com/slack
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
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
- 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
This project is licensed under the MIT License - see the LICENSE.txt file for details
- 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!
