Animate ellipse along vertext points

Programming Questions

enfpvisua..

Animate ellipse along vertext points

in Programming Questions • 1 year ago

Trying to animate a circle to move between points of a vertex, is that possible?

//PImage m;
int[] x = {
159, 204, 253, 254, 248, 252, 251, 335, 302
};
int[] y = {
43, 105, 272, 322, 344, 358, 384, 411, 508
};
void setup() {
size(559, 656);
// m = loadImage("Dublin-Map-Vector.jpg");
}
void draw() {
// image(m, 0, 0);
for (int i = 0; i < x.length; i++) {
ellipse(x[i], y[i], 20, 20);
}
endShape();
}

Replies(5)

calsign

Re: Animate ellipse along vertext points

1 year ago

Yes, but you can't draw it all at once.
Try splitting it up across multiple frames, like this:

int[] x = {
159, 204, 253, 254, 248, 252, 251, 335, 302
};
int[] y = {
43, 105, 272, 322, 344, 358, 384, 411, 508
};
void setup() {
size(559, 656);
}
void draw() {
//Redraw the background
background(255);
//Determine the current value; change every second
int current = millis() / 1000 % x.length;
ellipse(x[current], y[current], 20, 20);
}

If you want more smooth movement, you're going to have to break down the motion more...

For the time being, however, I recommend that you look into PVectors... they store both the x and y in one variable. For a tutorial, see the PVector Tutorial.

allonestr..

Re: Animate ellipse along vertext points

1 year ago

Not quite sure what you mean. Do you want one ellipse to move from (x[0], y[0]) to (x[1], y[1]) to (x[2], y[2]) and so on? If so, how would you like it to move - at a constant velocity? - to take the same time between each pair of points? - to ease from one to the next? ...

[edit] Oh, calsign beat me to it!

Christian..

Re: Animate ellipse along vertext points

1 year ago

calsign is right. try this:

//PImage m;
/*int[] x = {
159, 204, 253, 254, 248, 252, 251, 335, 302
};
int[] y = {
43, 105, 272, 322, 344, 358, 384, 411, 508
};*/
PVector[] targets = {
new PVector(159, 43),
new PVector(204, 105),
new PVector(253, 272),
new PVector(254, 322),
new PVector(248, 344),
new PVector(252, 358),
new PVector(251, 384),
new PVector(335, 411),
new PVector(302, 508),
};
PVector circlePos = new PVector(0, 0);
int targetNum = 0;
float animationSpeed = 0.05;
void setup() {
size(559, 656);
// m = loadImage("Dublin-Map-Vector.jpg");
}
void draw() {
background(255);
// image(m, 0, 0);
if(targetNum < targets.length - 1 && PVector.dist(circlePos, targets[targetNum]) < 1) {
// jump to next target, if there is one and distance to current target is under 1
targetNum++;
}
// the vector to the next target
PVector diff = PVector.sub(circlePos, targets[targetNum]);
// reduce the vector for animation
PVector partDiff = PVector.div(diff, 1 / animationSpeed);
// do the animation
circlePos.sub(partDiff);
// draw the circle
ellipse(circlePos.x, circlePos.y, 20, 20);
/*for (int i = 0; i < x.length; i++) {
ellipse(x[i], y[i], 20, 20);
}
endShape();*/
}

Cheers,
Chris

enfpvisua..

Re: Animate ellipse along vertext points

1 year ago

Thanks guys, Okay so vertex isn't the way to go, will have a go at the PVector.

Chris, how do you set it up to have a steady velocity?

Christian..

Re: Animate ellipse along vertext points

1 year ago

You have to normalize the diff-Vector to get a linear Animation:

// reduce the vector for animation
//diff.div(1 / animationSpeed); // eased
diff.normalize(); // linear
diff.mult(animationSpeed);
// do the animation
circlePos.sub(diff);

Increase the animationSpeed for a faster animation.

Cheers,
Chris

Top Reply