Force Sense and Data Visualization in Processing

Albert Hodo — Tangible User Interface. Fall 2022

Prompt:Create an interesting visualization on your computer that is influenced by the input from the sensors you have (pot, photocell, FSR, or a combination of them)

Components Used

1. Bread Board
2. Arduino Uno
3. Jump Wires
4. 2 Resisters
5. Force Sensor
6. LED

Process

I took input from the Froce sensor and mapped it to the brighness of the LED. Then I connected the arduino to Processing and created circles based on the number of touches the Force sensor reads. Each circle’s size is directly proportionate to the pressure the sensor reads, the color and position of each circle is chosen at random as well.

Code

import processing.serial.*;
import cc.arduino.*;
Arduino arduino;
// Change this pin number to match where you actually have an LED in your
// circuit
int ledPin = 11;
// Change this pin number to match where you actually have a pot in your
// circuit. Note that pin 0 is the same as pin A0, pin 1 is same as A1, etc.
int potPin = 0;
void setup() {
  size(1920, 1080);
  noStroke();
  background(0,0,0);
// Prints out the available serial ports.
  println(Arduino.list());
  
  // Modify this line, by changing the "0" to the index of the serial
  // port corresponding to your Arduino board (as it appears in the list
  // printed by the line above).
  arduino = new Arduino(this, "/dev/cu.usbmodem143101", 57600);
  
  // Alternatively, use the name of the serial port corresponding to your
  // Arduino (in double-quotes), as in the following line.
  //arduino = new Arduino(this, "/dev/tty.usbmodem1411", 57600);
    
  arduino.pinMode(ledPin, Arduino.OUTPUT);
}
void draw() {  
  // We can control the Arduino from Processing
  int potVal = arduino.analogRead(potPin);
  int ledBrightness = int(map(potVal, 0, 5, 0, 255));
  arduino.analogWrite(ledPin, ledBrightness);
  
  // We can also draw to the Processing window
  // setting the background to black (red = 0, green = 0, blue = 0)
  
  // pick up the white paintbrush (red = 255, green = 255, blue = 255)
  // the next shape we draw will have white color fill
  fill(255, 255, 255);
  float x= random(width);
  float y= random(height);
// Draw a circle at the center of the window, whose size changes with the potVal
  fill(random(256), random(256), random(256));
  
  ellipse(x, y, potVal/3, potVal/3);
  //for(float cir=size;cir>=0;circle)
}

Demo

Image

Arduino Setup