The Canvas is your World – HTML 5 Canvas

I have been making interactive media for twenty years and now I hope to convince you to try.  If you already code then I hope to convince you to try a new system.  ZIM.

In 1995, I worked in Director to make CD Roms.  In 2000, I moved to Flash to make Web games and apps.  In 2015, I moved fully to HTML 5 and in particular the canvas and JavaScript to make anything.  http://danzen.com/museum/tour.html

The HTML canvas tag allows you to dynamically manipulate pixels to draw and animate shapes.  It was the early 2000s that we got this ability in Flash and it was very exciting.  It is now very exciting in HTML where we can use free tools and publish just about everywhere.  We can also bring our experience to a very large creative community.

HTML HISTORICALLY

HTML was initially conceived as a tagging language for showing people information in a Browser.  You could also provide information through forms with text fields, etc.  DHTML (dynamic HTML) came along in the 2000s and used iFrames and layers to show new information without reloading the page (as could JavaScript through AJAX).  Simple animation of page elements with JavaScript were introduced and continue on with libraries like jQuery.  CSS (cascading style sheets) came along to allow us to style the page more efficiently and completely.

INTERACTIVE MEDIA

While making Web pages for browsing does fall under the realm of interactive media, it can be more specifically called Web design.  Interactive media is much more – see the Interactivity Scale.  Interactive media allows us to create, communicate and play – not just consume.  To make interactive media takes more than just tagging or animating – you have to code (program).  This means capturing events and using logic to determine and create what comes next.  It means providing a variety of interfaces so people can create things (applications).  It means dragging, dropping, rotating and hit tests so people can re-enact the world but in a virtual space.  These are things that were not done in traditional Web design and development (aside from maybe dragging items into a shopping cart).

ZIM

Short for Zen Interactive Modules, ZIM is a free JavaScript framework specifically for making Interactive Media. http://zimjs.com

Much of the ground work is found in a library called CreateJS written by Grant Skinner and crew.  Grant has transported years of interactive media knowledge with Flash to the HTML canvas / JavaScript world.

Remember, the Flash community (and the Director community before hand) has spent over twenty years honing the commands needed to accomplish interactive media.  There are dozens and dozens of commands that go beyond traditional HTML and JavaScript.  These have been shifted and tweaked to perfection.  Without any one of these commands, we could not easily make what we make.  I know, I have created hundreds of applications with millions of lines of award winning code – trust me.  We all owe a HUGE debt to Grant and his team for the phenomenal job they have done preserving our heritage. – Dan Zen

In a sense, CreateJS lets us code in JavaScript as we did in Flash and has even added or simplified nicely in places.  The backbone of CreateJS is EaselJS which provides us with proper object oriented display hierarchy – we can nest objects within objects (containers, shapes, bitmaps, text) and manipulate properties such as position, rotation, alpha, scale and these properties are transferred to their children.  So CreateJS takes us roughly to ground zero of Flash.

Enter ZIM.  When I was coding in Flash, I made over one hundred helper classes (a class is a bunch of code that does something and we can use it over and over).  These were created over ten years and put into packages but otherwise were a touch hodgepodge.  This time, I got to start fresh and planned from the start to let others use and understand these classes.  Half of them are now in ZIM version 1.  The other half, which are for advanced interfaces like gesture and multiuser will be launched as ZIM version 2.  Certainly, there is a lot that can be done with ZIM version 1.

USING ZIM

You can code with any text editor but it is best if you have syntax coloring so you can see the different parts of the code.  Sublime, TextPad, NotePad++, DreamWeaver, etc.

Start with a ZIM Template – perhaps the basic template.  Copy the source code into a file and name it sample.html.  Now drop the file onto a Web browser – Firefox, Chrome, IE, Safari.  You should see a big button and if you click it, it will go to ZIMjs.  Look at the code and see if you can make sense of it.

On ZIMjs, there is information about the functions and classes that are available.  There is example code and you can try out the examples.  There is also a Docs section that tells you what is available, what parameters you can provide, and what properties, methods and events are available.

You can start cutting and pasting bits of the examples at a time into your sample.html and see if you can make things work.

You will also need to know how CreateJS works so you can draw circles, rectangles, lines, and use bitmaps (images), sound and animation.  You can use tutorials, etc.

You will also need to know JavaScript for the programming logic parts such as variables, functions, conditionals, loops, arrays and objects.  Also basic number and string manipulations.  Eventually, you will want to make your own classes as well.

Read about coding here: Dan Zen Museum Coding Tour.

