We are about to switch to a new forum software. Until then we have removed the registration on this forum.
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
That variable canvas (which is undocumented btW) you're using like this
canvas.parent('first');
, isn't a subtype of datatype p5.Element, but directly refers to the actual HTMLCanvasElement of the sketch: @-)https://Developer.Mozilla.org/en-US/docs/Web/API/HTMLCanvasElement
AFAIK, there's no method called parent() available for HTMLCanvasElement.
So what you should get instead is an "Uncaught TypeError: canvas.parent is not a function"! [-X
In order to access the sketch's p5.Renderer object, you can use variables _renderer or _curElement.
Notice though they're also undocumented, just like canvas! :-SS
A cleaner solution is to store the p5.Renderer returned by p5::createCanvas() in some variable: :-B
const canv = createCanvas(windowWidth, windowHeight);
Then invoke p5.Element::parent() via that variable: *-:)
canv.parent('first');
Or better yet, invoke parent() right after createCanvas(): :ar!
createCanvas(windowWidth, windowHeight).parent('first');