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: Tunnel.as 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; .

## Responses

1. Awesome!

2. very nice + smooth!

3. respect!

4. really nice work here!

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 http://wonderfl.kayac.com/code/31143bb996967934cbc080c251cb450d88b261bb
… 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 https://pixelero.wordpress.com/ was key to this creation. He demonstrated an animated tube which with a little work I was able to turn into a spherical panorama.

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:

http://www.janthor.com/tunnel/index.html

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!
Thanks.

• 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:
brainswitch

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 […]