# A Random Walk(er)

## Beginning

This is another post to see if I understand how to get p5.js working in nikola. It's been a while since I tried and I just want to see if I remember how. This uses the random walk example from Daniel Schiffman's book the Nature of Code.

## Middle

### A Div to Locate the Sketch

The id of this div is set in the p5.js setup function as the parent of the sketch.

<script language="javascript" type="text/javascript" src="walker.js"></script>
<div id="random-walk-container">
</div>


Note: Originally this wasn't working, because I had the line to include the javascript inside the div to hold the canvas. Make sure that div is always empty.

### The Javascript

let sketch = function(p) {
p.setup = function() {
let parent_div_id = "random-walk-container";
this.canvas = p.createCanvas(\$("#" + parent_div_id).outerWidth(true), 300);
this.canvas.parent();
p.walker = new Walker(p);
}

p.draw = function() {
p.background(255);
p.walker.walk();
p.walker.display();
}
};

function Walker(p) {
this.x = p.width/2;
this.y = p.height/2;

this.walk = function() {
this.x = this.x + p.random(-1, 1) * 10;
this.y = this.y + p.random(-1, 1) * 10;
}

this.display = function() {
p.fill(0);
p.ellipse(this.x, this.y, 48, 48);
}
}

//let node = document.getElementById("random-walk")
//window.document.getElementsByTagName("body")[0].appendChild(node);
sketch_container = new p5(sketch, 'random-walk-container');


## End

As always, this was way harder than it should have been.