Wind/Underwater Flow

[quiktec]

I want to make some objects, that look like the ends of mouse tails (as in a squeak squeak mouse) or the ends of a strand of hair appear to flow underwater or really gentle wind.

I haven't been able to find anything prewritten & I'm on a tight ass deadline.

Any ideas/thoughts or.. CODE

[jbum]

I spent a few minutes on it and came up with this...

I'm modeling the tails as an object with a single curveTo on each side. This only gives you one 'bend' point. You may want more, to get more of an undulating motion.

Play with the damping and speed variables up top to get different kinds of motion.

Also note that I tweaked this when my FPS was set to 12. If you use a significantly different value, it'll look funny (er).

// Blades of grass
//
// - Jim Bumgardner

DAMP = 0.95
TSPEED = 12  // turbulence (individual motion)
WSPEED = 1   // wind (common motion)

MovieClip.prototype.drawTail = function()
{
  this.clear();
  this.moveTo(-5,0);
  this.beginFill(0x007700, 100);
  this.curveTo(this.cx,this.cy,this.ex, this.ey);
  this.curveTo(this.cx+10,this.cy, 5, 0);
  this.lineTo(-5,0);
  this.endFill();
}

function TailMove()
{
	this.vx1 *= DAMP;	// damping
	this.vx2 *= DAMP;
	this.vy1 *= DAMP;
	this.vy2 *= DAMP;
	this.vx1 += Math.random()*TSPEED-TSPEED/2 + _root.windx;
	this.vy1 += Math.random()*TSPEED-TSPEED/2;
	this.vx2 += Math.random()*TSPEED-TSPEED/2 + _root.windx;
	this.vy2 += Math.random()*TSPEED-TSPEED/2;
	this.cx = this.cxR + this.vx1;
	this.cy = this.cyR + this.vy1;
	this.ex = this.exR + this.vx2 + _root.windx;
	this.ey = this.eyR + this.vy2 + _root.windy;
	this.drawTail();
}

function wind()
{
	_root.windx *= DAMP;
	_root.windx += Math.random()*WSPEED - WSPEED/2;
}

for (var i = 0; i < 60; ++i) {
	var mc = this.createEmptyMovieClip("fish_mc_"+i, i);
	mc._x = i*10;
	mc._y = Stage.height;
	mc.cx = mc.cxR = Math.random()*10-5;
	mc.cy = mc.cyR = -(75+Math.random()*75);
	mc.ex = mc.exR = Math.random()*10-5;
	mc.ey = mc.eyR = mc.cyR*2;
	mc.onEnterFrame = TailMove;
}

this.onEnterFrame = wind;

Hope this helps...

- jbum

[jbum]

Since I liked this effect, I added a 'windy grass' movie to my bestiary, which allows you to tweak a couple of the values and see the effect. This version adds a few additional features.

Here's the link:

Windy Grass Demo

- jbum

[quiktec]

I'd like to try applying this to some pre drawn objects, although I'm really having some crazy mad problems.

How could I do that?

haha, this wasn't the week to decide to stop drinking caffeine.

[jbum]

I used similar methods to animate the body parts of the pre-drawn bee in this movie:

Honeycomb Maze

However, this is NOT a situation where you're just gonna be able to use 'cut & paste' code, as many of the folks around here like to do... Get that extra large latte and drink up...

In the case of the Bee, the legs and antennae consist of jointed segments.
Each segment is on a movie clip and positioned so that the crosshairs correspond to it's pivot point.

base mid tip
+------ +------ +-------

The "+" correspond to the pivot points
or "joints" in the tail.

Then I can modify the _rotation value of each movie (plus or minus 10-20 degrees or so) to simulate 'wiggling' around that joint. You could set up a mouse-tail in this same fashion - draw it as a series of stiff segments and rotate each segment.

You won't get the flexible look you get from using curveTo, it'll be more like one of those snake toys that is made out of wooden links where you hold the tail, but if there are enough links, it should look pretty good.

In this case of a prehensile tail, you probably want to set it up as a hierarchy of connected movie clips: The tail's tip is attached to the midpoint. The midpoint is attached to the tail base. The tail base is attached to the
rump.

base... mid tip
[ +--- [ +--- [ +---- ] ] ]


You would wiggle the individual parts like so:

tailbase.wiggle();
tailbase.tailmid.wiggle();
tailbase.tailmid.tailtip.wiggle();

This way, if you rotate the tail base, the WHOLE tail moves, but if you rotate the midpoint, only the midpoint and tip move. If you rotate the tip, only the tip moves.

Of course, you might want more segments than this, but I would start with no more than 3 until you get the scripts to work right.

You can modify the _rotation using the same kind of random number mechanism I'm using in the grass movie...

// function to wiggle a tail segment
MovieClip.prototype.wiggle = function()
{
  // rotation speed
  this.rd += Math.random()2-1;
  this._rotation += this.rd;
}

- jim

[quiktec]

Is it actually possible to apply these kind of actions to a predrawn object?

Like an object not drawn in flash that is, for example vectors from illustrator.

[jbum]

Yes, if you break up the pre-drawn object into jointed segments, as I described above - it doesn't really matter where the art comes from.

What you're NOT going to be able to do is take a single image from illustrator and cause it to magically animate. You'll need to break it up into parts.

- jim