Shiffman Vector movement – from Processing to Flash

I’ve been playing about with processing lately, which is really good fun, and quite easy to jump straight into, coming from a Flash background. If you’ve not heard of Processing, it’s –

Processing is an open source project initiated by Casey Reas and Benjamin Fry, both formerly of the Aesthetics and Computation Group at the MIT Media Lab. It is “a programming language and integrated development environment (IDE) built for the electronic arts and visual design communities”, which aims to teach the basics of computer programming in a visual context, and to serve as the foundation for electronic sketchbooks. One of the stated aims of Processing is to act as a tool to get non-programmers started with programming, through the instant gratification of visual feedback. The language builds on the graphical capabilities of the Java programming language, simplifying features and creating a few new ones.

It’s free too! You can grab a copy here.

One of the authorities on Processing is Daniel Shiffman, author of Learning Processing. There’s loads of great content on his site, for the budding developer. One of the most interesting is his section The Nature Of Code. It’s actually the sylabus for a course he teaches, but it makes for great online reading, explaining not only the how, but also the why behind all the programming concepts.

I spent a while digging through the chapter on Vectors (for motion, not graphics), played around with the code in Processing, then ported some of it to Flash.

This is just a quick experiment really, and the code below if not the best way of doing things, but I thought it was an interesting effect none-the-less. Using various vectors in flash, I’ve made a weird springy thing. Move your mouse to swirl it around – press space to restart it – and toggle the limit bounds feature.

[kml_flashembed publishmethod=”static” fversion=”9.0.0″ movie=”flash-content/shiffman/shiffmanVectorsAS3.swf” width=”300″ height=”300″ targetclass=”flashmovie”]

Get Adobe Flash player


And here’s the code – uncommented, unoptimised, but you get the idea :)

stage.quality = StageQuality.LOW;
stage.frameRate = 120;
var makeBalls:int = 200;
var movers:Array= [];
var divVar:int = 500;
var mouse = {x:mouseX,y:mouseY}
var springDivider:Number = 25;
var constrainBounds:Boolean = false;
var SW:Number= stage.stageWidth;
var SH:Number= stage.stageHeight;


function construct():void{
	for (var i:int = 0; i < makeBalls; i++) {
		movers[i] = makeMover(i);
		movers[i].addEventListener(Event.ENTER_FRAME, update);

function makeMover(i):DisplayObject{
var m:MovieClip = new MovieClip();//new M(); 0xFFCC0000, .5);,0,5);
	m.location 		=  {x:SW/2,y:SH/2};
	m.velocity 		=  {x:0,y:0};
	m.acceleration  =  {x:0,y:0};
	m.topspeed 		=  (i/springDivider)+1;
	return m;

function update(e:Event):void {
	var M   = e.currentTarget;
	var dir = {x:mouseX-M.x,y:mouseY-M.y};
	M.acceleration.x = dir.x/divVar;
	M.acceleration.y = dir.y/divVar;
	if(M.velocity.x< -M.topspeed){M.velocity.x=-M.topspeed}
	M.x = M.location.x;
	M.y = M.location.y;
		if (M.location.x > SW) {
			M.location.x = 0;
		} else if (M.location.x < 0) {
			M.location.x = SW;
		if (M.location.y > SH) {
			M.location.y = 0;
		} else if (M.location.y < 0) {
			M.location.y = SH;

stage.addEventListener(Event.ENTER_FRAME, updateMouse);
function updateMouse(e:Event):void{
	mouse.x = mouseX;
	mouse.y = mouseY;

stage.addEventListener( KeyboardEvent.KEY_UP, keyUpHandler );
function keyUpHandler( e:KeyboardEvent ):void {
	if (e.keyCode==32) {

function reset():void{
	for (var i:int = 0; i < makeBalls; i++) {
		movers[i].removeEventListener(Event.ENTER_FRAME, update);
	movers = [];