Go back

Mesh Gradient Generator

Link to the application
Mesh Gradient Generator icon

Web Application for Generating Gradient Images.

Its primary function is to enable users to create customized images by adjusting colors, sizes, and other parameters such as noise and distortion.

Using shaders programmed in GLSL, I developed an application that allows real-time image generation. The application leverages the WEBGL API for graphics acceleration through GPU, while p5.js provides interactivity.

Images

Mesh Gradient Generator Screenshots

Generated images

The following images were generated using the application:

Mesh Gradient Example 1 Mesh Gradient Example 2 Mesh Gradient Example 3

Interesting Parts

Use of WebGL

For image generation, I made the decision to use WebGL, as other options like canvas or solely using p5.js are not capable of providing sufficient performance and would be very slow on mobile devices.

Customizable points

Using p5.js, I added draggable markers that enhance the customization experience. When hovering over the image, these points appear, and it's possible to move them to any location.

DistorsiĆ³n de la imagen

Image distortion

An interesting effect I found in mesh gradient images created with design tools like Illustrator was distortion.

This feature was absent in other mesh gradient generation tools, so I implemented a simplex noise texture that distorts the image.

Mesh Gradient with warp

Noise parameters can also be modified in real-time

Native share function

Using the Web Share API, I added the option to share images natively on mobile and desktop devices.

Share function

Deployment

The application is deployed on GitHub Pages and, being a PWA, can be installed on any device and has offline support: Link to the application.

Application source code

The code is open source and available on GitHub: Link to the code on GitHub.