Nice intro to shaders (I'm guessing here because I'm a total noob here). Would love to see more little examples of what you can do with shaders in p5js.
Hey! In the fragment shader we use the texture2D function with different offsets to get the R, G, and B values and we store them in a vec3 called col. Instead what you could do is read the entire colour (R, G, B, A) of the location using "vec4 col = texture2D(texture, uv);" and then update the alpha of that colour by sampling an offset location using "col.a = texture2D(texture, uv + offset).a;". If you did this though you might want to update the noise we are passing in to be between -1 and 1 (instead of 0 to 1), so that you get offsets both left and right. I hope that helps! Let me know if you have any other questions!
@@BarneyCodes That's exactly what I did at first, but I get the error: " An error occurred compiling the fragment shader:ERROR: 0:29: 'constructor' : too many arguments". The code: vec4 col; col.r = texture2D(texture, uv + offset).r; col.g = texture2D(texture, uv).g; col.b = texture2D(texture, uv - offset).b; col.a = texture2D(texture, uv + offset).a; gl_FragColor = vec4(col, 1.0);
Oh I see! Since our output colour is a vec4 and the colour we've got is now a vec4 (not a vec3 like the original code) we can set the frag colour directly ("gl_FragColor = col;") and not have to pad it out with an extra value to turn the vec3 into a vec4.
That's a very good question 😂 I think when I was figuring out what function to use there I had it written down as 1 over (1 - cutoff) and must have just copied it verbatim!
What a video, thank you so much. I’m porting my Processing (Java) library over to p5.js and the differences between OpenGL and WebGL have really been throwing me off. Processing passes the drawing canvas as a texture to the shader by default, doesn’t require a user defined vertex shader, and allows you to pass an image as a texture directly so it’s a lot easier. But with you explaining the offscreen textures and seeing the slight differences in texture variable names, it’s starting to make sense. Does anyone know of any existing p5.js shader libraries? Don’t want to miss any in my research!
Since learning shaders I've actually gone back the other way, from P5 to Processing and it's amazing how much more straight forward it is! Glad this video could be a good starting point :) I would highly recommend checking out the newest versions of P5 so that you can use the FrameBuffer! I haven't fully investigated it yet but it seems to be a lot more flexible and powerful than the version of shaders I'm using in this video
What are you going to make look glitchy using this shader method?
fascinating stuff
really nice done
many thanks for sharing your knowledge
subbed
Thanks so much, glad you found it useful!
Thanks! Shaders are really mind-blowing thing.
No worries! They're pretty amazing, it seems like there's always something new to learn about with shaders 😂
This is awesome and very helpful. Thanks for sharing!
No worries, glad it was useful!
Nice intro to shaders (I'm guessing here because I'm a total noob here). Would love to see more little examples of what you can do with shaders in p5js.
Thanks Steve! I definitely plan on exploring shaders a lot more in the future, I'm only a beginner myself!
Hi. How to change only alpha value of a color to get the effect of blurring the picture?
Hey!
In the fragment shader we use the texture2D function with different offsets to get the R, G, and B values and we store them in a vec3 called col.
Instead what you could do is read the entire colour (R, G, B, A) of the location using "vec4 col = texture2D(texture, uv);" and then update the alpha of that colour by sampling an offset location using "col.a = texture2D(texture, uv + offset).a;".
If you did this though you might want to update the noise we are passing in to be between -1 and 1 (instead of 0 to 1), so that you get offsets both left and right.
I hope that helps! Let me know if you have any other questions!
@@BarneyCodes That's exactly what I did at first, but I get the error: " An error occurred compiling the fragment shader:ERROR: 0:29: 'constructor' : too many arguments". The code: vec4 col;
col.r = texture2D(texture, uv + offset).r;
col.g = texture2D(texture, uv).g;
col.b = texture2D(texture, uv - offset).b;
col.a = texture2D(texture, uv + offset).a;
gl_FragColor = vec4(col, 1.0);
Oh I see! Since our output colour is a vec4 and the colour we've got is now a vec4 (not a vec3 like the original code) we can set the frag colour directly ("gl_FragColor = col;") and not have to pad it out with an extra value to turn the vec3 into a vec4.
Great work! Thank you
Thanks! Glad you found it useful!
Thanks for video.
I have a question.
v = pow((v - cutOff) * 1 / (1 - cutOff), 2);
Why did you multiply by 1??
That's a very good question 😂 I think when I was figuring out what function to use there I had it written down as 1 over (1 - cutoff) and must have just copied it verbatim!
What a video, thank you so much. I’m porting my Processing (Java) library over to p5.js and the differences between OpenGL and WebGL have really been throwing me off.
Processing passes the drawing canvas as a texture to the shader by default, doesn’t require a user defined vertex shader, and allows you to pass an image as a texture directly so it’s a lot easier. But with you explaining the offscreen textures and seeing the slight differences in texture variable names, it’s starting to make sense.
Does anyone know of any existing p5.js shader libraries? Don’t want to miss any in my research!
Since learning shaders I've actually gone back the other way, from P5 to Processing and it's amazing how much more straight forward it is! Glad this video could be a good starting point :)
I would highly recommend checking out the newest versions of P5 so that you can use the FrameBuffer! I haven't fully investigated it yet but it seems to be a lot more flexible and powerful than the version of shaders I'm using in this video