Saturday, August 30, 2014

A tale of three phones

In an effort to understand the phone ecosystem better I gave my daughter my iPhone 5 over a year ago and bought a Samsung Galaxy S 3 running Android and used it for about six months.  I then tried a blue iPhone 5c under the mistaken impression it would be the success in Asia Apple hoped it would be.  After a couple of months I got the Nokia Lumia Icon which I have had for about half a year now.

While I do regret that I couldn't get the a phablet Android (not available on Verizon at the time), and I regret not getting an iPhone 5s (preferably the gold one), and I wanted the long optical path of the Nokia Lumia 920 (again not available on Verizon at the time), I did accomplish the goal of my experiment to get the experience of being a "real" user of iOS, Android, and Windows Mobile.  The hardware of all three particular devices was very impressive, although the iPhone 5c was not much different than my previous 5, and the Galaxy was already mature technology so lagging a little.

Pros:
  • iOS  The app ecosystem was very rich, and the look and feel was very smooth.
  • Android   The app ecosystem was almost as rich as iOS, and the interoperation of apps was neat.  The support for various google services was of course good.
  • Windows   Very smooth UI that was much better to use than I imagined given this is such a new piece of software.  On par with iOS in my subjective opinion.
Cons:
  • iOS  No google maps.  I actually got lost in Boston due to this and ended up in a sketchy neighborhood.  This has been fixed but shows the dark side of the curated closed environment.   Also, the thing is too small for my old eyes.
  • Android  Too much software and Samsung preloaded apps made things confusing.  This shows the dark side of open environments where specific hardware manufacturers sometimes have a negative incentive to support common portable environments between Android devices.
  • Windows   Too few apps.
What really surprised me is that I liked my Android experience the least.  This is personal taste, and I am very impressed with the new HTC phone a friend showed me so this is a dynamic issue, but I am really liking my Lumia running Windows.  Until Windows solves the app problem I am still going to buy Apple once it joins the 5" club, but I think Microsoft really scored with this OS.  Android was nice, but it is already starting to have the Balkanization problem we saw with Linux.  I would love to see google have a "standard" set of apps and settings I could download and get rid of as much manufacturer "improvements" as possible; with that I would give Android another try.  After all, the wild west of Android hardware is why we have phablets, so it does spur innovation.

Color names of the corners of the RGB cube

I've been spending a lot of time with the RGB cube lately and my biggest lesson has been that while it is mathematically very symmetrical between the primaries, it is not symmetrical subjectively (no, this is not a surprise to most of you).   The corners of the cube are key points when messing with it, and in order of increasing luminance (which is a confusing order and I use to emphasize don't get fooled by the geometric symmetry):
  • black (0, 0, 0) 
  • blue (0, 0, 1)
  • red (1, 0, 0)
  • magenta (1, 0, 1)
  • green (0, 1, 0)
  • cyan (0, 1, 1)
  • yellow (1, 1, 0)
  • white (1, 1, 1)
If we believe advocates of opponent process color theory (I am one of them and am in good company given DaVinci stated the opponent primaries were the right ones like it was not a matter of debate), the "true" primaries  are red, green, blue, yellow, black, white.   Your own experience with the names of the "mixed" corners gives some meat to that; which color name is more part of the human vocabulary:
  • cyan
  • magenta
  • yellow
 In fact look at them and try to quickly name them:
The xkcd survey shows that the subject population is more comfortable with the color association with the word "cyan" than it is with "magenta", as is shown from this figure from the survey:

I am impressed people know what "cyan" is; I don't think I would if I weren't in graphics.  I think "pink" is not a bad choice subjectively, but (255,128,128) is more of a classic pink (and note how far it is from the magenta vertex!).  Anthopologists have studied what are the "order" color is added to languages as the develop and an image on the excellent Wired article about Crayola's influence on color naming in the current world has this figure summarizing the anthro work:

There too cyan and magenta appear to be second-class RGB citizens.  Interesting also that yellow trumps blue, and that is consistent with the theory that the RG part of the vison system came first in evolution but I don't know enough to comment on that.

Bottom-line is do take advantage of the wonderfully simple math on the unit cube when using RGB, but always keep in the back of your mind that color as an experience is more complicated and less symmetrical.

