Posts Tagged ‘coding’

The Canvas is your World – HTML 5 Canvas

March 7, 2015

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.

ZIM Interactive Media JavaScript Modules

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).

Dan Zen - Interactivity Scale

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.

zim1.2

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.

ZIMjs Documentation

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.

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 —

Advertisements

Dan Zen Teaches at Sheridan in Interactive Media – Reviews and Ratings

January 10, 2014
Dan Zen - Sheridan Interactive Media - CLICK!

Dan Zen – Sheridan Interactive Media – CLICK!

Just happened upon an online review/rating of my teaching.  They did not name me but mentioned a teacher climbing on desks and our Sheridan Interactive Multimedia (now called Interactive Media Management – under extreme protest!) one-year post grad program in Oakville Ontario Canada near Toronto – so I figured it was me.  Unfortunately, the student was not able to learn from me as this was too distracting.  It is not like a climb on desks every lesson – but oh well.  So I thought I would balance this with a few anonymous reviews from the last couple years – I hope this is not inappropriate – if you think so, please message me.  I also teach in Web Development, Web Programming, Interactive User Interface Design in Sheridan Computing courses.

If I had to spend 3 hours in a class room and 9 hours at Sheridan, I wouldn’t want it to be for any other class.

Dan Zen is the best University teacher I’ve Ever had.

The course is the greatest!

Class is always fun, innovative and interactive

Best Professor [large underline]

Wonderful learning experience, wish he can teach more courses!

Great Prof.

Great professor who understands and is enthusiastic about the course / topic he teaches

Great Professor 🙂

Amazing class.  Truly engaging and enthusiastic prof makes the process of learning code and game theory a blast and therefore very informative and a great learning experience was had.  Prof used a great number of effective methods to describe complex concepts and codes and make them easy to understand and accessible.  Fantastic experience [multiple underlines]

Professor Dan Zen is an excellent instructor and teaches with lots of passion and understanding.  He is able to teach a lot of important details within a short time period.  Great class and great Professor.  Thanks.

Great enthusiastic attitude in course material and communicating effectively to students.

On of the best classes I’ve ever had thus far.  His energy and interest has kept me awake during class, something I wish all instructors had.

Great enthusiasm for Professor and good to work with.

Great prof!

He is an amazing prof.  He teaches very well and knows how to explain.  Very understanding.

Great Prof!

Great prof and course!

Very enthusiastic about the material; explaining coding in an easy to understand way

Great teacher.  Keep up the good work

Best class I’ve ever had!  Prof Dan Zen has very high enthusiasm and makes going to class very enjoyable!

Best course I have ever taken at Sheridan. 🙂

Great and unique course, recommend to all – applied learning through out – class experiences were great [underline]

I like this class very much.  It is fun and enjoyable and at the same time you learn a lot of new things.

The prof is proud of what he does and teaches a great course.  Very fun class to be a part of.

Very enthusiastic professor!  Looking forward to your classes next year!

Dan Zen is a great prof who shows a lot of enthusiasm while teaching.  Good Job!

Dan Zen is extremely enthusiastic and a great professor.  Easy to talk to.  By far one of my favourite professors

Excellent teacher, the only on I’ve met so far who encourages class participation and interaction with other students.  Explains the lessons very clearly with lots of hands on activities and exercises to ensure comprehension.  Very enthusiastic.

Prof. Zen is a very enthusiastic and knowledgeable teacher who makes learning experience very enjoyable.  This is arguably my favourite course in comparison to all others taken as a UofT student.  I look forward to coming to class every week and hope to enroll in other courses taught by him.

I enjoy how he teaches.  He should teach a workshop for professors.  He makes the class enjoyable – thank you.

The course was very well taught with lots of enthusiasm and always in a good mood.

I think Dan Zen expresses great interest in teaching and he is very well informed and full of ideas.

You are awesome!! =)

Professor Dan Zen is just so much fun to learn from because he brings his enthusiasm to class and is passionate about games.  Best professor I have had in my University time span.

Great enthusiasm, wide knowledge, Flash expert, extremely helpful. Great teacher.

Very eccentric and enthusiastic

Very good prof, Dan Zen.  Very descriptive and explains things well.  Highly recommend for future reference.

Great professor.  Provides a unique learning experience combining many effective teaching techniques.

Professor has been very supportive in helping me learn Flash and I have found this course very valuable.

He is very enthusiastic about his work and gets students just as enthusiastic about the course work.  He is also very helpful and understanding.

Shows very high enthusiasm in the classroom and attends to every question raised by each student.  Makes learning a lot of fun and uses many examples to relate to the concepts to make it easier.

