Posted by: pixelero | August 31, 2008

Flash 10, Part 4 of testing drawTriangles, Old-school Tunnels

Some old-school tunnel -effects with Flash 10 Astro, based on graphics.drawTriangles – you’ll need the beta release of Flash Player 10 for these demos to show correctly:

Image tunnel:

Vortex of Neon PerlinNoise:

Vortex of smoking pixels:

(SmokingPixels in 2D and source. yes, probably nothing you haven’t already seen in all the particle-demos around the net, just that the 3D-effect adds so much to it)

As a principle it’s a cone and we’re taking a look inside of it, bended by adding a polynome to x,y-coords. As a 3D model it’s a relatively simple with no actual need for sorting the faces in z-direction, so it runs pretty fast and smoothly – I think.

Edit – September 2nd: updated with usage of PerspectiveProjection and Utils3D.projectVectors – although the maths for projection in the earlier version were as simple as x2 = x*radius/z; y2 = y*radius/z; .



  1. Awesome!

  2. very nice + smooth!

  3. respect!

  4. really nice work here!

  5. […] Read more […]

  6. […] Graphics.drawTriangles()とテクスチャマッピングスタディ。元アイデアはFlash 10, Part 4 of testing drawTriangles, Old-school Tunnels « Pixeleroより。簡単に説明すると円錐っぽい形状の多面体の底(とんがりコーンの底)から内側を見ている状態で、多面体の各頂点をxy座標方向に曲線的に動作させつつ内側に貼られたテクスチャのUVT座標を刻々と変化させているだけ。これだけで自分がトンネル内を進んでいるように見えるから驚き。”old-school”と題されているけど古典的な手法なのかな?note.x | [Away3D] Tunnelでも同じようなムービーがある。 […]

  7. Hi is it possible that you also post class with perin noise effect?

  8. @Dave: look at
    … class ‘NeonPerlinStripes’ at the end of that code …

  9. Thanks so much for this post and your great work. I was able to create a Spherical Panorama from what I learned here.

    As in the Super Prim post, Petri Leskinen’s great work on Pixelero was key to this creation. He demonstrated an animated tube which with a little work I was able to turn into a spherical panorama.

    Book Blog:

  10. Thanks pixelero

  11. pixelero how do I put this kaleidoscope to the tunnel code so it shows it instead of image?

    i have got them both nicely working but don’t know how to put them together to get result like yours. (sorry i’m kind of beginner).

  12. […] Estoy investigando como hacer el efecto de tunel en pixelblender, pero no doy con el algoritmo y lo que encontre esta hecho en actionscrit 3(sin pixelblender): LINK. […]

  13. Thanks for the code. I modified it slightly to be able to transition between different images, the result can be found here:

  14. Nice job Jan !

  15. Hi wow awsome. how do i move the center point?


  16. Hi, very nice effect!
    I’ve tried to reproduce tunnel effect with the actionscript provided, but without success… Is there any chance to get the FLA? or a tutorial will be very nice indeed!

    • Hi Helio!

      I’ve just written a little post on my blog about pixelero. I played last year with this tunnel source code and i made an as3 fla file, if you’re still interested by a source code don’t hesitate to contact me. You will find my email adress on the A propos page of my new blog:

  17. […] donc en visitant Pixelero, que je suis tombé sur cet algorithme de tunnel en as3. En fait je n’aurai mieux fait de ne […]

  18. […] donc en visitant Pixelero, que je suis tombé sur cet algorithme de tunnel en as3. A ma grande surprise sa méthode est […]

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: