Announcing my upcoming Interactive Workshop introducing HTML5 and Javascript

By headwinds | Published: May 16, 2012

sierra sessions teaser

THE SIERRA SESSIONS: LEARN THE FUNDAMENTALS AND HOW TO CREATE INTERACTIVE ART, DESIGN, AND GAMES WITH HTML5 AND JAVASCRIPT

If I was just starting out in digital advertising or wanted to create something cool and interactive online, this would be my dream workshop.

At least that is my goal in putting together this workshop. I was thrilled to discover BentoMiso, a co-working group dedicated to web application and game developers. Recently, they asked for people to put together a workshop and I had been thinking about producing one for quite some time. Now is the time since well…I have the time. Say what? I’m currently on a parental leave from my job as interface developer at Blast Radius and would love to do something to give back as well as I miss working with creative people.

I’m currently working on all the details and I’ll post my outline below but any for any future updates, you can:



WHO SHOULD ATTEND

Any person who wants an introduction to programming for the web and would like to learn how to create interactive art and design using modern, browser-based technologies such as HTML5, Javascript and CSS. I welcome all skills levels but beginner to intermediate interactive web designers will probably get the most benefit. Although we will be meeting as a group, this is a solo project oriented workshop where you will create a personal, interactive piece over the course of six sessions. Why is this workshop called the Sierra Sessions?

SIERRA

Sierra Entertainment is an adventure game company in the 80s. Unlike roaming 3D games of today, in their early games, each screen was basically locked and you spent more of the time exploring this single screen interacting with pixels that usually resulted in jokes especially if your tongue icon hit Roger’s plunger.

SESSIONS

First time I heard the word sessions in terms of skateboarding was while working in the art department of Carpet Factory and I’d take breaks in back parking lot with a skateboarder who introduced me to introduced to longboarding. It’s basically about going out on your own or with friends and practicing your moves; showing off too! While I couldn’t pull off all — frankly any of — the tricks of short deck boards, I could do something with a longboard. It suited me. Why am talking about skateboarding? An analogy:  short deck skateboard is to insanely difficult triple A 3D videogame development as longboarding is to simple 2D interactive art or games. And a metaphor: we’ll be longboarding.

Over 4 weeks, the sessions will include:

  1. AN INTRO TO AGENCY LIFE, IDEATION, AND HTML5
  2.  AN INTRO TO INTERACTION DESIGN, ESTABLISHING YOUR CORE FEATURES, AND STYLING CSS
  3. INTERACTIVE PROGRAMMING AND A QUICK DIP INTO JAVASCRIPT
  4.  INTERACTIVE PROGRAMMING AND A DEEPER DIVE INTO JAVASCRIPT

Each class is 3 hours long on a Saturday or Sunday starting at 9am and will basically follow this timeline:

  • 9-9:30: New Lesson plan and Review
  • 9:30-11:30: Work on your Personal projects individually and with my help
  • 11:30 – 12: Review Personal projects as a group

In every class, you will be working with Javascript, CSS, and HTML5. Even if you don’t understand the code on day one – don’t worry! – you will be simply copying and pasting in the beginning until you are more comfortable. By the last session, you should be  able to write some from scratch.

REQUIREMENTS

No prior coding experience just a desire to learn. Ideally, you will need your own laptop or tablet to create your project and follow along with the coding examples in the classroom.  Also bring headphones.

MORE ABOUT YOUR GUIDE 

When I was about 5 years old, I loved playing with lego and made my mom draw dinosaurs.

In highschool, I learned how to program simple adventure games in Basic after spending hours and hours playing quest games by the legendary Sierra Entertainment, Origin and Lucas Arts. In my final year, I was introduced to COBOL and built a basketball manager that had an animation of air Jordan dunking built entirely out of asterisks.

I was obsessed with coding and knew I was bit different from other students after handing in final project with nearly 5000 lines of code printed out like a novel compared to their single sheet. Plus, I didn’t know anyone else writing text adventures in their spare time.  I earned my highest mark is this highschool CS course yet I would not be able to go on to take a CS degree due to 2 math requirements. I was lousy at advanced Calculus and Algebra, and at the time couldn’t see how they related to creating adventure games [today I still can't - actually you really don't need to know any university-level math to program - in fact you rarely use any math!]. Physics would have served me better and I half regret not taking it in highschool; half because they weren’t teaching physics for visual programmers.

I really wanted to become both a game developer and a game designer, but at the time there was no university program for that and actually I couldn’t stand taking all those math courses to get a CS degree which pushed me into pursuing an Arts degree at the Unversity of Waterloo. Although I intended to take a Fine Arts major, I ended up majoring in English Literature, but could still take courses in Fine Arts, History, Music and even Computer Science where I learned more programming fundamentals.

In the summer that I graduated from UW, I discovered the website praystation.com by Josuha Davis and learned how it was created with Flash4. My mind was blown and I suddenly realized that one could combine math, science, programming and illustration to create interactive art! I convinced my parents to send me back to college to earn a New Media Design diploma.

Fast forward to today. I’ve now had over 10 years of agency experience in Toronto; 4 as designer and and now 6 as a developer. I’m currently a senior interface developer at Blast Radius and spend my days primarily coding. Yet, I still  consider myself a hybrid designer/developer who loves to prototype and blend code with design and art creating works inspired by culture, gaming and the environment.

Over the years, I’ve been fortunate enough to attend interactive workshops with a few of my heroes of the interwebs: Grant Skinner, Colin Moock, Jeff Veen, and Joshua Davis. Standing on the shoulders of these giants, my workshop will definitely reflect a bit of what I learned from them and mix in my own personal magic.

nest of bees: a javascript and html5 tech demo

By headwinds | Published: March 25, 2011

