Processing + Arduino Force Sensor Visualizing

[glv]

Hello @frzsl,

I don’t have the sensor so I simulated the data that it would send from the example in the code in the links you provided.

Reference for Arduino code:
https://www.sensitronics.com/tutorials/fsr-matrix-array/page3.php

I would change the Arduino code directly to CSV data terminated with a line feed.
Later you can optimize it if required.

Data sent with leading zeroes:

Simulated Data Code < Click here to open!

// Simulate Formatted Data from Sensor
// v1.0.0
// GLV 2021-06-03

//https://www.sensitronics.com/tutorials/fsr-matrix-array/page3.php
//https://www.sensitronics.com/tutorials/fsr-matrix-array/page4.php

String [] data;
int size = 16;
int dia = 50;

public void settings() 
  {  
  size(16*dia, 16*dia, P3D); 
  }

public void setup() 
  {
  data = new String [size];
  
  //Generate random data to simulate what is sent from Arduino
  println("Data from Arduino (String):");
  for (int row = 0; row<size ; row++)
    {
    String str = "";
    for (int col = 0; col<size ; col++)
      {
      int num = int(random(256)); // Random from 0 to 255
      String num1 = str.format("%" +  4 + "s", str(num)); // Pad with leading spaces
      //println(num1);
      
      str += num1;
      //println(str);
      }
     str += '\n';
     data[row] = str;
     print(str);
    }
    
  println();  
    
  // Removes spaces and replaces with a ','
  println("CSV Data from Arduino (String):");
  for (int row = 0; row<size ; row++)
    {
    String temp = data[row];
    temp = temp.replaceAll("   ",",");
    temp = temp.replaceAll("  ",",");
    temp = temp.replaceAll(" ",",");
  
  // Removes a ',' if it is first character  
    if (temp.charAt(0) == ',')
      {
      temp = temp.substring(1);
      }
    print(temp);
    data[row] = temp.trim(); // Trim the '/n' from the stirng
    }
  }

public void draw() 
  {
  background(0);
  
  // Draws a grid and adds color based of "force" value
  for(int row=0; row<size; row++)
    {
    for(int col=0; col<size; col++)
      {
      int [] data2 = int(split(data[row], ","));
      ellipseMode(CORNER);
      fill(data2[col]);
      circle(col*dia, row*dia, dia);
      }
    }
}

This is what I generated:

This is a 3D map (code not provided):

Once you get the data to Processing you can visualize any way you can imagine.
A 16x16 grid best represents this and I used color and height for the force.

Processing Serial readStringUntil() reference:
Serial::readStringUntil() \ Language (API) \ Processing 3+

:)