Random Walker Take Two

Table of Contents

Beginning

Another take on getting p5.js to behave using the A Random Walk(er).

Middle

First, make a div to contain the javascript.

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

Then the javascript.

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

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

function Walker(p) {
    this.position = p.createVector(p.width/2, p.height/2);

    this.walk = function() {
        velocity = p.createVector(p.random(-5, 5), p.random(-5, 5));
        this.position = this.position.add(this.velocity)
  }

  this.display = function() {
      p.stroke(0);
      p.noFill();
      p.background(255, 255, 255, 100);
      p.ellipse(this.position.x, this.position.y, 48, 48);
  }
}

sketch_container = new p5(random_walker_sketch, 'random-walker-vectorized');

End

The big thing that fixed the positioning of the canvas was that I was putting the line to include the javascript inside the div where it was supposed to render. Keeping the div for the canvas empty fixed it.