Share My Creation [B4X] B4XMeshGradient Engine.

A modern engine for generating mesh gradients; it allows for generating gradients directly within the application or using the resulting bitmap. Size, colors, and shapes (points) are fully parametric.

It also offers the option to create an animated mesh gradient using a JSON file containing the animation data.

It is part of a mesh gradient editor that I will be releasing soon.

The following gradient examples are generated using four points as parameters; it is possible to define additional points and colors, as well as the type of algorithm to be used.

Simple use of the mesh gradient engine:

Private Sub Button1_Click
    Dim MeshGradient As B4XMeshGradient
    MeshGradient.Initialize
 
    Dim Width As Int = B4XImageView1.mBase.Width
    Dim Height As Int = B4XImageView1.mBase.Height
 
    MeshGradient.AddPoint(Width * 0.20, Height * 0.25, RandomColor)
    MeshGradient.AddPoint(Width * 0.75, Height * 0.20, RandomColor)
    MeshGradient.AddPoint(Width * 0.80, Height * 0.80, RandomColor)
    MeshGradient.AddPoint(Width * 0.15, Height * 0.85, RandomColor)

    Dim MeshBitmap As B4XBitmap = MeshGradient.Generate(Width, Height)
 
    B4XImageView1.Clear
    B4XImageView1.Bitmap = MeshBitmap
    B4XImageView1.CornersRadius = 16
    B4XImageView1.Update
End Sub

Ex. dark colors:

Ex: Windows Colors.

EX. Light pastel colors

Bitmap:

References:

Mesh Gradient Generator - CSS Mesh Maker

Create beautiful, organic web backgrounds with our free Mesh Gradient Generator. Generate complex gradients, customize mesh points, and export CSS code.

colorffy.com

CSS mesh gradients generator: Mesher Tool by CSS Hero

A Free tool to create beautiful mesh gradients only with CSS code. Use your own colors or randomly generated ones to build the trendiest CSS gradients of 2023

csshero.org

Photo Gradient

Generate beautiful gradients from colors or from a photo

photogradient.com

Ref. Animation:

Free Animated Mesh Gradient Generator | Super Designer

Create smooth looping animated mesh gradient backgrounds. Choose from 4 animation styles, adjust speed, amplitude, spread and blur. Export as PNG, JPG, or WebM video. Free, no signup.

superdesigner.co

Important:
Remember that I do not use external libraries, only b4X code (cross-platform).

Note:
This class or engine was developed in accordance with what was requested or required here.

modern gradients

Just out of curiosity, how can we have modern gradients in b4x?

www.b4x.com

Regards.

 

[TILogistic]

Note: Three other gradient-based shape algorithms.

For all of them, it is possible to vary the shapes and apply noise algorithms.

 

[TILogistic]

mesh gradient APIS Android and IOS.

Gradientes de malla | Jetpack Compose | Android Developers

En este documento, se describe cómo usar los gradientes de malla en Jetpack Compose para crear transiciones de color complejas y multidireccionales.

developer.android.com

MeshGradient | Apple Developer Documentation

A two-dimensional gradient defined by a 2D grid of positioned colors.

developer.apple.com

There are no APIs for JavaFX; the task is to perform a simulation CSS.