Jarl2D -- Jarl Objects

text (string): This is the actual text to draw on the screen
fontName (string) (optional): The name of the font family. (eg. Arial, Times New Roman, etc...)
fontName (string) (optional): The name of the font family. (eg. Arial, Times New Roman, etc...)
fontStyle (string): The style of the font. (bold|plain|italic)
fontSize (float) (optional): The size of the font. (typically between 10 and 100)

This widget is one of the few widgets with no properties that change over time. There really isn't an obvious way to interpolate between the starting text 'Hello' and the ending text 'Jarl', so this widget doesnt.

At the beginning of example 31 there are some interesting effects done with the text widget.

A simple example that draws 'Hello Jarl'

<widgetDef name="helloJarlText" class="Text" color="red" strokeWidth="1" fill="true" fontSize="50"/>

Rectangle

The Rectangle widget draws rectangles, squares, even parallelegrams when used with traits like Shear. Rectangle has two main properties, but like nearly every property in Jarl, these properties can change over time, so there are also the start and end variants.

width (percentage): The width relative to the screen of the rectangle (eg 50%)
height(percentage): The height relative to the screen of the rectangle (eg 50%)
startWidth (percentage): The starting width relative to the screen of the rectangle (eg 50%)
startHeight(percentage): The starting height relative to the screen of the rectangle (eg 50%)
endWidth (percentage): The ending width relative to the screen of the rectangle (eg 50%)
endHeight(percentage): The ending height relative to the screen of the rectangle (eg 50%)

If you specify a starting and ending width and height, then over the course of drawing this rectangle, the width and height will be interpolated. In other words, if the starting width and height is 0% and the ending width and height is 100%, then half way through, the width and height will be 50%.

Example 18 does some interesting things with the rectangle widget.

An example rectangle that draws a square:

<widgetDef class="Rectangle" width="50%" height="50%">

Another example rectangle that changes from a square to nearly a line:

<widgetDef class="Rectangle" startWidth="50%" startHeight="50%" endWidth="50%" endHeight="1%" >

Ellipse

The Ellipse widget draws ellipses. (another shocker!) Ellipse, just like Rectangle has two primary properties that both have start and stop variants.

width (percentage): The width relative to the screen of the ellipse (eg 50%)
height(percentage): The height relative to the screen of the rectangle ellipse(eg 50%)
startWidth (percentage): The starting width relative to the screen of the ellipse (eg 50%)
startHeight(percentage): The starting height relative to the screen of the ellipse (eg 50%)
endWidth (percentage): The ending width relative to the screen of the ellipse (eg 50%)
endHeight(percentage): The ending height relative to the screen of the ellipse (eg 50%)

If you specify a starting and ending width and height, then over the course of drawing this ellipse, the width and height will be interpolated. You can use this technique to make the ellipse grow and shrink.

Example 9 shows some ellipses moving around with the Position.

An example usage of the ellipse widget:

<widgetDef class="Rectangle" width="50%" height="50%">

Line

The Line widget draws a line. (I can only get so descriptive...) Line has one primary property along with the start and end variants.

coords (percentages): The coordinates of the line relative to the screen representing x1, y1, x2, y2 (eg 50%, 10%, 50%, 90%)
startCoords (percentages): The starting coordinates
endCoords (percentages): The ending coordinates

There isn't too much to this widget. However, it can create some very interesting effects when resized, spun, filtered, traced, etc...

Example 32 draws a sin curve with the Line by using the Sin stroke.

An example line that is nearly the width of the screen centered vertically:

<widgetDef class="Line" coords="50%, 10%, 50%, 90%">

StarField

The StarField widget creates a field of points or 'stars' on the canvas. StarField has one primary property as well as the start and end variants.

density (percentage): The density of stars (0% to 100%)
startDensity (percentage): The starting density of stars (0% to 100%)
endDensity (percentage): The ending density of stars (0% to 100%)

The StarField will create a different set of stars on every new frame which would cause quite a visual mess. In order to combat this, you should always use the HoldFrameCollection in conjunction with the StarField widget.

Example 47 shows off the StarField usage.

An excerpt from Example47.

<widgetDef name="stars" class="HoldFrameCollection" time="4s"> <widgetDef class="EchoCollection" numEchos="30" fadeColor="white" alpha="5%"> <widgetDef class="StarField" width="150%" height="150%" density=".025%" strokeWidth="1.7"> <traits> <trait class="RotationPainter" gradientIndex="31" gradientCycle="2000%"/> <trait class="Rotate" startAngle="0" endAngle="6" useAbsoluteTime="true" /> </traits> </widgetDef> </widgetDef>

