# How can I create a walker with a finite trail?

**URL:** <https://discourse.processing.org/t/how-can-i-create-a-walker-with-a-finite-trail/41674>\
**Category:** Coding Questions\
**Created:** [April 10, 2023, 5:28pm UTC](https://discourse.processing.org/t/how-can-i-create-a-walker-with-a-finite-trail/41674 "2023-04-10T17:28:56Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![benjamin-thomas](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/benjamin-thomas/32/18241_2.png) [@benjamin-thomas](https://discourse.processing.org/u/benjamin-thomas)\
**Post date:** [April 10, 2023, 5:28pm UTC](https://discourse.processing.org/t/how-can-i-create-a-walker-with-a-finite-trail/41674/1 "2023-04-10T17:28:56Z")

</div>

Given this sketch:

```auto

Walker walker;

void settings() { size(640, 360); }

void setup() {
  windowTitle("Perlin Noise Walker");
  background(0);
  walker = new Walker();
}

void draw() {
  walker.step();
  walker.render();
}

class Walker {
  float tx, ty;
  float x, y;
  float prevX, prevY;

  Walker() {
    tx = 0;
    ty = 10_000;
    x = map(noise(tx), 0, 1, 0, width);
    y = map(noise(ty), 0, 1, 0, height);
  }

  void step() {
    prevX = x;
    prevY = y;

    x = map(noise(tx), 0, 1, 0, width);
    y = map(noise(ty), 0, 1, 0, height);

    tx += 0.01f;
    ty += 0.01f;
  }

  void render() {
    stroke(255);
    background(0); // no trail
    line(prevX, prevY, x, y);
  }
}

```

I’m wondering can I achieve this effect.

At the moment I can turn on and off the “trail” by calling `background(0)` on each render frame.

But it’s not a very good solution. I’d like the “trail” made by the walker to disappear after a few frames or a few seconds.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [April 10, 2023, 5:34pm UTC](https://discourse.processing.org/t/how-can-i-create-a-walker-with-a-finite-trail/41674/2 "2023-04-10T17:34:50Z")

</div>

Hello @benjamin-thomas,

This will add a trail that fades away:

```auto
  void render() {
    stroke(255);
    fill(0, 5);
    rect(0, 0, width, height); // no trail
    line(prevX, prevY, x, y);
  }

```

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/8/7/877354a68f8a21f5ecdb7eb3c605b716a38ed489.png)

A look at Examples on the Processing page for inspiration:

> **[Welcome to Processing!](https://processing.org/)**
>
> Processing is a flexible software sketchbook and a language for learning how to code. Since 2001, Processing has promoted software literacy within the visual arts and visual literacy within technology…

One of many examples:

> **[Moving On Curves / Examples](https://processing.org/examples/movingoncurves.html)**
>
> In this example, the circles moves along the curve y = x^4. Click the mouse to have it move to a new position.

Consider an ArrayList of objects with a “Time to Live” for each object.

> **[ArrayList of objects / Examples](https://processing.org/examples/arraylistclass.html)**
>
> This example demonstrates how to use a Java ArrayList to store a variable number of objects. Items can be added and removed from the ArrayList. Click the mouse to add bouncing balls.

The Simulate examples may be of interest.

`:)`

---

<div class="post-metadata">

**Author:** ![benjamin-thomas](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/benjamin-thomas/32/18241_2.png) [@benjamin-thomas](https://discourse.processing.org/u/benjamin-thomas)\
**Post date:** [April 10, 2023, 8:01pm UTC](https://discourse.processing.org/t/how-can-i-create-a-walker-with-a-finite-trail/41674/3 "2023-04-10T20:01:16Z")

</div>

Thanks @glv, this feels like a nice trick 🙂

---

<div class="post-metadata">

**Author:** ![Mikey83](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mikey83/32/17956_2.png) [@Mikey83](https://discourse.processing.org/u/Mikey83)\
**Post date:** [April 12, 2023, 1:48am UTC](https://discourse.processing.org/t/how-can-i-create-a-walker-with-a-finite-trail/41674/4 "2023-04-12T01:48:26Z")

</div>

Really hate that it never fades back to pure black in processing, I did see a work around with pixels somewhere a few years ago but turned out to be slow, I know its a float issue but would be nice to have a clean solution

---

<div class="post-metadata">

**Author:** ![benjamin-thomas](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/benjamin-thomas/32/18241_2.png) [@benjamin-thomas](https://discourse.processing.org/u/benjamin-thomas)\
**Post date:** [April 12, 2023, 5:13am UTC](https://discourse.processing.org/t/how-can-i-create-a-walker-with-a-finite-trail/41674/5 "2023-04-12T05:13:40Z")

</div>

> [@Mikey83](#):
>
> Really hate that it never fades back to pure black in processing

Indeed, I didn’t see this at first. I’ve managed to work around this issue like this:

```auto

Walker[] walkers;

void settings() { size(640, 360); }

void setup() {
  windowTitle("Perlin Noise Walker");
  background(0); // black
  walkers = new Walker[]{
      new Walker(0f, 10_000f),
      new Walker(15_000f, 25_000f),
  };
}

void draw() {
  for (Walker walker : walkers) {
    walker.step();
    walker.render();
  }
}

class Walker {
  float tx, ty;
  float x, y;
  float prevX, prevY;

  Walker(float tx, float ty) {
    this.tx = tx;
    this.ty = ty;
    x = map(noise(tx), 0, 1, 0, width);
    y = map(noise(ty), 0, 1, 0, height);
  }

  void step() {
    prevX = x;
    prevY = y;

    x = map(noise(tx), 0, 1, 0, width);
    y = map(noise(ty), 0, 1, 0, height);

    tx += 0.01f;
    ty += 0.01f;
  }

  void render() {
    stroke(255);
    line(prevX, prevY, x, y);

    // Make trail finite
    noStroke();
    fill(0, 30);
    rect(0, 0, width, height);

    // Really clear. A faint trail remains indefinitely otherwise.
    if (frameCount % 60 == 0)
      background(0);
  }
}

```

It works okay for the short trail I had in mind but I’d be interested to know if there’s a better way to handle that problem.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [April 12, 2023, 10:38am UTC](https://discourse.processing.org/t/how-can-i-create-a-walker-with-a-finite-trail/41674/6 "2023-04-12T10:38:52Z")

</div>

Hello @benjamin-thomas,

Consider using an ArrayList().  
There is a learning curve to this but that is the fun part.

Example that I cooked up:

```auto
ArrayList<Integer> points = new ArrayList<Integer>();
int num = 360;

float phase;

void setup() {
  size(500, 500, P2D);
  for (int i=0; i<num; i++) 
  {
  points.add(i);
  }
}

void draw() 
  { 
  background(0);
  translate(width/2, height/2);
  phase += TAU/360;
  noStroke();
  for (int i=0; i<num; i++) 
    {
    int alpha = i*255/num;  
    fill(255, 0, 0, alpha);
    //float angle = i*TAU/num + phase;
    float angle = points.get(i)*TAU/num + phase; 
    float x = 200*cos(angle);
    float y = 200*sin(angle); 
    circle(x, y, 10);
    }
  }

```

Start simple and build on that.  
The above is just storing _points_ for now…

Your will have to add and remove objects/elements from an _ArrayList_ of objects created with your class as your random walker generates these and then redraw these for each _draw()_ cycle.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/f/3/f351f1c7857f43d62374b6e3afe55ad3127cfd39.png)

`:)`

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [April 12, 2023, 11:09am UTC](https://discourse.processing.org/t/how-can-i-create-a-walker-with-a-finite-trail/41674/7 "2023-04-12T11:09:32Z")

</div>

> [@Mikey83](#):
>
> I know its a float issue but would be nice to have a clean solution

Related topic:

> [@Fade Effect - What's with the ghost?](https://discourse.processing.org/t/fade-effect-whats-with-the-ghost/18891):
>
> My intention is to create a fade effect for thousands of shapes on the canvas (They appear, and then fade into blackness). This is the solution I came up with, and have found other people using. void draw() { fill(0, 10); rect(0, 0, width, height); } The problem is that the shapes never fade away completely. The lower the alpha (slower the fade), the brighter the ghost that is left behind. Here’s a sample sketch that illustrates my problem. Click to mouse to create more ellipses. Can…

I did suggest using an _ArrayList_ and provided links and a _very minimal example_ to inspire.

`:)`

---

<div class="post-metadata">

**Author:** ![benjamin-thomas](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/benjamin-thomas/32/18241_2.png) [@benjamin-thomas](https://discourse.processing.org/u/benjamin-thomas)\
**Post date:** [April 12, 2023, 6:07pm UTC](https://discourse.processing.org/t/how-can-i-create-a-walker-with-a-finite-trail/41674/8 "2023-04-12T18:07:59Z")

</div>

> [@glv](#):
>
> Start simple and build on that.  
> The above is just storing _points_ for now…
> 
> Your will have to add and remove objects/elements from an _ArrayList_ of objects created with your class as your random walker generates these and then redraw these for each _draw()_ cycle.

Thanks for the nudge @glv : )

I couldn’t think of a good way to handle adding and removing elements to an _ArrayList_, so I instead tried to use a static array (acting like a buffer) and it seems to work quite well.

I then applied transparency linearly to make the trail fade as time passes.

```auto
private Walker[] walkers;

    @Override
    public void settings() {
        size(640, 360);
    }

    @Override
    public void setup() {
        windowTitle("Perlin Noise Walker");
        walkers = new Walker[]{
                new Walker(0f, 10_000f),
                new Walker(15_000f, 25_000f),
        };
    }

    @Override
    public void draw() {
        background(0); // clear previous renders
        stroke(255);
        strokeWeight(2);

        for (Walker walker : walkers) {
            walker.step();
            walker.render();
        }
    }

    class Walker {
        private int cursor;
        private float tx, ty;
        private final PVector[] points = new PVector[25]; // adjust trail size here

        Walker(float tx, float ty) {
            this.tx = tx;
            this.ty = ty;
            this.cursor = 0;
            step();
        }

        void step() {
            float x = map(noise(tx), 0, 1, 0, width);
            float y = map(noise(ty), 0, 1, 0, height);

            points[this.cursor] = new PVector(x, y);
            this.cursor++;

            // Clear trail once buffer has been filled.
            if (this.cursor >= points.length) {
                // shift all by one (clear first data point)
                for (int i = 1; i < points.length; i++) {
                    points[i - 1] = points[i];
                }
                // backtrack
                this.cursor--;
            }

            tx += 0.01f;
            ty += 0.01f;
        }

        void render() {
            for (int i = 1; i < points.length; i++) {
                PVector v = points[i];
                if (v == null) break; // buffer not filled yet

                PVector prev = points[i - 1];

                // Make the trail fainter and fainter
                float progression = i / ((float) points.length);
                float alpha = 255 * progression;
                stroke(255, 255, 255, alpha);

                line(prev.x, prev.y, v.x, v.y);
            }
        }

    }

```

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/4/b/4b23a4469e68c23253d2bfbe2dbf9eb081b824de.png)

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [April 13, 2023, 12:23pm UTC](https://discourse.processing.org/t/how-can-i-create-a-walker-with-a-finite-trail/41674/9 "2023-04-13T12:23:06Z")

</div>

> [@benjamin-thomas](#):
>
> I couldn’t think of a good way to handle adding and removing elements to an _ArrayList_, so I instead tried to use a static array (acting like a buffer) and it seems to work quite well.

Many ways to code things… something is learned with each path taken.

Example with add and remove:

```auto
// GLV
// 2023-04-13
// Plot with fading trail
// Version 1.0.0

ArrayList<Float> theta = new ArrayList<Float>();
ArrayList<Float> rad = new ArrayList<Float>();

void setup() 
  {
  size(500, 500);
  }

float angle0;
int slice;
int div;

void draw() 
  { 
  background(0);
  translate(width/2, height/2);
  noStroke();
  
  int sliceSize = 90; // degrees
  
  div = 360;
  
  // Update
  angle0 = (frameCount%div)*(TAU/div); //0 to TAU in radians and repeat
  theta.add(angle0);
  // Try different values for rad
  //rad.add(150.0);
  //rad.add(random(145, 156)); // 145 to 155
  rad.add(150+30*sin(angle0*6.0));
  slice = theta.size();
  
  if (slice>sliceSize)
    {
    theta.remove(0);
    rad.remove(0);
    }
  
  // Render
  for (int i=0; i<theta.size(); i++) 
    {
    render(i);
    }
  } 
  
void render(int j)
  {
  float r = rad.get(j); 
  float angle = theta.get(j); 
  float x = r*cos(angle);
  float y = r*sin(angle); 
  
  int alpha = j*255/(slice); 
  fill(255, 128, 0, alpha);
  circle(x, y, 5);
  //println(j, r, theta.get(j), degrees(angle), x, y, alpha); //debug as required
  }

```

A 270 slice:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/e/b/ebb0adde49150a5676d8236138069882c08f68b2.png)

Have fun!

`:)`

---

<div class="post-metadata">

**Author:** ![benjamin-thomas](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/benjamin-thomas/32/18241_2.png) [@benjamin-thomas](https://discourse.processing.org/u/benjamin-thomas)\
**Post date:** [April 13, 2023, 3:45pm UTC](https://discourse.processing.org/t/how-can-i-create-a-walker-with-a-finite-trail/41674/10 "2023-04-13T15:45:26Z")

</div>

Oh now I get it 🙂

Many thanks!

---

<div class="post-metadata">

**Author:** ![krab](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/krab/32/18229_2.png) [@krab](https://discourse.processing.org/u/krab)\
**Post date:** [May 1, 2023, 5:09pm UTC](https://discourse.processing.org/t/how-can-i-create-a-walker-with-a-finite-trail/41674/11 "2023-05-01T17:09:22Z")

</div>

This actually has a great solution without the ugly trails using blendMode(SUBTRACT) for fading to black as seen in the code example below or using blendMode(ADD) for fading towards white. This is fast and clean. You can even use blendMode(LIGHTEST) to enforce a less extreme color like 38/255 as the minimum and similarly also blendMode(DARKEST).

```auto
void setup() {
  size(500, 500);
  colorMode(RGB, 255, 255, 255, 100);
  background(0);
}

void draw() {
  // fade to black
  noStroke();
  fill(1);
  blendMode(SUBTRACT);
  rect(0, 0, width, height);

  // reset blend mode
  blendMode(BLEND);

  // draw rotating circle
  float t = radians(frameCount);
  float r = 200;
  float x = r * cos(t);
  float y = r * sin(t);
  float s = 50;
  translate(width/2, height/2);
  fill(255);
  ellipse(x, y, s, s);
}

```

![1](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/c/4/c49657d48ac8c61e90fb1e2ec06ae2e6290cd357.png)

---

<div class="post-metadata">

**Author:** ![benjamin-thomas](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/benjamin-thomas/32/18241_2.png) [@benjamin-thomas](https://discourse.processing.org/u/benjamin-thomas)\
**Post date:** [May 1, 2023, 6:24pm UTC](https://discourse.processing.org/t/how-can-i-create-a-walker-with-a-finite-trail/41674/12 "2023-05-01T18:24:16Z")

</div>

> [@krab](#):
>
> blendMode(LIGHTEST) to enforce a less extreme color like 38/255 as the minimum and similarly

Nice! That look like a cool technique, thanks 🙂

---

<div class="post-metadata">

**Author:** ![Mikey83](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mikey83/32/17956_2.png) [@Mikey83](https://discourse.processing.org/u/Mikey83)\
**Post date:** [May 2, 2023, 10:57am UTC](https://discourse.processing.org/t/how-can-i-create-a-walker-with-a-finite-trail/41674/13 "2023-05-02T10:57:31Z")

</div>

> [@krab](#):
>
> Mode(SUBTRACT

Legend, been working with particles and had that issue for years lol, you just solved it, sad because ive used blend mode many times for a glow effect and never thought of using it in this sense, thanks matey for adding to my knowledge