Sunday, December 30, 2012

Creating a font from my handwriting

In 2012, kind of as a "resolution", I decided I would either try to make my handwriting neater and more consistent or create a font of my handwriting. (I think my handwriting is fairly neat, but it swaps which direction it's leaning or how close to cursive it is or what percentage of each word devolves into a scribble.) With one day remaining this year, I did the latter and figured out how to make my own font.

Real handwriting with pen on paper.

Digitized handwriting!


This tutorial from the Wired wiki gave me a clue as to what software to use and has some information about scanning and tracing your letters if you write them with pen on paper. 

I also had some trouble figuring out how to make my lowercase letters be the right size, but Chank's tutorial, which looks to be about 15 years old yet is still highly relevant, gave me some clues.
In which all the letters are unintentionally the same size...


  • Wacom Bamboo tablet (mine looks like this, but I think this is the current model)
  • Adobe Illustrator
  • Fontlab's Fontographer 5

Step 1: Draw some letters in Illustrator

Illustrator and I are pretty good friends. Better than me and Photoshop, anyway. It allows me to make some pretty nice drawings and diagrams. I use the brush tool and set it to "2 pt oval". It feels like a fat felt-tip pen. Unlike the pencil tool, it doesn't try to connect with and smooth out other brush strokes, because it deselects the stroke after you draw it. If you actively select an existing brush stroke (hold command, then click on the stroke) you can re-stroke an existing stroke.

Alphabet in Illustrator

Step 2: Get those letters into Fontographer

It's super easy to select a letter in Illustrator, copy it, and then paste it into the appropriate letter in Fontographer. The problem is that it will scale your letter to fit the whole space it allocated for that letter. (There are mysterious lines and margins, but I didn't figure them out.)

The trick I learned from Chank's tutorial was to use some dummy geometry to keep your letter height consistent. That's what all those pink lines are. The height of the dummy geometry should go from the highest point to the lowest point in your entire alphabet.

Copying the letter "A" and the dummy pink vertical line.
Pasting the "A" with vertical line into the font program.
Selecting and deleting the vertical line!

Step 3: Test out your new font!

To get a live preview of your font, go to Window > Open Metrics Window and type some stuff. 
I don't know why it's just showing the outline. It wasn't doing that earlier.

Step 4: Muck with the kerning and spacing

I don't know too much about typography. I know making it look good has to do with the spacing between letters and sometimes the spacing between particular pairs of letters.

In the Metrics window, you can click on letters and drag around their left/right spacing and the kerning thing.
Fixing the "y" to slide underneath other letters.

Step 5: Admire and install!

Before creating your final font files, go to Element > Font Info... and give your font a good name. I discovered that it doesn't like having numbers in the name.

Even though copying each letter into the font was kind of tedious, now I'm done and can write a blog post about it! You can download my font here if you are interested.

Font in Fontographer
Font preview in Font Book

Installing, at least on a mac, is pretty easy. Just open the font in the Font Book app, and it will let you install it. Then you can use it in other programs... maybe! My new font works in some programs, but not Powerpoint, which maybe requires fancier export settings.

Now that I know how, maybe I'll make more fonts in the future! Ones that capture specific moods or are designed for certain aesthetics.

Monday, December 24, 2012

Glue and Magnet Nail Polish

Rambling introduction!

I was at dinner with a friend who had nail polish on one moment and then didn't the next! She then enlightened me about peel-off nail polish and in particular, peel-off base coat that you can put any other nail polish on top of! I used to have lots and lots of colors of nail polish and paint all kinds of things, not just my nails, with it. These days, I have some purple and some teal polish. I don't like wearing it because I don't like taking it off or wearing it when it's chipping off. So I was somewhat intrigued by the prospect of peel-off base coat opening me up to a whole new/old life of colorful nails.

I learned right away that peel-off nail polish is not available here in Seattle. However, according to my friend at dinner, a grad student lady in Australia had acquired some and figured out what was in it and determined it was basically just kids' craft glue. I emailed another friend who happens to live/be/maybe-she-just-returned from Australia to inquire about the existence of such products over there, and she helped me track down the original post of the PhD student bloggress.  After identifying what was in it, original chemistry student lady made her own, and the message of "paint your nails with glue!" has now gone around the internet and propagated through several layers of grad students/nail-painting nerds all the way to me.

You could go look at her blog post, or you could look at pictures of me trying it out.

Painting my nails with glue!

This was the girliest AND most scientific night I've had in a while. 

Glue, ugly nail polish to poach bottle from, and some nail polish remover.

I got "tacky glue" because people kept saying, "it's basically Elmer's glue" and then they'd qualify by saying "PVA glue" or "craft glue" which made me think it was not Elmer's. And this was the only craft glue Fred Meyer had. Since that night, I've learned that actual Elmer's would also be fine, if not better, than this because the Tacky Glue is really thick PVA glue.

Insert glue into empty nail polish bottle, add a little bit of water, and mix it.
I used the nail polish remover to help get the yellow out of the bottle. Then I rinsed it with warm soap and water. You want a nail polish bottle so you can have the brush and not just be smearing glue on your hands with the bottle of glue itself.

