Tank Control experiments #

I'm still a bit sad about Flash going away. Yes, I know lots of people hated it. But it was an amazing tool for quick prototypes. There are some projects that I keep revisiting, and over time I'm converting them to HTML5.

Last year I converted my Flash procedural tree generator (succeeded) and attempted to convert my Flash spaceship flyer (failed). This time I wanted to run my Tank Control prototype from 2012:

Screenshot of tank control prototype written in Flash

Labels:

Making-of: draggable objects #

I noticed last year that some of my projects behave inconsistently on touch devices. I didn't do anything about it. But then I was working on a tutorial about how I make my interactive tutorials, I had to show how to handle touch events, and I was embarassed by my code. I decided to take a week to learn about mouse, touch, and pointer events.

That week turned into two. And three. And eight.

I learned a lot. Not only about the event handling spec, but also differences in browser behavior and operating system behavior.

State diagram for mouse and touch events

I was able to greatly simplify my code by using newer APIs and by removing unnecessary code.

Labels:

Making-of: circle drawing page #

People sometimes ask me how I write my interactive tutorials. I started out using d3.js, and five years ago I wrote an interactive tutorial about how I made interactive pages with d3.js. I recreated a diagram from my line drawing tutorial, which was implemented in d3.js. I now use Vue.js v2, so I wrote a new tutorial about how I make interactive pages with Vue. I recreated several diagrams from my circle drawing tutorial.

Diagram constructed in layers

Labels: , ,

One letter variable names #

I admit I use one letter variable names in my code. But which names? Here's what I use in for loops:

# rg 'for \(let . ?=' 
#     | perl -pe 's/.*let //g' | perl -pe 's/=.*//g' 
#     | sort | uniq -c | sort -nr | head

509 i
132 x
122 y
118 r
 57 t
 53 q
 47 j
 43 s
 31 e
 14 k

Labels: