Dynamic Shader Animation with GLSL and p5.js

website: Shader Prototype

Fall 2023
Creative Technology

Indivisual work
github source code: Dynamic Shader Animation with GLSL and p5.js


GLSL + p5.js

Abstract

In this project, I explored the powerful capabilities of GLSL (OpenGL Shading Language) and the p5.js library to create a dynamic animation. The goal was to construct an engaging visual experience characterized by changing shapes and colors that evolve over time. This interactive piece is not just a display of color and form but also a demonstration of the intricate relationship between mathematics, programming, and art.

Shader Programming with GLSL
At the heart of this project lies the GLSL shader, a type of programming used specifically for graphics rendering. GLSL allows for the direct control of the graphics pipeline, enabling the creation of sophisticated visual effects directly on the GPU. In this project, the shader manipulates pixel colors and positions to generate the evolving patterns seen in the animation.

Interactive Mouse Movement
A key feature of the animation is its responsiveness to mouse movement. This interactivity is achieved by passing the mouse coordinates to the shader. The shader then adjusts certain aspects of the animation based on these coordinates, creating a dynamic interaction between the user and the visual display.

Time-Based Evolution
The animation changes over time, thanks to the integration of a time variable in the shader code. This variable, which increases incrementally, alters the visual output, ensuring that the shapes and colors are in a constant state of flux, making each moment of the animation unique.