I want to uniquely name the images I save from my sketch, so I can figure out what particular p5js sketch made what image. To do this, I need to determine the sketch name from within the sketch.
I don’t want to type the sketch name into each sketch as a variable; I want to programmatically obtain it. That way I can write my own image-saving function that makes a fancy filename with the sketch name, the date, and time, and so on, and reuse it in every sketch I write.
How can I do this?
Attempt 1:
Poking around in the Chrome dev tools, I was able to find an element that contains the sketch name. But I have not been able to access it using selectAll(), or by rewriting the sketch to use instantiation mode, and then trying to use document.querySelector(). It seems like all that’s available for both of these is the very basic HTML document that the script loads into, not the full rendered page on p5.js.
The relevant line is:
<input type="text" maxlength="128" class="toolbar__project-name-input" aria-label="New sketch name" value="MY_SKETCH_NAME">
Maybe this is because the sketch is loaded into an iframe? And I would need to access the parent iframe? As you can probably tell I have no experience with any of this, so help would be appreciated, thanks!
