# Blending two images using movement sensor and arduino

**URL:** <https://discourse.processing.org/t/blending-two-images-using-movement-sensor-and-arduino/30404>\
**Category:** Electronics (Arduino, etc.)\
**Created:** [May 31, 2021, 9:18pm UTC](https://discourse.processing.org/t/blending-two-images-using-movement-sensor-and-arduino/30404 "2021-05-31T21:18:39Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![szymon\_gl](https://avatars.discourse-cdn.com/v4/letter/s/9fc348/32.png) [@szymon\_gl](https://discourse.processing.org/u/szymon_gl)\
**Post date:** [May 31, 2021, 9:18pm UTC](https://discourse.processing.org/t/blending-two-images-using-movement-sensor-and-arduino/30404/1 "2021-05-31T21:18:40Z")

</div>

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:

```auto

#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.

```auto
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 !

---

<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:** [May 31, 2021, 11:10pm UTC](https://discourse.processing.org/t/blending-two-images-using-movement-sensor-and-arduino/30404/2 "2021-05-31T23:10:04Z")

</div>

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](https://processing.org/reference/tint_.html)

`:)`

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/0a0ee4dec432175d97f65e886696b9215f6c470f.png)  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/732121931d81f6fa74a6796e0a03da295fcf3e20.png)  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/00b9c4a5d304fffbcd049f08a40e5e9490ba889d.png)

Reminds me of “Tape Face”.

The above will work with overlapping images.

`:)`