Random walkers

Maybe you have heard about random walkers but you don't know how to use them in generative art.

Today we will see how you can control walkers to make them less random and produce more interesting results like this.

💡 Click anywhere to render a new output

---

🎈 In this tutorial I will be using p5.js for my demos. If you are familiar with Processing, you will quickly notice how similar they are. Remember that the language you are using for Generative Art doesn't matter, it's all about the logic behind your code.

---

Setup a basic demo

To make a basic demo work of random walkers, we will follow three simple steps:

1. Create a walker at a random position

2. Make it walk one step in a random direction (Top, Bottom, Left or Right)

3. Repeat step 2 until the walker moves out of the artboard

💡You can click anywhere to reset the demo

1. Create the walker

If x & y positions are given (when mouse is clicked) we use those positions, otherwise create the walker at the center of the scene.

We also call the draw() method to draw the first position of our walker.

class Walker {
  constructor(x, y) {
    this.x = x || floor((width / cell) / 2) * cell;
    this.y = y || floor((height / cell) / 2) * cell;
    this.draw();
  }
}

2. Check if the walker is within the boundaries

With this one line condition we are checking if the x & y positions are either under 0 (left or top) or higher than the width/height of the scene (right or bottom).

isOut () {
  return(this.x < 0 || this.x > width || this.y < 0 || this.y > height);
}

3. Move the walker

If the walker is within the scene, we make it move. First we generate a random number between [0, 1] (the direction variable).

Then based on its value we will move in one of four directions:

• [0, 0.25] Go up

• [0.25, 0.5] Go down

• [0.5, 0.75] Go left

• [0.75, 1] Go right

move () {
  const direction = random();
  if (direction < 0.25) {
    // Go up
    this.y -= cell;
  } else if (direction < 0.5) {
    // Go down
    this.y += cell;
  } else if (direction < 0.75) {
    // Go left
    this.x -= cell;
  } else if (direction < 1) {
    // Go right
    this.x += cell;
  }
}

💡This code could be shortened but I kept the long version to make it more readable.

4. Draw the walker

To draw shapes we first need to define their styles. We set the fill style to black with 30% of opacity and we disable strokes. Finally we draw a rectangle at the walker position.

draw () {
  fill('rgba(0, 0, 0, 0.3)');
  stroke(0, 0);
  rect(this.x, this.y, cell, cell);
}

5. Handle all walkers each frame

Here is the code that is executed on each frame. We loop through all the walkers and check each if it is outside of the artboard.

If not, we make it move and then we draw it.

walkers.forEach(walker => {
  if (!walker.isOut()) {
    walker.move();
    walker.draw();
  }
});
  

---

🎈 If you hide the grid, reduce the cell size, and let your code run for a bit, here is the kind of result you can get.

---

Use a random velocity

In the demo above, the walkers are always walking at the same velocity: one cell per frame.

But what if we assign a velocity in both X & Y axis to our walkers and update that velocity on each frame?

💡Some portion of the code in the snippets below have been omitted and replaced with [...] check the source code of the demo to see the full code

1. Assign default velocity

We will make each walker start with a velocity of 0 in both axes. You could also try setting a random velocity on start for different results.

constructor (x, y) {
  [...]
  this.velocityX = 0;
  this.velocityY = 0;
}

2. Update the velocity

On each frame, we are speeding up or down the velocity of each walker. With this code, we are getting a random value between -0.25 and +0.25. Try with smaller/higher values to generate different results.

velocity () {
  this.velocityX += random(-0.25, 0.25);
  this.velocityY += random(-0.25, 0.25);
}

3. Move the walker

After updating the velocity, we need to apply that velocity on the walker when we call the move function.

move () {
  this.x += this.velocityX;
  this.y += this.velocityY;
}

---

💡We are talking about velocity here instead of speed because a speed doesn't have a direction. When you say that your car can reach 150km/h of speed you don't care about the direction of your car, it's just about how fast it goes. In our case the walkers have a speed per axis so we call them velocities.

---

4. Draw the walker

Because we removed the grid for this demo I'm drawing circles instead of squares to get a prettier output.

draw () {
  fill('rgba(0, 0, 0, 0.2)');
  circle(this.x, this.y, 10, 10);
}

5. Handle all walkers each frame

In this portion we only added the update to the velocity before moving our walkers.

walkers.forEach(walker => {
  if (!walker.isOut()) {
    walker.velocity();
    walker.move();
    walker.draw();
  }
});
  

