Wednesday, December 31, 2014

animal advent ala ed emberley: director's commentary 11-15

Day 11: Bat

I might have made this one a little harder than it had to be... I should have made it a complex polygon-ish thing rather than a bunch of triangles (you can see the "skeleton" when it deconstructs.

I labeled each of the corners with letters, and this was the cheat sheet I used:
I liked the speed up / slow down inertia I put for the flapping cycle, rather than have it be "flapping / not flapping".

Day 12: Dachshund

This one was kind of fun. I was trying to think of an interaction (a friend suggested a hot dog bun could kind of float up and envelop the "dog" but that was kind of against the grain of the interactions and ended up with something a lot like Noby Noby Boy.  In theory it might have been better if it stayed on the screen a bit more. (I started a revamp that shrunk the dug down as it covered up more real-estaste, so it was always on the screen, but I ran out of gumption to finish it when it turned out to be uber-tricky to figure out, since I don't actually track where I'm drawing, I just use a series of rotations and translations.

Day 13: Shaggy Dog

This gal's "scribble" effect is unique among the puppets. It's subtle, but each scribbled segment redraws at random intervals. (Shades of "Dr Katz Therapist"'s Squigglevision.) I had some odd trouble between the Java/Javascript version and little "spikes" appearing, which I got under control but not completely resolved - I think it was some kind of rounding issue.

I think the tail wagging, head tilting, and ear adjustment give her a lot of personality

Day 14: Pig

Probably my least favorite of the puppets. (I had a coworker pick what to do next from the book... but I veto'd her first idea of this curly-doodled sheep, since I wasn't sure how to draw the curlicues.) It's about the only animal that's an outline rather than solid-filled, and I think that detracts. Also the interaction was nothing special, the tail unwinding a recycle of the trunk stretch I had already made for the elephant.

Day 15: Elephant

This one pleased me. It was about the third or fourth I had made, so I was hitting my stride a bit, and learning just how fiddly some of these could be! Sometimes the hardest part was the coloring in; when a kid is drawing, she has no problem doing "color in between these two lines", but when my program had it as two pre-defined shapes, it was a little tricky, and needed some cleverness in parts. In this case, the S (which was already a bit "interesting", constructed by 2 tangential circles) had to color in its top half but not its bottom.

Also I like how I made the trunk bend, by increasing the radius of the bottom circle while decreasing how much of the trunk arc it actually drew in.

Also, Go Tufts Jumbos!

Sunday, December 28, 2014

animal advent ala ed emberley: director's commentary 6-10

Day 6: Mice

This one didn't come out as well as I might've hoped. It's one of the few that has no action just on the mouse (in part because the original drawing wasn't very suggestive of animation.) I tried to make up for it by drawing many mice, but the 8 I first tried slowed things down too much in javascript mode, so I went to 3 in a classic "3 blind mice" mode. And I never got the switch from one circle to another as smooth as I thought it would be.

Day 7: Crow

One of my final entries. Kind of simple, but I love the way Emberley's "KAW" looks.
Day 8: Pelican

A good, middle-of-the-pack entry. A lot of personality with the puppetry, I think.

Day 9: Frog

This was the very first puppet I made, once I had the idea to make Emberley puppets. (I was inspired by a tiger I had put together for this year's advent calendar, before i had a theme.) I think it's really charming, and really set up the idea of trying to put in a little extra: the wiggle, the eye tracking, etc. A few puppets later I must have changed how I figured the stroke width for the deconstructed mode, the "D" forms are pleasingly chunky here.

Day 10: Crab

Not sure if I did this one before or after I visited Baltimore! Like the Pelican, I like the personality this one carries.

Thursday, December 25, 2014

animal advent ala ed emberley: director's commentary 1-5

Now that my advent calendar is finished for this year, I wanted to post about the individual entries.

The code is kind of a mess, and evolved in an ad hoc kind of way, with some irregularities in the syntax of the function. It's not easy to teach a computer to draw like a kid! And sometimes I'd throw in a new function just to make the computations easier.

The project (as seen on the github project page explains some of the typical logic I employed. There was some inconsistency to when I would use pushMatrix() and popMatrix() and translate() vs just drawing the primitive in a different location, a lot just depended on what animation or effect I was going for.

Day 1: Snake

Even though this is the first entry, it was made in the middle of the pack.

I think its sinusoidal motion came out rather well, not bad for an opener, given how limited the source material was. The way the snake moves to the mouse location was added later, when I realized I wanted every puppet to do something with "normal" mouse motion and something special on the mouse click.

I still don't know how many users of the site didn't realize something special would happen when you used the mouse button... or for that matter, that you could go back and forth to the "deconstructed" version by pressing the "Go" button that starts the thing off, and then flies to the upper corner and becomes a "<->" button.

Actually, the "Go" button neatly solved a problem I had on iOS, where the first click would be ignored- it's actually there to make sure the canvas has focus.

Day 2: Spider

Springy motion is a crowd-pleaser, and easy to make: simple x-speed, y-speed, always attraction to the center (where the thread is nailed down) and always a gravity... a lot of tweaking so the thread was stretched to a reasonable at length when the thing was at rest.
Day 3: Bug

I was able to leverage the for this little guy.

At first it only did turn and move on button, but then I added turning just on mouse,  in a similar spirit to adding stuff to the snake, so normal mouse behaviour had some puppet like effect.

Day 4: Chick

This was the second puppet I created, and honestly one of the most dull.

Mostly I wanted to prove that I could reuse the library I had stasted building up with the frog.
Day 5: Turtle

One of the final ones I created. Kind of cute, though without much of a puppet effect, and for the interaction I was hoping to get more of the visual effect of a coin reaching the end of its spin, right before it shudders to a stop.

Tuesday, December 23, 2014

modern web tricks

I made my annual virtual advent calendar again, and this year I focused on the work of Ed Emberley. I'll do a "director's commentary" for the 25 puppets once they've all been unlocked, but for now I'd like to talk about some of the little tricks I used in assembling the main launch page for this year's calendar.

(It has been drawn to my attention that some of my work online is older, and doesn't exemplify best web coding practices, and so going into the future I'm determined to always try and put my best face forward with this stuff (and shake some old functional-but-ugly habits I picked up along the way.))

Ed Emberley has a series of books teaching kids and grownups how to draw things one simple shape (a square, a circle, maybe a letter) at a time. I highly recommend them!

My first idea for the layout was with a wide, highly horizontal view for each day.
It did a good job of reflecting the layout of the books, where the construction of the animal is shown as new shapes  in a kind of landscape format. However, it didn't look very calendar-like; I "user tested" the early draft with some friends and the response was along the lines of "what is this?" So I switched back to my traditional 5x5 grid.

Another idea that came from my "beta testers" (Jeremy Penner) was this:
I definitely think it'd be nice to show which days you've visited. Perhaps by showing the animal it becomes? Right now it's pretty tough to go "I wanna play with the whale again", but I see the appeal in getting a surprise when you open up a present.

Great thought, and obvious in retrospect. I made a screen capture for each puppet, so before you had seen it, you see all the pieces that make it in a square (with a day # overlay), but once you've played with it, the abstract list of pieces is replaced with a playfully cropped portrait.

I really think this adds to a sense of discovery and progress in the site. As previously blogged I used browser Local Storage to remember what puppets the user had seen, and then set the day to the portrait if it had been viewed already. Games and some sites use similar techniques, and I really like how the pile of portraits grown. Of course it's limited to only working if you consistently use the same browser, but I couldn't see away around that without offering an account system or tie-in to facebook or some such, which would be overkill (and risks a sense of "well why do they want THAT"). Local Storage was a good compromise.

I decided to display each puppet in a modal dialog (using jqModal.) In previous years I had made each day its own page, but keeping it as a single page app felt better to me. I thought about using a hash/anchor for back button support and bookmarkability, but the small advantages were outweighed by the potential for confusion.

I was still worried about the "what the heck is this" factor, so I did a 26th puppet, a bird, to display at the top, in both deconstructed and puppet form. The thing is, I was shy about having a processing.js app running all the time (especially with some of the heavier puppets, running two things at once wouldn't have been a good idea for performance and battery life reasons) but I still wanted a sense of playful animation, so I converted a series of a screenshots to an animated GIF using ImageMagick. I made the output not loop, and then had the onmouseover reset the src, retriggering the animation when the mouse was moved over it:

<img src="img/shakeATailFeather.gif" onmouseover='this.src="img/shakeATailFeather.gif"'>

I also used setTimeout to trigger the same thing at random intervals, in case the user didn't try hovering.

Each puppet has 3 images associated with it: the portrait, the deconstructed pieces, and then a grayed out, locked deconstructed. (I also used ImageMagick to make the grayed out version.) Assuming I wanted to precache, that would be a lot of roundtrips to the server, so I constructed a CSS sprite sheet for all 75 images. Each was 160x160 and so I set up an explicit .img class (I probably could have been more sophisticated and used different css selectors) for plucking it out of the sheet:
.img {
    background-image: url('spritesheet.png');

The ImageMagick syntax for generating the sheet was

convert image1.png image2.png [...] imageN.png -append spritesheet.png

That makes a big vertical strip, and I made a perl script to construct the CSS for each image, something like

snake .img.seen{
       background-position: 0px -320px

The pattern there is that the y offset is (-1 * size of image * image number).

Finally I could tackle the appearance of each day. I used the css nth-child() selector to alternate red and green, and used a .5 opacity for the number overlay. (For the unlocked days, at least. For locked entries I had a starker white number that was over the greyed out deconstructed pieces image) I wanted to draw attention to the current day, so I decided to have it flash gold (well yellow) using a CSS animation:
.advcal {   
    animation-name: homeCycle; 
@keyframes homeCycle {
  50% {color:yellow}
(I also put in webkit version of these properties.)

For an increased sense of playfulness and interaction, I used CSS transition for the :hover over the squares.

I was glad to have the opportunity to practice CSS animations and transitions, since it's a relatively new technology. I had a little trouble finessing some of the states via classes alone, though, so while I didn't use jQuery for the color cycling I did use it for some of the image showing and hiding.

After launch, I added's widgets for social media sharing and some light view tracking. (In retrospect, I might have had a conflict with their use of the URL anchor hash had I been using that to follow the opening of the puppets.)

You can see the results on the live web site or in the github project page. As you can see, there's a lot of things that a mobile web engineer should be familiar with, and he or she should always be willing to experiment with different layout ideas, and test them with friends.

Wednesday, December 10, 2014

unix/osx find

To find files in (and below) the current path, less than 14 days old:

find . -mtime -14 
Older would be +14. More variants here, including date ranges, minute-level stuff, etc.