Re: Conical gradients

On 25/01/2014 4:49 AM, Jasper van de Gronde wrote:
> On 01/24/2014 05:48 PM, Tab Atkins Jr. wrote:
>> On Fri, Jan 24, 2014 at 12:48 AM, Jasper van de Gronde
>> <th.v.d.gronde@hccnet.nl> wrote:
>>> I once suggested generalizing radial gradients to also allow conical
>>> and/or
>>> "spiral" gradients. Essentially the idea is that radial gradients
>>> give you
>>> the radius part of polar coordinates, while conical gradients are
>>> essentially based on the angle part. A scheme that combines the two
>>> would
>>> allow for a kind of spiral gradient.
>>
>> Radial and conical gradients are "inverses" of each other in a sense,
>> and you don't want to try overloading a single syntax construct to do
>> both of them.
>>
>> (Radials position colors on a line, and color ellipses based on where
>> they touch the line.  Conicals position colors on an ellipse, and
>> color lines based on where they touch the ellipse.)
>
> I wouldn't say they are each other's inverse exactly. To clarify, this
> was the original idea (with some examples):
> http://www.svgopen.org/2011/papers/20-Separating_gradients_from_geometry/#d4e65
>
> As in that paper I used an increased separation of concerns it is not
> completely comparable to the current SVG spec, but the essence is that
> you can have a smooth (and useful) transition between, borrowing your
> terminology, having colours positioned on a line and having them
> positioned on an ellipse (line <-> spiral <-> ellipse).

I have opposed the name 'conic' from the beginning [1] since it' more 
circular. A radial gradient transitions along the radius of a circle or 
ellipse where a conic gradient transitions along the circumference of a 
circle or ellipse. The word *circum* when entered as a search query in 
Wikipedia redirect to the Wikipedia entry for circle [2].

> Whether in practice you want to create a spiral gradient is another
> matter of course, but since it would be relatively easy to define (and
> implement) a kind of "polar" gradient that encompasses radial, spiral
> /and/ conical gradients, it seems a shame not to at least consider it.

I can't see how combining both a radial and conic gradient would allow 
for a kind of spiral gradient. A spiral gradient is more like a 
repeating radial gradient. What you don't cover is something like a 
turbine [3] which is a repeating conic gradient.

What both a spiral and turbine have is what a repeating radial gradient 
or repeating conic gradient don't have and that is curvature that 
deviates from the direction of a radius or circumference. This curvature 
can be expressed as a golden ratio [4] so a phi function is part of what 
could be needed but there also needs to be a direction like clockwise or 
anticlockwise.

Due to the nature of a spiral, a length like a pixel would be a poor 
choice compared to something like a percentage. The below could produce 
a golden spiral.


  repeating-radial-gradient(white 0%, black 100% / 1.618 anticlockwise)


But doing the above does rule out the use of a forward slash for another 
operator. Also there are two parts of a gradient transition in a spiral. 
This can be understood by thinking of a linear curved and having an 
inner-side and an outer-side (depended on clockwise direction).

    inner   |   outer
            |
  x xx X XX | o oo O OO
            |

I'm not proposing the use of ratio in the CSS gradient syntax but I'm 
using it for the sake of an example.


  ratio-radial-gradient(1.618 anticlockwise, white 50%, black 0% / red 
0%, blue 50%)


The forward slash makes more sense when used to distinguish inner from 
outer for a spiral. It is also more author friendly.



1. http://lists.w3.org/Archives/Public/www-style/2012Aug/0317.html
2. http://en.wikipedia.org/wiki/Circum
3. 
http://www.hydrotu.com/photo/pl430630-vertical_large_francis_hydro_power_turbine_for_frequency_50hz_60hz.jpg
4. http://en.wikipedia.org/wiki/Golden_spiral


Alan



-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/

Received on Saturday, 25 January 2014 01:03:43 UTC