# Processing + Arduino Force Sensor Visualizing

**URL:** <https://discourse.processing.org/t/processing-arduino-force-sensor-visualizing/30459>\
**Category:** Electronics (Arduino, etc.)\
**Created:** [June 3, 2021, 2:18am UTC](https://discourse.processing.org/t/processing-arduino-force-sensor-visualizing/30459 "2021-06-03T02:18:06Z")\
**Posts on this page:** 1\
**Showing post:** 3

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [June 4, 2021, 2:29am UTC](https://discourse.processing.org/t/processing-arduino-force-sensor-visualizing/30459/3 "2021-06-04T02:29:16Z")

</div>

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](https://www.sensitronics.com/tutorials/fsr-matrix-array/page3.php)

I would change the Arduino code directly to [CSV](https://en.wikipedia.org/wiki/Comma-separated_values) data terminated with a line feed.  
Later you can optimize it if required.

Data sent with leading zeroes:  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/1a34587d8ef38b635a5515ca8a617788d2326468.png)

> **Simulated Data Code \< Click here to open!**
>
> ```auto
> // 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:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/a9913de7bc7afff117ff28f31ae2c1c476767248.png)

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

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/e0743141158c2a37ac4f9ced765e54010be62088.png)

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+](https://processing.org/reference/libraries/serial/Serial_readStringUntil_.html)_

`:)`

---

_[View the full topic](https://discourse.processing.org/t/processing-arduino-force-sensor-visualizing/30459)._