Please try out ZIM and if you need a hand, there is the CreateJS Facebook Group where we answer questions about CreateJS and ZIM.

I can tell you now, you are as close as you have ever come to making being able to make interactive media.  You need no huge application, no instals, etc.  And you can package your code up into a mobile app in less than an hour once you know what you are doing – all free (aside from the $100 dev cost on Apple, the $25 dev cost on Android and $20 for Windows – free for BB).  Just copy that template file and start poking around.

If you want formal training, I teach at Sheridan College in the one-year post grad diploma program http://imm.sheridanc.on.ca – we have a great learning environment.  Here are some open house photos.

— 15 —

Interactive Media – Digido

I have been making digital interactive media works for almost twenty years now.  I have a museum of approximately one hundred works at http://danzen.com.  There is a problem.  I do not know what to call them and I do not know what to call me, the maker.  This matters as it hampers our advancement in culture.

Unlike other creations like Songs, Videos, Sculptures, Paintings, Photographs, etc. we have no name.  We are stuck with generic names for what we make – projects, features, works.  These describe many types of creations.

Unlike other creators like Musicians, Videogrophers, Sculptors, Painters, Photographers, etc. we have no title.  We are perhaps Developers, Designers, Producers, Makers, Creators – but these are titles used in many fields.

I have struggled with this issue all my career and have attempted to come up with an answer a number of times.  You can see a poll that I put on Tapoll – a poll application where you predict the results as you vote:  http://www.tapoll.com/poll/id/413790478.  My recommendations at the time can be seen there – please take the poll.

WHAT DO WE MAKE?

We make digital interactive environments.  Firstly, we cannot just say interactive environments as our world is an interactive environment.  Digital, these days, means in the computer, so that is fine.  Things like songs and films have transcended analog and moved into the digital space – but are not interactive.  Some of the things we make have transcended as well such as games.  Games are an excellent example of digital interactive environments and certainly would be a subset of what we make.

Applications are also an excellent example of what we make.  An applications is software that lets people do things.  Traditionally we have had word processors, spreadsheets, paint programs, etc.  Applications are certainly digital interactive environments.  Social media, where people communicate through posting, sharing, rating, filtering is also a digital interactive environment and can also be thought of as a subset of applications.  Gadgets are small applications and we make those – Wavy – wave your mobile device and make sounds, etc.  Along the same lines, we make simulations where we recreate experiences in life often for educational or training purposes.

We also make art – which is neither games nor applications but for the most part, interactive experiences.  We have to be careful, because many experiences, are not interactive. Videos and Music would not be considered interactive works. You can experience art but it most art is not considered interactive however, there certainly is interactive art experiences and it is an exciting and thriving medium – installation art, etc. and we make that.

I do not consider an information site an interactive environment.  Navigation, in my mind, is the weakest form of interactivity and is already found in older media.  For instance, you navigate to what channel you want to watch or what book on the shelf and which page to read.  Please see my Interactivity Scale.

OPTIONS

Digital Interactive Experience is just too long.  What options do we have…

In our industry – the Interactive Media industry, it is common to have Interactive departments.  This is an indication that interactive is a good word to use.  We have even started to use the term as a noun – “have you seen the interactive?” but I would call this fairly rare – an indication that it is not quite the right word as it has had all the opportunity to catch on and has not.

The “inter” prefix of interactive is not terribly important.  Most people (even most people in our industry) see the inter part of interaction as being between the user and the computer. They completely forget the true or more powerful meaning behind inter.  They forget, that this can mean to interact with people – through the computer.

Act is the key word – whether alone or with others.  Activity would be an ideal name.  We make activities.  Unfortunately, that word has been taken by kindergarten teachers ;-).   Also… we would have to add that we make digital activities.  But you see how activity fits games, puzzles, applications and for the most part any art form where the user takes part and does something.  In the end… “digital activities” is probably not marketable.

In the sense that an activity is a noun (something to do) we could use interactivity as a noun in a similar way.  Therefore, we would make an interactivity.  You would play an interactivity or partake in an interactivity, etc.  I like that.  We can then be Interactivists.  It is a little tongue and cheek, though, with a play on an activist.  Maybe Interactivators ;-).  A problem is that interactivity is used most commonly as a qualifier of our product – it has interactivity.  It is also not a stand-alone, unique word for our work.  Think song, photograph, etc.

