Did you guess it? I'm a sentient spacial anomaly attacking the starship Enterprise.
Thursday, October 31, 2013
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. :^)
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. :^)
Subscribe to:
Posts (Atom)