Fractal

The Fractal widget is one of the most complex and stunning widgets available. It is based off of the Fractal Applet developed by David Leberknight. Fractal has three primary properties as well as the start and end variants.

gradientIndex (integer): See GradientPainter for details
iterations (integer): The number of iterations
complexRect (coordinates): The complex rectangle to view
startGradientIndex (integer): See GradientPainter for details
startIterations (integer): The starting number of iterations
startComplexRect (coordinates): The starting complex rectangle to view
endGradientIndex (integer): See GradientPainter for details
endIterations (integer): The ending number of iterations
endComplexRect (coordinates): The ending complex rectangle to view

In order to effectively use the Fractal widget, you should use the Fractal Applet as a guide to obtain the proper properties.

Example 40 demonstrates 'flying' into the depths of a Fractal.

Fractal example:

<widgetDef name="fractal" class="Fractal" width="100%" height="100%" startGradientIndex="0" endGradientIndex="6" startIterations="35" endIterations="70" startComplexRect="-2.5, 1.5, -2.0, 2.0" endComplexRect="-0.81489, -0.68723, 0.05957, 0.18723"/>

SimpleCollection

There is a SimpleCollection available for both widgets and traits. They act as a container for a group of widgets or traits. That way the can be accessed as a group. For instance, if you have a group of widgets in a SimpleCollection, you can apply the same filter/stroke/trait to all of the widgets.

There are no primary properties for a SimpleCollection.

Example 17 demonstrates using a SimpleCollection of both traits and widgets.

A trait based SimpleCollection:

<traitDef name="lotsOfStuff" class="SimpleCollection"> <traitDef class="Transparent"> <segment startTime="0%" endTime="50%" startAlpha="100%" endAlpha="25%"/> <segment startTime="50%" endTime="100%" startAlpha="25%" endAlpha="100%"/> </traitDef> <traitDef class="Painter"> <segment startTime="0%" endTime="50%" startColor="blue" endColor="blue"/> <segment startTime="50%" endTime="100%" startColor="red" endColor="red"/> </traitDef> </traitDef>

A widget based SimpleCollection:

EchoCollection

The EchoCollection widget is much like the SimpleCollection widget, but adds 'echos' of previous frames to the current frame. In other words, if you're rendering frame 20, you can simultaneously render the previous 10 frames at the same time, creating an 'echo' effect. EchoCollection has three primary property and no start or end variants.

alpha (float): Just like the Transparent property, but describes how the older echos will 'fade' to transparency. This should be between 0 and 1
numEchos (integer): The number of echos that will occur on every frame. (Note if you've selected 20 frames to echo, and you're rendering frame 19, only 19 previous frames can render.)
fadeColor or fadeColorData (string): Just like the Painter trait for color. This will determine what color the echos will be painted to.

Since the EchoCollection widget is also a SimpleCollection, it can contain many other widgets. This can allow you to make some very interesting groups of echos.

Example 23 is a nice example combining the Precision stroke as well as the EchoCollection widget.

This example will produce 10 echos fading transparently to white:

<widgetDef name="echoingPrecision" class="EchoCollection" numEchos="10" alpha="0%"> <widgetDef widgetDef="precisionCircle"/> </widgetDef>

HoldFrameCollection

The HoldFrameCollection widget is much like the SimpleCollection in that it contains a set of widgets. What makes the hold frame collection unqiue, is that it will always render the 'same' frame. This is most useful when used in conjunction with the StarField widget. HoldFrameCollection has one primary property.

time: The time to hold this collection

The time property is the same tme format as used for widget and filter instances.

Example 47 demonstrates the StarField working together with the HoldFrameCollection.

An example usage of the HoldFrameCollection:

Traits

Traits are always associated with Widgets and alter the size, location, color, angle and many other characteristics about how a widget is drawn.

Trait and TraitDef Just like widgets, you can define a trait definition and reuse it later, or just use instances of traits on the fly. By defining a trait defintion you can apply the same adjustments to a variety of widgets without duplicating code. Look at the examples for many uses of traitDef.

Position

The Position trait can change the position of every widget that it is associated with. Position has one primary property as well as the start and end variants.

pos (percentages): The position relative to the screen to place the widget (eg 50%, 50% would center the widget)
startPos (percentages): The starting position relative to the screen to place the widget
endPos (percentages): The ending position relative to the screen to place the widget

