I’ve started a series entitled “basics in generative art”.

I am not a generative artist and this is not a generative art for dummies.
As for lots of people, I started using Flash for its graphic capacities. Back in the days of AS1 & 2, lots of tutorials were flourishing here and there about graphics and code. Art Directors and motion designers could put their hands on code and build functional prototypes without asking for help. Times have changed, and swapping to AS3 left a lot of people behind.

What I’ll share here is a series of snippets & thoughts about generative art and computational geometry, some useful tools, notions and approaches to recurrent problems. Again even though there is an Ariadne’s thread ( “N dimensions” ), this not a book or a manual.
This being said, concepts and snippets will grow increasingly complex over time so If you’re new to graphics in Flash, or new to generative processes in general, you may want to read articles chronologically.

Anyway, I hope you’ll enjoy reading this so much as I enjoyed writing it.

cheers,
Nicolas

give the animation the focus then use the keyoboard left right to navigate or up to reset.

• 0 – a signle dot. this is the starting point for all 2D generative art. it has no dimension, no height, no width, and we can’t actually represent it ; it has no dimension to be represented by. I’m cheating and display it as a circle on a 2D canvas, with a glow because glow is beautiful ^^
• 1 – 2 dots still don’t have a dimension… sad but true. as none of them has a dimension, nothing links them and we still don’t have a dimension apart from that cheat I’m using: drawing them on a 2d canvas
• 2 – funny thing is that we can add hundreds of points, we won’t get any more dimensions… so let’s focus on HOW TO DISTRIBUTE points. this is a RANDOM distribution, using the up key will reload the sample and if you leave your cursor over a dot, there are very little chances that another dot will be generated at the very same location when you reload.
• 3 – PSEUDO RANDOM distribution. the difference is tha we use a pseudo random number generator ( aka PRNG ) that returns a seed based series of numbers that “look” random but are not ; the same seed will always return the same series. now if you leave you cursor over a dot and press up, the dot will remain under your mouse.
• 4 – CIRCULAR distribution: easy to understand, pretty useful in real life, points are evenly distributed around a center at a given radius. by pressing UP, you’ll enabled the jittering which will randomly offset the point around its original position by a given value.
• 5 – DISC distribution, basically 2 CIRCULAR distributions, it allows us to get positions between 2 sets of circular values.
• 6 – FRAME distribution, will evenly distribute the dots on a frame
• 7 – GRID distribution, will evenly distribute the dots on a grid
• 8 – TRIANGULAR distribution, will evenly distribute the dots as alternatively upside down equilateral triangles
• 9 – HEXAGONAL distribution, will evenly distribute the dots following an hexagonal pattern
• 10 – PYTHAGORA not a distribution technique but probably the most useful piece of Math of all times :) this allows us to know the distance between 2 points, the angle between them and to deduce a whole lot of measures, distances, ratios aso
• 11 – POISSON DISK distribution, using the distance between 2 circles this allows us to distribute randomly some dics in the space. the rule for creating a point is “you shall not walk over someone else”. very handy when you need to display non overlapping items like puzzle pieces and yet keep a “random” aspect.

I’ve published the source codes of the distribution methods above on wonderfl.net

each object or static method will return a Vector.< Point >, in the sample above, I’m plotting them like this:

var points:Vector.< Point > = //distribution method here;
graphics.clear();
graphics.lineStyle( 0 /*, color */ );
for each( var p:Point in points )
{
	graphics.drawCircle( p.x, p.y, 1 );
}

( /!\ the syntaxhighlighter writes Point toLowercase don’t simply copy/paste )

here’s how to get the different shapes:
- a Random set :

points = RandomDistribution.distribute( new Rectangle( x, y, width, height ), count );

- a Circular set :

var circle:Circular = new Circular( new Point( x, y ), radiusX, radiusY );
points = circle.distribute( count, shuffle:Boolean, jitteringAmount );

- a Disc set :

var disc:Disc = new Disc( new Point( x, y ), OuterRadiusX, OuterRadiusX, innerRadiusX, innerRadiusY );
points = disc.distribute( count, shuffle:Boolean, jitteringAmount );

- a Frame set :

var frame:Frame = new Frame(  new Rectangle( x, y, width, height ), columnCount, rowCount );
points = frame.distribute( shuffle:Boolean, jitteringAmount );

- a Grid set :

var grid:Grid = new Grid( new Rectangle( x, y, width, height ), columnCount, rowCount );
points = grid.distribute( shuffle:Boolean, jitteringAmount );

- a Triangular set :

points = Triangular.distribute( spacing, width, height, jitteringAmount );

- a Hexagonal set :

points = Hexagonal.distribute( spacing, width, height, jitteringAmount );

- a Poisson Disk set :

points = PoissonDisk.distribute( new Rectangle( x,y,width, height ), radius, count );

this is not ( and far from ) an exhaustive list of course, this is a simple mathematical approach to distribution. there are lots of things to do with points :)

next step: THE LINE!

Tags: basics, generative, generative art, introduction