I've been playing with curves...

Specifically, I've been playing with how to animate curves and keep them random but smooth. This here's my second version. The original is below. A little less trippy...or at least a different trippy.

OH, by the way. Click the above to change the color of the glow. Some glows are more powerful than others, so if you don't see much of a glow...click!



The bulk of this is done by connecting an array of points with Flash's curveTo function and then then slightly changing the curve values every frame. The top was made with a BitmapData field over the top to give that glow effect (see 2 posts ago). As for the non-glowing version, I simply told the curves to fill in with a color. Since the points are intersecting all sorts of wobbly angles, you'll have some "negative" areas that won't be filled in, generating a nifty little checkerboard effect.

UPDATE: Looking at this little project the day after the fact reminds me why I love doing this so much. I put a VERY slight offset in the curve points that are randomized. The curves work wonderfully to show how a small change can have a large impact. If the initial offset was too large, you'd see the curves jitter as they scramble to their new random point. With no offset, the curves would essentially loop indefinitely in the same pattern (I'm using sin to loop). This tiny tiny offset adds upon itself, so once through the sin period, it has altered ever so slightly. Given that there are....I think 50? points on each glob of curves, that winds making a whole new pattern EVERY time it cycles through! The odds of getting the same exact curve are next to nothing! Add to that the fact that there are really 3 individual continuous curve globs and you really won't see the same thing twice...fun!

Perlin Noise

Okay, so messing about with BitmapData inevitably led to learning about Perlin Noise. Named for Ken Perlin, a VFX fellow, it is used to procedurally generate textures in an organic way. I'm still trying to wrap my head around how exactly to use it, but the above is my first baby step into transforming a Perlin field...next step is to apply that field to something else!

Sparklies!

No large version.

Okay, so thanks to this, I feel I've gained a little knowledge in the world of the BitmapData class in Flash. And good god...if you want some absolutely stunning effects, learn more about it! What we've got here is essentially a Bitmap (literally a...map of bits...) that is showing off its pixel data (naughty!). Since this data is now available to us, we can manipulate it however we'd like. In this case, we're putting a little glow and blur filters on it. HOWEVER...the Bitmap that we've drawn on the stage is a solid rectangle. So why does that glow appear inside this rectangle?

Enter the "draw" method of the BitmapData. See those little flickery particles? Those act as "holes" in the BitmapData. Every frame, Flash is redrawing that initial rectangle and taking a peek at what it looks like. If we have one of our particles over the rectangle, that rectangle isn't visible where the particle exists. So, as far as Flash is concerned there's nothing there. So we get a hole...a hole that can have a blur and glow filter applied to it! Nifty!

It's almost like a fortune cookie...

Large version - highly recommended.

Whee! Twitter API AWAY! I've spent a little while now trying to get an understanding of the Twitter API and integrating it with Flash. Turns out there are some nice resources out there on how to get it running, but the thing that gave me the most difficulty was learning how to deal with the incoming data (which is in the form of an Atom feed with the Search API).

So...enjoy!

Remember Populous?

Large.

Man, Populous was fun...

Anywho, what we have here is a fun little world-building tool in an isometric view. Simply grab your parcel of land, and drag up and down to bring it up or down. While that panel is highlighted, use keys 1-8 on your keyboard to swap out different types of land.

The wonderful thing about this, is how easy it is to change. I went with a Green Hill Zone from Sonic the Hedgehog for the design...because...well, it lent itself to it, I guess. Or maybe Sonic 3D Blast really got wedged deep into my brain.

Anyway, changing. If you want more land types, it's easy! I just need to draw it in an isometric view. No programming changes or anything. We could even adapt the programming to use multiple tilesets (say we allow the number keys to now change the FAMILY of tile, and repeated presses will cycle through different panels of that family).

So, have fun. Build things!

Glowy Things

Large version.

Here's another "gotta make something" post. I'm actually pretty happy with the ethereal feel of it. Sort of ghostly, but not necessarily spooky. There are two elements at play here.

1). Glow Filter. I talked about filters in the last post. This is just adding a glow filter via actionscript. I'm adjusting the strength of the glow with the second important element of this .swf.

2). We're using TRIGONOMETRY again! Now, there are several ways to get the pulsing glow effect, but I thought about it...and...the sine wave came to my aid! If you're familiar with the sine wave, you know that it oscillates from a crest to a trough and continues this (think of a REALLY sloppy sideways "S" - that's pretty much a sine wave). Each of these full runs is called a period. So we have a curve that goes from n to 0 to -n and back to 0. Handy for a repetitive movement! I'm essentially feeding sin an increasing number (representing the x axis - in other words, we're moving RIGHT along the wave) and it's spitting back a stream of numbers that go uuuuuuup and back doooooooown and back uuuuuuup until we all vomit, we're so dang full of numbers! Er. Or something. So our glow strength is going from 10 to -10 and back again. Since a negative strength on a glow makes the glow invisible...well...we don't see it.

OH, almost forgot two little things. The spat out number (the ups and downs) are amplified by 10 to get a strong glow effect. We're upping the amplitude of the sine wave! Joy of joys! The other little thing...when the glow is negative, I'm having some fun making the origin points of the glows jump around randomly in the dark. Creepy little buggers!

NOTE: One last thing, I swear. As each origin point is created, it also randomizes the QUALITY of the glow. That's why you sometimes see nice round glows, and other times you'll see more squared off glows. In this case, I wouldn't say there's a difference in quality. Just different effects.

Playing with Light

Large.

You probably know how nifty Flash's built-in filters are. Dropshadows, glows, bevels, oh my! BUT, rather than activating these filters with the properties panel in Flash, why not take a peek under the hood and tweak them?

That's exactly what's going on up there. You see, each of those above green shapes is constantly redrawing its shadow relative to the yellow light source. It's actually a pretty easy technique to use, and it's a handy tool for faking light sources in your games and animations.

To actually use a filter in Flash, you'll first need to import it (import flash.filters.* where * is a wildcard OR the name of the specific filter you want). From there, you can just set up a var placeholder for the filter. Something like:

var myFilter;

Then we'll set that "myFilter" to a the filter we want. So...

myFilter = new DropShadowFilter(1,45,0,1,4,4,1,1,false,false,false);

What's up with all those numbers after the DropShadowFilter? Well, those are what we call arguments, and those are the specific parameters of the dropshadow. Flash has a nice built-in assistance tool that will fill you in on what each is. The ones I specifically messed with for the above .swf are the first two (1 and 45, the distance of the shadow and angle of the shadow, respectively).

Now at this point, it's important to note that the myFilter = new DropShadowFilter line is in the ENTER_FRAME of my movie clip - things will be changing, and I want to check for those changes every frame.

Let's take a look at MY version of the above line...
myFilter = new DropShadowFilter(distance*.05,newAngle,0,1,4,4,1,1,false,false,false);

The difference, of course, are the first two values. Those don't mean much without the backing code, so...
diffX = x - LightSource.main.newLight.x;
diffY = y - LightSource.main.newLight.y;
var distance = Math.sqrt(diffX * diffX + diffY * diffY);
newAngle = Math.atan2(diffY,diffX) * 180 / Math.PI;


What's going on? Well, we're first figuring the distance between the green object and the light source (subtract the light source's position from the green object's position for both axes). With our good buddy Pythagoras, we know the distance between two points is equal to the square root of the difference on each axis squared. Uh...C = the square root of A^2+B^2. Trust me. 


So there's the distance of the dropshadow! Note that I multiplied it by .05. That's because I wanted to keep the shadow from getting too crazy long. 


Now the meat - the ANGLE - of the dropshadow. The line starting with newAngle is where the magic happens. Using some trigonometric witchcraft known as the arctangent, Flash can calculate the angle between two objects. We just need the difference in positions (already got that, remember? diffX and diffY). And since Flash sees fit to deal with trig in radians, but rotation in DEGREES, we need to convert it. Easily done. Just multiply by 180/pi. Huzzah! Trig!