If you specify a starting and ending position, then over the course of drawing the associated widget, the widget will change position (aka 'move').

Example 9 moves some ellipses around with this trait.

An example usage of the trait position that moves an ellipse from the upper left of the screen to the upper right:

<widgetDef name="oval" class="Ellipse" width="20%" height="20%"> <traits><trait class="Position" startPos="20%, 20%" endPos="80%, 20%"/>
</traits> </widgetDef>

PositionPath

The PositionPath trait changes the position of a widget along a path described by the outline of another widget. Position has three primary properties as well as the start and end variants.

pathDef (string): An existing named widget def. The outline of this widget will be used as the motion path
offset (percentage): The offset along widget outline to start positioning the widget
clockwise (boolean): Whether or not to travel clockwise
startPathDef (string): An existing named widget def. The outline of this widget will be used as the motion path. (Should be same as endPathDef)
startOffset (percentage): The starting offset along widget outline to start positioning the widget
startClockwise (boolean): Whether or not to travel clockwise. (Should be same as endClockwise)
endPathDef (string): An existing named widget def. The outline of this widget will be used as the motion path. (Should be same as startPathDef)
endOffset (percentage): The ending offset along widget outline to start positioning the widget
endClockwise (boolean): Whether or not to travel clockwise. (Should be same as startClockwise)

The pathDef and clockwise start/stop properties shouldn't differ. What's most interesting is to modify the startOffset and endOffset. This allows the widget to travel along the outline defined by the pathDef. Of course, this path can get very interesting if the widget defined by pathDef has builtin motion as well.

Example 52 is a trivial example of this.

PositionPath in use:

<widgetDef name="motionCircle" class="Ellipse" width="70%" height="35%" /> <trait class="PositionPath" startPathDef="motionCircle" endPathDef="motionCircle" startOffset="0%" endOffset="100%" startClockwise="true" endClockwise="true"/>

Resize

The Resize trait can change the size of every widget that it is associated with. Resize has two primary properties as well as the start and end variants.

width (percentage): The width relative to the screen of the widget (eg 50%)
height (percentage): The height relative to the screen of the widget (eg 50%)

If you specify a starting and ending size, then over the course of drawing the associated widget, the widget will change grow or shrink.

Example 22 demonstrates this trait.

An example usage of the trait resize:

<trait class="Resize" startWidth="10%" endWidth="100%" startHeight="10%" endHeight="100%" />

Painter

The Painter trait changes the color of the widget that it is associated with. Painter requires either the 'color' or the 'colorData' property. Also, there are the start and end variants.

color (string): The color to draw the widget. Possible values are: white, lightGray, gray, darkGray, black, red, pink, orange, yellow, green, magenta, cyan, blue
colorData (r, g, b): The r,g,b values of the color of the widget. (eg Red would be 255, 0, 0)
startColor (string): The starting color of the widget
startColorData (string): The starting color of the widget
endColor (string): The ending color of the widget
endColorData (string): The starting color of the widget

If you specify the color or any of its variants, then the colorData will be ignored.

Example 7 is a simple example using various colors.

An example usage of painter will change colors from red to purple:

<traitDef name="redToPurple" class="Painter" startColor="red" endColorData="255, 0, 255"/>

Rotate

The Rotate turns the asociated widget by degrees. (Not using radiands here...) Rotate has one primary property as well as the start and end variants.

angle (integer in degrees): the angle to rotate the width in degrees. Eg (1080 would be rotated thee times clockwise)
startAngle (integer in degrees): The starting angle
endAngle (integer in degrees): The ending angle

If you specify a starting and ending angle, then over the course of drawing the associated widget, the widget will change rotate. Also, angles can be negative.

Example 10 rotates some text around.

An example usage of Rotate from example10:

<traitDef name="spinRight" class="Rotate"> <segment startTime="0%" endTime="50%" startAngle="0" endAngle="1080"/> </traitDef>

Motion

The Motion trait allows you to create quadratic motion paths for widets. It is a more advanced version of Position that not only requires the start and end points, but also a third point known as a 'control' point which controls the quadratic curve of the motion path. Motion has three primary properties.

startPos (percentages): The starting position relative to the screen to place the widget
endPos (percentages): The ending position relative to the screen to place the widget
controlPos (percentages): The control position relative to the screen to control the quadratic motion of the widget

