W3C home > Mailing lists > Public > www-svg@w3.org > November 2011

RE: feTurbulence -- new feature request

From: David Dailey <ddailey@zoominternet.net>
Date: Tue, 15 Nov 2011 22:01:17 -0500
To: "'David Dailey'" <ddailey@zoominternet.net>, <www-svg@w3.org>
Message-ID: <001e01cca40c$02cd6600$08683200$@net>
Let's cancel this request for a new feature.


I just ran across an old example from the early SVG/ Adobe days in which a
candle flame was animated with turbulence being pulled through it.


It is very counter-intuitive, but it works:




A rectangle (or other object) is nested inside three paths. The outermost is


The two inner groups are both moved in opposite directions by
animateTransforms moving at exactly the same speed.  This keeps the
rectangle in place but tricks the filter pattern into following the
outermost animateTransform... 


How funny is that? And who would ever have guessed. My solution, I suppose
was just as counter-intuitive: attaching the filter to a rect in a pattern
and pulling the rect through the pattern space, but it always troubled me a
bit that that worked. 


Anyhow, so long as the above example works by design, rather than accident,
and is not on the chopping block for any of those infected by HTML zeal,
then the solution is easier than I realized!


Thanks to Marek Raida for pointing me to this example!






From: David Dailey [mailto:ddailey@zoominternet.net] 
Sent: Saturday, November 12, 2011 1:38 PM
To: www-svg@w3.org
Subject: feTurbulence -- new feature request


I don't know if the SVG Working Group is contemplating new forms of random
noise or not, but the article at
http://graphics.pixar.com/library/WaveletNoise/paper.pdf makes for an
interesting read. More types of noise, even introduction of random
sinusoidal generators, such as in the Adobe Photoshop "wave" distortion
(only mapped to RGB rather than xy - xy is another story that would be nice
for distortion, in fact) would be nice.


All that notwithstanding there is one kind of control over feTurbulence that
I don't think should be difficult to implement - an animatable x-y offset
that could be used to control the position of the turbulence map relative to
a filled region.


Here's the premise - many of the intriguing uses of turbulence have to do
with animation: clouds, smoke,  bubbles, fire, water, etc.


(you'll need Opera for these)





all of which are, in the intrinsic human perception of them, things that
move. I remember a social psychology friend telling me once that certain
Pacific Islanders didn't recognize still photographs of things that are
suppose to move, and there are plenty of examples of things that make no
sense, even in a photo-savvy culture, without movement :

http://srufaculty.sru.edu/david.dailey/pictures/dance2/dance.html (when you
show this sequence to someone while stopped it is unrecognizable, but when
it moves it is).


Anyhow, the question, then, becomes "how to animate turbulence?"


Of the attributes available, only baseFrequency puts "in motion" an
feTurbulence, and it varies the density of the turbulence in a way that can
simulate motion but does not impart much-needed directionality of things
like "flow" and  "wind" that impart to much of the meaning to real world


See http://srufaculty.sru.edu/david.dailey/svg/SVGOpen2008/clouds2.svg as an
example of animating feTurbulence (back and forth rather boringly).


An attempt to simulate turbulent flow, using a series of tricks, can be seen


In such animations, the discontinuities between the beginning and end of the
animation are all too obvious., though the patient animator may find ways to
cloak those seams (well-timed explosions come to mind)


The problem is that feTurbulence is defined relative to some start values of
x and y that remain immutable. Note how in 

http://cs.sru.edu/~ddailey/svg/feTurbulence11.svg (works in Opera, Chrome or

we may drag a window through a turbulence map, but the turbulence itself is
not so easily dragged.


In http://cs.sru.edu/~ddailey/svg/feTurbulence12.svg , (Opera okay, though
FF is really slow and Chrome is not at all) a solution to seamless
directional turbulence is explored (and it is the same method used in
ripples, fire, and bubbles, above):

A turbulence map is laid into a rectangle. The rectangle is mirrored about
its bottom edge. The turbulence and its mirror image are then dragged
repeatedly through the pattern space, which is in turn applied to the region
to be animated. It works but it is really slow.


I think if we just had x and y offsets associated with the Perlin noise then
we could animate those without nearly so much hoopla.







Received on Wednesday, 16 November 2011 03:01:59 UTC

This archive was generated by hypermail 2.3.1 : Wednesday, 8 March 2017 09:47:26 UTC