Random Walker

p5.js Tutorials
Tutorials
/
p5.js Tutorials
/
Animation
/
Random Walker
Previous:
Animation

Random Walker

Created on January 11, 2021
Updated on January 2, 2023

example p5.js javascript animation genuary

These sketches move a point around the screen randomly, creating a colorful scribble effect. This is a visualization of my favorite algorithm, the random walker!


(Edit this sketch in the p5.js editor.)

random walker

Just for fun, here’s a sped up version of the above video:


Here’s another take on the random walker algorithm. This one uses a for loop to speed up the animation.

random walker

Remix Ideas

  • Change what happens when the point goes off the edge of the screen.
  • Instead of including every random color, make your point a random shade of red or gray.
  • Reset the point after a certain number of steps.
Previous:
Animation

Animation Examples

Falling Line Falling Line

Show a falling line that fills the screen.

Random Lines Random Lines

Fill the screen with random lines.

Square Fill Square Fill

Create a border of squares.

Random Walker Random Walker

Show a scribble that randomly moves around.

Bouncing Line Bouncing Line

Draw a line, pick a new color, move a bit.

Pumpkin Patch Pumpkin Patch

Fill the screen with random pumpkins.

Ghost 👻 Ghost 👻

Boo!

Random Skulls Random Skulls

Fill the screen with random skulls.

Flickering Jack-o'-Lantern Flickering Jack-o'-Lantern

Animate a flickering Jack-o'-lantern.

Square Lines Square Lines

Fill a square with lines.

Add Your Own Example Add Your Own Example

Add your own example to Happy Coding.

Comments

Happy Coding is a community of folks just like you learning about coding.
Do you have a comment or question? Post it here!

Comments are powered by the Happy Coding forum. This page has a corresponding forum post, and replies to that post show up as comments here. Click the button above to go to the forum to post a comment!