How to link P5.js setup and draw with html canvas?

Question

I am sure this is a very simple thing to do, but I am stuck here. Here is the situation:

I have an HTML page with a div and a canvas element(not sure if I need this) Also I have two javascript files using p5.js with setup and draw funtions where I draw my content on a canvas I create with createCanvas. The other js file contains an object. The problem is - I can get the animation to show on the HTML page, but not inside the div and/or canvas.

Image for a clearer picture: HTML and JS comunication

HTML:

<html>
<head>
  <meta charset="utf-8">
  <title>Fractals</title>
  <script language="javascript" type="text/javascript" src="libs/p5.js"></script>
  <script language="javascript" src="libs/p5.dom.js"></script>
  <script language="javascript" type="text/javascript" src="sketch.js"></script>
  <script language="javascript" type="text/javascript" src="branch.js"></script>
  <style>
    body {
      padding: 0;
      margin: 0;
    }
  </style>
</head>
<body>
  <div>
    <canvas id="fractal" height="197" width="333" style=" width:333;height:197;"></canvas>
  </div>
</body>
</html>

JS sketch:

var tree = [];
var x;
var y;

function setup() {
  createCanvas(333,197);

  var a = createVector(width / 2, height);
  var b = createVector(width / 2, height - 50);
  var root = new Branch(a, b);
  tree[0] = root;
  for (var t = 0; t < 5; t++) {
    for (var i = tree.length-1; i >= 0; i--) {
      if (!tree[i].finished){
        tree.push(tree[i].branchA());
        tree.push(tree[i].branchB());
        tree.push(tree[i].branchC());
      }
      tree[i].finished = true;
    }
  }
}

function draw() {

  background(51);
  x = mouseX;
  y = mouseY;

  for (var i = 0; i < tree.length; i++) {
    tree[i].show();
    tree[i].wind(x, y, tree[i].end.x, tree[i].end.y);
  }
}

JS branch object:

function Branch(begin, end) {
  this.begin = begin;
  this.end   = end;
  this.finished = false;
  this.origx = this.end.x;
  this.origy = this.end.y;

  this.show = function() {
    stroke(255);
    line(this.begin.x, this.begin.y, this.end.x, this.end.y);
  }

  this.branchA = function() {
    var dir = p5.Vector.sub(this.end, this.begin);
    dir.rotate(19.2);
    dir.mult(0.67);
    var newEnd = p5.Vector.add(this.end, dir);

    var v = new Branch(this.end, newEnd);
    return v;
  }
  this.branchB = function() {
    var dir = p5.Vector.sub(this.end, this.begin);
    dir.rotate(0);
    dir.mult(0.67);
    var newEnd = p5.Vector.add(this.end, dir);

    var v = new Branch(this.end, newEnd);
    return v;
  }
  this.branchC = function() {
    var dir = p5.Vector.sub(this.end, this.begin);
    dir.rotate(-19.2);
    dir.mult(0.67);
    var newEnd = p5.Vector.add(this.end, dir);

    var v = new Branch(this.end, newEnd);
    return v;
  }
  this.wind = function(mox,moy,treex,treey) {
        var d = dist(mox,moy,treex,treey);

        if (d < 20) {
          this.end.x += random(-0.3, 0.3);
          this.end.y += random(-0.3, 0.3);
        }else{

          this.end.x = this.origx;
          this.end.y = this.origy;

        }
    }
}

P5 libraries : https://p5js.org/download/

Answer 1

From the docs:
https://github.com/processing/p5.js/wiki/Positioning-your-canvas

// sketch.js
function setup() {
    var canvas = createCanvas(100, 100);

    // Move the canvas so it's inside our <div id="sketch-holder">.
    canvas.parent('sketch-holder');

    background(255, 0, 200);
}

Create one instance of canvas with P5, then assigns its parent by dom id.

How to link P5.js setup and draw with html canvas?

Question

1 answers

solution1
0 ACCPTED 2016-12-03 14:31:10

How to link P5.js setup and draw with html canvas?

Question

1 answers

solution1 0 ACCPTED 2016-12-03 14:31:10

solution1
0 ACCPTED 2016-12-03 14:31:10