Glue on nails. Waiting for it to dry and become clear.
I put glue on my skin as a kid... in order to let it dry and then peel it off like creepy/awesome fake dead skin. Just like back then, dried glue turns clear and stops being wet/tacky. Except the tacky glue is always ever so slightly tacky.

Ponder.... will this even work? Be careful to not get glue in your imaginary beard.

I got Nicole in on this whole ordeal, so right there we have yet another generation of grad student learning to paint her nails with glue.

Applying regular nail polish on top of the glue base coat! Actually it's not regular nail polish... it's magnetic. But more on that at the end!

Magnetic blue and sparkly festive red!

I had never experienced this peel off nail polish stuff before, so of course I tried taking it off the very same night I put it on. It worked pretty darn well!

There were little bits of nail polish left over, though. The solution: more glue. Make it so there aren't naked nail borders for the nail polish to stick to. Although another blog warned of not getting too much glue on your fingers because it'll make it too easy to peel off.

Painting my nails with magnets!

Another nail polish topic that came up that first night was the existence of magnetic nail polish. A polish that has magnetic stuff in it so when you hold a magnet over a freshly painted nail, a pattern emerges.

The company (Essence) that supposedly sells the peel-off base coat in Australia, but not here, does in fact sell the magnetic stuff here, so we were able to give them some business anyway. I got a dark blue/gray color and a starburst magnet pattern. Even though I didn't get all the starburst patterns looking that great, I am super entranced by the subtle patterns my nails had. (I painted them and peeled them off again...) It's the right level of distraction for me when I'm typing and going about my day: "Ooh, shiny..." vs. "Ahh! Why are there bright colors on my hands?!"


Tuesday, December 18, 2012

Ingress Day 1

Some portals near my house changed color over night and I saw the chats of other players scroll by. There are other humans actively playing this game! That is one thing it has going for it. And even though I complained about XM yesterday, it's alright if I just think of it as "pretty blue sparkles!"

We tromped all around in the morning... trying and failing to find breakfast. Intel gathered: 1) Einstein Bagels lied about its opening date. 2) Saley's Crepes is moving away. 3) B&O has moved away. 4) Thomas St. Bistro has no hours posted and might only be open on weekends.

