The Joy of Random Walking.

An image result of random walk with vertex() function in Processing.

What is Random Walk?

This is the Random Walk.

x += random(-1.0, 1.0);
y += random(-1.0, 1.0);

The ordinary random walker example.

That's all! 😀

 

Variations of moving.

Y-axis random only.

You can make twisted wire.

x += 1.0;
y += random(-1.0, 1.0);

The random walker : Y-axis random only

When I apply this as radial lines.

Straight radial lines.

This goes like this.

Random walked radial lines.

And develop this further.



 

Perlin noise.

It looks like a creature's moving or handwriting.

x += map(noise(a, t), 0.0, 1.0, -1.0, 1.0);
y += map(noise(b, t), 0.0, 1.0, -1.0, 1.0);

// a ≠ b : Some value for other noise seed.
// t : time

Random walker with the Perlin noise.

 

Move on the grid.

If you fix the walker direction to the X or Y axis and walker size equal to step size, it seems moving on the grid pattern.

This example code was written in p5.js.

let direction = random(-1.0, 1.0);
direction = (direction == 0) ? 1.0 : direction / abs(direction);
if (random(1.0) < 0.5) {
  x += direction * pSize;
} else {
  y += direction * pSize;
}

// pSize : Walker size

Random wakler that move on the grid.

 

A little ingenuity of representation.

Paint in different colors.

It looks nice if you just paint the walker in ebony and ivory. Just adding fill() in the example code above.

let direction = random(-1.0, 1.0);
direction = (direction == 0) ? 1.0 : direction / abs(direction);
if (random(1.0) < 0.5) {
  x += direction * pSize;
  fill(255);
} else {
  y += direction * pSize;
  fill(0);
}

Painted random walker in ebony and ivory.

This is the example implemented in p5.js on OpenProcessing.org. I added a residual image effect with a half-transparent rectangle.

It will pause on a mouse click.



 
 

In 3D.



 

Draw lines on the walker tail.



 

Draw the walker with vertex();

Using beginShape(TRIANGLES) and paint the walker in different colors.

Using beginShape(TRIANGLES) and paint the walker in different colors.

Using beginShape(TRIANGLES) and paint the walker in different colors.

Using beginShape(TRIANGLES) and paint the walker in different colors.

This is the example that draws curve lines using 'curveVertex()' and was implemented in p5.js on OpenProcessing.org. It will pause on a mouse click.



Oh... Poor walker getting lost...


 

The other people's brilliant works.





 







The 'Processing' code examples.

Playing fake board game animation.

Creative coding of random walk creates a fake board game.

 

About this creative coding example.

A random walk example made with the 'Processing'. This creative coding creates a fake board game as a result of a random walk.

 

The 'Processing' code example of fake board game animation.

Please feel free to use it under the terms of the GPL.
To see other works based on my code is my pleasure. And my honor.

This code does not display any images on the screen but generates image files in frames directory. You can make an animation with these files.



/**
 * It's A Game.
 * A random walk animation. Guess which side is superior?
 * 
 * Processing 3.5.3
 * @author @deconbatch
 * @version 0.1
 * created 0.1 2020.02.05
 */

void setup() {
  size(720, 440);
  rectMode(CENTER);
  smooth();
  noLoop();
}

void draw() {
  int frmMax = 5 * 30; // 5fps x 30s animation
  int pLen   = floor(width * 0.04);
  int pSize  = floor(width * 0.012);
  ArrayList<path> paths = new ArrayList<path>();

  int pX = 0;
  int pY = 0;
  int pC = 0;
  for(int frmCnt = 0; frmCnt < frmMax; frmCnt++) {
    float direction = random(-1.0, 1.0);
  direction = direction == 0 ? 1.0 : direction / abs(direction);
  if (random(1.0) < 0.5) {
   pX += direction * pLen;
   pC = 255;
  } else {
   pY += direction * pLen;
   pC = 0;
  }
  if (abs(pX) > width * 0.5) {
   pX -= direction * pLen;
  }
  if (abs(pY) > height * 0.5) {
   pY -= direction * pLen;
  }
    paths.add(new Path(pX, pY, pC));
  }  

  translate(width * 0.5, height * 0.5);
  for(int frmCnt = 0; frmCnt < frmMax; frmCnt++) {
    background(240.0);
    strokeWeight(1.0);
    stroke(0);

    beginShape(TRIANGLES);
    for(int i = 0; i < frmCnt; i++) {
      Path p = paths.get(i);
      fill(p.colour);
      vertex(p.x, p.y);
      ellipse(p.x, p.y, pSize, pSize);
    }
    endShape();

    casing();
    saveFrame("frames/" + String.format("%04d", frmCnt) + ".png");
 }
    
  exit();

}

/**
 * casing : draw fancy casing
 */
private void casing() {
  fill(0.0, 0.0);
  strokeWeight(20.0);
  stroke(20.0);
  rect(0.0, 0.0, width, height);
  strokeWeight(15.0);
  stroke(240.0);
  rect(0.0, 0.0, width, height);
}

/**
 * Path : hold random walk path
 */
private class Path {
  public int x, y;
  public int colour;

  Path(int _x, int _y, int _c) {
    x = _x;
    y = _y;
    colour = _c;
  }
}

/*
Copyright (C) 2020- deconbatch

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>
*/


 
 

Walking on the grid animation.

It's a random walk example that walks on the triangular grid.

 

