tracerstar

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

HYPE Framework Magnetic Field layout class | download (v0.1)

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:

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);
	addChild(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();
	addChild(clip);
}

pool.requestAll();

All we've done here is add another magnet to the layout, and rebuilt the field (by default adding the initial magnet, the field is generated in the constructor). Add some random scaling to the clip, and it gives quite a nice looking layout.

Let's revisit that rotational argument. The options are 'cos', 'sin', and 'tan' and within the class, this applies an additional calculation when generating the angle of the point in the field. The results below are the same piece of code above, but with the cos, sin and tan arguments passed in respectively.

And finally, here's another 2 magnet example using a long grey rectangle as the clip, 1 short and 1 long magnet, and a standard render. I liked this as it has a nice symetrical look and shows the field quite well.

I'm also working on a behaviour that is similar to Dan Shiffman's Flow Field, in that it applies a behaviour to a clip that will follow the direction of the forces. I'd be interested in seeing what other people might do with this. Add a comment below if you can offer any suggestions or improvements.

1 Responses to Magnetic Field layouts for the Hype Framework

Leave a Reply