1

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:

  • One page with 3 scketches
  • Each sketch has it's own size and background color.
  • sketch 1 fills the body size and has a red background.
  • Sketch 2 is 400x400 px and has a green background.
  • Sketch 3 is 200x200 px and has a blue background.
  • Resulting in seeing 3 stacked colored shapes.

Current result

  • It only renders the last sketch, so sketch 3

The code

Link to the OpenPocessing Sketch

Community
  • 1
  • 1
Tim
  • 861
  • 1
  • 12
  • 27

2 Answers2

2

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

Jonathan Gagne
  • 4,241
  • 5
  • 18
  • 30
  • Hmmmm so, it is there, but I just don't see it? I'm on my android tablet in Chrome. The editor is bigger than 200 px though. Strange. I only see a big white body with a small blue square (sketch 3) in the middle,middle (not top left). But that would mean I have a frame bigger than the 200px. – Tim Apr 28 '19 at 06:59
  • Me as well I see only a blue square before changing the iframe to 1000x1000px. It is normal, the blue square represent the whole iframe – Jonathan Gagne Apr 28 '19 at 07:01
  • You can see in the example that I added hte previous view, it is as you described, only a blue square, if you pay attention, you will see the scrollbar. – Jonathan Gagne Apr 28 '19 at 07:05
  • Ah yes, thanks. I understand now. Reason I did not checked it as solved is that I'm not online 24/7 :) – Tim Apr 28 '19 at 13:31
  • I guess now my question would shift to " why does openprocessing.org sizes the iframe to the last sketch?" And " does this also happen outside openprocessing? Local hosting for example." – Tim Apr 28 '19 at 13:34
  • because the iframe style width and height are locked at 200px, it cannot be bigger. It is not related to the sketch size, even if the sketch is actually 200px as well. It is just a coincidence, the only thing to change is the iframe size. – Jonathan Gagne Apr 28 '19 at 13:53
0

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

Tim
  • 861
  • 1
  • 12
  • 27