Thursday, August 28, 2014

Designing our logo

I am unconvinced logos for software companies (as opposed to programs) really matter as long as one doesn't go too far away from lower case letters in a box.  But it's fun to mess with them, and you have to look at your own logo every day.  We had some criteria for ours:
  1. Not too many hues (I think 2 max is good)
  2. Not too oblong for web layout
  3. Meaningful about the company
  4. Geometrically simple
We went with the key figure from our original meeting when we decided to go with mobile photography apps.

Excuse the "we're the best": it was for internal consumption.  There are a million versions of this diagram on the web and I believe they have their root in Good To Great (2001) where the center of the diagram is "the hedgehog".  The diagram itself has all the four properties above so let's use that.  We just have to work out the details. 

For geometry let's nerd out and look for too much order.  The size of the center region varies with spacing and we like the centers to be in cool spots: the center of each can be where the other two circles intersect.




We like the teal color, but it is low color purity, and we'd like at least the center to have 100% purity.  So we just need to decide how the color combines.  We could do a physical transparency model, but photo-processing is all about abstraction, and a physical model wouldn't do that, so we instead go to pure teal in the middle with lower purity teal in the surrounds.  We add white lines to make it less boring.  We pick the orientation by feel.

And now the key thing: declare it "good enough" and go on to things that definitely matter.   We added the name of the company over the logo on the website because we didn't like how it looked beside it:


But I do have to wonder whether we missed a chance for free publicity with accidental logo features.

Wednesday, August 27, 2014

RGB Luminance revisited

One of the first things you learn in graphics is that green is subjectively brighter than red than is brighter than blue.  This goes back to the old school TV formula for converting color (RGB) to BW TV.  The wikipedia article on this is pretty good, and makes the important practical distinction between non-linear luma and linear luminace that all that gamma business.   But is getting that luminance formula important?  And if so, what is it for modern LCD screens?  I have had to pick a formula for my apps (I use an HSV inspired color space so need a formula for V) and it in practice doesn't seem to matter, but I thought I should dig into this a little now that the betas are done. 

First, always question all assumptions if easy to do so!  Are the primaries really different?  I find this question confusing: which of the colors below is brighter?

So we shouldn't expect an easy or clean answer here, and thinking there is an exact one is probably naive.  But that doesn't mean we shouldn't pick a standard if they are different.  To get at this I use a really cool indirect measure Gordon Kindlmann and collaborators used over a decade ago for designing pseudocolor maps.  See the paper for the roots of this idea.  I use the image from that paper with a few mods for easy photoshopping.  The basic idea is we see something as a face if light and dark are distributed "well".   It's faces and saturated colors and who knows what monitor you are looking at this on, so if you think this is science, you didn't read the disclaimer that is implicit here.

Here are images with all-on RGB (255, 0, 0), (0, 255, 0), (0, 0, 255), and black, white, and neutral grey (128, 128, 128).


Note some clearly look like faces, and some are more confusing.   Where the grey level crosses over so they are both confusing, the saturated color and the grey are about the same "brightness" under this measure.  Note with black, the right part of the pair always looks more natural, and the opposite with white.  If you look in the middle pairs, it does appear true that green is brighter than neutral grey, blue is darker, and red is more uncertain.  So the green > red > blue we always hear is still true.

Using my computer and my eye, here are the cross-over greys:
Cross-over greys are about 76/255, 128/255,  213/255.
This implies the primaries are very different.  For luma (not linear intensities)  and these 3 data points this implies

L = 0.29B + 0.5R +  0.83G

Those don't add up to one, so the non-linearities are in play for sure.   What if we assume gamma = 2.2, and then redo this.  Now the cross over points are: (0.07, 0.21, 0.66).   That's a lot closer to adding up to one, so more what we are used no in messing with linear gamma.  But is that a coincidence or is it useful?  Let's see if it is predictive.  What if we use pure magenta (255, 0, 255) and predict the cross-over.  If we use the luminance formula were we normalize the constants above to get to sum to 1.0:

L = 0.07B + 0.22R + 0.71G

We get for magenta 0.7+0.22 = 0.29.  If we gamma correct that at 2.2 and convert to 0..255 we get (147/255).  Trying it, before I knew this number, I got about 150 as my subjective crossover:
Greys 0, 128, 150, 255

