Changing Image transparency

Processing Electronics (Arduino, etc.)
1

I’m working on a project where image transparency is scaled with the viewers’ proximity to an Arduino ultrasonic sensor. I’ve been following a tutorial that scales image size with proximity. Here is my code so far.

Arduino:

#include <NewPing.h>

// ---------------------------------------------------------------------------
// Example NewPing library sketch that does a ping about 20 times per second.
// ---------------------------------------------------------------------------

#include <NewPing.h>

#define TRIGGER_PIN  9  // Arduino pin tied to trigger pin on the ultrasonic sensor.
#define ECHO_PIN     10  // Arduino pin tied to echo pin on the ultrasonic sensor.
#define MAX_DISTANCE 243 // Maximum distance we want to ping for (in centimeters). Maximum sensor distance is rated at 400-500cm.

NewPing sonar(TRIGGER_PIN, ECHO_PIN, MAX_DISTANCE); // NewPing setup of pins and maximum distance.

void setup() {
  Serial.begin(115200); // Open serial monitor at 115200 baud to see ping results.
}

void loop() {
  delay(100);                     // Wait 50ms between pings (about 20 pings/sec). 29ms should be the shortest delay between pings.
  //Serial.print("Ping: ");
  Serial.write(sonar.ping_cm()); // Send ping, get distance in cm and print result (0 = outside set distance range)
  //Serial.println("cm");
}

Processing:

import processing.serial.*; //importing serial lib
PImage diy; //declaring 
Serial arduino;
int serialIn;
int val=0;

void setup()
{
  size(800,800,P2D);
  //fullScreen(P2D);
  printArray(Serial.list());
  arduino = new Serial(this,Serial.list()[1],115200);
  diy= loadImage("testface1.jpg");
  imageMode(CENTER);
  diy.resize(500,500);
  
}
void draw()
{
  background(0);
  image(diy,width/2,height/2,val,val);
  
  
  if(arduino.available()>0)
  {
    serialIn=arduino.read();
    println(serialIn);
  }
  val=int(map(serialIn,0,50,100,500));
}

I know I can change transparency with tint- tint(255, 126)- and changing the second value. I just need to figure out how to substitute the size scaling with tint.

Any help would be greatly appreciated.

1 Like
2

Hi @wom1998,

First of all, when posting code, allways format it with </>, that way is easy for us to read.

Following your code you:

  • Save your Arduino value in a variable called serialIn
  • Maped serialIn into another variable, an int called val.

So, if you want to use it as a transparency value you will have to put the variable val as a parameter in the tint() function.

If you look in the reference of tint() you can see this:

tint(rgb, alpha)
rgb     int: color value in hexadecimal notation
alpha	float: opacity of the image

So, you know now that the second argument in the tint() function correspond to alpha channel or transparency, and you can put your variable in the function:
tint(255, val);

As the reference say:

To apply transparency to an image without affecting its color, use white as the tint color and specify an alpha value.

Thats way is the value 255 in the function.

2 Likes