Sometimes I'd pull out my phone and see if there were portals near by. I had collected all the sparkly nuggets I could until I found a portal to use them on. I finally found some at UW in Red Square, but it felt like I'd already captured Red Square through a different game... (here's a video of Red Square reconstructed from PhotoCity photos)

I finally used up some of my points to hack a few portals, collect some arcane items, and then deploy some shields on a different portal. I tried to link a portal to another portal, but I guess it wasn't close enough.

Then my hands got so cold that they fell off.
Brrrr! Hand stump.

Monday, December 17, 2012

Ingress Day 0

I got an Ingress invite, although I'm not sure I entered the activation code in anywhere. Anyway, I have it on a phone now and I tried it out briefly.

Keep in mind, it's cold and dark all the time in Seattle until Spring comes back in June.

The app looks very pretty. It's also trying to be way more epic than I care for. Just tell me your real purpose, app! Not this dressed up fake sci-fi.

*clickity clackity* THIS CHAT IS NOT SECURE! 

Blah blah blah. I believed the Blight in Vernor Vinge's A Fire Upon the Deep was some wicked intelligent mold. But this "exotic matter" I don't buy.

The tutorial leads me through some squelchy grass to slurp up energy. That's okay, I like it when apps change the way I interact with the real world.

Then I go through several more missions that have me standing in the cold, poking buttons on my phone. Hack the portal, collect the thing, deploy the thing, fire the crap, charge the resonator, poke poke poke. There are no actual portals near by so this is all done with a fake test portal. Blah blah blah. I'm just standing in one place except when I have to walk 5 feet to get into our out of the range of something. I can't internalize these mechanics because I don't know why I'm doing them.

I couldn't see any real portals nearby until I went back inside and poked at the map with warmer fingers. They're out there. I guess I'll go by those on the way home and try "playing" "for real".

Taking photos wasn't part of the game *SAD FACE* but I took one anyway.


Meme Impression Quiz

I've recently been learning about face detection/comparison/classification for grad school purposes.

Last week, I built a fun little quizzing application where three random meme faces are shown to the user, the user picks one and imitates it, and then the computer guesses which face the user is imitating.

It compares detected/aligned/cropped faces and features computed on those faces. Here are some side-by-side cropped impressions.
Detected/aligned/cropped face comparisons
It works! Not all the time, but most of the time I can make a face it'll recognize. One of the many next steps is to provide feedback about exactly HOW and WHY the best match matches. Then a person who is not very good at imitating the face could learn to get better.
Not bad, computer. Not bad.

Monday, December 10, 2012

Filling in the gaps with PhotoCity

My research in grad school has revolved mainly around games as a means of crowdsourcing the collection of diverse and useful data. I'm embarking on a new project that, like my original game PhotoCity, also combines computer vision and games. It will become a big chunk of my thesis. My original plan for this post was to write about that new project, after providing context by explaining PhotoCity. It turned out that I just wrote about PhotoCity.

Sidenote: Some game designer folks might read this and be concerned about how I'm using games for the wrong reasons. Gamification is a sin! Games with a purpose are questionable! I have more to say about how I think I'm using games for the right reasons (feedback! learning! mastery!) but I'm not going to go into it now.

This is the finish line graphic for The Big Race 3D.


Around 2006 (while I was working on The Big Race, actually) a project called Photo Tourism came out of UW and was then licensed by Microsoft as Photosynth. It had 3 parts:
  1. Use large photo collections from Flickr. It turns out people have photographed and shared enough images from enough different vantage points to reconstruct popular locations like Trevi Fountain and Notre Dame in 3D. 
  2. Perform magic (I can tell you more about the specifics of this, too, if you want!) to turn that hodge-podge of photos into a 3D scene. Release code online, thus enabling many hobbyists and many grad students to base their research off of this work.
  3. Make a slick viewer that lets you navigate the photos in 3D, because you've already recovered their 3D poses relative to each other and the scene. This is the part that Photosynth mainly focused on.  
A big idea of this work that carried over from this work was that there is so much information already out there on the internet! Look! Every photo of the Colosseum you'd ever want to take has already been taken! (Rome in a day is the scaled-up, even more impressive evolution of Photo Tourism, which attempted to reconstruct Rome from 100,000 tagged Flickr photos.)

Using Rome in a Day to make my point, the data is not all there already. 100,000 photos went in and something like 10,000 were incorporated into models. Trevi Fountain was one of the largest clusters with 1,900 images. Most "rome" photos on Flickr are of people and food and interiors... not images that you could use to reconstruct a city. Even if you take a different source of data, like aerial images or street view images, it's going to be missing information along SOME dimensions (time, point of view, level of detail). Information that a normal person with a camera phone could conceivably provide.

hello, trevi fountain. hello, adam and kathleen and bunny ears.
Adam and Kathleen are not all that impressed.
PhotoCity was this awesome project to crowdsource photos that could be used to reconstruct a location in 3D. Will people be able to rebuild, say, the entire UW campus, knowing that that's their goal and getting feedback along the way? Surprise answer: Yes!! Here's a video of the final UW model.

It was part game, in that your progress was measured by points (real 3D points that your photos had added to the 3D model) and flags (denoting territory on a map that you had contributed to). The game elements weren't as key as the feedback, though. PhotoCity was really a collaborative, interactive version of the original Photo Tourism that showed how every photo was incorporated into a model, what new points it added, where it fit in spatially. And except for the part that already existed to do the 3D reconstruction, I built it all.

Contributing in a way that adds up

The original motivation for PhotoCity was incentivization and accomplishing a task that depended on real people with real cameras walking around in the real world.

The more general motivation that rolls through my head these days is this:
  • Does the data exist for {x}? 
  • If not, can I go out and collect that data myself? Or augment existing data with my own?
  • How do I know I'm collecting useful data? 

For PhotoCity, {x} was photos that could be used to reconstruction locations around the world. Obviously there was a lot of the world not reconstructed within PhotoCity, but it was fun to travel to new places and try to start a new model, or in some rare cases, travel to a new country and add to someone else's existing model.

It wasn't just a game, it was an interactive system built on some really neat technology that people all over could contribute to and help grow.

Human-computer symbiosis 

That's a phrase one of my advisors uses to... sound impressive, I think. It evolved from him talking about Foldit but I don't think it's specific to Foldit anymore.

From my recent blog post on design patterns of crowdsourced art and the last little section, it probably sounds like my main goal is enabling creative collaboration and outlets for people to make useful contributions. I do build things in that direction, but there's more...

Wikipedia is the obvious example of an incredibly useful collaborative ecosystem. You write an article on something you're knowledgeable about, or edit or update other people's articles. It's now an amazing resource (also driving lots and lots of computer science research). In PhotoCity, you'd take a picture of some place you happened to be, or you'd seek out near by locations that needed more data and take pictures there.

The difference between Wikipedia and PhotoCity (besides text info about the world vs. photographic imagery) is that a computer processed your photo to decide where it fit in and how much novel information it provided. It's not just an ecosystem of human writers, editors, and browsers, it's an ecosystem with some structure from motion and a big, fat bundle adjustment at its core. When I put on my grad student hat, I care about humans contributing and collaborating with each other, but also with some underlying technology/system/algorithm/computer process. And sometimes the computer is wrong!

Up next (coming soon in another post)

I had the best intentions of writing this here.. it would help me figure out what I'm doing for the rest of the week. For now, though, you just get a bulleted list:
  • New domain (photos of facial expressions and appearance variations) 
  • Contribute face photos that fill in the facial frontier and make face detection, face recognition, and various facial classifiers better
  • Get feedback on how your face photos are advancing that frontier
  • Give feedback on how the computer should correct or question some of its faulty assumptions
I'd like to have more conversations about this. If you have things you want to say, say them here in the comments or via email or whatever!