Today I was playing with Javascript and random walk.
Imagine that you go for a walk and each time before making a step you flip a coin. If it’s heads — you step forward, if tails — you step back. How far can you get? Well, far enough, depending how long you play this game.
Random walk is used as a model to describe various natural phenomena, such as random movement of particles (Brownian motion), diffusion, genetic drift, ect.
There are several types of random walks, but I decided to make a little demo with a very simple one. It’s a random walk on 2d surface with 2 axes (that is, it’s possible to go up/down/right/left). With Javascript’s Math.random() movement calculation is super-simple: we get a random number with const rand = Math.random(); and then, since that number is something between 0 and 1 (including 0 and excluding 1, actually, but for my simple program this isn’t important) see if that number is below 0.25 or between 0.25 and 0.5 or between 0.5 and 0.75 or above 0.75.
To visualize I made a constructor for dot (well, really a circle) object and made it move on the canvas (speed is a variable for “how many pixels it’s moved each iteration” and restrictions are added so that the dot won’t go further than canvas’ borders):
if(rand < 0.25 && this.x < canvas.width){
this.x += speed;
}else if(rand < 0.5 && this.x > 0){
this.x -= speed;
}else if(rand < 0.75 && this.y < canvas.height){
this.y += speed;
}else if (rand > 0.75 && this.y > 0){
this.y -= speed;
}From this constructor we can make a dot which will perform that random walk. It doesn’t look very exciting though. So I added more dots with different colors and made them leave trail on canvas (by not clearing canvas each iteration). Now you could make them “fight”:
Or by controlling opacity and speed (which here also serves as “step width”) it’s possible to make it to draw something like pattern:
But most fun is to add more colors and lower their opacity so they can mix and make new colors!
Of course, the step doesn’t need to be fixed all the time. I can make speed random at each iteration as well:
It looks almost like some abstract modern art :P I can also make dots smaller and more vibrant (less opaque):
But let’s return to our RGB. Red, green and blue in digital world can make all other colors. Let’s try simulation with little dots and with only red, green and blue (I did it with 50 dots of each color):
As expected, it looks a lot like previous example and you can see there yellow, violet and other colors.
To visualize RGB colors mixing a bit clearer I again made dots bigger and switched step to fixed and equal to dot’s diameter to make “grid”:
This can be done on any background too:
Sure, it looks more interesting as live simulation: https://codepen.io/svmi3195/full/LzmLob/