Very fun class!

-> Great professor -> very fun and interesting class

I never thought a teacher could actually make me be more interested in programming.  Congratulations Dan!

Awesome classes conducted in active interesting way. Having fun while learning makes the knowledge gained stay in mind much better and longer.  Awesome semester!  Thank you!

Dan Zen has done amazing things in the past and speaks from a breadth of experience. He makes time for every student and is fantastic at catering to individual needs.

You are so relatable and it creates a great environment in the classroom and amongst the students. You appropriately
integrate fun and humor to make the lessons engaging and enjoyable.

Dan is really knowledgeable and is a great resource for learning Flash and Action Script. He is great at teaching to all skill levels in the class. The material is quite intimidating but Dan keeps it interesting and engaging. My interest and desire to master ActionScript keeps growing as the term progresses.

Interactive Coding is a great course and I am so surprised at how much I already know how to do with it. Dan Zen is a great instructor and he is very enthused about the topic, even at 9 in the morning.

Dan Zen is a great instructor. He is truly unique and has a way of explaining material in an engaging way. Even though my strong suit isn’t coding, I know since I have started I have learned a lot and Dan opened my eyes to the beauty world of coding. Another great thing about Dan is that he does not only teach us how to code but rather to think creatively and challenge the status quo of society. He makes us think and explore ourselves and find what we are passionate about and express that idea in a unique way.

Dan Zen is an absolute pleasure. He is very passionate about his work, technology and very happy to share with us his passion and zest. He is very dynamic, keeps the classes going with interesting stories of his rich past experiences and it always pertains to the subject and lesson in hand. I am very very happy to have met Dan as he reminds me of myself where the zaniness, wackiness, creativeness is always welcome in an environment that fosters creativity, advancements in new technology and overall brotherhood and sisterhood within the classroom and outside. Thanks Dan!

I have never met a professor that instills so much inspiration and learning encouragement as Dan. My main reason to join the program wasn’t to learn, it was to be taught and inspired by him. With such a complicated curriculum as Flash and ActionScript, Dan is able to amazingly make everything clear. Whatever was not clear to me, Dan brought comfort in telling us that it will come in time. And it did. It really is all about the teacher. I am sure I would have given up on ActionScript if it wasn’t for the dedication, professionalism, and pedagogical understanding that Dan possesses. What a teacher. I will truly miss him when the program ends. Dan has given me the logical tools and creative inspiration I need to delve deeper into programming, and for that I thank him so very much.

Professor Dan Zen does an exceptional work within this course. Throughout the learning process which is taught really well, students feel comfortable with the methodology and the teacher. The teacher really engages himself and concerns if all the students are learning. Which is really a plus. Awesome work!

This is my favorite course. The assignments allow a lot of freedom to design what we want to create, making us very proud of what we produce. Dan gives us enough tools to play with, and let our imaginations go wild. The assignments are also catered to various skill levels, so everyone is learning at their pace. Everyone is given the option to explore and challenge themselves if they wish. Interactive Coding is great!!!!

Interactive Coding has been an exciting class and one of my favorite classes.

It has been amazing to delve inside the mind of Dan and analyze his creations (feather series). Having Dan actually explain the steps he took to create a certain Class or application was thoroughly helpful. Even though I found this class a bit outside of my scope of understanding, I did learn the holistical approach to Multimedia Pioneering.

For an intro class, I think the assignments were very appropriate, in terms of learning multimedia pioneering. Assignments helped me understand it better. The prof was always very approachable and was available for help. Great enthusiasm for technology and for this course subject.

I am very proud and honored to be in the presence of Dan Zen and absolutely love the way he thinks and delivers the material. He introduces us to ideas that one may not necessarily explore and also touches on ideas and notions that I wouldn’t think that others would understand, yet I have experience with. A progressive, futuristic, outside of the box thinker. I really enjoy him and his deep thoughts. Thank you very very much Dan. So much fun and laughter. I look forward all the time to the end of the week. He brings laughter and joy to the class and it makes me feel good especially since the material is quite heavy. Absolutely love it! 🙂

I love this course. Mainly because I find it the philosophical counterpart to programming. Since programming is about creative an environment with artificial intelligent, this course fits great in the curriculum. Dan teaches us about the future and how this technology affects us and even though some of the talks and experiments we create maybe not applicable who knows in the future. I mean, most people did not believe when Bell created the telephone it would substitute the telegram. In conclusion, I love Dan’s vision and the way he shares it with us.


%d bloggers like this: