Polar Distortion with Flash 10 drawTriangles
Tuesday 23 September 2008 - Filed under ActionScript + Flash
I was playing around with some of the new drawing API features for the new book and realized I could redo the Polar distortion class I did a while back.
http://www.bit-101.com/blog/?p=1167
http://www.bit-101.com/blog/?p=1187
http://www.bit-101.com/blog/?p=1194
It was amazingly easy:
And it’s fast! Check it out. This will open full browser, which will slow it down, so you might want to download it and open it in the flash player, or resize your browser.
Here’s the crappy experimental timeline code, which will only do you any good if you happen to have a copy of Flash CS4 to hand, which not many of you do. But you could probably massage it into a class without too much effort, and compile with the Flex 4 SDK.
[as][SWF(width=800, height=800)]
var pan:BitmapData = new pano(0, 0);
var vertices:Vector.
var indices:Vector.
var uv:Vector.
//graphics.lineStyle(0);
var res:Number = 200;
var inner:Number = 20;
var outer:Number = 300;
for(var i:int = 0; i < res + 1; i++)
{
var angle:Number = Math.PI * 2 / res * i;
vertices.push(400 + Math.cos(angle) * inner);
vertices.push(400 + Math.sin(angle) * inner);
uv.push(i / res, 1);
// graphics.drawCircle(vertices[vertices.length - 2], vertices[vertices.length - 1], 2);
vertices.push(400 + Math.cos(angle) * outer);
vertices.push(400 + Math.sin(angle) * outer);
uv.push(i / res, 0);
// graphics.drawCircle(vertices[vertices.length - 2], vertices[vertices.length - 1], 2);
}
for(i = 0; i < res * 2; i += 2)
{
indices.push(i, i + 1, i + 2);
indices.push(i + 1, i + 3, i + 2);
}
var a1:Number = 0;
var a2:Number = 0;
addEventListener(Event.ENTER_FRAME, tick);
function tick(event:Event):void
{
inner = Math.cos(a1 += .1) * 80 + 100;
outer = Math.sin(a2 += .07) * 80 + 300;
var n:int = 0;
for(var i:int = 0; i < res + 1; i++)
{
var angle:Number = Math.PI * 2 / res * i;
vertices[n++] = 400 + Math.cos(angle) * inner;
vertices[n++] = 400 + Math.sin(angle) * inner;
vertices[n++] = 400 + Math.cos(angle) * outer;
vertices[n++] = 400 + Math.sin(angle) * outer;
}
graphics.clear();
graphics.beginBitmapFill(pan);
graphics.drawTriangles(vertices, indices, uv);
}[/as]
2008-09-23 » keith
23 September 2008 @ 11:23 am
Hi
I used this method for the following site:
http://www.nokia.com/nonstopliving
Split pano into triangles and then animated them…
23 September 2008 @ 9:02 pm
Very nice.
I assume you could do this the other way round and create a pseudo-panorama from a shot made with a fish-eye?
24 September 2008 @ 9:40 am
or a sphere?
24 September 2008 @ 11:08 am
I’ve been trying to achieve the result that Julian just showed you. He (and his colleagues of Group 94) showed us some of the background information at Multi-Mania 2008.
However I ran into the following problem: the animation get’s quite slow after a few bits have been scaled in. I haven’t been able to figure out what the actual problem was though
You can see how far I got on the following link (i AM quite proud of it so far ^^)
http://labs.nocreativity.com/rendering/Zeven.html
25 September 2008 @ 1:55 am
yes, drawTriangles allows so many magnificent effects …
25 September 2008 @ 5:25 pm
Ronny
The key to our implementation was to pre-render the animation during the start of the site into a bitmapadata sequence.
It just wasn’t possible at the time to animate it at runtime and keep a high fps.
I use the pre-rendering method alot at the moment.
25 September 2008 @ 7:16 pm
Yea, i figured you’ld do that.
That was actually the next thing I was about to try.
The pre-rendering: is that like ‘making a video clip’? Like creating a movieclip, adding the drawn bitmap, advancing a frame, and adding the next bitmap, etc etc etc?
27 September 2008 @ 6:16 pm
Its simply
create array of bitmapdata and every frame attach it to a clip at same level so it replaces it.
28 September 2008 @ 4:04 am
I am already working on it
I’ll keep you posted!
Thanks
29 September 2008 @ 10:11 am
I made it!
http://labs.nocreativity.com/rendering/Acht.html
However it’s not running as smooth as yours (Where you are only pre-rendering about 60° of the circle, I instantly start rendering the whole sequence. That’s why it takes so long.
It’s not running smoothly on my iMac, however it is running smoothly on my Macbook :s
30 September 2008 @ 3:02 am
Hi Keith, cool experiment, but what markup is this?
var vertices:Vector. = new Vector.();
var indices:Vector. = new Vector.();
var uv:Vector. = new Vector.();
2 October 2008 @ 11:54 am
As far as I know, the vector object is like an array, it doesn’t differ to much from them. They can contain only elements of one datatype though (unlike arrays).. You define the datatype the vector-object can contain together with the definition of the vector.
So Vector. means “a vector containing only elements of data type ‘datatype’”
var vertices:Vector. = new Vector.();//Vector containing nothing but ‘Number’s
var indices:Vector. = new Vector.(); //Vector containing nothing but int’s
13 October 2008 @ 6:23 pm
[...] weken later las ik op Keith Peters’ blog dat Julian van Group 94 het effectief op die manier had aangepakt. Ik moest het dus ook proberen op die manier… En wat bleek: Het werkte! (DUHH!) Ik kreeg het [...]