The control position takes a bit of getting used to. Feel free to expirement with this for some interesting motion paths. Also, any of the positions can be greater then 100% and less then 0%.

Example 19 demonstrates a 'walking' motion around the screen.

An example usage of the motion that will move around the permiter of the screen, but always veering toward the center of the screen:

<traitDef name="spiral" class="Motion"> <segment startTime="0%" endTime="25%" startPos="20%, 20%" endPos="80%, 80%" controlPos="0%, 100%"/> <segment startTime="25%" endTime="50%" startPos="80%, 80%" endPos="80%, 20%" controlPos="50%, 50%"/> <segment startTime="50%" endTime="75%" startPos="80%, 20%" endPos="20%, 80%" controlPos="100%, 100%"/> <segment startTime="75%" endTime="100%" startPos="20%, 80%" endPos="20%, 20%" controlPos="50%, 50%"/> </traitDef>

Transparent

The Transparent trait controls the opacity/transparency of the associated widget. Transparent has one primary property as well as the start and end variants.

alpha (float): The level of transparency from 0 (transparent) to 1 (opaque)
startAlpha (float): The starting level of transparency
endAlpha (float): The ending level of transparency

You can use this trait to achieve fade in and fade out techniques, or a 'ghost' like effect as well.

Example 15 fades some widgets in and out.

An example usage of the Transparent trait that fades out a widget:

<traitDef name="fadeOut" class="Transparent" startAlpha="100%" endAlpha="0%"/>

GradientPainter

The GradientPainter trait will paint with a gradient or 'smoothly changing' color. GradientPainter has one primary property as well as the start and end variants.

gradientIndex (integer): This is the index of the registered gradient that must be between (1 & 46). Run The Gradient Example for a better look at the different registered gradients.
startGradientIndex (integer): This is the starting index of the registered gradient that must be between (1 & 46). Run The Gradient Example for a better look at the different registered gradients.
endGradientIndex (integer): This is the ending index of the registered gradient that must be between (1 & 46). Run The Gradient Example for a better look at the different registered gradients.

This trait makes some boring colors interesting...

Example 43 demonstrates how much more interesting a rectangle can look.

An example usage of the trait GradientPainter:

<trait class="GradientPainter" gradientIndex="27"/>

RotationPainter

The RotationPainter trait is very similar to the GradientPainter with just a small variation. The RotationPainter doesn't paint the entire gradient every frame. Instead, the rotation painter will rotate through the colors of the gradient, and select one color per frame to use. RotationPainter has two primary properties as well as the start and end variants.

gradientIndex (int): See GradientPainter for details
gradientCycle (percentage): How many times to cycle through the colors of the gradient (eg 200%) cycles through all the colors twice.
startGradientIndex (int): See GradientPainter for details
startGradientCycle (percentage): How many times to cycle through the colors of the gradient (eg 200%) cycles through all the colors twice.
endGradientIndex (int): See GradientPainter for details
endGradientCycle (percentage): How many times to cycle through the colors of the gradient (eg 200%) cycles through all the colors twice.

This trait works nicely with the EchoCollection widget to create some nice 'spirographic' effects.

Example 46 is a little preview of the 'spirographic' effect.

A brief example usage of the RotationPainter trait from example46:

<trait class="RotationPainter" gradientIndex="38" gradientCycle="5000%" />

Shear

The Shear trait applies a shearing transform to the shape of the widget. Shear has two primary properties as well as the start and end variants.

shearX (float): The amount to shear in the x direction (between -1 & 1)
shearY (float): The amount to shear in the y direction (between -1 & 1)
startShearX (float): The starting amount to shear in the x direction (between -1 & 1)
startShearY (float): The starting amount to shear in the y direction (between -1 & 1)
endShearX (float): The ending amount to shear in the x direction (between -1 & 1)
endShearY (float): The ending amount to shear in the y direction (between -1 & 1)

The Shear trait can be thought of as a two-dimension warp trait.

Example 43 shows the Shear trait applied to a rectangle.

A simple example:

<trait class="Shear" startShearX="0" startShearY="0" endShearX=".75" endShearY=".75" />

Strokes

Strokes control how Widgets are actually drawn. You can think of a stroke as a special type of pen used to draw the widget. Currently there are only three different types of Strokes: Precision, Sin and Trace.

Stroke and StrokeDef The same definition/instance capabilities that apply to widgets and traits also apply to strokes. Explore the examples to see different usages of strokeDef.

Precision

