Re: [CSSWG] Minutes and Resolutions 2009-02-04: box-shadow and border-image

On Fri, Feb 13, 2009 at 10:04 AM, Brad Kemper <brad.kemper@gmail.com> wrote:
>
> On Feb 13, 2009, at 5:33 AM, Tab Atkins Jr. wrote:
>
>> If you use manhattan distance (the easiest and fastest distance), you
>> maintain sharp corners.
>
> You are assuming 90 degree angles, aren't you? How can a 20 degree angle
> retain a sharp point with a non-vector based spread applied to it? I don't
> think it would, but I'd be happy to be proved wrong. Can you show any
> samples?

Nope, it'll maintain just fine.  I don't have any samples, but I can
give some better explanation down below.

>> You only lose them when you use euclidean
>> distance (much slower, because it involves two multiplications and a
>> square root), or something similar.  Photoshop seems to use a
>> Euclidean distance, since it specifically refers to a 'radius'.  Under
>> a manhattan distance metric, a 'circle' is square.  ^_^
>
> I wouldn't want my circular shadows to become square shadows, or to have
> smooth diagonals turn into a series of giant blocks.

Ah, no, they won't.  What I meant by the "circle is square" comment is
simply the shape of the area that pixels will draw their 'neighbors'
from during the spread calculation.  Manhattan distance preserves
shapes exactly, they just get bigger and fatter.  (Obviously overall
shape may change, as the edges spread and merge, but that's
intrinsically what spreading does.)

Specifically, your circular shadows remain circular and your smooth
diagonals remain smooth.  In addition, your sharp corners remain
sharp, something you don't get when you calculate neighbors using
Euclidean distance.

>> I'm perfectly happy with the result of keeping corners sharp, and the
>> fact that it matches up with what is probably the most performant
>> method (I only say 'probably' because I don't know exact details of
>> the rendering engines, but I'm nearly certain I'm right) is just an
>> added bonus.
>
> As I understand the manhattan distance idea (very limited, after Googling it
> and reading for just a couple minutes), it would not produce smooth edges or
> sharp points. I am very happy with the way PhotoShop does it, and find it
> very difficult to believe that manhattan distance calculations would be an
> improvement on anything but speed.

All right, example time now.

When talking about distance, we're only referring to the method that a
pixel uses to determine who its 'neighbors' are, so that it can take
the min/max of some value during spread calculations (Photoshop uses
'brightness' and so spread finds the min brightness amongst the
pixel's neighbors, while I think we'll be using the alpha channel, and
so our spread will take the maximum opacity instead).

Though we talk about a particular pixel pulling values from its
neighbors within a particular distance, it's equivalent to talk about
it from the other direction; that is, given a particular pixel with a
particular opacity, which other pixels will it push its value on, for
use in their calculations?  This has the benefit of fitting better
with our intuition of spread making edges 'push out'.  It also means
that we get to use a useful brush metaphor when talking about things.

Imagine a simple black and white drawing.  We want to spread the black
areas.  We can do this be tracing the edges of the black areas with a
brush set to the size we want.  (Obviously browsers won't be doing
this under the hood, but the effect is equivalent to apply a minimum
filter.)

Using euclidean distance is like using a circular brush.  Lines stay
lines, curves stay curves, but sharp corners (actually it applies to
things that aren't necessarily 'sharp', just anything with a radius of
curvature less than your brush) get transformed into a curve.

Using manhattan distance is like using a square brush.  Lines stay
lines, curves stay curves, but corners *stay* corners.

(If you need a visual aid, open up Photoshop and do this exercise by
hand.  You'll find that it works as I describe.)

So, using manhattan distance is not only faster, but preserves shapes
better.  If you really want the corner-rounding effect of a euclidean
distance, the blur parameter to box-shadow uses it.  ^_^

~TJ

Received on Friday, 13 February 2009 16:56:14 UTC