Hi @nswamy14,

Thank you for this amazing library!

It would be really cool if you could review this PR.
This one introduces a new disableCircularFalloff configuration option that enables different colors for different value ranges based on gradients.

Use case for my request

We would like to visualize multiple heatmaps at the same time by creating a combined/composite heatmap. Ultimately, we will examine the value of each point to determine which heatmap contributes to the intensity and how different heatmaps overlap or combine.
For example, in football analytics, we may want to visualize the activity heatmaps of two teams:

• Team 1 → shown in blue
• Team 2 → shown in red

By overlaying them, areas dominated by one team appear in their team’s color, while overlapping areas blend (e.g., purple if blue and red overlap).

Changes Made

• Added disableCircularFalloff?: boolean to HeatmapConfig interface.
• Added setDisableCircularFalloff(boolean) method for runtime configuration.
• When enabled:
  • points render with uniform intensity instead of the default circular falloff effect.

    uniform bool u_disableCircularFalloff;
    
    // Conditional intensity calculation
    if(u_disableCircularFalloff) {
        // Uniform intensity - no circular falloff
        alpha = ((v_i - u_min) / deno) * u_intensity;
    } else {
        // Default circular falloff
        alpha = ((v_i - u_min) / deno) * u_intensity * (1.0 - sqrt(r));
    }
    

  • the blending equation changes from FUNC_ADD to MAX to ensure that overlapping points display the maximum value rather than additive blending.

    if (this.disableCircularFalloff) {
        ctx.blendEquation(ctx.MAX);  // Use maximum value for overlapping points
    }
    

Usage

We want to render two heatmaps on the same scale.

• First heatmap → values range from 127 down to 0 (color intensity decreases as the value decreases).
• Second heatmap → values range from 128 up to 255 (color intensity increases as the value increases).

// Configuration
const heatmap = new HeatmapRenderer(container, {
    min: 0,
    max: 255,
    gradient: [
        { color: [0, 0, 255, 1], offset: 0.0 },
        { color: [0, 255, 0, 1], offset: 0.5 },
        { color: [255, 0, 0, 1], offset: 1.0 }
    ],
    disableCircularFalloff: true
});

// Runtime modification
heatmap.setDisableCircularFalloff(true);

Hope this works for you!

Thanks,
Ken