Blending two images using movement sensor and arduino

Processing Electronics (Arduino, etc.)
1

Hi, I need help with an art project I am trying to finish.

I want to smoothly blend two images together (the backgroung image it’s a photo of a person and the second image is the same person but wearing a mask). I want it to be a smooth transition from one image to another, the gradient should depend on the value reading from a movement sensor from arduino.

I found some similar projects online, the arduino part looks ok to me, but I don’t know how to write the code for the processing part.

Here it’s the arduino code:


#include <NewPing.h>

#define TRIGGER_PIN  12  // Arduino pin tied to trigger pin on the ultrasonic sensor.
#define ECHO_PIN     11  // Arduino pin tied to echo pin on the ultrasonic sensor.
#define MAX_DISTANCE 50 // 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");
}

and here is a code I found for a zoom-in and zoom-out of an image depending on the reading value from the sensor.

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());
   
  diy= loadImage("diy.png");
  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));
}

Thank you for your help !

2

Hello,

I was able to write some simple code to do this:

  1. Draw a circle (face).
  2. Draw 2 circles (eyes).
  3. Apply a tint() with an alpha.
  4. Draw an image (mask) over the circle.
  5. Vary the alpha from 255 (100% opaque) to 0 (fully transparent).

Step 1 and 2 can be replaced with an image.
You must set the tint for this first image to 100% opaque!

Reference:
https://processing.org/reference/tint_.html

:)

image
image
image

Reminds me of “Tape Face”.

The above will work with overlapping images.

:)