I believe every single particle engine starts with that as an example: the classic cloth-like simulation. The original Traer.physics package has it. So here it is, adapted from the original source code. But since just lines and dots don’t really make the thing look like anything, I added some GraphicsTrianglePath goodness in there. The mesh is only made of a 8×8 particles grid, or 128 triangles when rendered, which really isn’t much!
ClothTriangles.swf, drag handles to move
The source code for this is part of my Traer.physics port to ActionScript3, and is available at Github. There really isn’t much to it, but if you haven’t yet used GraphicsTrianglePath or this little physics package, then it’s probably an okay-ish place to start.
Useful links
Github repo for TraerAS3
Livedocs about GraphicsTrianglePath
7 Comments
thank’s a lot 4 this, u saved my day!
You’re very welcome!
Arnaud,
Truly outstanding work, thanks very much for sharing this!
I was curious, concerning this specific example, if it’s possible to display a reverse side of ‘the cloth’, a different bitmap that would represent a backside when the handles are crossed-over?
Matt,
I believe this would be possible. In order to know when to display the reverse side of the cloth, you would need to know if a triangle is facing the view point or not. That’s what backface culling algorithms are for. In the case where a triangle faces the opposite direction, you’d need to grab the texture from a different
bitmapData(and possibly correct the uvt values, i.e.1.0-ufor ‘u’). Senocular described pretty well how to do backface culling: Senocular about backface culling @kirupa.com.Arnaud,
Thanks for the direction, that was a great read. Luckily, it turns out the TriangleCulling parameter in GraphicsTrianglePath will accomplish Senocular’s algorithm for you! Mimic the original trianglePath (using a different Bitmap, obviously), but change the TriangleCullling parameter to TriangleCullling.POSITIVE on instantiation. Also make sure to inverse the UV coordinates and additionally draw the back and Viola! an image that has separately rendered front and back sides using Flash 10 and Traer.
Thanks again!
Hey Matt, yes you are absolutely right, reusing the
. Feel free to branch out the Git repo and submit, I’ll merge your addition back to the master.
GraphicsTrianglePathwith a different sourceBitmapDataand simply changing theTriangleCullingparameter is the way to go. Senocular’s algorithm is still worth reading thoughFlash has yet to cease my amazement. I am slightly new to the Flash and Actionscript3 world, so appreciate when someone is willing to share their knowledge and accomplishments. Currently enrolled at Bloomsburg University PA, I primarily use Flash as an eLearning and corporate training application for the development of material. I believe schools and companies are beginning to come around and really realize the potential impact flash developed training can have on their company.
I was just wondering where you developed your flash skills from. (I was thinking that maybe you have designed some learning applications in your time)
4 Trackbacks
[...] 2. Traer AS3, the Mandatory Cloth Simulation [...]
[...] 2. Traer AS3, the Mandatory Cloth Simulation [...]
[...] 2. Traer AS3, the Mandatory Cloth Simulation [...]
[...] blog. Code libraries include a cloth simulation built with Traer.physics port to AS3 (second image, link), a simple gesture recognition engine (top image, link), and 3D grass experiment with stitching [...]