CODEWITHSUNDEEP
javascriptprocessingp5.js
Tim
Tim

Reputation: 891

P5 - processing. unable to run and render multiple sketches at once

I have trouble placing and rendering multiple sketches in one page. I'm working in openprocessing. And since I can't edit the page it's html, I'm adding the code through creating a node and appendChild to the body.

Expectations

I have a link to the project below. But first I'll describe what I would expect it to do:

Current result

The code

Link to the OpenPocessing Sketch

Upvotes: 1

Views: 256

Answers (2)

Tim
Tim

Reputation: 891

As Jonathan Gagne pointed out the conent IS there. But not shown. So that means the rendered conect takes the size of the last sketch. I've fixed it by adding a empty dummy sketch to the end of the script that has the size of the document body:

var iframeFix = function(p) {
    p.setup = function() {
        p.createCanvas($(document).width(), $(document).height());
    };
};

let node_iframeFix = document.createElement('div');
var sketch_iframFix = new p5(iframeFix, node_iframeFix);
parentNode.appendChild(node_iframeFix);

now it works, as seen in this test

Upvotes: 0

Jonathan Gagne
Jonathan Gagne

Reputation: 4379

Because the size of your iframe is too small. When you play with the iframe scrollbar, you can see the 3 colors. Raise the width and height of your iframe and they will all show up.

Here is before to raise the size of the iframe, pay attention to the iframe scrollbar that I pointed out. enter image description here

Here I changed style="width: 200px; height: 200px;" to style="width: 1000px; height: 1000px;" enter image description here

Upvotes: 2

Related Questions