We do have the term media but this has been taken by… the media.  Media (plural) or a medium (singular) is a great word – it basically means the same as an environment.  It is something that sits between.  Hot, cold and medium – spiritual medium, etc.  In our case, a medium sits between the creator and the creation – like in art – clay, and paint, etc.  We are have a very special talent and task.  We make mediums.  For instance – the Flute is a medium – we would have made the flute.  We empower people to make content in our environments.  In my philosophy of Nodism I would say we make context in which others can make content.  Anyway – slightly digressing – back to it…

Along the lines of video and audio we could construct another such as actio, doeo, interactio etc.  I like doeo but it sounds quite silly – probably because of Dewey and our association with Huey, Dewey and Louie – or whatever.  Silly is not necessarily a bad thing – and I was using doeo for a while – but I just did not believe in it.

Neal Stephenson called them Ractives in Diamond Age with a plot of an interactive storybook.  Racitve is a really cool name and I would support that – it is the last part of interactives.  It sounds cool perhaps because of Raptors – it is unique – so… maybe.  It has potential.  We could then be Ractivators.

Experientials was a thought as for the last 5 years have been using the term “experiences” as what we build.  Again, many experiences are not interactive but rather authoritative – not user generated.  So, really, this is too broad a term – and it might need the term digital as well.  However, since it is a made up word, it might not need the digital qualifier.

Maybe someone who knows more Greek or Latin might come up with some good arrangements.

PROPOSAL

To really make this stick, I think we need a made up name or a “combo” name with roots or short classifiers.

DIGIDO is my current recommendation.  Digido is initially laughable – and undoubtedly you are at least smiling.  Smiling is not a bad thing.  If we really think about the words audio, movie and video we see that they too are quite cute.  People probably chuckled at the start as they did with iPod and iPad and now we are just fine.

I really like the word DO and so does Nike with its Just do it campaign.  Do means to act – to take part – to create – to build and make.  We make environments in which other people create, communicate and play.  They do things.  They do not just watch or consume – they do.  It is also nice and short.

DIGI – from digital or digits – like our fingers – I believe just means a distinction – like 01 – a jump rather than a blend and hence represents the way computers operate and we are making our environments with computers for computers – whether they be stationary or mobile – big or small – connected or not.  The Canadian New Media Awards, of which I have won two, have been renamed to the Digi Awards.  So that is a positive point in the digi direction ;-).

Digido sounds slightly like didgeridoo – an auspicious connection as a didgeridoo is one of the most basic of instruments.

One thing to consider is what this would be like as a field or industry.  What would it be like on job titles, etc.

Hologram – Holography – Holographer
Photograph – Photography – PhotographerSong – Music – Musician
Show – Television – Producer?  Team…
Movie – Film – Film Maker / Videographer
Digido – Interactive Media – Digidoist

CONCLUSION

Without a name, we are misunderstood.  It is slightly more difficult with our industry because we encompass different media – hence our traditional name, multimedia.  Unfortunately, with media being plural, multi was considered redundant.  The multimedia term is seen as old fashioned – sort of from the CD Rom days.  This has left us without a name and at best “interactive media”  which is like using “musical notes” every time we mean a song.  See what I mean?

Thoughts?

Dan

 

 

 

 

 

 

 

 

Dan Zen Creative Technology Presentations

DAN ZEN

Dan Zen is an Inventor who works with creative technology.  He is a futurist working with short stories to advance invention.  He uses philosophy as a creativity framework and gives talks, presentations and classes concerning creativity and advanced interface technologies.

PRESENTATIONS

Dan Zen is very busy building however on occasion, he does talk at conferences, user-groups, workshops, schools and the like. Here are some examples of past engagements. Please contact door at danzen.com to discuss possibilities.

Commercial Creative Technology – Keynote at CreateInTO (CITO) – 2014

http://www.meetup.com/CreateInTO/

Commercial Creative Technology Diagram

Commercial Creative Technology Icons – Dan Zen

Dan Zen Museum Launch – 2014

http://danzen.com/museum BlogPost and YouTube Video

Dan Zen Dances Psychedelic in the Clouds at the Extravaganza

Canadian New Media Award Winner Dan Zen on Dan Zen

DEMO CAMP DEMOS: DRONER, TILTY, KITTY TARTAN, TOUCHY, OPARTICA TUNNEL  – 2014, 2013, 2012

http://droner.mobi http://tilty.mobi http://kittytartan.com http://touchy.mobi http://opartica.com http://softwarehamilton.com

Mediated Reality: Past, Present, and Future – Function Keys Conference – 2012

http://danzen.com/mediatedreality

Mobile Techniques: Making of Hipster – FITO – 2012

