View Full Version : Challenge - Cursor Trails

08-12-2005, 06:59 AM
Fairly self-explanatory, but here are some rules:

create an effect that follows the cursor in some way or another.
no length limit, use as much code as you want.
post as many times as you want.
be as creative as possible, think of something you haven't seen before and try to make it.
most importantly: have fun.

you don't have to be an expert to create a great effect. beginners are encouraged to participate. this might help ease the learning curve:
// create listener object
mouseListener = new Object();

// retrieve the cursor's current position
someObject._x = _root._xmouse;
someObject._y = _root._ymouse;

i will throw together a few examples. i have attached two for now.

08-14-2005, 11:00 AM

i was hoping to see a little more interest in this challenge. there are some cool things you can do with this type of effect.

i made another example. i included the source with this one in case it helps anyone.

too bad i don't have a bunch of expensive stuff to give away.

Dylan Marvin
08-14-2005, 06:46 PM
i was hoping to see a little more interest in this challenge. there are some cool things you can do with this type of effect.
Aside from the "image" challenge, which only now has picked up, challenges don't get too much traffic (as far as I've seen in my short time here).
Give them time. Besides, if someone is really interested they might be making their submissions while you're waiting:).

(Also, I hope the challenge offering a reward hasn't spoiled the interest in challenges for "just for kicks". I put a challenge up about a month ago and it must have been deleted for lack of interest or maybe I didn't follow the guidelines.)

08-15-2005, 09:41 PM
This is my first Mouse trialier which i think follows your challenge!
ha ha

08-16-2005, 03:09 AM
that's pretty awesome for your first one. i think something that would be cool to add to it would be more of a chain reaction.. the first duckling follows the parent with a delay, the second follows the first, and so on. that way, if you move the cursor quickly, the last one gets left way behind.

again, great job. and feel free to post multiple entries as you develop your skill.

08-16-2005, 10:59 AM
I have built these recently to demo various effects to people. Most of them can be found in the forum in various places. I might have a few more goes at this challenge later - it's a good'un!

08-16-2005, 02:52 PM
How did ya do the verticle one, sorry if this is slightly off the challenge subject, but i want to know. I could use it to make a game :)



08-16-2005, 03:51 PM
Full code for the jumping balls one is in this post:


I used a bunch of unpleasent A-Level calculus to work out how fast the balls should travel to jump high enough (which is what the poster was asking about), but the animation and physics bits are the usual dead simple itterative methods, written in the 15 minutes it took me to eat breakfast this morning!

The balls are set to a random alpha, which fades a bit per frame once they are travelling downwards. When they hit zero alpha or fall out of view, they are removed.

A new ball is generated each frame at the mouse x position, with a random (but small) left/right velocity. The vertical velocity is calculated by the unpleasent maths bits.

08-16-2005, 07:49 PM
Here's a brand new one just for the challenge. The maths of this took rather longer than I'd hoped, but the end result is quite pleasing.

08-16-2005, 08:12 PM
That looks nice CMU.
I remember I did some mouse trail examples I think in Flash 5. Lemme see if I can find them...
ooo there they are http://www.senocular.com/flash/source.php?id=0.61
nothing special though.

08-16-2005, 09:28 PM
One more! I can't resist, these are lots of fun for the amount of effort required to make them.

Press the mouse button to fire in this one. It's not continuous like the others as the effect doesn't look as good if it is.

Dylan Marvin
08-17-2005, 07:46 AM
I've got all my mouse toys right on my home page (http://www.dylanmarvin.com) at the moment. A couple of these *might* be considered trails ("oranges", "bubbles"). I can post some flas if anyone's interested. (I'm pretty sure most of it is Flash 5 compatible script).

CMU nice "line trails".:) Any chance of sharing the fla with the rest of the class?

08-17-2005, 10:34 AM
Dylan, your oranges and bubbles are definitely mouse trails. The bubbles one is very effective too. By the way, you mentioned earlier that your challenge thread had been deleted. It's actually just vanished off the 'last month's posts' list as it has had no traffic for a month. You can change the filter to show everything at the bottom of the thread list and it pops back. It's a tough challenge though. Can't imagine many Flash coders really understand 3D all that well so are perhaps put off by the title.

The wiggly lines: I'll post up the code later, I can't get at it right now from work. The algorithm basically works with the curveTo() drawing API method though. Each frame, a random point is picked near to the mouse cursor's current position. The new curve segment will flow from the old end point to the newly picked position. The control point is chosen to be in line with the old control point so the curve remains smooth at the join, but the distance to each endpoint is made equal so the curve doesn't have ultra sharp bends if possible.

