A Random Walk(er)


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.


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">

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);
        p.walker = new Walker(p);

    p.draw = function() {

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.ellipse(this.x, this.y, 48, 48);

//let node = document.getElementById("random-walk")
sketch_container = new p5(sketch, 'random-walk-container');


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