http://hipster.mobi/hipster/talk/

Creativity and New Forms of Mobile Games – Keynote Hamilton DemoCamp – 2011

http://wp.me/p9ja-8Z

CyberSpace Meets Social Change – TalkMedia at Art Gallery of Hamilton – 2010

http://danzen.com/intro [click the logo to toggle interface]

Developing iPhone Applications – mDot Mobile Technology Group – 2010

Creating in WordPress – Toronto WordCamp Presenter – 2009

Inventing for the Web – EntMent Entrepreneur Group – 2009

FITO Educational Panel – 2008, 2011

Gesture Technology – FITO 2007

Zen Mix Vlogging Tool – Dorkbot Toronto 2006

ENDORSEMENTS

Dan Zen is unquestionably a gifted thinker. It is a pleasure to tell you that Dan Zen is also an extremely engaging speaker. He explains his complex, intriguing explorations with such clarity and unbridled enthusiasm that the audience can not help but be captivated; and it is obvious his listeners are of paramount importance to him. To that end, his talks are inclusive, making each audience member feel that they are a participant in the entertaining experience regardless of their level of knowledge about the given area. Equally enjoyable is witnessing his delight in sharing his thoughts with others and encouraging them to think, to be creative.

If there is an opportunity to have the incredibly inventive Dan Zen speak, or present, my recommendation is to seize it.

As the host of “In Conversation: TALK MEDIA” presented by The Factory: Hamilton Media Arts held November 19, 2010 at The Art Gallery of Hamilton, the above reference is written from personal experience.

Best regards,

Denise Dickie
Host, In Conversation: TALK MEDIA
Professor – Media & Entertainment Mohawk College
Former Media Relations Manager and Producer CHCH TV

AND

Dan Zen blows my mind! I am always intrigued and delighted by the expansion I feel when I engage in Dan’s ideas. His talk “Creativity and New Forms of Mobile Games” was brilliant. I learned things about creativity that I had never considered before and that is saying a lot since I have devoted my life work to creative expression!

When I first decided to attend Dan’s talk I worried that it would be too technical for me. I was relieved when he included interactive exercises to express his ideas in a way that made sense.

I would highly recommend a dose of Dan Zen to anyone who wants to expand their mind and open up to their creative potential.

Laura Hollick
Soul Artist and CEO
http://www.soulartstudio.com

Tapoll Gets Bigger!

Tapoll at http://tapoll.com has received over 100,000 views.  In honor, we have made it bigger!  We took the 980 pixel width of Facebook, Google+. flickr, etc. to make Tapoll easier to see and operate!

TWIST

Tapoll polls have a unique twist:

Tapoll lets you predict and vote on a poll at the same time.

The results then show the predictions which often vary quite a bit from the actual votes.  Using the graph feature, you can see over and under predictions as well as the percent of user who voted for their own prediction.  This is often in the 50% range.

SHARING

Just recently, we added share buttons for Facebook, Twitter and Google+.

VIDEO DEMO

The top left corner is redesigned and now includes a link to a video demo on YouTube.

INTERACTIVE VIDEO AD

On the right hand side you will see a video ad for the Touchy game at http://touchy.mobi.  It shows up every once in a while and relates the ad to the keywords of the poll you are viewing.

INSPIRATION!

Tapoll also shows related news and social links in the inspiration column at right.  If you press the TAPOLL button next to any of these, it will start you off creating a poll with this link, picture, video, etc. cited as a reference.  You can also make a poll based on another Tapoll poll as well using the TAPOLL button under any poll.

Please come on by and share a few polls on your social sites!

-11-

Interactive Valentines Card – You Move My Heart

An interactive valentine for the special one in my life 😉

Happy Holidays – Interactive Snowflake

Happy holidays – you can drag the shapes around to make your own!

http://www.danzen.com/snowflake

Dan Zen

Cool – just reached 10,000 views…

~08~

Interactive Op Art – Opartica

Just making sure that anyone searching online for interactive op art tool will find Opartica at http://www.opartica.com. Opartica is a fully interactive optical art maker that lets you spin and overlap shapes like rays, concentric circles and squares, zig zags, and spirals. You can change color and centers. It was built some time ago as a first Flash feature in 2001.  Still works and gets lots of hits etc.

Mixing Interactive Works

Much like we have a DJ for audio and a VJ for video, we will have an IJ for mixing interactive works. These interactive mixes will be on our walls within ten years with OLED technology. OLED Walls.

Meta stories and games will be played out through the mixes. Games of follow the leader, quests, mazes, hunts, rallies, chases, tag.

