Canvas.parent() returns type error.

Okay, never used professing or p5 before but I'm helping a designer/artist friend with a wordpress website. He's made a p5 sketch and needs me to stick the canvas up in a header div at the top of the front page.

I did some research and apparently I'm supposed to use canvas.parent("NameOfDivIdHere"); but that isn't working. I'm getting a type error in return.

I've stripped down my code to it's most basic form and I'm still getting a type error. So here it goes:

<html>
<head>

    <script src="p5.min.js"></script>
    <script src="p5.dom.min.js"></script>
    <script src="generative.js" type="text/javascript"></script>
</head>
<body>
<div id = "first">
    <p> First div is here. </p>
</div>
<div id = "second">
    <p> Second div is here. </p>
</div>
<div id = "third">
    <p> Third div is here. </p>
</div>
<div id = "fourth">
    <p> Fourth div is here. </p>
</div>
<p>And here is the end of the document.</p>
</body>

</html>

And my setup function in the generative.js file looks like this:

function setup() {
  createCanvas(windowWidth, windowHeight);
    canvas.parent('first');
  bground = color(255);                                                             // Color definitions.
  onionSkin = color(255, 30);
  soulStroke = color(255, 3);
  soulFill = color(0, 126, 255, 1);
  background(bground);
  v = 2;
  windowRes = windowWidth * windowHeight;
  soulNum = int(windowRes / 30000);
  soulNum = constrain(soulNum, 12, 33);
  for (var i = 0; i < soulNum; i++) {                                               // Initialize souls.
    souls[i] = new Soul();
  }
  frameRate(30);  
}

Any clue what I need to do?

Answers

Sign In or Register to comment.