• Login
  • Register

Work for a Member organization and need a Member Portal account? Register here with your official email address.

Project

Feather Editor: Experiments with a shape-blending GUI

Copyright

Jessica Stringham

 Jessica Stringham

Groups

Over the summer, I experimented with a graphical editor that automatically interpolates between neighboring shapes. This originated from trying to draw feathers. Interestingly, feathers sometimes have morphing patterns across neighboring feathers.

Copyright

Fuertes work and the Feather Atlas is in the USFWS are under public domain

Background

For another project, I’ve been writing equations to define the shape of all of the bird feathers. I’m happy with how close they are, but it is a pain to adjust them, and errors stand out because the feathers of real birds line up so precisely. So this project was experimented with a GUI to help me draw the feathers.

Copyright

Jessica Stringham

Here's how I would define the thickness of feather index f_idx (or f_pct scaling it between 0 and 1) over the length of the feather loc_pct.

A shaping function helps capture some of the features of an individual feather, like the little notches or emarginations, as well as the change in feather lengths as you travel along a feather.

Copyright

Jessica Stringham

Bird Wing Anatomy 101

Let’s talk about the feathers on a bird's wing! The special long ones are called flight feathers. You can find reference photographs of feathers from databases such as Featherbase (German-based) or The Feather Atlas from the U.S. Fish and Wildlife Service (North American birds). 

Birds of the same species share a lot of feather characteristics, so that simplifies things for me. To be honest, we tetrapods share an awful lot of physiology. One weird way to think about bird anatomy is imagining your fingers fused, and walking around on your toes with your knees at your sides.

The perching birds, like crows, robins, and sparrows, share a feather layouts. They have 9-10 long and curved primary feathers that spread like a fan and are attached to the fused fingers of their hands. They have a few cute little alula feathers attached to their thumbs. On their forearms are  ~9 rectangular secondaries that stack like cards when folded. The three feathers near their elbows tend to be short and stout because they cover the rest of the feathers when folded, and take a lot of UV radiation damage.

Copyright

Jessica Stringham

Other birds, like ducks and hawks, have slightly different feather layouts. There are also other details I'm glossing over, like tail feather layouts, how they hold their wings.

Action

Right now, I choose the bounds of the feathers, position the tops and bottom of the feathers, and then choose a few control points to adjust, like on the first and last feather. It fits the parameters between these and interpolates the important points of the other feathers! Then I can go back and forth and adjust the points that look far off. It’s pretty satisfying to have a change in one feather cause the others to fall into place.

Copyright

Jessica Stringham

It's an interesting feeling to create with this: the interpolation is a nice stylization, and so I don't always want to match the reference image exactly. I see the effect of editing on a particular feather, and then switch to seeing the effect of editing on all of the other feathers.

Fill

I also tried this to control the fill of feathers. I draw a blob, which is cropped by the feather outline.

Copyright

Jessica Stringham

Implementation

From Silverspot, I already have a method to convert my sketches into vectors of numbers between 0 and 1. So I first label the parameters in my schedules with how they should be mapped to 0 and 1.

I built a JavaScript GUI on top of that, where the user can move important points, and that updates the underlying configuration.

So it creates a little table and then interpolates values across the rows. Given more complicated features, like "finger feather" vs "secondary feather", it can learn more complicated interpolations. The GUI also freezes points at certain places, so if I’ve gone through the effort of positioning them, they aren’t moved somewhere else when I change a neighbor. The positions of the points that aren’t fixed won’t contribute to the learned weights. 

Given more complicated features, like "finger feather" vs "secondary feather", it can learn more complicated interpolations. And after that and a bit of feature engineering, it’s just good ole closed-form linear regression!

Extension

I realize these ideas are generalizable to any sequence of features! Since I connected it to MurreletGen, I could switch out the shapes. Here’s one that uses the same mechanism to draw something like the strands (barbs) of a feather, or something more abstract.

Future

This was a nice experiment in building a JavaScript GUI editor that connects with the rest of my system. It was also cool to figure out how I could use real-time linear regression to interpolate a series of arbitrary things.