Re: [Flashcoders] Seeking a bit of drawing API inspiration..
Thanks Fumio - I already had an 8-segment circle-drawing function, I was
looking for a 4-segment. It turned out to be pretty trivial - not accurate,
but close enough for what I needed. So my problem is solved.
Thanks anyway!
Cheers,
Ian
On 2/3/06, Fumio Nonaka [EMAIL PROTECTED] wrote:
function xDrawCircle(target_mc:MovieClip, nX:Number, nY:Number,
nR:Number, nSegments:Number):Void {
if (nSegments == undefined) {
nSegments = 8;
}
var nAngle:Number = 2*Math.PI/nSegments;
target_mc.moveTo(nX+nR, nY);
for (var i = 1; i=nSegments; ++i) {
var nTheta:Number = i*nAngle;
var nAnchorX:Number = nR*Math.cos(nTheta);
var nAnchorY:Number = nR*Math.sin(nTheta);
var nControlX:Number =
nAnchorX+nR*Math.tan(nAngle/2)*Math.cos(nTheta-Math.PI/2);
var nControlY:Number =
nAnchorY+nR*Math.tan(nAngle/2)*Math.sin(nTheta-Math.PI/2);
target_mc.curveTo(nControlX+nX, nControlY+nY, nAnchorX+nX,
nAnchorY+nY);
}
}
// Test
var _mc:MovieClip = this.createEmptyMovieClip(target_mc, 1);
_mc.beginFill(0x00);
_mc.lineStyle(2, 0xFF);
xDrawCircle(_mc, Stage.width/2, Stage.height/2, 100, 8);
_mc.endFill();
_
Ian Thomas wrote:
Thanks for that - I've come up with an approximation based on very
similar
code. Not ideal, but it's close enough for the purpose I needed it for.
That
combined with a quick hash table to make sure I'm not plotting circles
near
other circles has given me the performance I need.
Good luck,
Fumio Nonaka
mailto:[EMAIL PROTECTED]
http://www.FumioNonaka.com/
My bookshttp://www.FumioNonaka.com/Books/index.html
Flash communityhttp://F-site.org/
___
Flashcoders mailing list
Flashcoders@chattyfig.figleaf.com
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
___
Flashcoders mailing list
Flashcoders@chattyfig.figleaf.com
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Re: [Flashcoders] Seeking a bit of drawing API inspiration..
Whoops, replied too fast without reading carefully - I hadn't spotted the nSegments parameter. That might come in handy, thank you! Ian On 2/3/06, Ian Thomas [EMAIL PROTECTED] wrote: Thanks Fumio - I already had an 8-segment circle-drawing function, I was looking for a 4-segment. It turned out to be pretty trivial - not accurate, but close enough for what I needed. So my problem is solved. Thanks anyway! Cheers, Ian ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Re: [Flashcoders] Seeking a bit of drawing API inspiration..
Ian, If I understand you right, you're drawing a chain_of_circles instead of just drawing a line? This approach seems quite strange, but it's your choice anyway :-) I don't think the math to redraw all circles will heal the performance - rather opposite. Instead, I can suggest use one of the following: 1) Try to use rectangles (or diamonds) in place of circles, as the are supposed to be drawn easily 2) Draw the circle ONCE into a movieclip and then just duplicate this mc. Hope both can be helpful. -- Best regards, GregoryN http://GOusable.com Flash components development. Usability services. --- Ian Thomas wrote: Hi folks, I'm looking for a bit of inspiration to help me out with the drawing API. I've got a feature that's sort of like a painting tool - - User clicks the mouse - on mouse move, a filled circle is drawn on the canvas (using beginFill/curveTo/endFill) - User releases the mouse So essentially the user is drawing a trail of circles. (Just as a side note, it's actually a mask that's being drawn rather than a clip - probably makes no odds). I'd much prefer it if the effect stays as overlapping circles rather than as 'paint strokes'. The problem I have is simply a performance issue - when the user has drawn lots of circles the app slows down significantly. It's nothing to do with extra code on my part - it's just Flash (presumably) redrawing all those curves all the time. Flash appears to be redrawing each circle, rather than draw the 'union of the curves' of all the circles. By which I mean - if you completely paint over the whole paint area, Flash could get away with drawing a filled square - but clearly it isn't, it's drawing every single curve on top of each other. (It doesn't do the merging that it would if we were just drawing overlapping circles in the IDE). So an obvious optimisation would be to do some maths, merge each new circle into an existing list of curves, and throw away the unnecessary curves - then clear the canvas and redraw. I'm sure I could work that out eventually (with the help of Google!), but I suspect the maths to do this may actually be too slow to be of much use. So - any ideas/similar experiences/solutions? (This is MX04, rather than Flash 8, otherwise I'd be looking at drawing into bitmaps to solve the problem.) TIA, Ian ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Re: [Flashcoders] Seeking a bit of drawing API inspiration..
Hi Gregory, Thanks for that. I am basically plotting/drawing a circle at each point the mouse moves to while clicked. (This isn't a paint package, it's for something else entirely - which is why I'm not drawing lines...) I had already got as far as trying rectangles - they are indeed a lot faster, just not as pretty. :-) They are my fallback position if I can't get anything better to work. I can't quite see why the MovieClip option would work - but I'm willing to have a go. I'll let you know how it works out. Many thanks, Ian On 2/2/06, GregoryN [EMAIL PROTECTED] wrote: Ian, If I understand you right, you're drawing a chain_of_circles instead of just drawing a line? This approach seems quite strange, but it's your choice anyway :-) I don't think the math to redraw all circles will heal the performance - rather opposite. Instead, I can suggest use one of the following: 1) Try to use rectangles (or diamonds) in place of circles, as the are supposed to be drawn easily 2) Draw the circle ONCE into a movieclip and then just duplicate this mc. Hope both can be helpful. ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Re: [Flashcoders] Seeking a bit of drawing API inspiration..
I was being silly. A night's sleep has cleared things up. All I needed to do was draw less circles. In other words, check whether I'd already drawn a circle anywhere near the current drawing position, and if I had, don't draw a new circle. Gave me a blistering speed increase. Thanks! Ian On 2/2/06, Ian Thomas [EMAIL PROTECTED] wrote: Hi Gregory, Thanks for that. I am basically plotting/drawing a circle at each point the mouse moves to while clicked. (This isn't a paint package, it's for something else entirely - which is why I'm not drawing lines...) I had already got as far as trying rectangles - they are indeed a lot faster, just not as pretty. :-) They are my fallback position if I can't get anything better to work. I can't quite see why the MovieClip option would work - but I'm willing to have a go. I'll let you know how it works out. Many thanks, Ian ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Re: [Flashcoders] Seeking a bit of drawing API inspiration..
Also, what code do you use to draw circles? Even in the MM docs, there are 2 methods, using 2 types of bezier curves: quadratic and cubic. Quadratic bezier method (of drawing circle) works fast and uses just 4 calls to curveTo(). But the result is squared. Cubic bezier method uses Math class (sin and tan), draws perfect circles, but mu-u-uch slower. Try to find the fastest method. And, of course, the less circles you draw, the better :-). -- Best regards, GregoryN http://GOusable.com Flash components development. Usability services. Ian Thomas wrote: I am basically plotting/drawing a circle at each point the mouse moves to while clicked. (This isn't a paint package, it's for something else entirely - which is why I'm not drawing lines...) I had already got as far as trying rectangles - they are indeed a lot faster, just not as pretty. :-) They are my fallback position if I can't get anything better to work. I can't quite see why the MovieClip option would work - but I'm willing to have a go. I'll let you know how it works out. Many thanks, Ian ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Re: [Flashcoders] Seeking a bit of drawing API inspiration..
I'm using an 8-arc method - I'd prefer to find 4-arc (i.e. the quadratic bezier) but haven't been able to find/work out suitable code. Could you point me in the right direction? Many thanks, Ian On 2/2/06, GregoryN [EMAIL PROTECTED] wrote: Also, what code do you use to draw circles? Even in the MM docs, there are 2 methods, using 2 types of bezier curves: quadratic and cubic. Quadratic bezier method (of drawing circle) works fast and uses just 4 calls to curveTo(). But the result is squared. Cubic bezier method uses Math class (sin and tan), draws perfect circles, but mu-u-uch slower. Try to find the fastest method. And, of course, the less circles you draw, the better :-). ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
RE: [Flashcoders] Seeking a bit of drawing API inspiration..
Hi, This probably isnt of any use to you, but for the filled circles, you can only simply draw a linepiece with a length of say 0.0001 and a high linethickness (50px for example results in a circle with a diameter of 50px). Like I said only of use if you draw filled circles. Greetz Hans -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Ian Thomas Sent: Thursday, February 02, 2006 2:04 PM To: Flashcoders mailing list Subject: Re: [Flashcoders] Seeking a bit of drawing API inspiration.. I'm using an 8-arc method - I'd prefer to find 4-arc (i.e. the quadratic bezier) but haven't been able to find/work out suitable code. Could you point me in the right direction? Many thanks, Ian On 2/2/06, GregoryN [EMAIL PROTECTED] wrote: Also, what code do you use to draw circles? Even in the MM docs, there are 2 methods, using 2 types of bezier curves: quadratic and cubic. Quadratic bezier method (of drawing circle) works fast and uses just 4 calls to curveTo(). But the result is squared. Cubic bezier method uses Math class (sin and tan), draws perfect circles, but mu-u-uch slower. Try to find the fastest method. And, of course, the less circles you draw, the better :-). ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Re: [Flashcoders] Seeking a bit of drawing API inspiration..
Hi Hans, Thanks for that - unfortunately it doesn't work in my case. I'd already thought of it, but I'm actually drawing a mask layer - and line thickness has no effect on a mask. Cheers, Ian On 2/2/06, j.c.wichman [EMAIL PROTECTED] wrote: Hi, This probably isnt of any use to you, but for the filled circles, you can only simply draw a linepiece with a length of say 0.0001 and a high linethickness (50px for example results in a circle with a diameter of 50px). Like I said only of use if you draw filled circles. Greetz Hans ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
RE: [Flashcoders] Seeking a bit of drawing API inspiration..
I missed the very first post - but is there a reaosn you're not using bitmap data to achieve this? (ie. Not flash 8?) M -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Ian Thomas Sent: 02 February 2006 13:16 To: Flashcoders mailing list Subject: Re: [Flashcoders] Seeking a bit of drawing API inspiration.. Hi Hans, Thanks for that - unfortunately it doesn't work in my case. I'd already thought of it, but I'm actually drawing a mask layer - and line thickness has no effect on a mask. Cheers, Ian On 2/2/06, j.c.wichman [EMAIL PROTECTED] wrote: Hi, This probably isnt of any use to you, but for the filled circles, you can only simply draw a linepiece with a length of say 0.0001 and a high linethickness (50px for example results in a circle with a diameter of 50px). Like I said only of use if you draw filled circles. Greetz Hans ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Re: [Flashcoders] Seeking a bit of drawing API inspiration..
Hi Mike, Yes, not flash 8. :-) Otherwise that would have been my first stop. :-) Although come to think of it I've no idea whether/how bitmap masks work - does Flash take into account the alpha channels of a bitmap used as a mask? Anyway - that's irrelevant to me at the moment and and experiment for another day... Thanks anyway, Ian On 2/2/06, Mike Mountain [EMAIL PROTECTED] wrote: I missed the very first post - but is there a reaosn you're not using bitmap data to achieve this? (ie. Not flash 8?) M -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Ian Thomas Sent: 02 February 2006 13:16 To: Flashcoders mailing list Subject: Re: [Flashcoders] Seeking a bit of drawing API inspiration.. Hi Hans, Thanks for that - unfortunately it doesn't work in my case. I'd already thought of it, but I'm actually drawing a mask layer - and line thickness has no effect on a mask. Cheers, Ian On 2/2/06, j.c.wichman [EMAIL PROTECTED] wrote: Hi, This probably isnt of any use to you, but for the filled circles, you can only simply draw a linepiece with a length of say 0.0001 and a high linethickness (50px for example results in a circle with a diameter of 50px). Like I said only of use if you draw filled circles. Greetz Hans ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Re: [Flashcoders] Seeking a bit of drawing API inspiration..
please. have a look here: http://www.kaourantin.net/2005/08/alpha-masking-goodness-in-flash- player.html worth everything ;) take care cedric Hi Mike, Yes, not flash 8. :-) Otherwise that would have been my first stop. :-) Although come to think of it I've no idea whether/how bitmap masks work - does Flash take into account the alpha channels of a bitmap used as a mask? Anyway - that's irrelevant to me at the moment and and experiment for another day... Thanks anyway, Ian On 2/2/06, Mike Mountain [EMAIL PROTECTED] wrote: I missed the very first post - but is there a reaosn you're not using bitmap data to achieve this? (ie. Not flash 8?) M -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Ian Thomas Sent: 02 February 2006 13:16 To: Flashcoders mailing list Subject: Re: [Flashcoders] Seeking a bit of drawing API inspiration.. Hi Hans, Thanks for that - unfortunately it doesn't work in my case. I'd already thought of it, but I'm actually drawing a mask layer - and line thickness has no effect on a mask. Cheers, Ian On 2/2/06, j.c.wichman [EMAIL PROTECTED] wrote: Hi, This probably isnt of any use to you, but for the filled circles, you can only simply draw a linepiece with a length of say 0.0001 and a high linethickness (50px for example results in a circle with a diameter of 50px). Like I said only of use if you draw filled circles. Greetz Hans ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Re: [Flashcoders] Seeking a bit of drawing API inspiration..
Oh, now that is extremely pretty. :-) I'm looking forward to getting my hands on version 8 - must get these projects finished first tho'... Thanks, Ian On 2/2/06, Cédric Muller [EMAIL PROTECTED] wrote: please. have a look here: http://www.kaourantin.net/2005/08/alpha-masking-goodness-in-flash- player.html worth everything ;) take care cedric ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
RE: [Flashcoders] Seeking a bit of drawing API inspiration..
Well, here's a quote from MM docs (Flash 7 AS reference,
MovieClip.curveTo()):
== start quote ===
The following example draws a circle with a solid blue hairline stroke and a
solid red fill:
this.createEmptyMovieClip(circle_mc, 1);
with (circle_mc) {
lineStyle(0, 0xFF, 100);
beginFill(0xFF);
moveTo(500, 500);
curveTo(600, 500, 600, 400);
curveTo(600, 300, 500, 300);
curveTo(400, 300, 400, 400);
curveTo(400, 500, 500, 500);
endFill();
}
== end quote ===
Yes, I'm still in Flash 7 (too?) .
--
Best regards,
GregoryN
http://GOusable.com
Flash components development.
Usability services.
Ian Thomas wrote:
I'm using an 8-arc method - I'd prefer to find 4-arc (i.e. the quadratic
bezier) but haven't been able to find/work out suitable code. Could you
point me in the right direction?
___
Flashcoders mailing list
Flashcoders@chattyfig.figleaf.com
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Re: [Flashcoders] Seeking a bit of drawing API inspiration..
Hi Gregory, Thanks for that - I've come up with an approximation based on very similar code. Not ideal, but it's close enough for the purpose I needed it for. That combined with a quick hash table to make sure I'm not plotting circles near other circles has given me the performance I need. Thanks for all your help! Cheers, Ian On 2/2/06, GregoryN [EMAIL PROTECTED] wrote: Well, here's a quote from MM docs (Flash 7 AS reference, MovieClip.curveTo()): ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
RE: [Flashcoders] Seeking a bit of drawing API inspiration..
Be interesting to see the speed diff between rolling your own and having a circle in the libray (100px diameter, centered on the reg point) and simply attaching it and scaling to size. M -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Ian Thomas Sent: 02 February 2006 16:02 To: Flashcoders mailing list Subject: Re: [Flashcoders] Seeking a bit of drawing API inspiration.. Hi Gregory, Thanks for that - I've come up with an approximation based on very similar code. Not ideal, but it's close enough for the purpose I needed it for. That combined with a quick hash table to make sure I'm not plotting circles near other circles has given me the performance I need. Thanks for all your help! Cheers, Ian On 2/2/06, GregoryN [EMAIL PROTECTED] wrote: Well, here's a quote from MM docs (Flash 7 AS reference, MovieClip.curveTo()): ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Re: [Flashcoders] Seeking a bit of drawing API inspiration..
function xDrawCircle(target_mc:MovieClip, nX:Number, nY:Number,
nR:Number, nSegments:Number):Void {
if (nSegments == undefined) {
nSegments = 8;
}
var nAngle:Number = 2*Math.PI/nSegments;
target_mc.moveTo(nX+nR, nY);
for (var i = 1; i=nSegments; ++i) {
var nTheta:Number = i*nAngle;
var nAnchorX:Number = nR*Math.cos(nTheta);
var nAnchorY:Number = nR*Math.sin(nTheta);
var nControlX:Number =
nAnchorX+nR*Math.tan(nAngle/2)*Math.cos(nTheta-Math.PI/2);
var nControlY:Number =
nAnchorY+nR*Math.tan(nAngle/2)*Math.sin(nTheta-Math.PI/2);
target_mc.curveTo(nControlX+nX, nControlY+nY, nAnchorX+nX,
nAnchorY+nY);
}
}
// Test
var _mc:MovieClip = this.createEmptyMovieClip(target_mc, 1);
_mc.beginFill(0x00);
_mc.lineStyle(2, 0xFF);
xDrawCircle(_mc, Stage.width/2, Stage.height/2, 100, 8);
_mc.endFill();
_
Ian Thomas wrote:
Thanks for that - I've come up with an approximation based on very similar
code. Not ideal, but it's close enough for the purpose I needed it for. That
combined with a quick hash table to make sure I'm not plotting circles near
other circles has given me the performance I need.
Good luck,
Fumio Nonaka
mailto:[EMAIL PROTECTED]
http://www.FumioNonaka.com/
My bookshttp://www.FumioNonaka.com/Books/index.html
Flash communityhttp://F-site.org/
___
Flashcoders mailing list
Flashcoders@chattyfig.figleaf.com
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
[Flashcoders] Seeking a bit of drawing API inspiration...
Hi folks, I'm looking for a bit of inspiration to help me out with the drawing API. I've got a feature that's sort of like a painting tool - - User clicks the mouse - on mouse move, a filled circle is drawn on the canvas (using beginFill/curveTo/endFill) - User releases the mouse So essentially the user is drawing a trail of circles. (Just as a side note, it's actually a mask that's being drawn rather than a clip - probably makes no odds). I'd much prefer it if the effect stays as overlapping circles rather than as 'paint strokes'. The problem I have is simply a performance issue - when the user has drawn lots of circles the app slows down significantly. It's nothing to do with extra code on my part - it's just Flash (presumably) redrawing all those curves all the time. Flash appears to be redrawing each circle, rather than draw the 'union of the curves' of all the circles. By which I mean - if you completely paint over the whole paint area, Flash could get away with drawing a filled square - but clearly it isn't, it's drawing every single curve on top of each other. (It doesn't do the merging that it would if we were just drawing overlapping circles in the IDE). So an obvious optimisation would be to do some maths, merge each new circle into an existing list of curves, and throw away the unnecessary curves - then clear the canvas and redraw. I'm sure I could work that out eventually (with the help of Google!), but I suspect the maths to do this may actually be too slow to be of much use. So - any ideas/similar experiences/solutions? (This is MX04, rather than Flash 8, otherwise I'd be looking at drawing into bitmaps to solve the problem.) TIA, Ian ___ Flashcoders mailing list Flashcoders@chattyfig.figleaf.com http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
