I’ve been experimenting with incorporating the geometry and math library Cindy.js into OpenProcessing sketches. That works ok, but I don’t seem to be able to make preview-thumbnail screenshots when I show a 2D colorplot. It does work fine when I simply show an x,y plot.
Weirdly, I was able to make thumbnail screenshots, and indeed thumbnail videos, just a couple of weeks ago. E.g. this one: https://openprocessing.org/sketch/2703546
Did something change recently in the way OpenProcessing makes thumbnail screenshots?
In you html file you have 2 </body tags but that would not cause the issue.
I tried many ways to get a thumb nail and eventually I did manage it, check out my sketches here
I am not sure how I did it but when I tried your sketch I got the message
InvalidStateError: CanvasRenderingContext2D.drawImage: Passed-in canvas is empty
and the screen froze during the capture and I could not get back to the code view without refreshing the browser window. I also tried a video thumbnail.
Eventually I had the old plot nail in my sketches window but when I opened the sketch and went to edit the color nail was there so I submitted the edit again and it appeared to work.
I am not sure exactly the procedure because it was all hit and miss but at least you know it is possible
From googling the “Passed in canvas is empty” error message, it sounds like the fact that an image is visibly showing up on screen is not enough for the screenshot-making-code. This might be something to do with the way Cindy.js renders images onto the canvas? I’m not sure.
I’ll try asking the Cindy.js guys (the “Issues” section of their github page sort of serves as a user forum), and I’ll let you know what I find out.
Thanks again. I love the sketches that you have on OpenProcessing, by the way!
Update: for reasons that I don’t understand at all, video thumbnails turn out to work on Cindy.js-importing sketches, even though trying to make static thumbnails results in hanging and failure.
(I paid for OpenProcessing membership, so I can make video thumbnails).
Hello! Raphael informed me about this topic. Yes, I can see the issue there. I am not sure why, as it seems like a standard canvas element, but somehow the image extraction from it doesn’t work. I am suspecting cindy.js is using a custom context for it, but I have to dig in to this further. In general, OpenProcessing focuses on p5js sketches, and it is not meant to handle all custom canvas use-cases. I can look at this in the coming weeks but I can’t promise a timeline.
