Archive for the ‘experiment’ Category

My entry to Bit-101s 25 Lines competition

Wednesday, November 19th, 2008

I participated in the original one back at the were-here forums, and couldn't resist giving it a shot this time around as well :) If you don't know, this is what I'm talking about.

In the spirit of my upcoming FITC Talk, I naturally went for a text effect! Click the image to see it in action :



I started with a good 50 lines of code... I'm just getting my head around the tricks involved with using Graphics.drawTriangles(). Took a bit of effort to a) get it to work, b) get it down to 25 lines. Basically the code:

  • Creates a textfield
  • Grabs a bitmapData of it, this is the "material"
  • Creates a cylinder with a loop (vertices, triangles and uv data)
  • In an enterframe it:
    • Rotates a matrix in y and z
    • Transforms that rotation to the "mesh" and it to the perspective projection
    • Draws the triangles using the material as a bitmap fill

At the end, I got the line count down to the point where I could even add some glow and z rotation :ooh: The screenshot looks a bit "pixely", and it is, because the font is not embedded.

The 25lines website proclaims : "You probably don't want to share your code prematurely, but that's up to you", well.... Last time I was probably 60th out of 61 entries so I doubt this is gonna kill my chances :D I'll never match up to the math gurus out there, but hey, mine has a joke in it!

The code:

Actionscript:
  1. // 3 free lines! Alter the parameters of the following lines or remove them.
  2. // Do not substitute other code for the three lines in this section
  3. [SWF(width=800, height=380, backgroundColor=0x000044, frameRate=31)]
  4. stage.align = StageAlign.TOP_LEFT;
  5. stage.scaleMode = StageScaleMode.NO_SCALE;
  6. // 25 lines begins here!
  7.  
  8. var tf:TextField=new TextField();
  9. tf.defaultTextFormat=new TextFormat("Helvetica",120,0xFFFFFF,true);//Hopefully all machines have Helvetica...
  10. tf.text="Circular Logic Works Because ";
  11. tf.autoSize=TextFieldAutoSize.LEFT;
  12. tf.filters=[new GlowFilter(0x2222BB,.7,12,12,4,3)]
  13. var material:BitmapData=new BitmapData(tf.width+10,tf.height+10,false,0x000044);
  14. material.draw(tf,null,null,null,null,true);
  15. var vertices:Vector.<Number>=new Vector.<Number>(),t_vertices:Vector.<Number>=new Vector.<Number>(),points:Vector.<Number>=new Vector.<Number>(),triangles:Vector.<int>=new Vector.<int>(),uv:Vector.<Number>=new Vector.<Number>(),angle:Number=0,radius:Number=material.width/Math.PI/2,slices:uint=20,x_rot:Number=0,x_rot_speed:Number=1,y_rot:Number=-150,z_rot:Number=0,z_rot_dir:Number=-.1;
  16. for(var i:int=0;i<=slices;i++){
  17.     vertices.push(radius*Math.cos(angle*(Math.PI/180)),0,radius*Math.sin(angle*(Math.PI/180)),radius*Math.cos(angle*(Math.PI/180)),material.height,radius*Math.sin(angle*(Math.PI/180)));
  18.     uv.push(1-angle/360,0,0,1-angle/360,1,0);
  19.     angle+=(360/slices);
  20.     if(i>1)triangles.push(i*2-4, i*2-2, i*2-3,i*2-3, i*2-2, i*2-1);
  21. }
  22. triangles.push(i*2-4, i*2-2, i*2-3,i*2-3, i*2-2, i*2-1);
  23. addEventListener("enterFrame",function handleEnterFrame(e:Event=null) {
  24.     var transform_matrix:Matrix3D=new Matrix3D();
  25.     transform_matrix.prependTranslation(stage.stageWidth/2,stage.stageHeight/2-material.height/2,0);//maybe better to use a container?
  26.     transform_matrix.prependRotation(y_rot--, Vector3D.Y_AXIS);
  27.     transform_matrix.prependRotation((z_rot+=z_rot_dir), Vector3D.Z_AXIS);
  28.     if(z_rot>20 || z_rot<-20)z_rot_dir*=-1;
  29.     transform_matrix.transformVectors(vertices, t_vertices);
  30.     Utils3D.projectVectors(new Matrix3D(), t_vertices, points, uv);
  31.     graphics.clear();
  32.     graphics.beginBitmapFill(material);
  33.     graphics.drawTriangles(points, triangles, uv, TriangleCulling.POSITIVE);
  34. });
  35. // 25 lines ends here!

The source in an easier "cut and paste" format : circular_logic.txt

Again, the html page with the compiled swf in it : 25Lines.html

anyway, fingers crossed! Looking forwards to seeing the other entries :)

Star Wars intro text effect with fp10 in 14 lines of code

Wednesday, November 12th, 2008

I finally installed flash CS4, and the first thing I had to do was recreate "the intro". This is practically guaranteed to make you cry 25 years from now! I once again I proclaim my absolute joy of having the 3d features in as3 :D


If you see nada, it's not because I'm lying about this superhuman feat of engineering ;) but because you don't gots teh flash player 10. It's interesting to see the flicker once you let the sucker scroll for a while... I guess some mask or so might sort that out...