So it looks like for this half-baked test, the luminance formula for sRGB is not far off:

L = 0.0722B + 0.2126R + 0.722G

Actually it's suspiciously close.  Either the sRGB standard is really making monitor calibration/standardization finally kind of happen, or I got lucky. 

Note that while this post was accidently a post endorsing doing gamma right, I actually believe that what matters in practice is not doing gamma wrong.  But doing it "right" is one way to make sure you don't do it wrong (thinking 128/255 is half as much physical intensity as 255/255).

Monday, August 25, 2014

Requesting your help for new app: Pando

We've had a social photo app in the works for some time that we will soon be doing a limited beta launch of: pando.  Pando is a user-to-user ephemeral photo sharing app, but that function is not what I want your help with.  Pando also can anonymously share to the web at pandopix.com.   Please download the app (iOS, Windows Mobile, or Android) by clicking on the appropriate link icon at the top right of the site:

The "doorknop" (I meant to do that!  Yeah that's the ticket) was uploaded from the app using the steps here:
Once you do that with a photo, try adding a hashtag (currently limited to our set listed in "links" at the top of the site) anywhere in the message you add.  For example if you say "I have crazy #cats" it will go to pandopix.com/cats

Your mission, should you choose to accept it, is to help me fill all the subdirectories (we call them "subpandos" inspired by reddit terminology) with nicer pictures than I would make.

And for extra credit, add "shirley" as a friend and send me a private message.  Use the stickers for that for my amusement :)

Sunday, August 24, 2014

Color bleeding looks like a bug!

This red effect is color bleeding in my living room this morning, and it is about what it really looks like (no photoshop or camera curve amplification).  I looked through the window in the image and no red out there!


The source for the image was obvious once I shadowed it.  It is all a red car across the screet that has caught the sun before most of the other objects.  It is mostly burned out here which is because it is bright.  I should have HDR'd it!  Next time.   On the right a figure blocking that car (I am standing by the wall where the red pattern appears, taking this picture) completely eliminated the effect.  Now THAT is a secondary light source like we idealize in discussions...


Also for those that enjoy these, Morgan McGuire collects images that look like bugs.  My favorite is the obvious shadow aliasing.

Saturday, August 23, 2014

Purity in RGB

We've just updated our Pic! app (update it if you have it!) to include a "turn it to 11" color mode.  This is sometimes called increasing color "purity" and more commonly "chroma".   There are lots of terms for this basic concept, and in graphics it is usually called "saturation" in the HSV/HSL models.   "Saturation" is used differently in different fields so I avoid it and use "purity".  Most of Pic! uses our own color model, but this seemed best to do in good old RGB.

Note that I am betting purity in RGB is discussed in 50 different places already.  But I couldn't find it anywhere and in case it simply is one of those topic most people think is so simple they never bother to write it down I will here.  I didn't find it that easy!

Reducing purity is easier than increasing it as I will discuss.  First compute the grey (luminance) level associated with the color c.

v = k_r*R + k_g*G + k_b*B

Where the color c is (R,G,B).   The constants are from whatever your favorite luminance formula is, and in my experience it doesn't matter much as long as you are consistent.  It wouldn't surprise me if (1/3, 1/3, 1/3) worked best in practice for most graphics applications and has nice computational advantages.   Now set up an RGB grey v = (v,v,v).    Our assumption that all colors are a combination of a "pure" color b and a grey v:

c = p*b + (1-p)*v

In RGB a "pure" color is one that is 0 in one of the components.  So we can keep subtracting off grey from the smallest component.

min = p*0 + (1-p)*v

so,

p = 1-min/v

Therefore

b = (c - (1-p)*v)/p

That may have components above 1, so pmax should be computed for better clamping:

1.0 = p_max*b_max + (1-p_max)*v
p_max(bmax-v) = 1-v
p_max = (1-v)/(bmax-v);

In glsl or other shading languages, min can be computed without figuring out which component:

float m = min(min(c.r, c.g), c.b);

Here's a diagram of what is going on.  When the color points toward one of the upper faces b will be outside the cibe (see clamping above).


A common use case of turning up the purity to 11 is food pictures.  I may have overdone it here, but you get the point:


Wednesday, August 20, 2014

Blue-greens

In selecting the logo for our company we went with a blue-green that we like and because I have often read it is a popular color among all cultures and genders, and it struck me that blue-greens are not something people have very widely-known names for.

On the blue side, artists have long used "cerulean blue" for their skies.  This has more green in it than I once thought, as "blue" skies do in general.    For example the RGB of the sky is the triple shown where the color leans much more toward green than red.


The color cerulean according to wikipedia is ((0, 123, 167) in sRGB.  The name was given more exposure in The Devil Wears Prada.

If we move more toward green the English words that come to my mind are "turquoise", "teal" and "cyan".   I have usually used these terms interchangeably, but if we are to believe wikipedia they are quite different.   Teal and cyan are perfect blue-green combos (half and half) but teal is darker.  Turquoise leans toward green.  These are:

Note the cyan starts to take on the look the sky often has near the horizon, showing just how much the sky sometimes leans more green than purple.

I checked the great xkcd color survey and I missed the color "aqua" which really doesn't mean much to me (wikipedia says it is a synonym for cyan) but does to the females in his survey:
 For Westerners, I believe a variety of surveys have shown blue and green are very popular colors, with this being a recent one, and here is a summary of their results:
So for Westerners, teal is probably an appealing color, especially given how green many blues lean.
Some companies say blue is the safest color globally and I'm looking for more data there.  Pointers appreciated!   For car color choices blue is popular everywhere, but achromatic is king everywhere.  Partially Apple's influence?

In the end, my impression is everybody likes blue, but especially when it leans green.  Let's close with this picture from fairphotos at flickr where the water is almost as green as it is blue:



Monday, August 18, 2014

The "Zorn palette"

Anders Zorn was a great Swedish painter that is well known among artists for his aggressively limited palette.  I learned of Zorn and his palette from Juan Ramirez, a fine young painter who often uses limited palettes (I have two of his paintings on my wall!), and it has certainly influenced my software.  He didn't always do this, but he often used just white, black, red, and yellow (or sienna).  If you look at the paintings in the web page above you will note a distinct lack of blue and green.  In my last blog post that is essentially what I use.  While this can be distracting for things like skies, it isn't always; note the blue jeans become grey jeans.  It preserves skin tones, which is why it is so common for portraitists.  You can see some secondary evidence Zorn often used just those colors in this self-portrait from wikipedia:

Friday, August 15, 2014

My favorite filter in Pic!

Here is the filter that kills greens and blues but leaves flesh tones alone.
On the left is the original and right is Pic! output.   It's obvious the sky goes from blue to grey but less obvious is the trees on the right are brown (in RGB G is never greater than R).    The trees may still look green but I think that is due to context and contrast.  However it may just be that green is a powerful color: my read of the xkcd data (read that if you haven't it's fantastic!) is that it would be "olive" for most people.

Wednesday, August 13, 2014

Our new app Pic! is live on iOS app store

We have a new photo editing app on the app store.  You can get it for 99 cents here.   Since mostly graphics nerds read this blog, I will buy you a beer next time I see you if you buy it and try it.  That is a 2X-10X return on investment (depending on where you live and the beer you like)!  Please like the Pic! page on facebook as well, and post your photos there.

The basic idea of the app is that you choose between four images you can see all at once.
This is the first screen and you are essentially choosing a category (normal, bi-color, posterized, or technicolor).  The next two screens are fine scale adjustments.  My favorite filter is one I don't think you can get elsewhere where there is no blue or green (just browns, yellows, reds, and greys) but it still (for most input) looks like a color image rather than a sepia-tone.  I leave finding it in the app as an exercise for you.

This is somewhat of a beta app.  Come iOS8 we have a Swift implementation of an app extension (a new plugin-like feature of iOS) that will come out next month.   I think this app is a poster child (pun intended) for app extensions: it does one simple thing well.

Obligatory graphics nerd content: to get these filters to work I needed to use a boutique color space that as far as I know has not been used, or is even known, in graphics.  It is not new to humanity and I will write it up when it is no longer secret sauce for us: it's will be my go-to color space for lots of things in the future.