HIDIHO!

giving something back to the Flash community

B.I.G.A. 5 : JOIN THE DOTS

Tags: , , , , ,


our generative toolbox is growing bigger. we have points, lines and polylines which are powerful tools. now as seen in the beginning of the previous article, a big question to ask ourselves is “how to joints the dots?”.
there are ways…

I found this project that I like very much.
kids, they have a way with art :)

it illustrates the problem pretty well ; from the previous article we know that there’s a consequent amount of possibilities to join those dots. what is fabulous with the brain is that we store countless references to shapes we see around us and we have the ability to project them on neutral objects ( a set of points, trees’ bark, the twirls of a river, stones, buildings etc. ).

there was this artistic movement called surrealism whose most charismatic leader was Salvador Dalí. this good man wrote a manifesto where, amongst other things, he described his approach to reading pictures ; that’s what he called the paranoid-critical method, which is about projecting images you have in mind onto what you see : seeing things in things if you prefer.

revolutionary ain’t it ?

well no actually.
Arcimboldo did this some 400 years ago, as for most of Dalí’s production – which imho is absolutely nightmarish – that was inspired by hyeronimus bosch‘s work some 500 years ago but who cares anyway…

so, here’s a simple example with a set of 31 points.
it’s a question mark vectorized in Flash thanks to this little jsfl by eric lin (oldies but goodies).
if you’re interested in this topic, an advanced vectorization technique was done by Li.

here’s what it gives: in the top left corner, we draw the shape in green using eric lin’s method (a series of moveTo / curveTo, see method drawCurvees on wonderfl ) which allows the reproduction of the original pattern. we can have multiple objects and sub-objects rendered correctly.

joining the dots is fairly easy when you know what to draw and how. so let’s pretend we don’t have those pieces of information and try to render this set with different approaches.

as the pattern is drawn at an arbitrary size and location, the first thing we should do is to find a bounding box around all the points and normalize them so that we can draw them at the size we want and at the location we want.

finding a bounding box (l.39-65) is easy ; for each point we make sure that it is either above the minimum or under the maximum values of our box. if a point is above the max, then the max value is set to the point’s value, the same goes for the minimum in both dimensions (X/Y in this case, it can be extended to 3 or more dimensions).

then we normalize the set of points (l.67 – 78). As seen earlier in the LINE article we need boundaries (a min and a max) to normalize a value. in this case we also offset the points of half the width and the height of the bounding box. this way we have points comprised between -.5 and .5 instead of 0 to 1. it’s easier to manipulate them ; they are centered.

we also need to keep track of a ratio(l.87): as the bounding box has pretty high chances not to be a square, we maintain a ratio to describe how the normalized width should behave in relation to the normalized height. this being done, we can try a brainless approach:

  • not sorting the points the only problem is this “jump” from one shape to the other. more importantly, our brain is used to read this sign so, wahtever we do, we’ll still read it as a question mark (never underestimate the power of your culture :) ).
  • sorting the points at random this is what happened last time, no hierarchy, the brain can’t give priorities, we can’t actually read this generative layout. this is an important thing to remember ; a generative piece should follow some rules. otherwise it’s like a jungle, like a clump of dust. this is a good material for the paranoid-critical method : what you’ll see in-there is tightly related to your experience of the world. In the long run, it’s mostly nightmarish and it is not something you’ll want to share after the age of 16 (normally…)
  • sorting them vertically creates an interesting shape, it’s easy to read (for western europeans at least) as we are used to read texts this way. the eye and the brain can sweep the set of points and associate this type of layout with things that have been seen in real life: a text, a sunset, a river coming from the distance a.s.o. anyway something architectural arises from this kind of layout: that’s how perspective works.
  • sorting them horizontally is also interesting for it doesn’t give at all the same feeling. it’s harder to read, more agressive, more organic also. my take is that this is the way we see the living creatures, standing up, more or less symetrical. it can remind us of how the rorsarch tests are done ; very often they are fold vertically (they can also be 4-fold). this is also related to the phallus and the vagina (yes I can be very rude some times) anyway some thing alive, sexuated.

NB those are general considerations, this is not the truth about shapes and you shouldn’t buy it as such. some time ago, I found this very interesting paper by Steven Stahlberg about how we read pictures: Visual Perception and Aesthetics. a good read.

that was a first take at joining the dots. One important notion in generative art is to set rules and, fortunately for us programmers, we spend countless hours respecting rules (syntax, chains of events, protocols etc. ). this shouldn’t be a big deal.

as seen before, the distance is an extremely important measure. we can set a rule that will stipulate: ‘for each point of the set, if another point lies within a given radius, trace a line between them’. this is what Keith Peters did based on a concept by Jared Tarbell that is called a node garden. btw I wonder how legal, this google books is …
from the previous example, I’ve flattened the values of the points not to have to compute them each time + I’ve inlined a squared distance computation method (as explained in LINES 1/2 ) and here’s what we get:

move the distance slider to vary the minimum distance.

and this is what happens if we invert the distance check and set the alpha value of the stroke to : minimum distance / actual distance.

the further the points the more opaque the line.

now if we change the thing a bit and set a rule that says: ‘a line should be drawn only if both its starting and ending point do not already belong to the lines’ list’ then we obtain a dashed outline like this:

and if we randomize the set:

by changing the rule to:
‘a line should be drawn only if either its starting or its ending point do not belong to an existing line’ then we can get a series of connected segments aka polyline:

this is a bit more interesting ; connected components can help us rebuild that shape we were looking for in the first place. so let’s complexify the rule by saying that ‘a new line should not intersect any existing line.’

the intersection method was done by Keith Hair and improved by Hristo Dachev.

we now have a method that can automatically build shapes from an arbitrary set of points and give the feeling that it’s not done at random.
a graphic improvement consists in rendering a smoothed curve instead of straight segments ; the output is very organic (curves…) and looks like this:

from our same set of 31 points, we’ve done something rich graphically that opens on lots of variations. that’s one of the “lessons” to remember: we usually underexploit the data we have. or as Mies Van der Rohe put it: “less is more”.

I’d like to add that we’ve just explored some of the functions to interact with points and lines, and that there are numbers of others. one of the most famous recently was the scribbler made extra-famous by Mr Doob and reproduced on every possible platform (Canvas, IPhone, Ipad, Android +++ ).
it is no more than what we’ve reach so far, a slight change in the rule 1 and that’s it :)

next step: SURFACE
looooots of things to say ^^
TRIANGLE!
still lots of things to say ^^’

Tags: , , , , ,

© 2009 HIDIHO!. All Rights Reserved.

This blog is powered by Wordpress and Magatheme by Bryan Helmig.