Stardust Particle Effects – X-Wing Demo

Standard

Stardust X-Wing demo

The aim of this demo was to update John Grden’s legendary Papervision3D X-Wing model – as seen in this classic papervision demo – and really bring it to life with some nice animated 3D particle effects.

The demo combines Papervision3D and the Stardust Particle Engine to add particle effects to the existing 3D model. I used Stardust’s built in Papervision extension to add the classic red glow of the X-Wing engines and then animate those engines as the ship accelerates away from camera. It’s quite a subtle effect, but if you look closely you can see a kind of red heat haze, I also like the way the white flames fade in and out as the ship speeds up and slows down.

I know this kind of effect could easily be done in something like Unity but I think it’s pretty cool to see it done in real-time in Flash. The original Papervision3D X-Wing demos were a real inspiration to me, and it’s amazing just how much a little effect like this can add to what is already an amazing 3D model.

Click here to view the demo and source code.

Advertisements

Stardust Particle Effects – 2D Spaceship Demo

Standard

demo8-screenshot

This demo is another example of the cool effects that can be made in Flash and ActionScript 3 using the Stardust Particle Engine.

By combining a simple particle effect with lots of Flash filters and some BitmapData processing, it’s possible to create some pretty abstract looking flame effects. The initial idea was to make something similar to the neon particle systems seen in games like Geometry Wars and Grid Runner, but after playing around with the Flash bitmap filters for a while I ended up with this cool looking flame effect instead.

The code is actually fairly similar to my earlier tutorial on using the Stardust engine, but this time I’m setting the velocity of the particles based on the speed and direction of the spaceship to create a nice engine flame effect that reacts to the ship’s movement.

Click here to view the demo and download the source code.

Creating a simple particle effect using the Stardust Particle Engine

Standard

The Stardust Particle Engine is a great new addition to that long list of open source AS3 projects out there on the web. While Stardust can look like a fairly complex system to get started with, this tutorial will hopefully show you how to setup a simple particle effect using the library and give you enough understanding of how it works to start making your own effects as well.

Stardust has a lot of cool features, and much of its structure and functionality will be familiar to people who have already used the Flint particle effects library or the Box2DFlash physics engine.

What makes this engine different is the way it brings all these features together in a modular and well designed package. It supports 2D and 3D particle effects (via its own internal 3D engine and through plugins for Papervision3D, ZedBox or ND3D), particle masking to help create more complex logic, and even the option to configure your effects using external XML files.

In addition to this great list of features is an excellent set of documentation, a nice introductory user guide, lots of really good code examples and even some FlashDevelop class templates that make it much easier to extend the core classes for your own effects. All of these extras are available from the links on the Stardust project home page.

So anyway, on with the tutorial, what we’re going to do is create a very simple multi-coloured smoke effect that will follow the mouse around the screen. It’s nothing too amazing I guess, but hopefully it will work as an intro on how to get started using the Stardust particle effects engine.

Continue reading

Music Visualizer with Flash 10 3D effects

Standard

So I finally got around to setting up Flex 4 with FlashDevelop 3 and thought I would have a go at making another music visualizer, this time using some of the new features in Flash Player 10.

Setting up Flex 4 turned out to be much easier than I expected (was just a case of swapping it for Flex 3 in the FlashDevelop compile settings), and while you don’t get code completion for the new Flash 10 classes everything else runs fine.

While there’s lots of great new features in Flash 10, the one thing I wanted to try out was the new built in 3D transforms and drawing API. So I set about trying to make some kind of 3D sound tunnel, the aim was to get something that looked like an old Llamasoft game, although I’m not sure quite how successful that was.

Anyway, the code turned out to be surprisingly easy to write, it seems that Adobe have gone to some real effort to make sure that the new 3D effects in Flash 10 are as easy to use as possible. In many ways it’s actually quite similar to how Five3D works, you can rotate any display object on any axis, move the vanishing point of the scene and even adjust things like camera focus and field of view, although as far as I know you cannot actually move the camera itself.

While this is all great, there are a few limitations to these new 3D effects as Keith Peters has pointed out in his posts about the visual quality of 3D in Flash 10 and the effect this has on nested display objects with 3D transforms. Some of this, such as the lack of anti-aliasing, you will be able to see in the demo below.

Despite these issues, I think the Flash 10 3D effects will come in very useful on some future project where low file sizes and simple code might be more important than higher visual quality.

Check out the demo and source code below, as usual the music (or you could just call it noise) was made using the Hobnox AudioTool ToneMatrix, which is their version of the Yamaha Tenori-On.

demo5-soundvisualizer

Click here for demo and source code

Music visualizers in Flash using AS3 and computeSpectrum

Standard

Music visualizers really are great, all those colours and patterns you see generated by the music in media players like iTunes are nice to watch, and with AS3 it turns out that it’s actually fairly simple to make something similar in Flash. That’s great because it offers a cool way to learn more about ActionScript graphics programming, the drawing API, Filters and the BitmapData class.

To get the sound spectrum data from the currently playing sound it’s just a matter of passing a ByteArray to SoundMixer.computeSpectrum on each frame, then looping through it and using the values you get to draw some nice stuff on the screen. Combine that with some user input and you can make some pretty amazing lightshows with just a few lines of code.

Here’s the basics of how to get the sound spectrum data:

var sound:Sound = new Sound();
sound.load('music.mp3');
var soundchannel:SoundChannel = sound.play();
addEventListener(Event.ENTER_FRAME, onEnterFrame);

function onEnterFrame(e:Event)
{
    var bytes:ByteArray = new ByteArray();
    SoundMixer.computeSpectrum(bytes);
    for(var i:int=0; i<512; i++)
    {
        var value:Number = bytes.readFloat();
        //now use 'value' as the basis for
        //drawing your graphics to the stage
    }
}

The demos below are mainly based on an example by Todd Yard from his excellent book on AS3 Image Effects. I’ve added in some extra BitmapData effects filters and after trails but the main structure is quite similar. A few other posts I found useful while reading up on this subject included this one by Grant Skinner, this one on Antti Kupila’s Blog and a Papervision3D version by John Lindquist. It’s also worth checking out the Adobe live docs for the SoundMixer Class as there is some useful info and examples on there as well.

Also if your interested in audio visualizers in general, then the Lightsynths on the Llamasoft website are definitely worth a look, Llamasoft is the creator of the Xbox 360 music visualizer and Atari Jaguar classic Tempest 2000.

Anyway, below are some screen grabs of the demos I made plus links to the demos and source code too. The music used was just something quick I put together using the fantastic Hobnox AudioTool and it’s ToneMatrix setup.

Demo 1

sound-demo1

Click here to see the demo and download the source.

Demo 2

sound-demo2

Click here to see the demo and download the source.