Complicated Heatmap - data presentation

alivewire

Hi, I'v recently post about problem with drawing heatmaps, but I figured out that I have to present more information on two images. So I have data from user who was using Oculus. I have his position on floor (X, Y for every second of research) and i have his head Yaw rotation (also saved for every second of research ). I have to present this data with heatmaps - showing where he was standing most of time and where he was looking for the most of time

Chrisir

Not good to start a new thread on this

Your table above looks like x,y,YAW, there are 3 columns

Do you want the heatmap to be seen from above or from the side?

Probably the first

But in which way do you want to appear the yaw? Like 60 centimeters before his eyes in the right direction ?

koogs

why not add the pictures to the existing thread?

alivewire

Sorry guys I thouth it would be beter to start new thread becuase this is more complicated than idea presentent before. Apoligize for my mistake.

Chrisir:

Your table above looks like x,y,YAW, there are 3 columns -> Yes

Do you want the heatmap to be seen from above or from the side? -> from above would be better

But in which way do you want to appear the yaw? Like 60 centimeters before his eyes in the right direction ? -> I think 60 centimeters would be good.

koogs

look at hsv colormode.

have an array of positions (like pixels?). increment everywhere that is visited / viewed. use this array to determine, using hsv, the colour drawn to the screen.

(changing the hue of an hsv colour changes the colour. changing rgb colours is much more fiddly because you have to worry about the red, green and blue components)

koogs

it's probably not enough to increment a single pixel for the position / view, you might need to 'draw' a circle.

Chrisir

kfrajer had a nice solution with HashMap in the other thread iirc

alivewire

