This site is no longer maintained and will eventually have the articles rehosted. In the meantime, please visit my current portfolio, Benjamin Fox Studios.

### Magnetic Field layouts for the Hype Framework

I've been reading through Daniel Shiffman's Nature of Code samples for Processing, and one that really stood out to me was his Flow Fields. I liked the idea of objects following a predetermined path that appears to be random but has principles in a mathematic rule set. Add to this after seeing Robert Hodgin's session at Flash on the Beach last year, I was interested to learn the math behind Magnets.

After a bit of reading about magnetic forces and working out angles based on the distance from each pole, I got some basic code together that produced desirable results.

I've since implemented those examples into an easy to use Hype class [download]. First, a quick tutorial (I'm going to assume you've done some of the basic Hype tutorials), then a bit of an explanation of the code.

### Single magnetic field

First things first, you need to include the class. I've just been keeping this in the same directory as the .fla I've been working on, but once the class is polished I'll move it into the Hype extended layout folder.

`import MagneticField;`

The constructor takes a few arguments:

• r = resolution of grid i.e. pixel width & height of each cell
• w = grid width (I set this to the width of the stage)
• h = grid height (set to stage height)
• firstP = the first positive pole of the magnet
• firstN = first negative pole
• rotational = This is an optional field that can be 'cos', 'sin', 'tan' which I've added to apply additional calculations to the magnetic force to produce interesting results. It defaults to '' which will apply the correct rules to generate a magnetic field. Just ignore this for now.

Let's add a magnet in the center of our 600 x 400 stage, the poles 200 pixels apart. The grid size is 25 pixels, so that creates a grid of 24 x 16 cells.

`var m:MagneticField = new MagneticField(25, 600, 400, new Point(200, 200), new Point(400, 200));`

I'll skim over the rest of the code below, it's just using the object pool to apply the magnetic field layout to each clip in the pool. I've set the pool at 384 object (24 x 16 = 384). The clip itself is just a copy of the T from my logo with a couple of fills inside that can be randomly changed with Hype (see the color pool tutorials).

```import MagneticField;
import flash.geom.Point;
import hype.extended.color.ColorPool;
import hype.framework.core.ObjectPool;

var m:MagneticField = new MagneticField(25, 600, 400, new Point(200, 200), new Point(400, 200));

var color:ColorPool = new ColorPool(
0x8C8C84,0x9C9C94,0x94948C,0xBCBCB3,0x47442B,0xB5B4AB,0xA7A48C,
0x68644C,0x88846B,0x98947B,0x7A745C,0x696554,0xC6C4BB,0xA7A49A,
0x1A1916,0x39352B,0x49453B,0x7C7464,0x8C8474,0x5A554B,0x9C9484,
0x6A655C,0x19140C,0x95856B,0x544E44,0x64543C,0x77654B,0xA69683
);

var pool:ObjectPool = new ObjectPool(t, 384);

pool.onRequestObject = function(clip) {
m.applyLayout(clip);
color.colorChildren(clip);
}

pool.requestAll();```

That's all there is to it. But, with a bit more effort (I threw this example together in about 10 minutes which included grabbing a vector shape from here: http://www.ikiya.jp/crest/download.html) you can get some quite nice results.

```import MagneticField;
import flash.geom.Point;
import hype.extended.color.ColorPool;
import hype.framework.core.ObjectPool;

var m:MagneticField = new MagneticField(25, 600, 400, new Point(50, 350), new Point(450, 100));
m.addMagnet(new Point(400, 50), new Point(400, 300));
m.build();

var color:ColorPool = new ColorPool(
0x95B6A5, 0xC7C1A7, 0xB97E6E, 0xCDB47C, 0xDCCDA4, 0x99886E, 0xD8B597, 0xE3C57F
);

var pool:ObjectPool = new ObjectPool(cloud, 384);

pool.onRequestObject = function(clip) {
m.applyLayout(clip);
color.colorChildren(clip);
clip.scaleX = clip.scaleY = Math.random();