The Precision stroke alters the way the precision of the outline of the widget. For instance, if you apply the precision stroke to an Ellipse, you can change the shape from being round, to a hexagon, on to a triangle and eventually a straight line. Precision has two primary properties and no variants.

start (percentage): The starting precision should be between 0 & 100% for instance (50%)
end (percentage): The ending precision should be between 0 & 100% for instance (50%)

Example 21 modifies an ellipse for an interesting effect.

An example usage of the precision stroke that transforms an ellipse to a line:

<strokeDef name="precision" class="Precision" start="100%" end="0%">

Trace

The Trace stroke draws only a portion of the outline of a widget. This can be used to create some dramatic motion type of effects. Trace has three primary property as well as the start and end variants.

traceLength(percentage): The percentage of the overall shape to trace (eg 5% would outline only 1/20th of the widget's shape)
offset (percentage): The percentage through the shape to start at (eg 0% begins outlining at the 'beginning' of the shape.)
clockwise(true|false): Whether to trace in a clockwise fashion or not
startTraceLength(percentage): The starting percentage of the overall shape to trace (eg 5% would outline only 1/20th of the widget's shape)
startOffset (percentage): The starting percentage through the shape to start at (eg 0% begins outlining at the 'beginning' of the shape.)
startClockwise(true|false): Whether to trace in a clockwise fashion or not
endTraceLength(percentage): The ending percentage of the overall shape to trace (eg 5% would outline only 1/20th of the widget's shape)
endOffset (percentage): The ending percentage through the shape to start at (eg 0% begins outlining at the 'beginning' of the shape.)
endClockwise(true|false): Whether to trace in a clockwise fashion or not

As with all of the start/end variants, if you supply one of the start/end variants you should supply all of them.

Example 27 is a nice example of Trace.

This excerpt of trace will be used to draw different portions of a widget at different times.

Sin

The Sin stroke draws the outline of the widget using a sin function Sin has three primary properties as well as the start and end variants.

frequency (float): The frequency of the sin curve (typically between 1 and 100, although 1000 produces interesting effects.)
amplitude (float): The amplitude or height of the sin curve
rand (float): The amount of randomness to apply to the amplitude (less then 0 means no randomness)
startFrequency (float): The starting frequency of the sin curve (typically between 1 and 100, although 1000 produces interesting effects.)
startAmplitude (float): The starting amplitude or height of the sin curve
startRand (float): The starting amount of randomness to apply to the amplitude (less then 0 means no randomness)
endFrequency (float): The ending frequency of the sin curve (typically between 1 and 100, although 1000 produces interesting effects.)
endAmplitude (float): The ending amplitude or height of the sin curve
endRand (float): The ending amount of randomness to apply to the amplitude (less then 0 means no randomness)

You can use this stroke to jazz up any straight lines that might be appearing in your widgets.

Example 29 shows how an ellipse can be altered with the Sin stroke.

An example usage of the trait position:

<strokeDef name="sin" class="Sin" startFrequency="10" endFrequency="10" startAmplitude="1" endAmplitude="100" startRand="-1" endRand="-1"/>

Filters

Filters are based on the java2D ImageFilter class, as well as a series of excellent classes provided by Jerry Huxtable that can be explored At his site.

Filters and FilterDef Just like the other Jarl2d objects, filters also have instance and definition capabilities. Feel free to explore their uses in the examples.

Sphere

The Sphere filter produces a classic sphere effect on either the whole canvas or the widget it is associated with. Sphere has one primary property as well as the start and end variants.

refraction (float): The refraction index is typically between 1 & 3
startRefraction (float): The starting refraction index is typically between 1 & 3
endRefraction (float): The ending refraction index is typically between 1 & 3

This effect can (like all filters) quickly alter the look of the most normal of widgets.

Example 32 is a nice simple example of what the Sphere filter can do to a simple Line.

This example slowly changes the refraction index.

<filterDef name="sphere" class="Sphere" startRefraction="5" endRefraction="2.5"/>

Twirl

The Twirl filter 'spins' or twirls the image or widget around by the specified amount (in degrees). Twirl has one primary property as well as the start and end variants.

angle (in degrees): The angle to twirl the image around (maybe negative)
startAngle (in degrees): The staring angle to twirl the image around (maybe negative)
endAngle (in degrees): The ending angle to twirl the image around (maybe negative)

This can produce a 'going down the drain' effect quite easily.

Example 33 provides a quick glimpse of this filter.

This example starts with a negative rotation, and then fully rotates the image many times clockwise.

<filterDef name="twirl" class="Twirl" startAngle="-55" endAngle="600"/>

Marble

The Marble filter radically changes the image or widget with a marbling like texture. Marble has three primary properties as well as the start and end variants.

xscale (float): The x scale of the marbelization (between 1 & 32)
yscale (float): The y scale of the marbelization (between 1 & 32)
turbulence (float): The turbulence of the marbelization (between 1 & 15)
startXscale (float): The starting x scale of the marbelization (between 1 & 32)
startYscale (float): The starting y scale of the marbelization (between 1 & 32)
startTurbulence (float): The starting turbulence of the marbelization (between 1 & 15)
endXscale (float): The ending x scale of the marbelization (between 1 & 32)
endYscale (float): The ending y scale of the marbelization (between 1 & 32)
endTurbulence (float): The ending turbulence of the marbelization (between 1 & 15)

These properties can behave in unexpected ways so have fun expirementing with them.

Example 35 combines the Marlble filter with other filters like Water and Sphere

This example shows a typical Marble filter:

<filterDef name="marble" class="Marble" startXscale="5" startYscale="5" startTurbulence="25" endXscale="5" endYscale="5" endTurbulence="25"/>

Water

The Water filter produces wave or rippling effects. Water has three primary properties as well as the start and end variants.

frequency (float): The frequency of the water ripples (between 1 & 100)dd>
amplitude (float): The amplitude (height) of the water ripples (between 1 & 100)
phase (float): The phase in degrees of the oscilator (between 1 & 360)
startFrequency (float): The starting frequency of the water ripples (between 1 & 100)dd>
startAmplitude (float): The starting amplitude (height) of the water ripples (between 1 & 100)
startPhase (float): The starting phase in degrees of the oscilator (between 1 & 360)
endFrequency (float): The ending frequency of the water ripples (between 1 & 100)dd>
endAmplitude (float): The ending amplitude (height) of the water ripples (between 1 & 100)
endPhase (float): The ending phase in degrees of the oscilator (between 1 & 360)

This is the typical eye-candy water effect. Use it to add some natural animation movement.

Example 35 is a simple example of the Water filter.

Here's a quick example:

<filterDef name="water" class="Water" startAmplitude="5" startFrequency="50" endAmplitude="50" endFrequency="100" startPhase="0" endPhase="0"/>

Lookup

The Lookup filter will translate the colors of the image based upon the selected gradient. Lookup has one primary property as well as the start and end variants.

gradientIndex (integer): This is the index of the registered gradient that must be between (1 & 46). Run The Gradient Example for a better look at the different registered gradients.
startGradientIndex (integer): This is the starting index of the registered gradient that must be between (1 & 46). Run The Gradient Example for a better look at the different registered gradients.
endGradientIndex (integer): This is the ending index of the registered gradient that must be between (1 & 46). Run The Gradient Example for a better look at the different registered gradients.

Interpolating between gradients is kind of fun. I really like how applying this Lookup filter can so quickly alter the palette (and therefore the mood) of the animation.

Example 36 uses the Lookup filter for the first half of the animation.

This filter is applied to the first 60 seconds of the current animation.

<filter class="Lookup" startTime="0s" endTime="60s" gradientIndex="27" />

Plasma

The Plasma filter produces a cloud like effect. Plasma has three primary properties as well as the start and end variants.

turbulence (float): The turbulence of the cloud. (Always use 1)
gradientIndex (integer): See GradientPainter for more details
seed (integer): A random integer
startTurbulence (float): The starting turbulence of the cloud. (Always use 1)
startGradientIndex (integer): See GradientPainter for more details
startSeed (integer): A starting random integer
endTurbulence (float): The ending turbulence of the cloud. (Always use 1)
endGradientIndex (integer): See GradientPainter for more details
endSeed (integer): A ending random integer

Plasma is a good example of a filter that should be associated with a widget, because this filter draws/overwrites the 'body' of the widget.

Example 44 shows a plasma filtering an ellipse widget.

Taken straight from example44, this shows a plasma filtering an ellipse.

<widgetDef name="ellipse" class="Ellipse" width="50%" height="50%"> <traits> <trait class="Position"> <segment startTime="0%" endTime="100%" startPos="20%, 80%" endPos="80%, 20%" /> </trait> </traits> <filters> <filter class="Plasma" turbulence="1" gradientIndex="31" seed="23"/> </filters> </widgetDef>

Home

Last Updated: Wednesday, April 30 -- 2003