Animate drawing of bezier line.

General Discussion Other

adamh_

Animate drawing of bezier line.

in General Discussion • Other • 2 years ago

Hi,

Im trying to animate the drawing on of a bezier line (cubic).

I am currently successfully drawing the complete line using bezierVertex and also moving objects along them using bezierPoint.

Anyone know if there are some calls in processing to help do this?

Any ideas appreciated.

Thanks,

Adam

Replies(4)

Massimo

Re: Animate drawing of bezier line.

2 years ago

I suggest you to have a look at this cool library:

http://ekeneijeoma.com/processing/ijeomamotion/

There is a bezier based movement ( Tween_Bezier) that seems to be very close to your aim ;-)

ciao,

nardove

Re: Animate drawing of bezier line.

2 years ago

Following the bezierPoint() example from the Reference page you can do something like this

float step = 0.0f;
void draw() {
background( 255 );
fill( 255, 0, 0 );
// reset step value so it starts from the begining
if ( step >= 1.0f ) {
step = 0.0f;
}
float x = bezierPoint(85, 10, 90, 15, step);
float y = bezierPoint(20, 10, 90, 80, step);
ellipse(x, y, 9, 9);
// Change this to adjust the speed
step += 0.01f;
}

Hope that helps

adamh_

Re: Animate drawing of bezier line.

2 years ago

Thanks Guys,

I think you misunderstood me though, i was needing to animate the actual line drawing on, not just animate something along it.

The solution i worked out is to subdivide the bezier at a point (like bezierPoint does) and keep using bezierVertex to render the path in stages.

Found a good Bezier util lib here: http://www.caffeineowl.com/graphics/2d/vectorial/bezierintro.html

The technique is called subdividing a Bezier. Basically you cut a point in the bezier and get 2 new control points that will maintain the existing shape of the whole bezier but represent only a portion of it. Kind of like what using the scissors tool in Illustrator does.

Cheers,

Adam

textonym

Re: Animate drawing of bezier line.

8 months ago

this is my code

void setup()
{
size(800,500);
}
void draw()
{
// work in progress
noFill();
stroke (#B22222);
strokeWeight(2);
arc (500, 0, 1000, 1000, PI/2, PI);
line (500, 500, 500, 0);
line (500, 0, 0, 0);
line (0, 0, 0, 500);
line (0, 500, 500, 500);
stroke (#C71585);
strokeWeight(2);
arc (500, 200, 600, 600, 0, PI/2);
line (800, 200, 500, 200);
line (500, 200, 500,500);
line (500, 500, 800, 500);
line (800, 500, 800, 200);
stroke (#7FFF00);
arc (600, 200, 400, 400, 3*PI/2, TWO_PI);
line (600, 0, 600, 200);
line (600, 200, 800, 200);
line (800, 200, 800, 0);
line (800, 0, 600, 0);
stroke (#1E90FF);
arc (600, 100, 200, 200, PI, 3*PI/2);
line (500, 100, 600, 100);
line (600, 100, 600, 0);
line (600, 0, 500, 0);
line (500, 0, 500, 100);
}

all i want to do is to animate the drawing one by one...

like first the arc starts drawing then the lines as per the code...

one by one as if it looks like a pencil is drawing them.

in the end i am trying to make a golden ratio...

any help would be greatly appreciated. thankyou

Top Reply