The GeometryRepeater class allows you to repeat any geometry you compose with Degrafa and alter properties for every time the geometry is repeated. With GeometryRepeaters you can create things like bar charts, tick marks for a gauge, artistic explorations and a lot more.

In future screencasts we’ll explore using GeometryRepeaters mixed with other features of Beta 3 as well as different use cases and more complex examples. You can grab the latest release of Degrafa on the Degrafa Code page.

Right now we’re finally at a point where we can start moving beyond creating basic shapes, fills, etc. and moving into a realm of really powerful stuff, all of which we’re hoping will extend FXG. With inspiration coming from things like Processing, we’re really focussing on allowing people to do some typically difficult things very easy.

We’ve discussed how you might use Degrafa for various types of data visualization, but with things we’re implementing in Beta 3 you’ll be able to completely change the way you think about charting in Flex. Some people are already taking advantage of the in progress version of Beta 3 to do some really great stuff.

Joe Johnston of Universal Mind created a slick looking chart that mirrors the look you might find on the Nike+ site. Doesn’t look like a typical Flex Charting component does it?

If you were at 360|Flex you may have seen Tom Gonzalez present some of his latest works that use Degrafa. He’s contributed a lot to opening up new possibilities for Degrafa in the data visualization arena. Below is his Google Finance “dashboard” that uses Degrafa for charting, complete with “micro-charts” created using the newly revamped Geometry Repeaters.

Ryan Campbell has also taken a liking to the new Geometry Repeaters and what is possible just using Property Modifiers with them. He combined Degrafa and OpenFlux to create what he’s calling FluxCharts. Definitely cool.

It’s really great to see people start jumping into the next release of Degrafa when it’s still a work in progress. Even better, all these samples have source available.

If you’re familiar with Degrafa Repeaters you know that the way they are now they aren’t entirely flexible and only provided solutions for a small number of use cases. That is totally changing in Degrafa Beta 3. We’ve revamped Repeaters to be very powerful and flexible, so in a minimal amount of code you can create repeating geometry for any number of scenarios.

In the current version of Degrafa you have geometry-specific repeaters, like CircleRepeater, LineRepeater, etc. You can also only manipulate repeated geometry in a small number of ways. In Degrafa Beta 3 you can repeat ANY geometry, change each individual item in a number of ways, hook the repeater to a data provider and so much more.

Tom Gonzalez, a Degrafa Team member, took the time to put together a quick sample and a nice blog post about the revamped Repeaters. His post illustrates just the tip of the iceberg of what is possible. He’s already shown me some of the stuff he’s been working on behind closed doors and it just blows me away. The best part is it takes such minimal code to do some awesome stuff. The image above is from his post and if you’re interested in learning more about the revamped Repeaters in Degrafa Beta 3 be sure to check out his post and follow his blog. Tom has some more great stuff to show off.

The Repeater

Working with Degrafa, each geometry object can have a Repeater associated with it. The Repeater allows you to repeat the geometry using offsets you specify. These offsets are incremented progressively for the repeat count. It draws into the parent geometry objects graphics surface so the ensemble is considered one object.

Using a Repeater

Let’s start by specifying a stroke with an id of OrangeStroke.

Next, a simple line is defined with the Stroke bound to the above Stroke Object.

To repeat this Line object lets add a Repeater. After doing so, our Line object will look like this:

The above Line object will be drawn 11 times with the offsets we specified.

So now we have 11 vertical lines. We can easily turn this into a grid by defining another Line geometry object similar to the one above but on the horizontal axis.

Here is the second Line object that draws 11 lines on the horizontal axis.

A perfect reusable grid in just a few lines of MXML mark-up. No action script required, no math, no loops, no need to define any classes, and it’s readable to anyone.

More Samples

With the Repeater you can do some pretty interesting things. Here’s some quick examples made with Circles and Arcs:


Among other things that will be added to the Repeater are variations of objects that are repeated. For example, repeating lines that are different colors, heights, widths, random, etc.