Complicated Heatmap - data presentation

edited February 2018 in How To...

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

Answers

  • 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 ?

  • why not add the pictures to the existing thread?

  • edited February 2018

    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.

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

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

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

  • 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 :(

  • No, let’s just start working with kfrajers code

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

  • 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

  • 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);
    
    }
    }
    
  • edited February 2018

    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

  • 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

    ...

  • edited February 2018

    ...

    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

  • You can also use PixelFlow to generate fields of values.

  • Answer ✓

    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
    //
    
Sign In or Register to comment.