# Heat Mapping Solutions

**URL:** <https://discourse.processing.org/t/heat-mapping-solutions/11424>\
**Category:** Coding Questions\
**Created:** [May 20, 2019, 3:08pm UTC](https://discourse.processing.org/t/heat-mapping-solutions/11424 "2019-05-20T15:08:39Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![davidbambalan](https://avatars.discourse-cdn.com/v4/letter/d/c77e96/32.png) [@davidbambalan](https://discourse.processing.org/u/davidbambalan)\
**Post date:** [May 20, 2019, 3:08pm UTC](https://discourse.processing.org/t/heat-mapping-solutions/11424/1 "2019-05-20T15:08:39Z")

</div>

Are there any solutions to creating a heat map from collected data (i.e., gps location and temperature sensor), a library maybe? And the solution should be in real-time. Thanks!

Here’s the code I found online but I don’t know how to replace the float array with an `ArrayList` (so that I can add more data) and I would like to draw the heat map in a specific place in the sketch (i, e., not the whole window).

```auto
//this pimage will hold our heatmap
PImage mapImage;
PFont font;
float [] _xs;
float [] _ys;
float [] _f;
//an arbitary number of data points
int numDataPoints = 10;

void settings()
{
  fullScreen();
}

void setup() {
  colorMode(HSB);
  //font =loadFont("AppleBraille-14.vlw");
  //textFont (font, 14);
  
  //make some random data points
  _xs = new float[numDataPoints];
  _ys = new float[numDataPoints];
  _f = new float[numDataPoints];

  for (int i=0;i<numDataPoints;i++) {
    _xs[i]=random(width);
    _ys[i]=random(height);
    _f[i]=random(1.0);
  }
 mapImage=makeHeatMap(width, height);
}

void draw() {
  //tint(255, 5);
  image(mapImage, 0, 0);
  
  for (int i=0;i<numDataPoints;i++) {
    text(str(_f[i]), _xs[i], _ys[i]);
  }
}

//returns the a pimage of screen size
PImage makeHeatMap(int w, int h) {
  PImage timg = createImage(w, h, RGB);
  timg.loadPixels();

  loadPixels();
  
  //maxpossible distance between any 2 pixels is the diagonal distance across the screen
  float maxDist = sqrt((w * w) + (h * h));
  float heats[] =new float[pixels.length];
  float x=0.0f;
  float y=0.0f;
  for (int i=0;i<pixels.length;i++) {
    float _hue=getInterpValue( x, y, _xs, _ys, _f);
   
    color aColor=color(255-(255*_hue),255,255);
    timg.pixels[i]= aColor;
    x++;
    if (x>=width) {
      x=0; 
      y++;
    }
  }
  timg.updatePixels();
  return timg;
}

//ITERATES THROUGH ALL THE DATA POINTS AND FINDS THE FURTHERS ONE
float getMaxDistanceFromPoint(float x, float y, float [] xs, float [] ys) {
  float maxDistance=0.0f;
  //get disance between this and each pther point
  for (int i=0;i<xs.length;i++) {
    float thisDist=dist(x, y, xs[i], ys[i]);
    //if this distance is greater than previous distances, this is the new max
    if (thisDist>maxDistance) {
      maxDistance=thisDist;
    }
  }
  return maxDistance;
}

//RETURNS AN ARRAY OF THE DISTANCE BETWEEN THIS PIXEL AND ALL DATA POINTS
float [] getAllDistancesFromPoint(float x, float y, float [] xs, float [] ys) {
  float [] allDistances = new float [xs.length];
  for (int i=0;i<xs.length;i++) { 
    allDistances[i]= dist(x, y, xs[i], ys[i]);
  }
  
  return allDistances;
}

//RETURNS THE ACTUAL WEIGHTED VALUE FOR THIS PIXEL
float getInterpValue(float x, float y, float [] xs, float [] ys, float f[]) {
  float interpValue=0.0f;

  for (int i=0;i<xs.length;i++) {
    float maxDist = getMaxDistanceFromPoint( x, y, xs, ys);
    float [] allDistances = getAllDistancesFromPoint( x, y, xs, ys);
    float thisDistance = dist(x, y, xs[i], ys[i]);
    interpValue += f[i]*getWeight( maxDist, thisDistance, allDistances );
  }
  return interpValue;
}

//THE WEIGHT IS THE VALUE COEFFICIENT (? RIGHT TERM) BY WHICH WE WILL MULTIPLY EACH VALUE TO GET THE CORRECT WEIGHTING
float getWeight(float maxDistance, float thisDistance, float [] allDistances ) {
  float weight=0.0f;
  float firstTerm = pow(((maxDistance - thisDistance )/( maxDistance * thisDistance )), 2);
  float secondTerm=0.0f;
  for (int i=0;i<allDistances.length;i++) {
    secondTerm+=pow(((maxDistance - allDistances[i] )/( maxDistance * allDistances[i] )), 2);
  }
  weight = firstTerm/secondTerm;
  return weight;
}

```

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [May 22, 2019, 11:54pm UTC](https://discourse.processing.org/t/heat-mapping-solutions/11424/2 "2019-05-22T23:54:20Z")

</div>

> [@davidbambalan](#):
>
> to creating a heat map from collected data (i.e., gps location and temperature sensor)

Past related discussion:

- [Complicated Heatmap - data presentation - Processing 2.x and 3.x Forum](https://forum.processing.org/two/discussion/26377/complicated-heatmap-data-presentation)

…if all you want is gps x/y into color.

If you want maps integration, look at unfolding maps:

> **[Unfolding Maps: Unfolding is a library to create interactive maps and...](http://unfoldingmaps.org/)**
>
> Mapping Library For Processing And Java

---

<div class="post-metadata">

**Author:** ![davidbambalan](https://avatars.discourse-cdn.com/v4/letter/d/c77e96/32.png) [@davidbambalan](https://discourse.processing.org/u/davidbambalan)\
**Post date:** [May 23, 2019, 12:19am UTC](https://discourse.processing.org/t/heat-mapping-solutions/11424/3 "2019-05-23T00:19:25Z")

</div>

What I’m trying to achieve is something like [this](https://youtu.be/ccYLb7cLB1I) and I want it to occupy a specific space is the sketch (I’m trying to make a GUI with th heat map only being a part of it).

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [May 23, 2019, 1:47am UTC](https://discourse.processing.org/t/heat-mapping-solutions/11424/4 "2019-05-23T01:47:44Z")

</div>

Well, there are a couple things going on there.

The metaballs visual style can work on any set of x,y points. In Shiffman’s example:

[https://thecodingtrain.com/CodingChallenges/028-metaballs.html](https://thecodingtrain.com/CodingChallenges/028-metaballs.html)

…you can see the algorithm in the draw loop, here:

> <https://github.com/CodingTrain/website-archive/blob/main/CodingChallenges/CC_028_MetaBalls/Processing/CC_028_MetaBalls/CC_028_MetaBalls.pde#L19-L30>

The separate issue is mapping your gps coordinates into the pixel space. Essentially, you need to convert e.g.

> 34.420830, -119.698189

into a pixel coordinate in your map display:

> 10, 10

Then do metaball conversion on those converted coordinates.