# Vector moves along the path

**URL:** <https://discourse.processing.org/t/vector-moves-along-the-path/3985>\
**Category:** Coding Questions\
**Created:** [September 30, 2018, 4:58pm UTC](https://discourse.processing.org/t/vector-moves-along-the-path/3985 "2018-09-30T16:58:48Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![kokoo](https://avatars.discourse-cdn.com/v4/letter/k/7cd45c/32.png) [@kokoo](https://discourse.processing.org/u/kokoo)\
**Post date:** [September 30, 2018, 4:58pm UTC](https://discourse.processing.org/t/vector-moves-along-the-path/3985/1 "2018-09-30T16:58:48Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [September 30, 2018, 5:39pm UTC](https://discourse.processing.org/t/vector-moves-along-the-path/3985/2 "2018-09-30T17:39:03Z")

</div>

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?

```auto
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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/f872d831c56bc8e56ba4bdc2d2b82416ead41f15.png)

---

<div class="post-metadata">

**Author:** ![kokoo](https://avatars.discourse-cdn.com/v4/letter/k/7cd45c/32.png) [@kokoo](https://discourse.processing.org/u/kokoo)\
**Post date:** [October 1, 2018, 12:45am UTC](https://discourse.processing.org/t/vector-moves-along-the-path/3985/3 "2018-10-01T00:45:48Z")

</div>

OMG, its so beautiful! Thank you very much! 🙏

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [October 1, 2018, 8:17pm UTC](https://discourse.processing.org/t/vector-moves-along-the-path/3985/4 "2018-10-01T20:17:56Z")

</div>

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.

```auto
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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/67d11467173a5b30f83beba11c2bb3e70cff425d.png)