Well, I though I was going to have the energy of working on this as soon as arriving back from work... but I didn't. Anyways, waking up early again to finish up this stuff.
If you want to save time this is the link you were looking for:
http://mrdoob.com/lab/pv3d/vis/effect04/vis04.fla
(you will need this little class too:
Pyramid.as, also you'll need to use
Phunky version of pv3d (yes, Ralph, I finally tested it :D))
But, if you want me to explain a bit what's the deal with the fake glow and these things.. keep reading then ;)
So, the thing I was saying about the
fake glow/blur is easy to achieve just copying the rendered image to a tiny bitmap and scaling the bitmap to match the screen. The code is simple:
mtr = new Matrix();
mtr.translate(stage.stageWidth * .5,stage.stageHeight * .5);
mtr.scale(.01,.01);
and then... every frame:
tinyBitmap.draw(rendered3D,mtr,null,null,new Rectangle(0,0,stage.stageWidth,stage.stageHeight));
I asume you know how to attach the bitmap to a Sprite and resize it. The benefits of this method is that you get a not-so-bad blur that
if you were using BlurFilter instead you would need a lot of blur passes to achieve the same amount of blur.
If you set
stage.quality = "LOW" the effect you get is this:

Which is also an interesting effect.
In order to smooth that out you need to put the stage to at least MEDIUM quality. Doing this you will get the effect that you already know:

Then, the other interesting thing for this effect was the Random camera movement.
Tweener made an excellent job here with just this code:
function generateCameraPath()
{
var bz = new Array();
var bz_t = new Array();
for (var i = 0; i < 100; i++)
{
bz.push( { x: Math.random() * 3000 - 1500, y: Math.random() * 3000 - 1500, z: Math.random() * 3000 - 1500 } );
bz_t.push( { x: Math.random() * 2000 - 1000, y: Math.random() * 200 - 100, z: Math.random() * 2000 - 1000 } );
}
Tweener.addTween( camera, { x: 2000, y: 2000, z: 0, _bezier: bz, time: 1000, transition: "linear" } );
Tweener.addTween( camera.target, { x: 0, y: 0, z: 0, _bezier: bz_t, time:1000, transition: "linear" } );
Tweener.addTween( this, { time: 1000, onComplete: function() { generateCameraPath() } } );
}
I'm afraid I don't have anything to put colors on the code on this blog yet, but anyway, I'm sure you get the idea ;)
Anyway... if that wasn't enough, there are even more bits. Originally I said that I was playing with all this because I wanted to do the visuals for a radio I usually listen to. I also said that I changed the plans because the link to stream wasn't working anymore. This morning I was able to speak with one of the guys behind the radio itself, and
we managed to put a crossdomain.xml in place! Which means that now I'll have a lot of fun coding some visuals for the radio and see what I can do
FFT analysing on the fly + 3D (which, neither Apple or Microsoft did much in their players :D).

Thanks a lot
Jason!
1 comment