 # Help on drawing API

hey peeps… need help again regarding the drawing API…

if you’d look at my old posts recently I encountered a problem regarding drawing API… well actually, ilyaslamasse (thanks again) helped me come up with a way to draw a square in the screen… it’s not me drawing it actually… he ended up giving me a script wherein it writes itself on the screen…

okay… so I have the square and all… I ended up being able to draw a triangle also but that’s the same as the square coz you just end up manipulating the array values… the real prob is how to draw a circle using the same method…

just leave me a message for further questions…

thanks!!! one might expect the curveTo method to produce a circle. initially it seems that the circles it produces are a little wonky, but as these smart folks have shown, with a little tweaking you can get a pretty good circle.

http://chattyfig.figleaf.com/flashcoders-wiki/index.php?CodeOnlyCircle

hi… thanks for posting back…

I tried putting the code in through the expert mode coz i figure it wouldn’t matter which way I inputed it but then nothing turns out… do I do anything to the keyframe first before putting an action into the frame???

thanks… Movieclip.prototype.drawCircle(r, x, y) {
var rx = r+x, ry = r + y, xr = x - r, yr = y - r;
var r07 = r * 0.7071, r04 = r * 0.4142;

``````	this.moveTo(rx, y);
this.curveTo(rx, r04 + y, r07 + x, r07 + y);
this.curveTo(r04 + x, ry, x, ry);
this.curveTo(x - r04 , ry, x - r07 , r07 + y);
this.curveTo(xr, r04 + y, xr, y);
this.curveTo(xr, y - r04 , x - r07 , y - r07 );
this.curveTo(x - r04 , yr, x, yr);
this.curveTo(r04 + x, yr, r07 + x, y - r07 );
this.curveTo(rx, y - r04 , rx, y);
``````

}

did you set a lineStyle before drawing the circle?

this in frame 1 will draw a circle:

``````
MovieClip.prototype.drawCircle = function(r, x, y){
this.moveTo(x+r, y);
this.curveTo(r+x, -0.4142*r+y, 0.7071*r+x, -0.7071*r+y);
this.curveTo(0.4142*r+x, -r+y, x, -r+y);
this.curveTo(-0.4142*r+x, -r+y, -0.7071*r+x, -0.7071*r+y);
this.curveTo(-r+x, -0.4142*r+y, -r+x, y);
this.curveTo(-r+x, 0.4142*r+y, -0.7071*r+x, 0.7071*r+y);
this.curveTo(-0.4142*r+x, r+y, x, r+y);
this.curveTo(0.4142*r+x, r+y, 0.7071*r+x, 0.7071*r+y);
this.curveTo(r+x, 0.4142*r+y, r+x, y);
}

_root.lineStyle(0);
_root.drawCircle(50,100,100);

``````

Argh! Too fast! But these guys are amazing. I did a little thinggy with that prototype: put this in the first frame of your movie, then press, drag and release

``````MovieClip.prototype.drawCircle = function(r, x, y){
this.moveTo(x+r, y);
this.curveTo(r+x, -0.4142*r+y, 0.7071*r+x, -0.7071*r+y);
this.curveTo(0.4142*r+x, -r+y, x, -r+y);
this.curveTo(-0.4142*r+x, -r+y, -0.7071*r+x, -0.7071*r+y);
this.curveTo(-r+x, -0.4142*r+y, -r+x, y);
this.curveTo(-r+x, 0.4142*r+y, -0.7071*r+x, 0.7071*r+y);
this.curveTo(-0.4142*r+x, r+y, x, r+y);
this.curveTo(0.4142*r+x, r+y, 0.7071*r+x, 0.7071*r+y);
this.curveTo(r+x, 0.4142*r+y, r+x, y);
}

_root.lineStyle(2,0x000000,100);
_root.onMouseDown=function(){
x=_xmouse;
y=_ymouse;
}
_root.onMouseUp=function(){
var dx=_xmouse-x;
var dy=_ymouse-y;
this.drawCircle(Math.sqrt(dx*dx+dy*dy),x,y);
}
``````

pom :asian:

or just slightly different, the prototype then:

``````
_root.onMouseDown=function(){
x=_xmouse;
y=_ymouse;
this.onMouseMove = function(){
var dx=_xmouse-x;
var dy=_ymouse-y;
this.clear();
this.lineStyle(2);
this.drawCircle(Math.sqrt(dx*dx+dy*dy),x,y);
}
}
_root.onMouseUp=function(){
this.onMouseMove = null;
}

`````` Nice! And you can do pretty much the same with all kinds of forms… I can see there’s even the code for an ellipse on that site. Lots of fun in perspective pom :asian:

Oh, but I just noticed: with your code, you can only have 1 circle at a time, contrary to my example. Gnark gnark gnark:P

``````i=1;
_root.onMouseDown=function(){
this.createEmptyMovieClip("holder"+i,i);
x=_xmouse;
y=_ymouse;
_root["holder"+i].onMouseMove = function(){
var dx=_xmouse-x;
var dy=_ymouse-y;
this.clear();
this.lineStyle(2);
this.drawCircle(Math.sqrt(dx*dx+dy*dy),x,y);
}
}
_root.onMouseUp=function(){
_root["holder"+i].onMouseMove = null;
i++;
}
``````

pom :asian: