Chromatic Aberration Glitch Shader in P5js

Code from video: editor.p5js.org/BarneyCodes/s...
Shaders let you achieve some really amazing looking effects and today we just barely scratch the surface by seeing how to create a glitch effect using shaders in JavaScript and P5js. This effect is also known as chromatic aberration, and it's done by offsetting the three colour channels (red, green and blue), give us that classic glitch look
More resources on shaders:
thebookofshaders.com/
learnopengl.com/Getting-start...
p5js.org/reference/#/p5/shader
p5js.org/reference/#/p5/loadS...
Follow me:
Support the channel: www.youtube.com/@BarneyCodes/...
Twitter: / barneycodes
Reddit: / barneycodes
0:00 Intro
0:50 Drawing onto a second layer
2:21 Shaders in P5js
3:45 Vertex Shader
4:21 Fragment Shader
5:08 Colours in GLSL
5:40 Using our shader program
6:30 Setting uniform variables from P5js
7:06 Changing the output from our fragment shader
7:45 Sampling a texture in the shader
9:10 Calculating a noise value
10:38 Final product
#creativecoding #p5js #javascript

[@BarneyCodes]

What are you going to make look glitchy using this shader method?

[@joncode991]

This is awesome and very helpful. Thanks for sharing!

[@BarneyCodes]

No worries, glad it was useful!

[@OrgStinx]

Thanks! Shaders are really mind-blowing thing.

[@BarneyCodes]

No worries! They're pretty amazing, it seems like there's always something new to learn about with shaders 😂

[@MehranHydary]

Great work! Thank you

[@BarneyCodes]

Thanks! Glad you found it useful!

[@StevesMakerspace]

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.

[@BarneyCodes]

Thanks Steve! I definitely plan on exploring shaders a lot more in the future, I'm only a beginner myself!

[@pixgram]

Thanks for video.
I have a question.
v = pow((v - cutOff) * 1 / (1 - cutOff), 2);
Why did you multiply by 1??

[@BarneyCodes]

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!

[@Robloxtopfive]

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!

[@BarneyCodes]

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

[@grodarh]

Hi. How to change only alpha value of a color to get the effect of blurring the picture?

[@BarneyCodes]

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!

[@grodarh]

@@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);

[@BarneyCodes]

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.