BIT-101 [2003-2017]

Spinny Draw


Inspired (for the second time) by James Paterson showing off Amit Pitaru’s stuff at Flash on the Beach last month, I did this on the train to work this morning (yeah, I’m braggin’):

Actually, that’s just a screenshot of something I drew with what I made.

View the full post to play with the app itself:

Click to draw, press any key to clear.

[kml_flashembed movie=“https://www.bit-101.com/2003/wp-content/uploads/2008/10/spinny.swf” height=“800″ width=“800″ /]

I’ve done this kind of thing a few times before. A lot more advanced even. This was fun just to bang off on the train. You’ll need Flash 10, but interestingly, it doesn’t use any Flash 10 3D display object stuff. It’s all hand coded lineTo’s. But I did use Vectors instead of Array for speed, as well as Vector3D objects to hold the 3D points. All timeline code. Real crappy inefficient done-on-the-train code. I wasn’t even going to post the code, but I know some of you guys will freak out if I dare post a SWF without releasing the code. 😉

[as]var holder:Sprite = new Sprite();
holder.x = 400;
holder.y = 400;
addChild(holder);

var angleY:Number = -.05;
var points:Vector. = new Vector.();
var mouseIsDown:Boolean = false;

stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
stage.addEventListener(KeyboardEvent.KEY_UP, onKeyUp);

function onKeyUp(event:KeyboardEvent):void
{
points.length = 0;
}
addEventListener(Event.ENTER_FRAME, tick);

function tick(event:Event):void
{
draw();
}

function onMouseDown(event:MouseEvent):void
{
mouseIsDown = true;
stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
}

function onMouseUp(event:MouseEvent):void
{
points.push(null);
mouseIsDown = false;
stage.removeEventListener(MouseEvent.MOUSE_UP, onMouseUp);
}

function draw():void
{
if(mouseIsDown)
{
points.push(new Vector3D(holder.mouseX * 1.5, holder.mouseY * 1.5, 0));
}
holder.graphics.clear();

var cos:Number = Math.cos(angleY);
var sin:Number = Math.sin(angleY);
for(var i:int = 0; i < points.length; i++) { var p:Vector3D = points[i]; if(p != null) { var x1:Number = p.x * cos - p.z * sin; var z1:Number = p.z * cos + p.x * sin; p.x = x1; p.z = z1; } } for(i = 0; i < points.length; i++) { if(points[i] != null) { var scale:Number = 400 / (400 + points[i].z + 200); holder.graphics.lineStyle(2, 0, scale); if(i == 0) { holder.graphics.moveTo(points[0].x * scale, points[0].y * scale); } else { holder.graphics.lineTo(points[i].x * scale, points[i].y * scale); } } else { i++; if(i < points.length) { scale = 400 / (400 + points[i].z + 200); holder.graphics.moveTo(points[i].x * scale, points[i].y * scale); } } } }[/as] Oh, did I mention I coded this on the train on the way to work? The Green Line from Woodland to Brookline Village if you’re from Boston. 🙂 And if you make something cool from this and go viral and make tons of money, I will post a very mean blog post about you. Unless you give me a cut.

« Previous Post
Next Post »