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]
Hi
I used this method for the following site:
http://www.nokia.com/nonstopliving
Split pano into triangles and then animated them…
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?
or a sphere?
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
yes, drawTriangles allows so many magnificent effects …
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.
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?
Its simply
create array of bitmapdata and every frame attach it to a clip at same level so it replaces it.
I am already working on it 🙂
I’ll keep you posted!
Thanks 😉
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
Hi Keith, cool experiment, but what markup is this?
var vertices:Vector. = new Vector.();
var indices:Vector. = new Vector.();
var uv:Vector. = new Vector.();
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
Hi, I am doing a project at the moment where I am mapping content to a disc shape so the content distort depending on where it is on the disc (Gets small if close to centre and larger when at the outer edge). I’m hope to try to use it on a sphere projection and I found your example of using drawTriangles very useful as a starting point. The only thing is I need more detail in the UV and would love to add a couple “middle’s” as well as the inner and outer but having trouble creating the indices with 3/4 sets of vertices.
Could you help me out with your amazing math skills and tell me how I can add a couple more inner middles’s – would love to share the outcome with you if can get it working.
P.s. Job needs to be complete in a week time :0