---

🎈 By making all of our walkers come from the center of the demo we get a different look than random snakes coming from everywhere.

---

Use a noise function

For this next step we are gonna use a Simplex noise function (also known as Perlin noise). If you are not familiar with noise you should probably check out this video by Daniel Shiffman first.

By using noise we are trying to make our walkers follow some sort of flow. Imagine every cell of our previous grid with a grey value from white to black. The more black a cell is, the more that cell will increase the velocity when a walker walks in.

1. Update the velocity

We are now updating the x & y velocity based on the walker coordinates. There are three important things in this code

1. We are mapping the result of the noise function because the p5.js noise method returns a value between 0 and 1. In our case we want the walkers to walk backwards or forwards so we convert the value we receive from 0 to 1, for -1 to 1.

2. Jumping from the position [1, 4] to [2, 6] is a big step in a noise field. That's why we have to multiply the coordinates with very small numbers to reduce the leaps in the noise function. (Remember, multiplying by a value < 1 is basically a division)

3. Notice how we switched the x & y parameters for the velocityY. If we didn't do that, both X & Y velocity would always be the same which would make our walkers walk in diagonals.

velocity () {
  this.velocityX += map(noise(this.x * 0.005, this.y * 0.005), 0, 1, -1, 1);
  this.velocityY += map(noise(this.y * 0.005, this.x * 0.005), 0, 1, -1, 1);
}

2. Assign noise velocity on creation

By giving each walker random velocities, we will avoid having two walkers that start from the same point having exactly the same end result. Now, since they all have random X Y velocities when they start, their paths will always be a little different.

constructor (x, y) {
  [...]
  this.velocityX = random(-2, 2);
  this.velocityY = random(-2, 2);
}

3. Use the elapsed time

We are tweaking our velocity method a little bit to make it even more random. Now, we have a third parameter, which is the time passed since the beginning of our program. This means that if two walkers with the same initial velocity are created on the same coordinates, their paths will be different, because the noise field has changed with time.

velocity () {
  this.velocityX += map(noise(this.x * 0.005, this.y * 0.005, millis() * 0.001), 0, 1, -1, 1);
  this.velocityY += map(noise(this.y * 0.005, this.x * 0.005, millis() * 0.001), 0, 1, -1, 1);
}

4. Create many walkers

Now instead of creating a single walker on page load or click, we will create 20 of them to see how their paths will each look similar but different.

const x= random(width);
const y = random(height);
for (let i = 0; i < 20; i++){
  walkers.push(new Walker(x, y));
}

---

Drawing lines

So far, we have only drawn shapes on each frame. If you want to plot this, the result may not be as nice as having long curvy lines.

To do so, we will need to draw a piece of the line on each frame based on every walker velocity.

💡You can click anywhere in the demo to generate an new output

1. Store previous position

In order to draw a line we need two coordinates. We already have the current position of the walker with the x & y variables. But we need to store their previous position to make a line to show the distance they walked.

constructor (x, y) {
  [...]
  this.px = x;
  this.py = y;
}

2. Draw the lines

Now instead of drawing a shape on every frame we are drawing a line that goes from the walker current position to its previous position. Once we draw the line, we can store the current position of the walker to reuse it on the next frame.

draw () {
  line(this.x, this.y, this.px, this.py);
  this.px = this.x;
  this.py = this.y;
}
  

3. Adding more lines

💡 Try adding more walkers in every batch and enjoy the show!

---

Be creative

Once you are getting familiar with your algorithm try exploring with different styles. Add some colours, play with the weight of your lines, make your lines even more or less random!

💡 See this live here: https://codepen.io/Mamboleoo/pen/BgZLyZ

---

Plot your artwork

Once you are happy with the results produced by your code you can use you favorite tool to generate SVG from generative code (Canvas-sketch, Figma plugins, ...).

Remember that your lines should be one long path instead of many tiny lines to avoid your plotter going up & down repeatedly. To do so, store all the positions of your walkers in an array per walker and once the walker is reaching the limit of your scene, draw one path made out of all those coordinates.

You can now render the lines in SVG and plot them!

---

If you enjoyed this tutorial please share your best drawings with me either on Twitter (@Mamboleoo) or Instagram (@MamboleooLab) and be sure to use the hashtag #generativehut !

All demos are available on this page if you want to play with them.

https://codepen.io/collection/324d7d8c2474f4b01db7238f4f055435