Programming

Keep Away Game in HTML5 Canvas

 Keep Away Game
Expand to entire article to play.

The Keep Away game was the last assignment in my Flash class and this is the port to HTML5 canvas, programmed in Javascript. Flash is declining for a number of reasons, including its proprietary nature and that it's not supported by the iPhone. Too bad, because Flash's ActionScript 3.0 is a thoroughgoing object oriented approach to graphics programming similar to Javascript. For the programmer, a circle or rectangle or any other figure suitable to be part of a display list is just an object with properties and methods. Many artists know Flash through the sophisticated Flash Pro environment, where they can create and store images efficiently with "symbols". Think Adobe Photoshop, apt in a couple ways considering that Adobe acquired Flash and developed ActionScript 3.0. Even animations are possible with "tweens". It's a nice in-between technology, where artists can experience Flash as as they always do, but be gently introduced to programming those objects in the code window. My approach is to forgo the environment entirely, except as a medium to execute ActionScript. The environment can be skipped entirely with Abobe's free compiler which turns ActionScript into .swf, which executes in the (free) Flash Player.

Tutorial: HTML5 Canvas Demo in Drupal

The image of the Old Glory below was created with HTML5 canvas and there are a few tricks involved in getting it to work with Drupal 7. The first step is to get the HTML5 doctype at the top of all your Drupal pages. You can modify html.tpl.php, the template determining this, but careful if you do, and maybe the simplest approach is to install the Elements and HTML5 Tools modules. Before enabling those modules, viewing the page source shows doctype references to xhtml, afterwards it does not. Don't forget to clear the cache after enabling the modules and before viewing the source if you want to check (Configuration > Performance > Clear all caches). Then this HTML/CSS puts the rectangle at the upper right:

 <div id="canvasContainer" style="float:right; border:1px solid black; margin:0 0 15px 15px">
  <canvas id="flag" width="296" height="156"></canvas>
 </div>

Teaching at MATC

 MATC circa 1912

After driving truck for eleven years, it was time for a change. Education was important in my household coming up. I have a Latin book from a great-great-grandfather on Mom's side. Half of Mom's family were teachers, including her parents for brief stints as young people in Iowa - two of my first cousins became Math and Computer Science professors in Canada. Mom did her entire high school through correspondence on the plains of Saskatchewan; she said trig just about sunk her. Dad too, where education was seen as a deliverance from poverty. He was an engineering student at the University of Manitoba and struggled through school for many years, having to support himself from a very young age. Struggled academically too, but was in awe of mathematics. I told him once as a kid I wanted to be an engineer like him; he said, oh no, shoot higher - go for mathematics. I still have his calculus book and gave his rebound copy of Men of Mathematics to my daughter Lydia when she graduated with a major in mathematics. On occasion I'd get some recognition at school, the honor roll or something, and would throw it aside as of little interest. Later it would appear framed and on the wall in Dad's home office. I essentially ended up teaching software engineering, that was typically my job title when working in the field; I think he would've been Ok with that.

MathJax

Every few years I'd check to see if there was a good system for putting mathematical notation in a web page and always disappointed until now. Eureka, as Archimedes would say - MathJax is the solution. It is open source, extraordinarily easy to use, works in all browsers, and is text based, hence scalable on the page as text. A single line of setup in the header of an html document enables you to include LaTeX right in the html and have it render beautifully. Here's Cauchy-Schwarz, for example:

\[ \left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right) \]

Calendar

 August 2013 calendar

My original calendar program was on the Casio fx-3600p calculator in 1980 or so - my first programming venue and exercised partly in spare moments when driving truck out on the route; a precursor mobile device you could say. My buddy Dave got me started. I might have scarred myself permanently though. The transition from math to software engineering is always tricky, considering that there are many commonalities, but just as important differences to snag the self-taught and perhaps obstinate and all-too-confident mathematician (perish the thought). The 3600 had this bizarre little macro language providing for a trade-off between memory and program size. You could have (say) fifty memory locations and 400 instructions or twenty locations and 600 instructions. They're really variables of course, but the memory locations were designated K0 through K19 or something.

Pages

Subscribe to RSS - Programming