About this creative coding example.

It's a creative coding work of random walk made with the 'Processing'. It walks on the triangular, quadrangular and hexagonal grid.

I tried to draw walker's tail with using ArrayList shift technique.

Structure of walkers.
  walkers(tails01(Walker0101, Walker0102..), tails02(Walker0201, Walker0202..)..)

Structure of tails.
            ← tail                     head →
  tails01(Walker0101, Walker0102, .., Walker01nn)
          ↓ shift
  tails01(Walker0102, Walker0103, .., Walker01nn + 1)

I don't know it makes sense. And the names of ArrayList are suitable?

 







The 'Processing' code example of walking on the grid.

Please feel free to use it under the terms of the GPL.
To see other works based on my code is my pleasure. And my honor.

This code does not display any images on the screen but generates image files in frames directory. You can make an animation with these files.


/**
 * Saturday In The Park.
 * A random walk on the grid.
 * 
 * Processing 3.5.3
 * @author @deconbatch
 * @version 0.1
 * created 0.1 2020.02.15
 */

void setup() {
  size(720, 480);
  colorMode(HSB, 360, 100, 100, 100);
  rectMode(CENTER);
  smooth();
  noLoop();
}

void draw() {
  int frmMax  = 24 * 3; // 24fps * 3s animation with each pattern
  int corners = 3;      // initial pattern = 3 corners shape
  
  translate(width * 0.5, height * 0.5);

  for (int pattern = 0; pattern < 3; pattern++) {

    corners += pattern; // 3, 4, 6
    int   walkerMax = 21 - pattern * 4;
    int   tailMax   = corners * 3; // walker's tail
    float sideLen   = 8.0 - pattern * 2.0;

    ArrayList walkers = new ArrayList();
    for (int i = 0; i < walkerMax; i++) {
      float wX = sideLen * corners * i - (sideLen * corners * walkerMax) * 0.5;
      float wY = 0.0;
      float wC = (50.0 * i) % 360.0;
      float wD = TWO_PI / corners;
      int   wR = floor(random(corners));
      ArrayList<Walker> tails = new ArrayList<Walker>();
      for (int j = 0; j < tailMax; j++) {
        tails.add(new Walker(wX, wY, wC, wD, wR));
      }
      walkers.add(tails);
    }

    for(int frmCnt = 0; frmCnt < frmMax; frmCnt++) {
      background(0.0, 0.0, 100.0, 100.0);
      strokeWeight(5.0);
      noFill();

      for (int i = 0; i < walkers.size(); i++) {
        float wX = 0.0;
        float wY = 0.0;
        float wC = 0.0;
        float wD = 0.0;
        int   wR = 0;
        
        ArrayList<Walker> tails = (ArrayList)walkers.get(i);
        for (Walker walker : tails) {
          wX = walker.x;
          wY = walker.y;
          wC = walker.colour;
          wD = walker.radianDiv;
          wR = walker.rotateCnt;

          stroke(wC, 40.0, 80.0, 100.0);
          beginShape();
          vertex(wX, wY);
          for (int j = 0; j < corners; j++) {
            // it makes a straight line between corners
            wX += sideLen * cos(wR * wD);
            wY += sideLen * sin(wR * wD);
            vertex(wX, wY);
          }
          endShape();
        }
        
        if (abs(wX) < width * 0.35 && abs(wY) < height * 0.35) {
          if (random(1.0) < 0.5) {
            --wR; // not turn
          } else {
            if (random(1.0) < 0.1) {
              wD *= -1.0; // turn
            }
          }
        }
        
        ++wR;
        wR %= corners;
        // tail shift
        tails.add(new Walker(wX, wY, wC, wD, wR));
        tails.remove(0);
      }

      casing();

      // for stop motion of first pattern
      if (frmCnt == 0) {
        for (int i = 0; i < 18; i++) {
          saveFrame("frames/" + String.format("%02d", corners) + ".00." + String.format("%04d", i) + ".png");
        }
      }

      saveFrame("frames/" + String.format("%02d", corners) + ".01." + String.format("%04d", frmCnt) + ".png");
    }
  }
  exit();

}

/**
 * casing : draw fancy casing
 */
private void casing() {
  fill(0.0, 0.0, 0.0, 0.0);
  strokeWeight(20.0);
  stroke(0.0, 0.0, 0.0, 100.0);
  rect(0.0, 0.0, width, height);
  strokeWeight(15.0);
  stroke(0.0, 0.0, 100.0, 100.0);
  rect(0.0, 0.0, width, height);
}

/**
 * Walker : hold random walker attributes
 */
private class Walker {
  public float x, y;
  public float colour;
  public float radianDiv;
  public int   rotateCnt;

  Walker(float _x, float _y, float _c, float _d, int _r) {
    x = _x;
    y = _y;
    colour = _c;
    radianDiv = _d;
    rotateCnt = _r;
  }
}

/*
Copyright (C) 2020- deconbatch

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>
*/
  



 

Next Post Previous Post
2 Comments
  • Unknown
    Unknown Tuesday, October 27, 2020

    Really great article. Nice examples. I am sort of new to the processing system - we rebuilt something like it in ZIM at https://zimjs.com so I look forward to doing more relative drawing. I made some walking code without realizing that it was called walking ;-).

    • deconbatch
      deconbatch Saturday, February 06, 2021

      Thank you for your interest! I love your Zim cat. 🐱

Add Comment
comment url