Offscreen buffer offset weirdness - "works on THIS mac"

p5.js Coding Questions
1

I made a version of A.K.Dewdney’s famous Wa-Tor -
https://toys.alienbill.com/wator/index2.html
I used instance mode, because I wanted to have the main cellular automata area send data to a seperate canvas for it to graph.

That graph is a phase diagram (showing a predator population vs the prey population, changing over time) and it’s much more efficient to not draw the whole thing from scratch each frame, but I wanted a current position marker, so I thought I’d make an offscreen buffer and update it every frame then image() it to the main drawing area and then draw in the pointer:

(image skipped, newbies can only post one image)

So the result works fine on my home laptop, but when I Iooked at it at work - same chrome version ( 69.0.3497.100 ) same MacOS (10.13.6) - it was messed up, subsequent lines were being drawn on the thing with an offset:

07%20AM
Screen Shot 2018-10-27 at 9.36.07 AM.png642×684 27.4 KB

(the blue dot should be on the end of the curvy line, and the general squiggle should be centered in the canvas not pushed down (ignore the diagonal lines, they were there as I tried to diagnose the issue))

It seems computer specific - (no difference with behaviors on safari) and also on a third mac, it’s broken, so the odd thing is that it ever works at all.

I don’t know if I’m paying too fast and loose with (multiple) instance modes or what - but I’m surprised to see it break in such a subtle yet consistent way.

Anyway, the code is there embedded in the index2.html (index.html is now a version that just draws directly and skips the blue pointer)

1 Like
2

I’m also seeing the offset on MacOS 10.12 Chrome 69.0.3497.100.

Quick brainstorm:

  • An initial dropped frame or communication
  • A race condition where which sketch loads first matters
  • Something in the cache of one specific machine that wasn’t on any of the others (like mine)

That offset looks like it is exactly width/2, height/2. Any chance that a width/height initializer is being run before the width and height being referenced exist, so that it is 0,0 – but then, later, it is 200, 200 (or whatever)?

Hardcoding dynamic references to width and height to a constant variable could be a quick workaround to see if that is the issue.

3

Can you try to isolate your problem into a small example program?

1 Like
4 
var offscreenCanvas;
function setup(){
    var canvas = createCanvas(400, 400);
    offscreenCanvas = createGraphics(400, 400);
}
function draw(){
    offscreenCanvas.stroke(255,0,0);
    offscreenCanvas.ellipse(200,200,40,40);    
    image(offscreenCanvas,0,0);
    ellipse(200,200,20,20);
}

On further review, may have been a previously fixed bug and I’m guilty of “using whatever p5.js file I have around handy”
see it fail here on some machines: https://temp.alienbill.com/offscreen_p5/
using a p5.js /*! p5.js v0.4.20 December 11, 2015 */
but it works here:
https://temp.alienbill.com/offscreen_p5/index_cdn.html
using
cloudflare’s ajax/libs/p5.js/0.7.2/p5.js

Mildly interesting even the old version works on a Macbook Air, but I think the dev team would have more interesting problems to work on than an already fixed bug :smiley:

1 Like
5

Good news.

It might be worth running a diff on those two files to inspect what changed, so you can keep an eye out for not reintroducing the same (possibly subtle) problem again.

1 Like
6

Well, yeah, but I suspect 2-3 years of p5 dev might have plenty of other differences, so I think my takeaway for me as a casual coder is making sure I use the latest p5.js (I don’t like to pull it offa CDNs tho, for linkrot reasons)

7

Ah, I misread you – I thought you were saying different versions of your sketch, not of p5.js. My mistake.

1 Like
8 
<script defer src=https://cdn.JsDelivr.net/npm/p5/lib/p5.js></script>
<!--<script defer src=https://cdn.JsDelivr.net/npm/p5/lib/addons/p5.dom.js></script>-->
<script defer src=sketch.js></script>
1 Like