Skip to content

danzen/zimjs

master
Switch branches/tags
Code

Latest commit

…(), Loader()

Tag(), TextArea() and Loader() now call a new ZIM function called browserZoom() which will get the relative browser zoom.
https://zimjs.com/docs.html?item=browserZoom - thanks Ami and others for the patience over the years as we have worked this out.
Hopefully this is a solution for aligning and scaling HTML tags to the Canvas as the user changes the zoom of their browser.
Fixed Bitmap() clone() - we adjusted how the image was processed
and it was cloning an adjusted image rather than the original - thanks EZ for the catch.
Added this.hiddenInput.style.touchAction = "none"; to TextInput
so that Android does not try and zoom in on the hidden HTML input field - thanks EZZ Flash for the solution.
Made Tag() and Loader() work like TextArea() by nesting the HTML tag in the holder tag if in tag scaling mode
thanks Ami Hanya and and Stefan for the suggestion - <strong>IMPROVEMENT</strong>
Added a video.source.setAttribute("crossorigin","anonymous"); to Vid() to help with CORS issues - thanks Ami Hanja for solution
This may not load all videos but should help when the video has CORS setting of Access-Control-Allow-Origin "*" on its server
Added a percentComplete parameter to Scroller - see https://zimjs.com/test3/scroller.html - thanks EZ
126d500

Git stats

Files

Permalink
Failed to load latest commit information.

ZIM

npm GitHub

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

There are many examples of things to be made with ZIM in the banner sections on the ZIM site.
Here is the main example section including CodePen examples - we hope you like them!
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}, 1000); // 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 Atom and view results in any Browser.
https://zimjs.com/code.html
https://zimjs.com/es6.html for ES6 Modules

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 LAB - lets you code in the browser and has a few examples to add and view
https://zimjs.com/lab.html

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

ZIM NPM - here is some information on optionally using ZIM with Node Package Manager:
https://zimjs.com/npm.html

ZIM TYPESCRIPT - here is some information on optionally using ZIM with TypeScript:
https://zimjs.com/typescript.html

Issues & Community

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

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

Authors

  • Inventor Dan Zen
    Canadian New Media Awards Programmer of the Year 2008
    Hamilton Arts Awards for Media Arts 2017
    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!