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; .

Advertisements

Responses

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

    Demo:http://www.professionalpapervision.com/demos/web/cs4pano/
    Source:http://flex3cookbook2.googlecode.com/files/CS4SphericalPano.zip
    Book Blog: http://professionalpapervision.wordpress.com

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


Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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

Categories

%d bloggers like this: