moving circle along a path !

Programming Questions

elbobin

in Programming Questions • 1 year ago

Hello everyone , well I have been stuck on this for some time now !
so I have an arraylist that contains the path , it's an arrayList of points.
then I have to show the path ,

simply by point(pointFromArraylist.x,pointFromArrayList.y);

but then I have to show one circle as it moves from one point to another. so let's say it's

ellipse(pointFromArrayList.x,pointFromArrayList.y,50,50);

I just want to know how can I show the circle moving from one point to the other, while keeping the the path shown.
I tried using background(255) to clear. but that's just wrong (it clears everything) , and I want to know , how can i add a delay to see what's happening.!!

Thanks in advance.

Replies(2)

amnon.owed

Re: moving circle along a path !

1 year ago

You could use lerp() to move linearly from one point to the next.

But for a smoother path I would recommend curvePoint().

Code Example

// press the mouse to set a random path
// move the mouse to change the path
int numPoints = 8;
int marge = 50;
int currentCurvePoint;
PVector[] vecs = new PVector[numPoints];
void setup() {
size(500, 500);
setPoints();
smooth();
}
void draw() {
background(255);
translate(50, 50);
vecs[3].set(mouseX-50, mouseY-50, 0);
drawShape();
drawPoints();
if (frameCount % 20 == 0) { currentCurvePoint++; }
drawCurvePoint(currentCurvePoint % (vecs.length-3));
}
void mousePressed() {
setPoints();
}
void setPoints() {
for (int i=0; i<numPoints-2; i++) {
vecs[i] = new PVector(random(marge, width-marge), random(marge, height-marge));
}
vecs[numPoints-2] = vecs[1];
vecs[numPoints-1] = vecs[2];
}
void drawShape() {
noFill();
stroke(0);
beginShape();
for (int i=0; i<vecs.length; i++) {
curveVertex(vecs[i].x, vecs[i].y);
}
endShape();
}
void drawPoints() {
noStroke();
fill(255, 0, 0);
for (int i=1; i<vecs.length-1; i++) {
ellipse(vecs[i].x, vecs[i].y, 5, 5);
}
}
void drawCurvePoint(int num) {
noStroke();
fill(0, 0, 255);
float t = (frameCount % 20)/20.0;
float x = curvePoint(vecs[num].x, vecs[num+1].x, vecs[num+2].x, vecs[num+3].x, t);
float y = curvePoint(vecs[num].y, vecs[num+1].y, vecs[num+2].y, vecs[num+3].y, t);
ellipse(x, y, 15, 15);
}

amnon.owed

Re: moving circle along a path !

1 year ago

Or in case you are looking for a more basic solution.

Code Example

ArrayList <PVector> points = new ArrayList <PVector> ();
int marge = 50;
int numPoints = 10;
int currentPoint;
PVector current;
void setup() {
size(500, 500);
for (int i=0; i<numPoints; i++) {
points.add(new PVector(random(marge, width-marge), random(marge, height-marge)));
}
current = points.get(currentPoint);
noStroke();
smooth();
}
void draw() {
background(255);
// display all points
fill(0);
for (PVector p : points) {
ellipse(p.x, p.y, 10, 10);
}
// every 60th frame, move to the next point
if (frameCount % 60 == 0) {
currentPoint = (currentPoint + 1) % points.size();
current = points.get(currentPoint);
}
// display the selected point
fill(0, 0, 255);
ellipse(current.x, current.y, 25, 25);
}