A Random Walk(er)

Source

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.