ZEN MIX
Zen Mix (http://www.zenmix.com) is a tool that was specifically built to mix interactive works. In the original Zen Mix it is not so apparent because people are seeing the outcome of creations. But in the tool, the elements of the creation are interactive. So when I am in the Zen Mix tool I put Opartica (the Op Art tool) on top of Zen Picture (sliding picture viewer) then I can operate both of them and even have a video blended with the results. This is the place to be. Not just watching, but doing, exploring and creating.

SCENARIO
The IJ would be responsible for starting people off. Scenario: here’s an oldie from 2001, Opartica, mixed overtop of the latest branching music video from Vincent Morisset. Each branch of the video brings in associated Zen Pan of overlayed backgrounds. Zen Pan pans across pictures and other interactive works such as Zen Picture Zoom.

In the above scenario, people can watch it all happen or they can use Opartica to change the patterns over the video. When their mouse causes the video to branch, Zen Pan comes in which could be operable through transparent parts of Opartica or perhaps Opartica is faded out (prompted by a shared event). When Zen Pan shows Zen Picture, they can zoom in and out on pictures and wave their mouse to go to other pictures. One of the pictures might be a Zen Deck filled with further interactive works. Clicking on one of these might fade out or ZoomExit the prior interactive works and start you in a fresh set of environments. Personal meta navigation will be available to go back.

ZEN MIX 2
The new Zen Mix (Zen Mix 2) will be like a browser with multiple pages stacked. You can go into the pages through transparent areas or areas in applications that open up to more layers of environments. If all goes well, it will be fullscreen (adjustable), optionally available on your desktop so you can incorporate local and remote media, and will publish an FLV for distribution. It will also let you read in YouTube videos which was a limitation of a previous version of Flash.

SHARED COMMON EVENTS
For this to happen, there are some technical issues. Zen Mix and interactive mixers are possible because of Flash and its ability to load in other flash files. There are cross domain issues on occasion and a standard or a policy of how these will be handled will help people mix interactive works. Also, some legacy code while working independently will not work within other files due primarily to using a root reference. This can be fixed quite easily by locking the root in older code but requires editing.

More importantly, there are issues of transparency and event handling. When a user clicks or rolls over an area does the application on top pass the click or roll event through to the next layer. Flash can have transparent areas that will let the click pass through. But there are more than mouse events. Imagine that an animation is finished playing – that is an event. Or the user is increasing the volume of a sound. If your application broadcasts this event then the other interactive applications could subscribe to the event and do something like zoom in on a picture as the sound is increased. Reaching the end of an animation might change a blend mode or launch another application, etc.

So we need a set of guidelines for interactive works so that people can more easily work in layers of different interactive features. This could take on the form of an interface or an API. But rather than concentrating on a data and method API this should be an event API and perhaps more importantly a common event API to handle:

• Click
• DoubleClick
• Timer
• MouseMove
• Press
• Release
• KeyPress
• KeyRelease
• Load
• Unload
• Focus
• Blur
• Start
  • animation
  • video
  • sound
• Complete
  • animation
  • video
  • sound
• Change
  • volume
  • frame
  • motionX
  • motionY
  • motionZ
  • width
  • height
  • depth
  • transparency
  • blend
  • selection

A variety of common states might be good too to handle modal issues, etc.

Then when these interactive works get put into Zen Mix or an interactive mixer, various properties and connections can be set so that triggered events from one application calls a method or sets a property in another application. This could be a one off thing like a load event. Or it could be an event that calls over an interval – like a mouse move or a change event.

THE PAST
Zen Picture (2004) was probably the first application in which I brought in a second interactive tool (Opartica 2001) and realized that mixing these was interesting. I ran into problems as the panning event of Zen Picture and the subsequent zooming within Zen Picture prevented interaction with the inner tool. Since then, I have used Opartica, Zen Picture and Zen Pan (2005) within Zen Mix for various psychedelic dancing as exercise episodes.

THE FUTURE
The designer of an interactive mix might be a story teller, artist or programmer for a story teller or artist (or one in the same person) would then set up stories or modules for stories. These could be like rooms, chapters, tools, tasks, puzzles, games, mazes, presentations, worlds, realities – cyberspace. Of course a prime element of a mix is another mix.

Aspects of Meta can readily be explored leading to more interest in the topics of the philosophy of Nodism. Nodism takes our understanding of XML (the current way to share organized data) and Object Oriented Programming (how we model life in games an simulations) and proposes a single hierarchy that nests us all.