I have shader files in my p5 project running and displaying perfectly on my local server. The files are preloaded via loadShader because I can access the file path.
However, shader .glsl file paths are not accessible via the Wordpress page editor – only HTML, CSS and Javascript. So, I converted the shader files to variables with temperate literals so they can be read by createShader().
The shaders are working but an error displays in the console as follows:
And, accordingly, the canvas does not display fullscreen (as it does on my local server).
I’m sure this is not a CSS issue since the error in the console exits and refers to “Cannot read property ‘width’ of undefined”. Is there something I’m missing regarding createShader() ?
Alternatively, is there a better way to import shader .glsl files into a p5 project on Wordpress. The code must be accessible via the Body Script on the Wordpress page editor eg. must be readable by Javascript… then I could continue to use loadShader?
I’m afraid that the image is scaled and I can’t read it at all could you post it with the original resolution?
Meanwhile I can only guess what it is happening. I did a gig to inject p5.js in a wordpress site before, and I know this is not straightforward mainly because of the timing of the elements to be loaded. If you make a simple sketch without glsl - for example just a blank canvas (the default on the web editor), would it still give the same error? Or is it specific to createShader?
Thanks for your reply… firstly, I’d prefer to use loadShader within p5 on Wordpress but just haven’t found a way to load the glsl files through the page editor. Also, I’ve extensively searched for a suitable Wordpress plugin – none found.
About your question, on the Wordpress page a simple sketch without glsl (eg. blank canvas only) does not give the same error. The issue seems specific to my code (with the glsl added via temperate literals) and/or when it is calling createShader.
could you post it with the original resolution?