Is there any possibility that you can help me to code this? I am new in programing :< I understand your advices but I have no idea how to change it to code :(

Chrisir

No, let’s just start working with kfrajers code

What don’t you like about it? Then we can start working from there

koogs

that other thread (now closed): https://forum.processing.org/two/discussion/26371/how-to-create-a-heatmap-from-list-of-x-y-points

alivewire

Chrisir -> first of all i don't know how to convert it into circles not ractangles. I have second problem that i don't know how to covert this into reading my data not juz random items that cover the whole image

alivewire

I am trying to work on this code: https://www.openprocessing.org/sketch/151244 Because the final result is more similar to what i need.

I made something like this but it doesn't show what i need:< Sorry for lame questions but I am not a programmer;<

int xbound = 500;
int ybound =500;

final static PVector[] vectors = new PVector[5];

//Change to alter the rate at which visited cells turn red. 1=very slowly, 255=instantly
int changerate=18;
void setup() {
  size(500 ,500);
  background(0,0,255);
  noLoop();
  randomSeed(hour()+minute()+second()+millis());
  frameRate(300);
 }

int xval=int(xbound/2);
int yval=int(ybound/2);
int [] [] MyArray = new int [xbound] [ybound];

void draw() {
// my X and Y values
vectors[0] = new PVector(33,60);
vectors[1] = new PVector(122,90);
vectors[2] = new PVector(113,30);
vectors[3] = new PVector(44,344);
vectors[4] = new PVector(44,63);

for(int i=0;i<5;i++){
  float x=vectors[i].x;
  float y=vectors[i].y;
  if (x>0.5 && xval<xbound && xval>=0) {
     xval++;
  }
  if (y<=0.5 && xval<=xbound && xval>0) {
    xval--;
  }
    if (x>0.5 && yval<ybound && yval>=0) {
     yval++;
  }
  if (y<=0.5 && yval<=ybound && yval>0) {
    yval--;
  }
  MyArray[xval][yval]=min(MyArray[xval][yval]+changerate,255+changerate);
  stroke(MyArray[xval][yval]-changerate,255+changerate-MyArray[xval][yval],0);
  ellipse(xval, yval, 1, 1);

}
}

alivewire

Okey so i have started form the begining because changing code is to hard for me

final static int numVars = 179;
final static float[] varsX = new float[numVars];
final static float[] varsY = new float[numVars];

void setup() {
  size(1024 ,1024);
  background(0,0,255);
  noLoop();
  frameRate(300);
 }

void draw() {
  String[] dataX = loadStrings("dataX.txt");
  String[] dataY = loadStrings("dataY.txt");
  for ( int i=0; i!=numVars; varsX[i] = float(dataX[i++]) );
  for ( int i=0; i!=numVars; varsY[i] = float(dataY[i++]) );


  //println(varsX[0]);
  stroke (0,155,0);
  fill(255,0,0);

  for(int i=0;i<=numVars-1;i++){
    ellipse((512+varsX[i]), (512-varsY[i]),5,5);
    println((512+varsX[i]));
    println((512+varsY[i]));
  }
}

Can samoeone Help to :

1 image this visualisation bigger and more readable 2 What is the easiet way to now add to this summaring colours from green to red?

here i uplode files https://drive.google.com/drive/folders/15afpXQCt7t3J7OSK1Xt_pdbZoYbPMY2S?usp=sharing

koogs

String[] dataX = loadStrings("dataX.txt");
String[] dataY = loadStrings("dataY.txt");

don't load data in draw. this is executing 60 times a second. or trying to.

Okey so i have started form the begining because changing code is to hard for me

...

alivewire

...

Don't be ironic :) I am not a programmer and I have any experience:)

don't load data in draw. this is executing 60 times a second. or trying to.

Good to know, thank you

jeremydouglass

You can also use PixelFlow to generate fields of values.

• http://thomasdiewald.com/processing/libraries/pixelflow/

Chrisir

I didn't have time to finish this (your data set is not right for this)

but based on kfrajers code I calculated for each point where he looks at and tried to bring this into an hashmap

//HeatMap demonstration using a hash map

//REFERENCE:   https : // forum.processing.org/two/discussion/26371/how-to-create-a-heatmap-from-list-of-x-y-points#latest     
//             https : // forum.processing.org/two/discussion/26377/complicated-heatmap-data-presentation#latest

//By Kf @ 15-Feb-2018

//INSTRUCTIONS:
//         *--  <a href="/two/profile/Input">@Input</a> a data set that is made of PVector values (Like an ArrayList container
//         *--         Do this by using something similar to addOrUpdate() provided below

//         *--  
//         *--  The software will generate a heat map:
//         *--  
//         *--  The code will compute the data's max and min values from the x and y input values
//         *--  Then it populates a hashTable defined by coordinates(key) and frequency(value)
//         *--  The key, which is a PVector) is mapped against the sketch's width and height
//         *--  The value is mapped between min and max color

//===========================================================================
// IMPORTS:
import java.util.Comparator;
import java.util.Map;
import java.util.Collections;

//===========================================================================
// FINAL FIELDS:
final color MINCOL=color(255, 10, 10);
final color MAXCOL=color(10, 10, 255);

//===========================================================================
// GLOBAL VARIABLES:
ArrayList<PosWithYaw> data;
HashMap<PVector, Integer> table;

int current=0;

float[] range;
float minInt;
float maxInt;

//===========================================================================
// PROCESSING DEFAULT FUNCTIONS:

void settings() {
  size(600, 600);
}

void setup() {
  // noLoop();
  textAlign(CENTER, CENTER);
  rectMode(RADIUS);

  noStroke();

  //INIT data set
  data=new ArrayList<PosWithYaw>();

  String[] loadedFile=loadStrings("data1.txt");
  println (loadedFile.length
    +" lines found.\n"); 

  for (int i=0; i<loadedFile.length; i++) {
    String[] line = split(loadedFile[i], " "); 
    if (line.length==3) {
      data.add(new PosWithYaw(
        float(line[0])*1+100, 
        float(line[1])*1+100, 
        float(line[2])    
        ));
    }//if
  }//for

  for (PosWithYaw pwy : data) {
    pwy.printMe();
    pwy.getResultingPos();
  }
  println("\n\n");

  table=new HashMap<PVector, Integer>();

  //TESTING
  //============================================
  //PVector PVEC=new PVector(50, 50);
  //addOrUpdate(PVEC);
  //addOrUpdate(new PVector(1, 0));
  //addOrUpdate(PVEC);
  //addOrUpdate(PVEC);
  //println(table.get(PVEC));

  //for (Map.Entry me : table.entrySet()) {
  //  print(me.getKey() + " is ");
  //  println(me.getValue());
  //}
  //============================================


  //FIND min and max of X and Y components of input data set
  range=getRange(data);

  //FEED data to hashMap
  for (PosWithYaw v : data) {
    addOrUpdate(v);
  }

  ////NEXT prints content of hashMap
  //for (Map.Entry me : table.entrySet()) {
  //  print(me.getKey() + " is ");
  //  println(me.getValue());
  //}

  minInt=Collections.min(table.values());
  maxInt=Collections.max(table.values());

  println("Repport ranges:");
  println(range);
  println("Report min and max intensities = ", minInt, maxInt);

  background(0);
  //for (Map.Entry me : table.entrySet()) {
  //  PVector coord=(PVector)me.getKey();
  //  Integer val=(Integer)me.getValue();

  //  float px=map(coord.pos.x, range[0], range[1], 0, width);
  //  float py=map(coord.pos.y, range[2], range[3], height, 0);
  //  color c=lerpColor(MINCOL, MAXCOL, map(val, minInt, maxInt, 0, 1));
  //  fill(c);
  //  println(px, py, val);
  //  //rect(px, py, width/(1.0*range[1]-range[0]), height/(1.0*range[3]-range[2]));
  //  ellipse(px, py, width/(1.0*range[1]-range[0]), height/(1.0*range[3]-range[2]));
  //}
}

void draw() {

  noLoop();

  background(0); 

  fill(255, 0, 0); 
  stroke(255, 0, 0);

  // loop over all items: 
  for (PosWithYaw v : data) {
    // v.display();

    // We can access values by their key
    int val = (Integer)table.get(v.resultingPos);

    float px=map(v.resultingPos.x, range[0], range[1], 30, width-30);
    float py=map(v.resultingPos.y, range[2], range[3], height-30, 30);
    color c=lerpColor(MINCOL, MAXCOL, map(val, minInt, maxInt, 0, 1));

    fill(c);
    println(px, py, val);
    //rect(px, py, width/(1.0*range[1]-range[0]), height/(1.0*range[3]-range[2]));
    noStroke(); 
    ellipse(px, py, 14, 14);
  }
}

//===========================================================================
// OTHER FUNCTIONS:

void addOrUpdate(PosWithYaw pi) {  
  if (table.containsKey(pi.resultingPos)) 
    println("Found");
  table.put(pi.resultingPos, table.containsKey(pi.resultingPos) ?  table.get(pi.resultingPos)+1 : 1);
}

float[] getRange(ArrayList<PosWithYaw> in) {

  float minx=PApplet.MAX_INT;
  float maxx=PApplet.MIN_INT;
  float miny=PApplet.MAX_INT;
  float maxy=PApplet.MIN_INT;

  for (PosWithYaw pp : in) {
    if (pp.resultingPos.x<minx) minx=pp.resultingPos.x;
    if (pp.resultingPos.y<miny) miny=pp.resultingPos.y;
    if (pp.resultingPos.x>maxx) maxx=pp.resultingPos.x;
    if (pp.resultingPos.y>maxy) maxy=pp.resultingPos.y;
  }

  float[] r = {minx, maxx, 
    miny, maxy};
  return r;
}

// ===============================================================

class PosWithYaw {

  PVector pos; 
  float yaw; 
  PVector resultingPos; 

  // constr
  PosWithYaw(  float x_, float y_, float yaw_  ) {
    pos = new PVector(x_, y_);
    yaw=yaw_;
  }// constr

  void printMe() {
    println (pos.x
      +"\t, "
      +pos.y
      +" looks at "
      + yaw);
  }//method

  void getResultingPos() {
    // pos of the objects we look at 
    float newX  = pos.x  + cos (radians(yaw)) * 60;
    float newY  = pos.y  + sin (radians(yaw)) * 60;
    resultingPos = new PVector(  round(newX), round(newY)  );
  }

  void display() {
    fill(255, 0, 0);
    text(yaw, 
      pos.x, pos.y-13);
    ellipse (pos.x, pos.y, 8, 8);
    line(pos.x, pos.y, resultingPos.x, resultingPos.y);
  }//method

  void displayOld() {
    ellipse (pos.x, pos.y, 8, 8);
    text(yaw, 
      pos.x, pos.y-13);
    pushMatrix();
    translate(pos.x, pos.y);
    rotate(radians(yaw));
    line(0, 0, 60, 0);
    popMatrix();
  }//method
  //
}//class
//