Wednesday, November 27, 2013

Giving Thanks

This year has been ... well it's sucked.  I'm not superstitious, but I'm entirely ready for this particular "13" to be over.  Regardless, I have plenty to be thankful about, and I want to give credit where credit is due.

Thank you, smart people.

All kinds, all flavors of smart people.  Smart philosophers who ask interesting and hard questions.  Smart scientists who seek to understand the nature of the universe.  Smart engineers who combine knowledge with craft and create new tools.  Smart businesspeople who enable small pockets to afford big ideas.  Smart politicians who balance demand with reality, present with future.  Smart educators who perpetuate smartness itself.

Everything I'm thankful for leads to some obvious (and many less-obvious) smart people I should thank.

I'm thankful for my wife.  A person couldn't ask for a better partner, and I feel lucky every day.  The main smart person to thank here is her.  Thank you, Kim!  Next come the smart people who helped her become who she is - her parents, her teachers, the various professors who helped her earn her various degrees.  Thanks to all of you!  Then of course there are the smart people responsible for a type-1 diabetic being able to live a normal life.  Canadians Frederick Banting and Charles Best were the first to make use of insulin, and a lot of people before and since have helped too.  Many thanks are needed to many people I've never heard of, living and dead.

I'm thankful for my work.  Programming is both something I enjoy and something I can do well enough that people will pay me to do interesting things.  I have my own set of family and teachers to thank, as well as people like the late Dennis Ritchie.  He created the C programming language and co-authored Unix.  (To me, that's like creating oxygen and co-authoring the atmosphere).  Elsewhere in the web of Newton's shoulders-of-giants are today's Linus Torvalds, Richard Stallman, and Patrick Volkerding, back through Alan Turing and Ada Lovelace and beyond.  Thanks, all you smart geeks.  The fact that I get paid implies I have a string of smart businesspeople to thank too.

Just a couple items in, and already I'm hitting up Wikipedia to figure out whom to thank for what.  That means I should probably add Jimmy Wales.  Not that he single-handedly runs Wikipedia, let alone researched and wrote up the particular information I'm after.  Some "shoulders of giants" are actually "giant collections shoulders".  Thank you, giants, and thank you, shoulders.  That work rests on the web, which rests on the internet, which rests on TCP, which rests on machines and designs that join back in around Turing or so, giving me another bunch of smart engineers, smart mathematicians, and even smart statesmen (yes, including Al Gore) to thank.

At this rate, I'd never get through all the smart people I'm thankful for.  Whether you're a big name smart person whose deeds are clearly visible, an obscure smart person doing interesting things, or you're just smart enough to try and make the world a little better, I'm thankful for you.

Tuesday, October 01, 2013

Halloween Artist, Revisited in Geeky Detail

A while back, I made a little toy that simulates carving pumpkins. http://penduin.blogspot.com/2011/10/halloween-artist.html
It was during that narrow window when the WebOS-running TouchPad was new and hot, and before HP decided they hated success and killed it.

Since then, web browsers have gown up a lot, and nowadays Mozilla is executing Palm's vision of a browser-based operating system even better than Palm did.  (Sorry, WebOS, I still love you, I'm just sayin'...)  In any case, I've been digging back and dusting off some of my old apps.  When you get your app running on FirefoxOS, you don't just port it to yet another device - you port it to the web.  So now, Halloween Artist runs on damn near anything, including those awesome (and cheap!) Firefox phones that are starting to spring up everywhere.

The platform-agnostic web app:
http://halloweenartist.penduin.net
Play around with it before reading on, if Halloween Artist is new to you.

But enough history; the point of this post is to dive into the jack-o-lantern guts and talk about how the program actually works!

Before we begin, some links!
To this day, I start here whenever I tinker with canvas:
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial
Back in the day I only used mouse events, and just recently added actual touch support.  Nowadays, I'd suggest going the other way 'round, or at least keeping both in mind:
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Events/Touch_events
There are many guides for doing simple drawing programs using canvas.  This one is very detailed:
http://dev.opera.com/articles/view/html5-canvas-painting/

The first step is to get ourselves a pumpkin image in the background, and a canvas layered on top.  This canvas will track mouse and touch events and let the user trace out shapes.


Next, we need an "inside" image that will show through the carved shapes.  Over that, we'll draw the pumpkin but with the user-drawn parts cut out (made transparent).  As luck would have it, the canvas API has some handy compositing modes that are perfect for these tasks.  The main operation we need is "source-out".  Keep the destination image, except where it intersects with the source shape.  Then it's just a matter of doing a normal, source-over composite.



It's a start!  But to look like an actual carved pumpkin, we need to add some 3D magic to draw the inside edges.  Actually, scratch that - we're going to cheat.  :^)  We'll start with a lower-resolution, slightly-blown-up pumpkin image:


