A Random Walk Demo

or An Automated Jacson Pollock

Redraw

The Code

<h1> A Random Walk Demo</h1>
<h3> or An Automated <a href="https://en.wikipedia.org/wiki/Jackson_Pollock">Jacson Pollock</a></h3>
<script>
// create the canvas, this will be global.
var WIDTH = 300;
var HEIGHT = 300;

var canvas = document.createElement('canvas')
    canvas.height = HEIGHT;
    canvas.width = WIDTH;

document.body.appendChild(canvas);

var CTX = canvas.getContext("2d");

function DoWalks() {
    var i;
    var x,y;
    var r,g,b;
    var color;
    var ox, oy;
    var dir;

    // clear the screen black.
    CTX.fillStyle="#000000";
    CTX.fillRect(0,0,WIDTH,HEIGHT);

    for(i=0;i<100;i++) {

        r = Math.floor(Math.random()*255);
        g = Math.floor(Math.random()*255);
        b = Math.floor(Math.random()*255);

        color = "rgb("+r+","+g+","+b+")";

        x = Math.random()*WIDTH;
        y = Math.random()*HEIGHT;
        for(var step=0;step < 1000; step++) {
    	    ox = x;
	    oy = y;
	    dir = Math.floor(Math.random()*4);

	    switch(dir) {
	        case 0:x++; break;
	        case 1:x--; break;
	        case 2:y++; break;
	        case 3:y--; break;
   	    }
	    x = Math.min(WIDTH-1, Math.max(0,x));
	    y = Math.min(HEIGHT-1, Math.max(0,y));

            CTX.fillStyle = color;
            CTX.fillRect(x, y, 1, 1);
       }
    }
}

DoWalks();
</script>

<p>
<button type="button" id="Redraw" 
        onclick="DoWalks()">Redraw</button>