🏠 back to Observable

Completely freezing FIrefox, freezing tab in Safari, making Chrome unhappy

Hi folks, in notebook Apple II NTSC Emulation / Zellyn Hunter / Observable, I’m trying to port WebGL port of OpenEmulator NTSC shader to observable, with the goal of — once it’s working — ruthlessly deleting everything unnecessary and writing an explainer of how OpenEmulator does NTSC emulation.

However, my initial (probably misguided) port to Observable went fine, right up until I tried to render things. If you uncomment the vsync command at the bottom, you’ll see it hoses the browser :disappointed:.

Any help would be appreciated. I’m sorry it’s so much code: I haven’t tried to reduce it to a minimal reproduction of the problem yet. I thought it would be worth asking first.

Thanks, Zellyn

vsync() calls resizeCanvas(), which uses canvas.clientWidth and canvas.clientHeight. But because your canvas element hasn’t been added to the DOM yet, both are 0.

It might be sufficient to yield the canvas at the top of your cell, before any of the remaining code:

{
  const canvas = DOM.canvas(768, 576);
  yield canvas;
  let sv = new ScreenView(canvas);
  // ...

A good start for issues like this is to place a debugger; statement right before the line that you want to inspect. Once the breakpoint is active, you may have to click the top-level item in the call stack again to focus on the current cell.

1 Like

yielding the canvas before calling vsync totally did the trick. Thank you!