...then we'll lighten it up using canvas's "lighter" globalCompositeOperation and a globalAlpha value of, oh let's say 0.5:



...then we'll "source-out" the face, same as we did with the foreground:


...then shrink it a bit, center it, and draw it between the inside background and the outer face:


We're getting there!  But depending on the shape, our corners might not look very convincing.


Fortunately, all this cheating we've been doing - these composite operations and scaling - it's all very fast.  Even on mobile browsers.  Let's turn up the cheating to maximum and draw that middle layer in a loop, shrinking it less each time.

...While we're at it, each step could lighten up the current layer to a lesser degree than the previous (more "inner") one.  And while we're at that, let's lighten it using a more yellow color; our first pass looks a little pinkish.

By putting that middle-layer step inside a loop and making a few tweaks, we get much more realistic edges:


So, we draw a whole bunch of these middle layers, only to draw right over most of it during the next pass.  It's a bit wasteful if you think about it that way, but consider how much simpler this is than trying to simulate all these arbitrary cut-out surfaces "for real".  Instead, this code builds little bits of pumpkin shell, one layer at a time, from the inside out.  It's a fairly elegant illusion if I do say so myself; we can make a passably-realistic image with a sense of depth, without actually doing any complex calculations or intensive processing.

Warning: more history ahead.  I'll try to keep it brief and on-point.  :^)

Figuring out how "deep" to start (how much to shrink), and how many steps to draw in between, all while keeping the "carve" function reasonably fast, was one of those fun bits of experimentation and compromise.  On a high-resolution display, there can still be artifacts if you draw very steep, jagged shapes.  But as far as bang per buck, compatibility with low-end devices, and the 99%-of-shapes use cases, I'm pretty pleased.

I wanted this to be pick-up-and-play friendly, so every day I'd load the latest version onto my TouchPad and hand it to my coworkers, giving them no instructions.

Early on, it was suggested that the carved image should flicker as if the candle inside were burning unevenly.  Easy!  The carve function now produces two images, the normal one and a slightly brighter version, which is positioned (using CSS) right over the main one.  It fades in and out using a randomized timeout and CSS animation on the "opacity" property.  A few minutes of polish, and the illusion was even better.

I forget who, but one coworker went right for the "Carve" button before drawing anything.  Natural enough instinct.  So, added some logic to see if any shapes had been drawn yet, and if not, give the user some quick instructions.  I'm really glad I caught that, because in showing the app to more people later, about a quarter did the same thing.  Much better to show a hint popup than have users wonder why nothing's happening.

What if the user drew outside the pumpkin?  All kinds of goofy artifacts, that's what.  So, I used that handy canvas compositing and masked the user's input before carving.  As a nice side effect, you can now carve all the way out to the edge of a pumpkin, as though you'd chopped it in half.


This solution led to another problem.  When people realized they could recklessly carve giant holes, they'd see the empty, glowing inside surface of the pumpkin.  Where was the light coming from?


So, between drawing the background and drawing the scaled flesh layers, I dropped in a candle.  I actually took some photos of a nice white candle and GIMPed it into the shape of my blocky "penduin" avatar.  May as well include some kind of signature in this program, eh?  I made two different versions, one for each of the flicker-fading images, and made the flame a bit bigger on the brighter version.  It gives a nice little touch of animation, and adds a bit more to the illusion.

Well, that about covers it.  You're free and encouraged to poke around in the source if you'd like to learn more or add your own tweaks.  (Mind the mess; I left some experimental tweaks and previous-attempts in there, commented out.) Halloween Artist is GPLv3, and since you mignt not feel like scraping down the source from the web app itself (and since my lousy DSL might be down at any given moment) I've made it available on GitHub:
https://github.com/penduin/halloweenartist

Have fun, and Happy Halloween ... season.  :^)


Friday, July 12, 2013

Clipface

Here's "Clipface".  I don't know his real name yet.  He showed up today during a long conference call.



Friday, June 07, 2013

Murphy 2003-2013

Yesterday, after some heartbreaking weeks of decline, we had to have Murphy put to sleep.  There were so many things wrong with her, so many organs not working right, and the road before her was full of aggressive treatments - more drugs, strong painkillers, possibly major surgery...  We just couldn't put her through that.

It was the hardest decision we've ever made, individually or together.  It was the right thing, and the kind thing, but it's left a big hole in our hearts and our home.  We've each lost pets before, but Murphy was as much our child as our cat.  We miss her dearly, but we've done what she needed us to do.  She got to go with those who loved her most right there with her, quietly, quickly, and in comfort.  We're hurting now so that she doesn't have to.  And we'll never stop loving our baby girl.