We are about to switch to a new forum software. Until then we have removed the registration on this forum.
Hello As far as i get it i have to rewrite the hole P5 loadShader, if i want to use a shader (with template literals most modern browsers) direct in my Scetch, i write small scetches an load files from external source is mostly a overkill. i looking for this kind of code:
p5.fragFragmentShader["fragSource"]=`
void main () {
gl_FragColor=vec4(1.);
}
`
the problem here is that the _getShader uses window.loadString https://github.com/processing/p5.js/blob/master/src/webgl/p5.RendererGL.js#L132
My Question: How to pass a String direct in my p5 Scetch internal (singel js file). Do i miss something, a Javascript (hack) workaround? Just a missed feature?
Answers
Yes, found it. A pretty simple hack. Problem solved.
Could you share your solution?
Kf
@kfrajer
You can play sound and such things in p5js for the rest you need to learn webgl. Costom shaders in p5js are currently under construction, maybe.
It's a hack. Not the best one.
hit run after the site is loaded
=>comment noLoop in setup=>and with auto-refresh you got a live shader editor :)
http://alpha.editor.p5js.org/nabr/sketches/Sk-hp7slb
@kfrajer updated
http://alpha.editor.p5js.org/nabr/sketches/BJSEMgalW
Yes i push this up again. Sorry guys.
I looking for collaborative work! @GoToLoop @Lord_of_the_Galaxy @kfrajer @HBo @jeremydouglass @cansik
This is what i got so far
http://alpha.editor.p5js.org/nabr/sketches/S1clfrTeb
Hack the error: filelocation unknown
The Conditions: it is not allowed to rewrite the library itself only build in and custom functions in the editor are allowed
I looking for a nice and easy way. if(filelocation ==xy) run();
uff - sorry, but i'm out. that's somewhere beyond my horizont...
@HBo
OpenGL/WebGL tutorial
You have lot of triangles that is your shape
You have a piramide that is your camera
You need to squeeze the pyramide into a rectangle (canvas) that is your screen.
This is done my 3 Matrices (Projection * View * Model) . And one in particular the Projection Matrix (research the web for near, far, clipplane).
The other two are for transformations of your shape. First you move the Shape than you squeeze the pyramide with the shape into a rectangle. (this can become complicated math, but at the very end, as a programer, you just copy +paste the same "nummbers" over and over again )
[some other boring, minimal stuff ] ....
allocate / bind / free the Memory. (for Shapes, for Matrices, more ...args )
you done. :)
I know at the beginning everything might look confusing, but more you focus your self for understand it, than more, you see, how simply everything becomes.
I think processing has great build in functions to explore it, start and change some nummbers
https://processing.org/reference/camera_.html
https://processing.org/reference/frustum_.html
https://processing.org/reference/perspective_.html
https://processing.org/reference/applyMatrix_.html
https://processing.org/reference/PShape.html
https://processing.org/tutorials/p3d/
@nabr i think you misunderstood. i won't give up the whole thing of course. i only refered to your comment above about the unknown filelocation problem ;)
Right now, I'm busy, but I'll help you if the problem still exists till the weekend. Sorry
@HBo Okay, sorry man.
@Lord_of_the_Galaxy would be great, we can make a pull on github, then.
I'm sorry, I've never worked with p5.js, so I'm not the best help I think ;)
But wouldn't it be easy to just convert your text into a base64 data uri and pass it to the
loadShader
method of processing?This might be relevant... a discussion about base64. I am sure there must be a JS version...
https://forum.processing.org/two/discussion/comment/97657/#Comment_97657
Kf
Thank you all for you help!
Now i think their is a porpose P5js don't use Inline Shaders, people could train themselfs for Project Management, Unit Test, Coding Style.
I my case: I'm 18 and i do what i want. I would like to write my own wrapper, but curently my time managment don't allow me to. Provisional name : OhMYGodwitHthisLibraryIwillStaYpRobablyFOrtheRestofMyLifeAProgramerNoob.js
I was just a spontaneos request here, it is not an priority for me right now.
Take care
Best