Need moving balls on my curves

Programming Questions

asdf

Need moving balls on my curves

in Programming Questions • 9 months ago

Hi, forum,

I need help with moving balls on a bezier curve.
Taking the example from processing site itself. ( http://processing.org/learning/curves/) I need them red dots/ellipses(the end points to move along the curve from one end point to the other). I know you can do that on spline curves but what about bezier curves

NOTE: the curve is presently on an background image, so be careful of that.

void setup( )
{ size(150, 150);
background(255);
smooth();
ellipse(50, 75, 5, 5); // endpoints of curve <-- i want these ellipses to keep moving on the curve
ellipse(100, 75, 5, 5);
fill(255, 0, 0);
ellipse(25, 25, 5, 5); // control points
ellipse(125, 25, 5, 5);
noFill();
stroke(0);
bezier(50, 75, 25, 25, 125, 25, 100, 75); }

Replies(4)

tgptialves

Re: Need moving balls on my curves

9 months ago

bezierPoint is what you're searching. I made an example on how to do that with a spline curve two days ago, it's really the same thing but with bezier curve. You can try that yourself ;)

asdf

Re: Need moving balls on my curves

9 months ago

Oh cool! 'bezierPoint' was exactly what i needed. Thanks. Actually spline curves includes the exact point on the curve whereas bezier have coordinates of control points which are not on the curve, if you know what i mean.

Any way can i move those bezierPoints/ellipses through the curve and keep it moving continuously?

Lets take this example-

void setup() {
noFill();
bezier(85, 20, 10, 10, 90, 90, 15, 80);
fill(255);
int steps = 10;
for (int i = 0; i <= steps; i++) {
float t = i / float(steps);
float x = bezierPoint(85, 10, 90, 15, t);
float y = bezierPoint(20, 10, 90, 80, t);
ellipse(x, y, 5, 5);
}
}
void draw() {
}

tgptialves

Re: Need moving balls on my curves

9 months ago

Yes you can :P

Since I already had an example with a spline curve, it was really simple to make it with bezier curve, so I made it for you:

int increment=0;
int resolution=100; //Higher resolution ->Lower speed but more definition on the curve
Point ellipse; //Point where Ellipse will be drawn
public void setup()
{
size(300, 300);
fill(255);
}
public void draw()
{
float t1, t2;
Point[] points = new Point[2];
background(255); //Delete the screen
for (int i = 0; i <= increment; i++) //Draws the bezier curve to the point where it was already drawn
{
//Calculates the two instants for the closer points
t1 = i /(float)resolution;
t2 = (i+1)/(float)resolution;
//Calculates the closer Points
points[0]= new Point((int)bezierPoint(85, 10, 90, 15, t1), (int)bezierPoint(20, 10, 90, 80, t1));
points[1]= new Point((int)bezierPoint(85, 10, 90, 15, t2), (int)bezierPoint(20, 10, 90, 80, t2));
//Draw a line between that two points
line(points[0].x, points[0].y, points[1].x, points[1].y);
}
//Draw the new segment of the curve if it has not reached the final point yet.
if(increment<=resolution)
{
//Same thing as above
t1 = increment /(float)resolution;
t2 = (increment+1)/(float)resolution;
points[0]= new Point((int)bezierPoint(85, 10, 90, 15, t1), (int)bezierPoint(20, 10, 90, 80, t1));
points[1]= new Point((int)bezierPoint(85, 10, 90, 15, t2), (int)bezierPoint(20, 10, 90, 80, t2));
ellipse=points[1];
increment++;
}
//Draws the ellipse
ellipse(ellipse.x, ellipse.y, 5, 5);
}

If you don't want the ellipse to leave a trail, then you can just delete the for-cycle.

ijeoma

Re: Re: Need moving balls on my curves

9 months ago

Did you see this "animation curve" post from earlier this week?

Top Reply