Re: [svg-developers] Of rainbows and doughnuts

1.5 years ago minus one day, I asked questions (below) about rainbows and doughnuts. There was some good discussion which followed that thread as I remember, so one may wish to search through various archives to follow the thread. I confess: I didn't do that. But I found a different solution to the problem recently. Most of my complaints at the time seemed to stem from the sheer amount of script required of SVG to make a color wheel. Well, there is a lot less script in the current approach which uses a <replicate> tag to clone objects across space sort of like <animate> does for time.

Take a look at http://srufaculty.sru.edu/david.dailey/svg/SVGOpen2010/Colors3.svg (working in IE/ASV, Opera, Chrome, Safari and Firefox).

The source code is seven lines of markup* (and involves no script,  if <replicate> is invoked). **

If you don't mind animation and have either Opera10.5 or IE/ASV then see this 3D rotating raindrop as well:

http://srufaculty.sru.edu/david.dailey/svg/SVGOpen2010/Color4.svg

Lots of related examples, thrown together in the past two weeks,  can be seen at http://srufaculty.sru.edu/david.dailey/svg/SVGOpen2010/replicate.htm

The last thirty or so of these have not been properly tested across browsers, so some of the bugs (particularly involving animation) may be mine rather than the browsers. Erik D, though, confirms that at least some of them are not my own, which is reassuring. Israel Eisenberg recently suggested a workaround for rotating the gradients (that Safari and Chrome don't seem to do yet) but I haven't gotten around to it yet.

Anyhow, I don't know that this brings closure to the rainbows and doughnuts thread or not, but I thought it timely 
(1.5 x 365  - 1 )***  to announce progress. 

David

* [source of Colors3.svg]

<path id="curve" d="M 150,150 C 150,75 350,50 450,50  550,50 750,75 750,150 750,225 600,300 450,300  300,300 150,250 150,150 " stroke="none" fill="none" stroke-width="5"  transform="translate(0,120) scale(.7,.5)"/>
<ellipse cx="300" cy="-300" rx="80" ry="70" fill="#f89" stroke="none" stroke-width="1"  opacity=".3">
<replicate repeatCount="160">
 <replicatePath xlink:href="#curve"  xattribute="cx" yattribute="cy"/>
 <replicateAttribute attributeName="fill" 
values=" rgb(255,0,0);rgb(255,0,0);rgb(255,128,0);rgb(255,255,0);rgb(0,255,0); rgb(0,255,255); rgb(0,0,255); rgb(255,0,255); rgb(255,0,0)" />
</replicate>
</ellipse>

** (though there is an oddity involved in simulating the non-transitive nature of stacking order of overlapping toroidal projections drawn in 2-space)

*** approximately 3x7x73 days

----- Original Message ----- 
  From: ddailey 
  To: svg-developers@yahoogroups.com 
  Cc: public-svg-ig@w3.org 
  Sent: Sunday, September 21, 2008 1:30 PM
  Subject: [svg-developers] Of rainbows and doughnuts


  (Apologies for the cross-posting but there are folks in each place who are not in both, and relevance might exist for folks in either place)

  I started wondering yesterday if I could make a color wheel.

  In the page at http://srufaculty.sru.edu/david.dailey/svg/newstuff/rainbow.svg
  (You'll have to use either Opera or IE/ASV owing to the SMIL)

  I started with a simple rainbow and worked on through until I had a spectal doughnut (which was sort of what I wanted), but I encountered several problems on route that I thought might be interesting to discuss. The problems (with labels) are discussed a bit in the document above, but some additional explanation seems appropriate:

  A. The basic spectrum itself is just a gradient with six stops (at RYGCB and M). Interpolation between any pair of those stops, I reasoned would avoid the boundaries of the nonlinearlity in RGB - HSB space. It is, accordingly, conjectured that fewer than six stops in the gradient will not produce a rainbow without leaving out certain values of hue. 

  This plot is sufficient to drive a real-estate conserving color picker such as seen at http://srufaculty.sru.edu/david.dailey/svg/rainbow.svg where the Hue plot is expanded as "fine tuning" below. HSB plots seem to work for humans better than RGB plots but the ones used by Photoshop and other apps take up too much room on screen. The natural question here arises that the plot is not balanced for the human perceiver, where equal distances in RGB space are not perceived as equal in perceptual space. What woud the natural generalization to something like CIEXYZ be? 

  B. The stops used (with SMIL animation) in the animation below have been manually copied and pasted. The <use> element only allows graphics elements, groups, other uses and svg's, but oftentimes it would be nice to be able to reuse parts of filters, gradients and the like. With all the examples on the above page that re-copy several flocks of <stop>s does anyone see a way, short of script, to save on the keystrokes and file size?

  C. The animation of the second rainbow consists of six separate animations which (like addition modulo 6) roll colors in synchrony across the six stops. The animation is not, however smooth. The topic is quite reminiscent of the discussion of cylindrical rotation at http://srufaculty.sru.edu/david.dailey/svg/SVGOpen2008/edges_of_plausibility.htm . Is there a way to make that rolling smooth? Does it also not seem rather wasteful of markup to have to create six separate <animate> tags each with six values inside to accomplish a relatively simple thing? 

  D. The smooth looking animation just uses a trick: make two cycles of the entire spectrum (12 stops in a gradient); make a rectangle twice the size of the view-window (defined by a clipPath) to which the 12-stop gradient is applied, and then drag the rectangle through the clipPath using SMIL. It works, but it seems so troublingly inelegant.

  E. An obvious approach to making a color wheel would be to use a radial gradient rather than a linear one. (Again it would be nice to be able to reuse all those stops defined in the linear gradient along with the embedded animations since the only difference is that we're changing the container (the gradient) of those stops.) The hassle is that the color bands emanate outward from the center of the gradient. (I'm reminded of the radial blur in Photoshop that allows directionality to either be "spin" or "zoom" -- wouldn't it be nice to just have a flag on our radial gradients that converts the layout from spin (the default) to zoom (in which the stops would be layed out radially rather than concentrically)? 

  Anyway, I first decided to experiment with making a circle with a hole in it. The first approach just created two half circular arc segments (using the "a" subcommand of "d" in <path>. Stick those two things together and fill each with an animated radial gradient -- rather fun!

  F. It was troubling to think that I might need to glue multiple shapes together to accomplish what I wanted, so I first drew a single path (using multiple M subcommands) just to remind myself that I could do it that way. I have been troubled for some time that 
  1) it appears that to draw a single path with a hole in it one needs to define a clipPath like so:
  <clipPath id="CP">
  <path d="M 180 300 A 120 40 0 1 1 180 301 M 258 294 A 45 15 0 1 1 258 295" clip-rule="evenodd"/>
  </clipPath>
  and apply that to the region that has been painted by the gradient, rather than to just paint the above path with a fill. Am I right about that? How troubling, if so.
  2. in the above path, it seems that in order to get a region with a hole in it, the coordinates 258,294 and 258, 295, for example, cannot be the same -- some small difference must be declared. The problem, of course with that is that zooming in will reveal a small rectangularity in our otherwise curvilinear world.

  G. Abandoning hope that a gradient will be found to fill the doughnut of F2 with a rainbow, I just went ahead and carved six little bites of a doughnut (each 60 degrees wide). I only had to build one, but then I had to rotate and reposition it. The hassle with doing this through markup is that one has to do the trig in one's head. The hassle with doing it with script is that one has to use script. I went ahead and filled it with the radial gradient since it looks a bit like Venetian glass.

  H. Finally, I just used six custom made linear gradients to apply to each of the six doughnut bites. A lot of work for a color wheel, and as you can see, the edges are not very smooth. 

  Can anyone think of a better approach?

  Q. The questions are embedded in the letters next to each topic. I used script to append strings into new <text> elements cloned from the letters themselves. Might there be an easier way to provide context sensitive explanations?

  cheers
  David

  [Non-text portions of this message have been removed]



  __._,_.___ 
  Messages in this topic (1) Reply (via web post) | Start a new topic 
  Messages | Files | Photos | Polls | Calendar 
  -----
  To unsubscribe send a message to: svg-developers-unsubscribe@yahoogroups.com
  -or-
  visit http://groups.yahoo.com/group/svg-developers and click "edit my membership"
  ---- 
   
  Change settings via the Web (Yahoo! ID required) 
  Change settings via email: Switch delivery to Daily Digest | Switch format to Traditional 
  Visit Your Group | Yahoo! Groups Terms of Use | Unsubscribe Recent Activity
    a..  8New Members
  Visit Your Group 
  Yahoo! Finance
  It's Now Personal

  Guides, news,

  advice & more.

  New business?
  Get new customers.

  List your web site

  in Yahoo! Search.

  Yahoo! Groups
  Everyday Wellness Zone

  Check out featured

  healthy living groups.
  . 
  __,_._,___