Code 1

Dedicated to Grant Skinner and the CreateJS Team

Coding or programming is how the logic and interactivity of a system like a game or an app are applied. Dan Zen has been programming since 1982 as chronicled in the Museum Coding Tour introduced below. In this first code exhibit we follow with a look at Zen's most recent code from 2014 to 2015. NOTE: make sure to press the SEE CODE buttons!

Coding Tour (2014) ▲ The Dan Zen Museum Coding Tour provides an example of what code can do and how it works written for people who have never coded. The purpose of the exhibit is to show how wonderful and important coding is in our information age primarily so that parents will encourage their kids to consider becoming programmers. The tour also gives a history of Dan Zen coding. TAKE TOUR

Dan Zen Code - ZIM JavaScript Open Source Library of Interactive Media Modules

ZIM (2014) ▲ ZIM is Dan Zen's most recent code library. ZIM stands for Zen Interactive Media and is a library of open source modules in the JavaScript language (the browser programming language). ZIM sits on top of CreateJS which is a JavaScript library providing a coding environment like Adobe Flash ActionScript for the HTML Canvas. VISIT ZIM SEE CODE

ZIM Learn (2015) ▲ A workshop page that gives a tutorial on how to make a game in the browser with ZIM for people who have never programmed. It probably helps to have Dan Zen present, but you can always try it out yourself! MAKE GAME

ZIM Talk (2015) ▲ An intro to ZIM on YouTube taken from a talk at CreateInTO in Toronto, Canada. Dan Zen demonstrates the ZIM modules with one line drag and drop code, multiple hit tests, components, adaptive and responsive design and more!

ZIM Docs (2014) ▲ Interactive documentation for the ZIM library of code. ZIM is available in separate modules (files) but often people want to use all of ZIM so this is the documentation for a single file of ZIM currently at 5000 lines of code. View the Docs to expand any of the sections to see what the code does and how to use it. SEE DOCS

ZIM Create (2014) ▲ The Create module of ZIM lets you drag and drop with ONE line of code. To contrast this, consider the following code found on the Web with nearly 800 lines of code. ZIM also provides multiple ways to do hit test, handles scaling, fitting to areas, animating and outlining of bounds and registration points. ZIM CREATE LIVE EXAMPLE SEE CODE

ZIM Build (2014) ▲ The Build module of ZIM adds handy components like buttons, panes, checkboxes, etc. as well as easy shapes and a few cool effects like parallax and background scrolling. These things are not native to the HTML canvas and are needed to match environments like Adobe Flash. ZIM BUILD LIVE EXAMPLE SEE CODE

ZIM Pages (2014) ▲ The Pages module of ZIM lets you go from page to page with swipes or hotspots. The module provides a layout class to scale regions on the page in a variety of ways. This is equivalent to responsive design in traditional HTML and CSS and now it can be done on the canvas (where we do not have CSS). We can also handle adaptive design by hiding and showing different page objects for horizontal or vertical mobile orientation. Pages also provides a grid and guides. The canvas has no visual placement tool so grids and guides help us position things. ZIM PAGES LIVE EXAMPLE SEE CODE

Nanora (2014) ▲ Nanora is the project that Dan Zen was coding when he created ZIM. Nanora is the fourth JavaScript canvas project with the first three being PUZZLE, MUSEUM STEPS and KALEIDOSCOPE. To view the code of any of these you can use CTRL (or ⌘) U when on the page. Nanora is a puzzle game to get Meta Monks (white circles) across past the Nano Bots (coloured circles) without getting caught. The Meta Monks are like gods and are not supposed to be seen according to the story on YouTube and Altura. This type of Web application was traditionally done in Flash - where Zen worked for many years and Flash code will be the subject of the Code 2 Exhibit. With Nanora, Zen used CreateJS which recreates a system very similar to Flash. Zen then added efficiencies with ZIM. PLAY NANORA SEE CODE

Pieces (2014) ▲ Pieces is a game where you can hide pieces for others to find a party or conferences and it is the first Mobile app made with ZIM. Zen has successfully tested Pieces on mobile devices as an app with Phone Gap Build but he is still preparing the app for the app stores. The idea with Pieces was to see if an information type app could be made on the canvas. The app makes extensive use of the ZIM Pages module to handle dozens of pages in two different sections: hiding and finding pieces. Looking at the code, it is heavy on the asset making. This was a lot of cut and paste so not as bad as it seems. Zen made a simple demo of the app letting you swipe through sample pages of the find section. He used ZIM and the Pages module to create this in about an hour. Here is the demo and the code for the demo followed by the code for the real Pieces app. VIEW DEMO DEMO CODE FULL CODE

ZIM Swipe Test (2014) ▲ ZIM Pages provides code to handle swiping of screens. This code depends primarily on how far you need to move your finger to be considered a swipe and in how long a time. Zen made a tool with ZIM that lets a developer change these parameters to a setting they like best. TRY SWIPE TEST SEE CODE

POMP (2015) ▲ A quick game used in the ZIM Learn tutorial. A bunch of balls grow bigger and you have to press them to make them small. The game is over once all the balls are touching. The game shows how to use a loop to make objects. And also how to apply hit tests, events, animation and sound. PLAY POMP SHORT CODE FULL CODE

ZIM Socket (2015) ▲ Multiuser code for chats, avatars, shared white boards and collages, etc. Dan Zen created Robin Multiuser for Flash many years ago and this is a JavaScript version using SocketIO and NodeJS. On the ZIM Socket page, there is a paragraph that can be highlighted. If other people or you in another browser window highlight, then all highlights appear magically on the screens. Multiuser code usually requires code on the server as well as the client (browser). ZIM Socket handles all the code on the server so developers do not have to worry about that. Even so, it can be tricky to set up a NodeJS server so Zen lets start up developers host their code on his Amazon server account. ZIM SOCKET HIGHLIGHT SOCKET SERVER

ZIM EGG - collective colouring. Many people can share in the coloring of the egg for this Easter activity. Zen has had classrooms of students operating the egg without any connection issues. ZIM EGG SEE CODE

ZIM CHAT - and example of a classic chat with your custom nickname, rooms, messages when people join and leave and a history when you arrive. Created with ZIM Socket and no extra server side coding. ZIM CHAT SEE CODE

ZIM AVATAR - an example of choosing avatar properties and then moving around (press anywhere) in a world. Fewer multiuser data messages are sent when pressing a desired location rather than dragging. ZIM AVATAR SEE CODE

E-LEARNING EXERCISE - a multiuser app where students drag tiles to the proper locations on a diagram. See the diagram at the Creativity Framework. Lots of fun in class or workshops and there are many applications. ELEARNING SEE CODE

This concludes the first part of the DAN ZEN EXPO CODE EXHIBIT. The last couple years (2014, 2015) have been spent re-tooling by moving interactive media techniques into JavaScript and the HTML 5 Canvas. The future code exhibits will show Zen's work in Flash, PHP, MySQL and early coding in Director and PERL.

October 13 Dan Zen Expo Exhibit

Code 1

Dedicated to Grant Skinner and the CreateJS Team