Last Saturday I watched an episode of the Deadliest Warrior featuring the Ming Warrior versus the Musketeer.

The Ming Warrior is a real world archer who applied the magic of gun power to his arrow, which when lit, traveled twice as fast and hard. If one takes 30 of these flame darts; gathers them into a hand held wooden crate; and fires them all at once; they become a nest of bees.

I’m basically a pacifist who normally shies away from violence in real life, but within the fantasy of war games, I’m become fascinated by ancient weaponry, especially anything that hurls projectiles like a Trebuchet or Ballista. You’d be right if you guessed that in WoW I played as headwinds, the hunter cow.

Inspired by this episode, I’ve created a Javascript tech demo. Even though it looks like a game, I won’t call it a game because the art and gameplay are obviously god awful. A tech demo or rapid prototype are much more appropriate than a playable game. For the next few weeks, I’ve decided to experiment with box2D, Javascript and the HTML5 canvas tag.

I started my research by doing a google search to find any frameworks supporting box2D and Javascript. While JQuery Physics and box2dweb looked promising, I decided to work with the open source Box2D JS framework by Ando Yasushi simply because it seemed the most accessible, easy to work with, and I liked the example environment which I took and stripped down to the walls.

Prior to the experiment, I did have some Box2D experience but with Flash instead of JS. Last year, I did this simple box2D tutorial. But this time around, I wanted to dive deeper into the framework and finally read the Box2D manual.

At one point, I had the idea that I would use Box2D JS to control the physics while Easel JS would draw and animate the graphics. I even had some crazy rats running around and bouncing off the walls but this also introduced some bizarre behaviors since both frameworks rely on a single timers. I realized that I was trying to be a bit too ambitious and pulled out Easel JS for now, but would like to save animating canvas sprites for another experiment. I wanted to concentrate on learning box2D anyways. I went with static graphics and pointed them at each physics body through userData hooks.

The following is a sample of some javascript. The original demo didn’t have any sprites nor have userData objects applied, and it was rewarding to reach this moment in code when the costumes started to appear when their new update function was called.

var userDataObj = new Object();
userDataObj.name = name;
userDataObj.bodyType = "arrow";
userDataObj.updateCostume = function(b) {

   var arrowX = Math.floor( b.GetOriginPosition().x );
   var arrowY = Math.floor( b.GetOriginPosition().y ); 

   var c = document.getElementById("nest");
   var cxt=c.getContext("2d");
   var arrowCostume = new Image();
   var imageWidth = 30;
   var imageHeight = 10;
    arrowCostume.onload = function() {
                cxt.save();
		cxt.drawImage(arrowCostume, arrowX, arrowY, imageWidth, imageHeight);
                cxt.restore();
     }
        arrowCostume.src="img/beeArrow.png";
  }

  bodyDef.userData = userDataObj;

   var dirVec = new b2Vec2();
   var Force_in_Newton = 70;
   var rot = bowRotation; // when rot is 45, both x and y are the same -- increases rot causes x to decrease, and y to increase 

   dirVec.x = Force_in_Newton * Math.cos(rot * Math.PI/180);
   dirVec.y = -( Force_in_Newton * Math.sin(rot * Math.PI/180) );

    // APPLY VELOCITY TO THE ARROW
    var applyMass = 10; //need at least 10 mass to break gravity
    dirVec.Multiply(applyMass);
    var arrowBody = world.CreateBody(bodyDef);
    arrowBody.SetLinearVelocity(dirVec);

Since Javascript is similar in syntax to Actionscript 1/2, I found these Flash-based tutorials Box2D tutorials and these ones by Allan Bishop to be excellent and I highly recommend them. I was able to port several parts of their AS samples into JS.

As the demo progressed, I dropped certain goals to concentrate on core logic and collision detection. Instead of musketeers, this mighty ming warrior is up against some stiff competition in the form of several terracotta warriors which were easier to animate. I also substituted rocket-powered beehives for arrows after stumbling across a bee dragon sketch by Anthony Holden.

DOWNLOAD

source
demo

FURTHER RESEARCH

If you look at my bloated JS file, I’ve obviously taken a quick-and-dirty, procedural approach that swelled up to this size. Its getting way too unwieldy at a thousand plus lines and my next plan is to refactor it into smaller, manageable classes and separate some of the presentation into CSS. I’d also like to learn more about context transformations as well as the save and restore functions on the canvas as I believe they might clear up the current flickering issues. Besides EaselJS, there are other ways to animate sprites on the canvas that may not compete with the box2d step cycle. I’ve also spent time playing with how box2D behaves within Cocos2D for the iPhone and plan to return to that next applying this new insight.

FINAL THOUGHT

Although at this point I have a lot of visual glitches, I’m impressed with the speed of testing box2D with javascript. I’ve learned a lot but am still scratching my head over the drawing process and have tried several things to reduce it. This is something I haven’t had to think about as much in Flash, but I’m sure this simply from inexperience and I hope to resolve these flickering conflicts over the next couple weeks. If you have any advice, please post any helpful links in the comments.

Like many of my Flash colleagues, I too have come to the decision to begin evaluating Javascript’s potential to create interactive content with new technologies like HTML5. It’s arguably the hottest buzz word in our industry. It’s best to know what its all about and what it can and cannot do. Basically, I wouldn’t want to lose out on an exciting project if I was forced to code with it. And I know “forced” is a strong word here but that, unfortunately, is generally case too. Ideally, it would be great to be able to freely choose between the two depending on the content. It is really refreshing to try out a another language though.

By using Javascript to quickly test and experiment with Box2D, I can apply this knowledge across other languages that support it so that the time I need to work with physics in Flash or i0S I’ll be that much more ahead of the game.