• Louis Hoebregts

Random walkers

Updated: Jun 23

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

3,439 views

©2020 by Generative Hut.