gpolak / LFHeatMap

Extremely fast iOS heat maps
MIT License
391 stars 49 forks source link

Is there a way to change colors? #5

Closed janngobble closed 9 years ago

janngobble commented 9 years ago

I don't understand the rgba color method calculations you use...but it looks like red represents light population, and it bursts into yellow (and even white?) the more "weight" coordinates have...

I am replacing the heatmap in my app with this one...and wish to keep visual compatibility.

Is it possible to go green means light population, yellow means medium, and red is heaviest? I see you are using "floatdensity" as a trigger for the color, but don't exactly know what that is doing since my understanding of rgba is lacking.

Thanks in advance for answering all my questions :)

gpolak commented 9 years ago

in LFHeatMap.m look for a comment market // Step 3. The rgba array is computed here, you can play with the values here to get any color scheme you like.

janngobble commented 9 years ago

Solved! My issue when working on this is two fold... a: I did not know what the formula you were using with the colors did... and b: when I did look at it closely I did not realize I should've applied the "floatDensity" to each NEWly created color prior to creating the image in order to effectively scale the color (radiate it) ... So, here is my addition:

Step 3: (after // Normalize density to 0..1)

           floatDensity = (float)density[i] / (float)maxDensity;
            if (floatDensity >= 0.90)
            {
                // Red component
                rgba[indexOrigin] = 228 * floatDensity;

                // Green component
                rgba[indexOrigin+1] = 0 * floatDensity;

                // Blue component
                rgba[indexOrigin+2] = 0 * floatDensity;

            }
            else if (floatDensity >= 0.75)
            {
                // Red component
                rgba[indexOrigin] = 249 * floatDensity;

                // Green component
                rgba[indexOrigin+1] = 137 * floatDensity;

                // Blue component
                rgba[indexOrigin+2] = 82 * floatDensity;
            }
            else if (floatDensity >= 0.60)
            {
                // Red component
                rgba[indexOrigin] = 253 * floatDensity;

                // Green component
                rgba[indexOrigin+1] = 192 * floatDensity;

                // Blue component
                rgba[indexOrigin+2] = 62 * floatDensity;
            }
            else if (floatDensity >= 0.45)
            {
                // Red component
                rgba[indexOrigin] = 255 * floatDensity;

                // Green component
                rgba[indexOrigin+1] = 216 * floatDensity;

                // Blue component
                rgba[indexOrigin+2] = 22 * floatDensity;
            }
            else if (floatDensity >= 0.30)
            {

                // Red component
                rgba[indexOrigin] = 255 * floatDensity;

                // Green component
                rgba[indexOrigin+1] = 237 * floatDensity;

                // Blue component
                rgba[indexOrigin+2] = 56 * floatDensity;
            }
            else
            {
                // Red component
                rgba[indexOrigin] = 244 * floatDensity;

                // Green component
                rgba[indexOrigin+1] = 226 * floatDensity;

                // Blue component
                rgba[indexOrigin+2] = 135 * floatDensity;
            }

            rgba[indexOrigin+3] = floatDensity * 255;