[AS3] Musical picture game

[lananci]

Hi everyone,
I'm building a videogame for kids, involving drawing and sounds. Three different colors to use to draw and every color "means" a sound. How do I calculate the length of the line drawn by the user, in order to set the duration of its sound. I was wondering if it's possible to determine the number of pixels that make the line and maybe set up a second of sound every 10/20 pixels?

Thanks in advance for any suggestion!

[lordofduct]

distance formula...

sqrt[ (x2 - x1)^2 + (y2 - y1)^2 ]

the Point class has it built in as Point.distance()

it's identical to the pythagorean theorem where (c2 - c1) are the length of the legs of a right triangle, and the distance is the hypotenuse.


then just divide by the number of pixels per second of sound. That value is the number of seconds to play for.

[lananci]

Thanks lordofduct, I'm not very good at this geometric stuff, so maybe I'm getting it wrong, but wouldn't this just get the distance between the mouse coordinates? So, if I draw, for instance, a spiral I would get only the distance between the start and the end point, not the full line length. Right?

[lordofduct]

Sorry, I miss read your post then. You said Line, which I assumed you meant a line segment, which is flat and has a constant slope.

|

You mean a curve. It all depends on the curve you drew how to find its arclength. Arclength still uses the distance formula, but it's stuck inside of a much larger formula:

parametric vector form where r is a vector for the curve:
DefiniteIntegral[ Magnitude[ r'(t) ] ]

Seeing as Integration has no real basic rule to it like all arithmetic processes, and it doesn't have any basic pattern to it like the derivative formula. This formula is basically useless for a programmer.

Finding arc length is a little harder then. It really all depends on how you draw these curves. For instance:

graphics.curveTo() - uses the quadratic bezier curve, the equation to which in vector form is:

P1*(1-t)^2 + P2*(2*t*(1-t)) + P3*(t^2)

Thusly you can find an approximate arclength by interpolating through the cruve and adding up the lengths along the way.

Just start at the first point in it, then interpolate like .05 through it, add the distance between the two points to a variable representing the length. Set the first point to this point and repeat until you get to the end. The length once you get to the end is an approximation of the arclength. For a more accurate resulat interpolate by smaller values, interpolating by .01 will take longer, but is more accurate than .05


That's all a fairly generic explanation, here is a guy who goes much more in depth if you want to read about it:
http://www.algorithmist.net/crlength.html

and here is a collection of Classes for curves he made that include methods to extract their arclength:
http://www.algorithmist.net/as3pc.html

[lananci]

Oh, my goodness!! I didn't undertand a word of what you said. The fact is I have no idea of what the draw will be. I might be a doodle or a face or a tree or whatever... it's a freehand drawing game. And it's for kids. I actually thought it would be easier. AS has to be aware of the number pixels making the line. It's one of the concepts I based all my AS learning on. If it's on stage or if you can trace it, actionscript knows what you're talking about. So, if it colors the pixels, it means it knows. Right?

[lananci]

What if I make a loop, so every time the mouse coordinates change (increment or decrement), based on the distance from the point where the mouse starts being down, I change a value, which will also set the duration of the sound? Does it make any sense? Any hint on how to do all this stuff?

[Draxus]

Unless I'm misunderstanding something about what you're trying to do, I think a much simpler solution would work. You say you need the length to set the duration of a sound (ie. a large spiral = much longer sound than a small circle), right? Why not instead just track how long the user is drawing for? So, when the user clicks and begins drawing a line, start adding 1 to a variable every frame. When they release the mouse button, divide this variable by your fps and you have the number of seconds they were drawing... and base your sound duration on that.

I hope this helps.

[lananci]

As this is a game for kids, drawing the same thing might take longer for a younger kid. So two identical draws would sound different. That might be a plus to the game, actually. Another skill to prove. Just like when you play an instrument. It sound different depending on the speed you play it. I like this idea! Thanks!! But I think I need to get the number of pixels anyway.

[Draxus]

Good point.... well, you could just check (on every frame while the user is drawing) the distance between the current mouse position and the mouse position from the previous frame and add this to a variable, then when they release, use that variable.


var mouseOld:Point = new Point(0,0);
var totalDrawingDistance:int = 0;
onEneterFrame()
{
var mouseNew = new Point(xmouse, ymouse)
var dx = mouseNew.x - mouseOld.x
var dy = mouseNew.y - mouseOld.y
var d = dx * dx + dy * dy
var d = Math.sqrt(d)
totalDrawingDistance += d
mouseOld = mouseNew
}


That's the basic idea anyway, in AS3.

[lananci]

Well, as this is a free project, as much as funny it might be, also have to work. So, I decided to make sound while the user is drawing. A lot easier!
Thanks everyone!!

[neilmmm]

can't you just play a sound while they are drawing?

_root.createEmptyMovieClip("line", 1);
var pressed:Boolean = false;
var s:Sound = new Sound(this);
s.attachSound("whop");
_root.onMouseDown = function() {
line.moveTo(_xmouse, _ymouse);
line.lineStyle(2, 0xaa3333, 100);
this.onMouseMove = function() {
line.lineTo(_xmouse, _ymouse);
updateAfterEvent();
if (!pressed) {
s.start(0, 99);
pressed = true;
}
};
};
_root.onMouseUp = function() {
this.onMouseMove = null;
s.stop();
pressed = false;
};


if you want to play that sound again for the same length

you need to make a timer whilst you are drawing and then when you play the sound start timer again and when it gets to that value stop the sound

or if it is a long sound you could find s.position just before you stop the sound on drawing and then play the sound for that long