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!

  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 http://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 !


Leave a response

Your response:

Categories