drawing api

[wilmelk]

Hi there.

I have this problem with the drawing api and especially with curveTo function. i have these 8 or even more points. Doesn't really matter, and i want to connect them all with curved lines.
[40,0],[460,0],[500,40],[500,340],[460,380],[40,380],[0,340],[0,40]

Initially it will look like a rounded rectangle. I know about the drawRounded blah blah blah built in function but i need to do it this way. I want to animate each point's x,y randomly and redraw the curves on tween updates. but i can't do the curves properly.

This is what i get. I have tried everything, and i just can't get the curve closed.

http://www.rastavibe.gr/discurved.jpg

This is my function

function updateCurves():void {

var lineDrawing:MovieClip = new MovieClip();
var thisPoint:MovieClip = new MovieClip();
var nextPoint:MovieClip = new MovieClip();

this.addChild(lineDrawing);
lineDrawing.graphics.clear();

var startX:int = points[0].x;
var startY:int = points[0].y;
var endX:int, endY:int;
lineDrawing.graphics.lineStyle(1, 0x000000, 1 );
lineDrawing.graphics.beginFill( 0x990000, 1 );
lineDrawing.graphics.moveTo(startX,startY);

for (var h:int = 0; h<points.length; h++) {
thisPoint = points[h];
nextPoint = points[h+1];
endX = (thisPoint.x+nextPoint.x)/2;
endY = (thisPoint.y+nextPoint.y)/2;
lineDrawing.graphics.curveTo(thisPoint.x,thisPoint .y,endX,endY);
}
}

Please give feedback on my function...

Many thanks in advance

[Felixz]

the problem is that u are run out of points, but u need to have the first one second time at the end

[mechanicaltimi]

I may not be completely sure if the arrays in flash start and stop (-1), I am 3 days into AS3 but a smart young man. Looks like this may be easy. Haven't tested yet. Try it and let me know.



for (var h:int = 0; h<points.length; h++) {
if (h == points.length - 1) {
thisPoint = points[h];
nextPoint = points[0];
endX = (thisPoint.x+nextPoint.x)/2;
endY = (thisPoint.y+nextPoint.y)/2;
lineDrawing.graphics.curveTo(thisPoint.x,thisPoint .y,endX,endY);
break;
}
thisPoint = points[h];
nextPoint = points[h+1];
endX = (thisPoint.x+nextPoint.x)/2;
endY = (thisPoint.y+nextPoint.y)/2;
lineDrawing.graphics.curveTo(thisPoint.x,thisPoint .y,endX,endY);
}

[wilmelk]

Thanks, but this won't work. It goes a little smoother towards the end/start but it still leaves a straight edge. Anyway the whole thing is much more complicated. I thought that with a random animation it would look like an organic shape (ameba or something) but no... its far from this.

[Alex Lexcuk]

Hi,
on four points
necessary one lineDrawing.graphics.moveTo( ?,?);
I think...
http://kind-armadillo.pochta.ru/FlaAC3/curve.rar
http://kind-armadillo.pochta.ru/FlaAC3/curve.swf

[Felixz]

var _width:Number=100,_height:Number=100,corner:Number =10;
this.graphics.beginFill(0xFF0000);
this.graphics.moveTo(0,-corner);
this.graphics.curveTo(0,0,corner,0);
this.graphics.lineTo(_width - corner,0);
this.graphics.curveTo(_width,0,_width,corner);
this.graphics.lineTo(_width,_height - corner);
this.graphics.curveTo(_width,_height,_width - corner,_height);
this.graphics.lineTo(corner,_height);
this.graphics.curveTo(0,_height,0,_height - corner);
this.graphics.endFill();


var points=[new Point(40,0),new Point(460,0),new Point(500,40),new Point(500,340),new Point(460,380),new Point(40,380),new Point(0,340),new Point(0,40)];
points.push(points[0],points[1]);
graphics.lineStyle(1,0,1,true);
graphics.beginFill(0x990000);
graphics.moveTo((points[0].x+points[1].x)/2,(points[0].y+points[1].y)/2);
for (var h:int = 1; h<points.length-1; h++) {
var thisPoint = points[h];
var nextPoint = points[h+1];
var endX = (thisPoint.x+nextPoint.x)/2;
var endY = (thisPoint.y+nextPoint.y)/2;
graphics.curveTo(thisPoint.x,thisPoint.y,endX,endY );
}

[wilmelk]

Thank you, thank you so much. It was the moveTo attributes that were wrong.

I 'll try to add somehow randomly the points and animate them also randomly to create an organic shape effect. Any suggestions? ideas?