Picking the control point gave me loads of trouble. I had expected it to be pretty easy when I thought of the idea, but a lot of solutions didn't work. I spent quite a while with just one trail and 1fps so I could see why each attempt didn't work.


08-17-2005, 12:35 PM
:) took a few days to kick off, but i'm seeing some very impressive effects.

CMU, my favorite from you is probably line trails. for choosing a control point, a quick and easy method would be to first find the anchor point, then calculate the midpoint between it and the start point. from the mid point, choose a random point near it for the control point.

controlPointX = midpointX + random(20) - 10;
// do the same for the Y control point
// you can also keep the curves scaled to the cursor speed
// just calculate the distance between the start and anchor
// then use that variable when finding a random
controlPointX = midpointX + random(xDistance) - xDistance/2;

dylan, your bubbles trail was awesome. it really makes you feel like you're under water.

senocular, you had some great effects as well. i wish we could modify the Windows cursor to have custom trail effects, instead of their ghetto one. i think my favorite, though was the chain effect.

well done! feel free to post source codes to help inspire new entries.

08-17-2005, 02:57 PM
Invader, just picking the midpoint and a random distance from it would give a pleasing curve for each segment, but not a pleasing smooth join between segments. To avoid a sharp angle between two adjacent curve segments, you have to have the control points of each curve in line with the common anchor.

Basically, the quadratic curves drawn by curveTo() will start and end tangential to the line between the anchors and the control point.

08-17-2005, 09:24 PM
As promised earlier, here's the code for the wibbly line trails. Set the background to black and the framerate to 30fps for best effect. Then just paste this code into the movie and run. There are constants that you can modify to change the behavior a bit - read the comments for pointers.

// Fiddle constants
var trailCount = 4; // Number of trails chasing the mouse
var randomness = 40; // Max pixels from mouse that the lines will move to
var fadeRate = 5 // Rate at which old lines lose alpha per frame

Math.randomNum = function (minNum, maxNum)
return Math.random() * (maxNum - minNum) + minNum;

// Initialise trails
var trails = new Array();
for (var j=0; j<trailCount; j++)
trails[j] = {
prevCx:_root._xmouse + Math.randomNum(-randomness, randomness),
prevCy:_root._ymouse + Math.randomNum(-randomness, randomness),

// Hack the first three colours to nice bold primaries
trails[0].colour = 0xFF0000;
trails[1].colour = 0x00FF00;
trails[2].colour = 0x0000FF;

var frame = 1;
_root.onEnterFrame = function () {

// Skip generation every other frame
// Remove the following line to make lines more intensly follow mouse
if (frame % 2) return;

for (var j=0; j<trails.length; j++)
// Create new clip for this curve segment
clip = _root.createEmptyMovieClip("clip" + frame + "-" + j, (j + 1) * frame);
clip.lineStyle(2, trails[j].colour, 100);

// Pick a new random point near the mouse
var newX = _root._xmouse + Math.randomNum(-randomness, randomness);
var newY = _root._ymouse + Math.randomNum(-randomness, randomness);

// Find a position for the control point to make the line smooth
// First find the triangle between the old end point and the old control point
var dCx = trails[j].prevx - trails[j].prevCx;
var dCy = trails[j].prevy - trails[j].prevCy;
var dCLength = Math.sqrt(dCx * dCx + dCy * dCy);

// Now find the triangle between the previous endpoint and the new one
var dx = trails[j].prevx - newX;
var dy = trails[j].prevy - newY;
var dLength = Math.sqrt(dx * dx + dy * dy);

// Find the scale factor for the control point triangle
cScale = 0;
if (dCLength != 0) cScale = 0.5 * dLength / dCLength;

// Apply the scale factor to create a similar triangle so the control point stays in line
var newCx = trails[j].prevx + dCx * cScale;
var newCy = trails[j].prevy + dCy * cScale;

// Line drawing - enable to visualise control point
// clip.moveTo(trails[j].prevx, trails[j].prevy);
// clip.lineTo(newCx, newCy);
// clip.lineTo(newX, newY);

// Draw curve
clip.moveTo(trails[j].prevx, trails[j].prevy);
clip.curveTo(newCx, newCy, newX, newY);

// Update record of previous trail points
trails[j].prevx = newX;
trails[j].prevy = newY;
trails[j].prevCx = newCx;
trails[j].prevCy = newCy;

clip.onEnterFrame = function()
// Fade the clip until it vanishes
this._alpha -= fadeRate;
if (this._alpha < 1) this.removeMovieClip();

Dylan Marvin
08-17-2005, 10:26 PM
You rock:).

08-18-2005, 10:32 PM
CMU, good point about the relation between control points. silly mistake on my part.

and thanks for posting the source. i'm sure it'll benefit and/or inspire quite a few people!