Heat Mapping Solutions

Processing Coding Questions
1

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).

//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;
}
2

Past related discussion:

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

If you want maps integration, look at unfolding maps:

3

What I’m trying to achieve is something like this 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).

4

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

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

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.