December 22 Dan Zen Expo Exhibit
Zim Bits
Dedicated to Adrian, Pablo and Mark at JAM3
Zim Bits is a collection of interactive media samples / tutorials. These will help creators make interactive media on the HTML Canvas with JavaScript, CreateJS and ZIMjs. They are also fun to look at if you are at all interested in how games and apps are made. ZIM BITS is the latest project by Dan Zen and he hopes it will grow to be well used!
ZIM Bits (2015) ▲ The site just before launch in December of 2015. Eight Bits were chosen - is that cool or what? Let's take a look at each one. VISIT SITE
ZIM BITS Code Example ▲ Each Bit has the code available to view and it is commented to help people understand what is going on and the steps needed. CODE EXAMPLE
ZIM Bits - ZIM Shapes ▲ It is always nice to know how to make some shapes. Drawing on the canvas means coding shapes - what is a circle's fill color, stroke color, stroke thickness, radius, etc. ZIM makes it as easy as possible. VIEW CODE
ZIM Bits - Shuffle ▲ Often things in life do not happen in the same order all the time. One nice thing about computers is they have a random number and this lets us model life and provide games and features that change. This ZIM Bit helps you see the power of shuffling an array which is like a coded list. VIEW CODE
ZIM Bits - Quick Console ▲ Nothing is more frustrating to a coder than inefficiency. Unfortunately, in JavaScript, the default way to write to a console so we can test our code is console.log(). Other languages have cute commands like trace(), print() and echo(). So, with ZIM, Dan Zen provides us with zog(). ZIM provides a set of three letter short cuts all starting with z. For instance, document.getElementByID() - one of the most used commands in JavaScript becomes zid(). VIEW CODE
ZIM Bits - Inline Canvas ▲ ZIM is set up to help make interactive media and most of the time and most of the examples on the ZIM site are full screen. But sometimes we want to embed our work inside traditional HTML pages. This ZIM Bit demonstrates how we can do this. VIEW CODE
ZIM Bits - Responsive Design ▲ As we now have many different size screens it becomes important to make our features respond to the different aspect ratios. With ZIM Frame, we can scale in multiple ways. Most of these examples use a fit scaling where they keep the aspect ratio and fit the feature into the window. But... for mobile, we sometimes need to be more flexive - we anchor titles at the top and navigation at the bottom and then expand or contract the content, etc. It is currently a revolution providing responsive information pages in HTML and CSS. Now ZIM Layout provides a way to do this on the canvas. VIEW CODE
ZIM Bits - Animate Properties ▲ Who doesn't love animation! CreateJS provides TweenJS to animate with easing to various formulae like elastic, bounce, sine, etc. ZIM move and ZIM animate provide a quicker wrapper to these methods and add functionality like rewinding and looping a specified number of times. VIEW CODE
ZIM Bits - Images and Sound ▲ CreateJS provides a way to preload images and sounds and ZIM Frame has a template that provides the steps. ZIM Waiter is a component that can be used to make a little spinner while we are waiting for assets to load. VIEW CODE
ZIM Bits - Pop Up Windows ▲ One of the many components that ZIM provides for the HTML Canvas as there currently are not any. This one is a pane that holds a message, etc. There are also buttons, radio buttons, check boxes, steppers, sliders, labels, etc. in the ZIM Build module. VIEW CODE
This concludes the ZIM Bits Exhibit. At launch there are eight bits. Dan Zen hopes to have sixteen bits soon and sixty four bits in a year's time! If you know of anyone who likes to create interactive media - please share this exhibit and ZIM Bits!
|
