P5.js Positioning in Squarespace

I am using SquareSpace and I was able to get my p5.js script to show on the page, but no matter what I do it is always on the very bottom of the page. If you are familiar with SquareSpace, I have inserted my code into a "code block" in the body of the page, but the p5 script just says "nope! I'm going to the bottom, see y'all later". Contacting square space, they say it's a fault on the p5 side, but they could easily just be shrugging me off to avoid work. So my question is;

Is there a p5 setting that makes it sit at a specific spot on the page, no matter what it is wrapped in?

First time in this forum! Let me know if you need anything else.

Tagged:

Answers

  • Answer ✓

    If you don't specify a target the sketch will get dumped at the bottom of the page. You need to create a placeholder (usually a div); give it an id and then specify this as the parent of your sketch. See overview > createcanvas for a bit more detail and an example ;)

  • Answer ✓

    Invoke parent() over the createCanvas(), passing the string id of the desired placeholder element:

    https://p5js.org/reference/#/p5.Element/parent

    createCanvas(800, 600).parent('placeholder_id_name');

  • Wow, two very great answers. I feel so stupid, but thank you for not being rude/ condescending about my new-ness. I'm not new to processing but I just started getting into p5, so that would explain this mistake.

Sign In or Register to comment.