Actionscript:
  1. var rotated_holder:Sprite=new Sprite();
  2. rotated_holder.y=360;
  3. rotated_holder.rotationX=-70;
  4. var text_field:TextField=new TextField();
  5. text_field.width=480;
  6. text_field.multiline=true;
  7. text_field.wordWrap=true;
  8. text_field.autoSize=TextFieldAutoSize.LEFT;
  9. var text_format:TextFormat=new TextFormat("Arial",42,0xE3EF7D,true,null,null,null,null,TextFormatAlign.JUSTIFY);
  10. text_field.text="It is a period of civil war. Rebel [REST OF TEXT HERE]....";
  11. text_field.setTextFormat(text_format);
  12. rotated_holder.addChild(text_field);
  13. addChild(rotated_holder);
  14. addEventListener(Event.ENTER_FRAME,function(e:Event):void{text_field.y-=1;});

nifty no? About 6 lines into this though, I realized it could be even quicker done just by plain old motion tweening :D (which I incidentally also find cool, you know, that that's possible).

Trying out fp10 3d features partII : Z sorting, truly simple shader, nested perspective

Wednesday, October 22nd, 2008

Continuing on with the basics, heres a few more tests. Just to clarify from last time, all of this is achieved using only the x,y,z, rotationX, rotationY and rotationZ properties of plain old Sprites. This is what I find so awesome about the new flashplayer10 as3 features.

Sure, the performance and rendering capabilites are no match for what developers have at their hands in games consoles etc. (this is nothing new or surprising). What I'm really digging is that anyone with a basic understanding of display object programming in as3 can jump into doing fairly cool 3d. Just grab your bag of flash tricks and take them to another dimension (har har ;) ). Seriously, everything works more or less exactly as I wanted / expected, and is a real pleasure to code. Reminds me of of the enthusiasm when I was learning to program with flash5 and 6. :thumbsup:

Anyway. Moving on, z-Sorting :.

screenshot of cube with simple z sorting

There is this ROCKING little method:

[Sprite].transform.getRelativeMatrix3D(parent).position.z;

Here's what it does:

  • In the case of the cube. I created a parent Sprite, called "cube".
  • In it, I created 6 nested Sprites with a square graphic. I moved, and rotated these into positions which constitute a cube.
  • Rotating the parent "cube" (with rotationX,Y and Z) results in what you see in "3) CubeTest".
  • To sort these sides, all I need to do is run the afore mentioned function, which returns the current z position of the nested clips.
  • With this knowledge, it just takes a simple loop to sort the display list. See an example here.

Simple shading:


screenshot of cube with simple z sorting and simple shading

Using that same Z value which I used to sort out the sides of the square, I just added a dark layer on top of each "side button". On every render, I set its trasparency equal to a proportionate value of Z and the maximum and minimum z (possible for the sides of the rotated cube). It's not phong or gouraud shading, but it'll fool the novice :) Again, a real "flash" feeling.

Same thing but with a bitmap material (read simple sprite).


screenshot of cube with simple z sorting, simple shading using bitmap materials

Nested Perspective:

No rocket science here either, just curious how changing the z of a nested clip would act out...


screenshot of nested perspective menu test

With a little more work, I think something like the Vaio10 menu could be achieved. Same goes for the cube menu above and the Pioneer Kuro Project menu.

As a matter of fact, I can think of several popular papervision menus which can be reproduced using very basic flashplayer 10 AS3 features. I'm guessing this is more than welcome news to the more "designer flashers" as opposed to the "programmer flashers" (who also get their share of new FP10 features, which I'll be exploring in upcoming posts). All good :)

As promised, here are the sources. This is a Flex project, in order to work with it (at the time of writing), just follow these simple steps:

  1. Download a nightly build of the Flex3 sdk (or gumbo) dating later than May. (more details)
  2. Copy the sdk into your flexbuilder sdks folder and create a Flexbuilder project, adjusting the preferences so that the compiler targets flashplayer10 and the new sdk. It's dead easy, see details here.

Again, here is the link to the test app

I would love to hear/see of anyone that decides to use this "test set up". Enjoy!

Trying out flash player 10 3d features

Thursday, October 16th, 2008

Nascom was kind enough to let me spend some work hours investigating the new features of flash player 10. Naturally the first step was to check out the 3d features. I built a quick "testing" environment. Each test is pretty self explanatory, but if that's not enough, I included some notes attached to each experiment in the flex app. Behold the first 3 tests (but install player 10 first)...

Be sure to drag the vanishing point...

basic flash player 10 3d behaviour

The frame rate is not bad, even with a ton of shapes:

basic flash player 10 3d performance test

Creating a cube... lookout papervision ;)

flash player 10 3d cube test with color materia

Ok, so the cube was not so impressive due to the "layered" nature of flash player10 3d. I'm convinced that through the "hackish" nature of the flash community, there will soon be enough "clever" implementations that will be small in filesize, but will fool the eye. Remember, these cubes can be created and tweened on the timeline... Here's a slightly more convincing "wireframe" version :


flash player 10 3d cube test with wireframe material

try out the flash player 10 3d test runner

More tests coming soon. I'll be posting the code as well.

Verlet integration polygons with collision

Thursday, October 9th, 2008

I REALLY didn't think it was gonna be this easy... no complex maths, just a bunch of looping and hitTest, hitTestPoint kind of code :)

Click for teh Collidin Verlet integratin kick butt multicolored polygons explorer demo

screenshot of colliding polygons application

While coding, I was sure I would roast my cpu, maybe run up to 20-30 polygons, but my trusty laptop can churn out 70 shapes at a time before the framerate starts to slowdown. I find it mesmerizing to watch... Cool with 70 shapes, but also very cool to watch a fewer number and actually appreciate the "realism" of the collisions (not perfect, but not bad). It's late, the code is dirty, time to shut down and watch heroes :D

...but if you want the dirty source code, 'tis yours

More to come... am really enjoying this... :thumbsup: