Vector moves along the path

Processing Coding Questions
1

Can you suggest how to make PVector move along a continuous path (for example tracing number ‘8’). Do i need 2 vectors to do it?

2

Hi! Do you mean you have an existing path in some format?

Creating an 8 using sine and cosine is not hard. If the angle is the same for both sine and cosine, you get a circle. If the angle goes at twice the speed for the sine you get an 8. But I have the feeling you are looking for something else, right?

for(float a=0; a<TAU; a+=TAU/500) {
  float x = 50 + 40 * sin(a*2);
  float y = 50 + 40 * cos(a);
  point(x,y);
}

2018-09-30-193042_128x128_scrot

2 Likes
3

OMG, its so beautiful! Thank you very much! :pray:

4

If “continuous” includes bouncing back and forth, then you can drive movement along an arbitrary path with:

  1. a path function
  2. a timer, converted to an amount 0-1.0 that gives your position on the path.

The path could be a line or hamoid’s eight. The timer is generally millis() with a % so that it wraps around every so often. The conversion could be linear (divide by the greatest value) or something else, like a sin() wave that bounces back and forth.

PVector[] path;
PVector walker;

void setup() {
  size(200, 200);
  path = new PVector[2];
  path[0] = new PVector(10, 10);
  path[1] = new PVector(180, 180);
}

void draw() {
  background(192);
  // draw path
  line(path[0].x, path[0].y, path[1].x, path[1].y);

  // forward walker
  float amt = (millis()%2000)/2000.0;
  walker = PVector.lerp(path[0], path[1], amt);
  ellipse(walker.x, walker.y, 20, 20);

  // wave walker
  float wave = (sin(millis()/1000.0) + 1)/2.0;
  walker = PVector.lerp(path[0], path[1], wave);
  ellipse(walker.x, walker.y, 15, 15);

  // draw eight path
  translate(width/2, 0);
  for (float a=0; a<TAU; a+=TAU/500) {
    float x = 50 + 40 * sin(a*2);
    float y = 50 + 40 * cos(a);
    point(x, y);
  }

  // eight walker
  float eight = (millis()/2000.0) * TAU;
  float x = 50 + 40 * sin(eight*2);
  float y = 50 + 40 * cos(eight);
  ellipse(x, y, 10, 10);
}

Walkers--screenshot2