Drawing api

1

From the Robert Penner code given in this tutorial:

http://www.kirupa.com/developer/actionscript/tricks/drawing_api.htm

i was wondering why controlx and controly has to be so complicated.

I’ve tried changing it to just _root._xmouse but it messes up. I don’t get this, shouldn’t the curve point be the same point as the mouse?? thanks

2

No. This is how the curveTo is calculated: with the control point. No control point, no curveTo, that’s the way it is. But if you’re not satisfied with it, there’s a very nice curveThrough prototype developped by CCCP.

pom :slight_smile:

3

doh i’m confused :-\

because if i make the control point whatever the mouse is, which i initially thought would look like:

controlx = _root._xmouse
controly = _root._ymouse

then i thought the control point would be whatever the mouse is. But weirdly, it has to be:

controlX=_xmouse2-(x1+x2)/2;
controlY=_ymouse2-(y1+y2)/2;

which confuses me :-\ Is there an explanation for this?!?! thanks

4

Well, for some reason (looks at clock… oh yeah) I decided that I should make an example .fla to help you understand… so here it is.

5

wow looks really good! thanks for that apdesign! jsut trying to get my head around the concept, still very confusing but this is helping :slight_smile:

6

well, have you ever used the pen tool in flash? or the bezier curve tool in something like illustrator… its kind of like that…

(don’t forget to drag the points, it should help to explain it a lot)

7

i’ve used the pen tool in photoshop, but only a bit :-\

whats confusing me i think is:

this.lineStyle(2, 0xFF0000, 100);
this.moveTo(controlX, controlY);
this.lineTo(x1, y1);

because isn’t the moveTo command suppose to be x1 and y1?? because controlx and controly are mouse points. This bit is confusing me…

I understand why the formula to get the curve works, but still can’t get my head around to why _xmouse (somethign simple like that) isn’t working :-\ Because if the mouse is on point 50, 50…then the control points should also be on 50, 50. Am i confusing you???

8

thats where you are wrong though, the control points are NOT where the mouse is…
first of all, completely ignore this

this.lineStyle(2, 0xFF0000, 100);
this.moveTo(controlX, controlY);
this.lineTo(x1, y1);

it has nothing to do with the curve formula, it is only for the visual aid of the red line. when looking at the code just look at the robert penner code, not the one I gave you.

the control points are NOT the ‘tip’ of the curve, but the points that the curve is TRYING to reach. if you look at the example, you’ll see that the controlX, controlY coordinate is way above (about half) where the mouse is. imagine the green line being straight and the controlX, controlY as something “pulling” the line into a curve.

9

here is another one… this time drag the middle dot (this changes the controlX,controlyY) and the other two dots. remember, only use this as a visual aid, don’t look at the code because it will only confuse you more!

10

ooo!! the word PULLING explained it to me! thank you so much AP!! :stuck_out_tongue: :stuck_out_tongue: :stuck_out_tongue: :stuck_out_tongue: :stuck_out_tongue: :stuck_out_tongue: :stuck_out_tongue: :stuck_out_tongue:

11

heh, I do what I can! and now I need some sleep :wink:

12

I understand the pulling concept, but what is

-(y1+y2)/2
for?

13

gives the midpoint of the line between the first x postition and the second x position…

14

Yes, but why do you need to subract the midpoint?