Duration: 0:00

60 views

2

Did you know that you can use GLSL with p5.js? GLSL (OpenGL Shading Language) is a programming language that runs on the GPU, enabling high-speed graphics processing. In this sample, we use p5.Shader in p5.js to apply GLSL shaders.

First, in preload(), we load vertShader and fragShader, and in setup(), we apply the shader to cover the entire screen. In draw(), we pass the resolution and time to the shader, allowing the fragment shader to render a beautiful animation.

This fragment shader is designed to work with SHADERTOY as well. Specifically, it calculates UV coordinates from gl_FragCoord.xy and creates a rotating circular effect. The color changes are adjusted using the cos function, creating seamless animation.

By combining p5.js with GLSL, you can achieve advanced visual effects with simple code!