Help on drawing API

1

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…

can anyone help please???

just leave me a message for further questions…

thanks!!! :slight_smile:

2

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

3

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… :nerd:

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);

}

4

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);
5

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:

6

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;
}
7

:stuck_out_tongue: 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 :slight_smile:

pom :asian:

8

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: