How to Change Image Transparency Using Ultrasonic Sensor

Processing Electronics (Arduino, etc.)
1

Hi everyone

I’m trying to make a digital poster that changes when you get closer and farther away from it using an ultrasonic sensor and arduino. My distance measuring code works, but I can’t seem to get the two images in my processing code to properly fade into each other as I increase or decrease distance.

This is the code I’m using

import processing.serial.*;  
PImage PB_100;
PImage PB_CB;
Serial myPort;  
String data="" ;
int distance;
float transparency = 1;
float increase = 2;
int white = 255;
 
 
void setup() {
  size(595, 842); // size of processing window
  PB_100 = loadImage("PB_100.png");
  PB_CB = loadImage("PB_CB.png");
  
  PB_100.resize(595, 842);
  PB_CB.resize(595, 842);
  
  background(255);
  
 
  myPort = new Serial(this, "COM7", 9600);
  myPort.bufferUntil('\n');
}
 
void draw() {
  
  println(distance);
  image(PB_100, 0, 0); // 100
  
  tint(white, transparency);
  image(PB_CB, 0, 0); // CB
  
  transparency = transparency + increase;
  
  if (distance >= 100) {
    
    if (transparency <= 0) {   
    increase = increase * -1;
  }
  }
  
  if (distance <= 99) {
    
    if (transparency >=255) {   
    increase = increase * -1;
  }
  }
}

void serialEvent(Serial myPort) {
 
  data=myPort.readStringUntil('\n');
  distance=int(trim(data));
}

At the moment, the images just automatically fade into each other once and they don’t loop. It isn’t triggered by the distance at all. Can someone please tell me what I’m doing wrong and how to fix it?

Thanks in advance!

1 Like
2

You need to call background(0) in draw().

Kf

PImage PB_100;

String data="" ;
int distance;
float transparency = 1;
float increase = 2;
int white = 255;


void setup() {
  size(595, 842); // size of processing window
  PB_100 = loadImage("img.jpg");
  PB_100.resize(width, height);
  background(255);
}

void draw() {
  background(0);
  transparency=map(mouseX, 0, width, 0, 255);
  tint(white, transparency);
  image(PB_100, 0, 0); 

}
1 Like
3

Hi thanks for your reply!

is there a way to do this using the distance sensor though not the mouse position?

4

The reason I use the mouse is because you can run the code independent of a sensor. After you are convinced the proof of concept works, you can change the line above to adapt it to your sensor. You need three values from your sensor: the actual value you read from your sensor, and the range of operation from your sensor. Then you can use the map() function to define the transparency, exactly the same way I did above with the mouse.

Kf

1 Like
5

Okay so the value I read from my sensor would be the distance. What’s the range of operation exactly? Sorry it’s my first time doing this :sweat:

6

The range of operation depends on the sensor. You can start by looking at the technical specs of your sensor online or you can share it here. For example, if a sensor is 10 bit, it means that the range is from 0 to 2^10-1=1023.
You can also get this value empirically by reading the sensor values and testing the minimum and maximum value you can get from it. I prefer to stick to actual specs for accuracy but empirical values would work in your case as well (in case you do not know the model of your sensor, for instance).

Kf

7

ah okay would it be this then?

Serial.begin(9600);  // initialize serial connection so that we could print values from sensor.

This is from the sensor’s library on arduino

maximum distance of my sensor is 500cm

8

okay it works now I just put in the maximum distance in cm I want it to read

Thank you so much!

9

The line you shared above is the line used to connect to your arduino and it is not related to this discussion.

500cm is the value used to translate the digital signal into the spatial domain. The ultrasonic sensor will give you a digital value in a range. This digital value gets translated to spatial values through a calibration. For instance, your sensor could be a 10 bit ADC which outputs values from 0 to 1023. This technically means that the min value of your sensor translate to 0cm in space and your maximum value translates to 500cm. Notice you can use the map() function for this operation. This is called a calibration from the digital output of your sensor to the physical domain.

Likewise, you can “calibrate” your sensor to transparency, where the minimum value is 0 transparency (100% opaque) and 255 is full transparency. For that I would use:

 transparency=map(readValue, SENSOR_MIN_VALUE, SENSOR_MAX_VALUE, 0, 255);

The readValue comes from your sketch. The min and max values come from your sensor. You can run your sketch and observe what values you get when an object is close to your sensor and what is the maximum value you get when you place this object further away from the sensor.

Kf

2 Likes
10

oh okay thanks for the clarification. It works now thank you so much again!