How to change the opacity of an image with a mouse move ?

toto160

Hello,

I'm a newbie in Processing :(

I want to load 2 images, and then change the opacity of both when moving the mouseX.

Exemple: when the mouse is in the left of the screen = image1 opacity 100% / image2 opacity 0% when the mouse is in the right of the screen = image1 opacity 0% / image2 opacity 100%

Thank you for your help

colouredmirrorball

Tell us in which of these steps you're stuck:

• Can you display an image on the screen?
• Can you display two images, one on top of the other, on the screen?
• Can you change the opacity of one image?
• Can you change the opacity of two images on top of each other, one with opacity 255*mouseX/width and the other with opacity 255*(1-mouseX/width) ?

toto160

Yes I can display 2 images one on top of the other on the screen but I can't change the opacity when moving the mouse.

PImage itemImage, itemImage2;


void setup() {
  size(800, 400);
  frameRate(60);
  itemImage = loadImage("data/rss.png");
  itemImage2 = loadImage("data/rss.png");
}  

void draw() {
  background(255);

 image(itemImage, 0, 255*mouseX/width);
 image(itemImage2, 0, 255*1-mouseX/width);

}

Sorry, I know I'm completely wrong, but I really don't know how to do that

GoToLoop

Have 1 PImage 100% opacity version and another which is 100% transparent.
Swap which 1 is displayed based on mouseX.

toto160

How can I write it ? Any help ? :(

GoToLoop

http://forum.processing.org/two/discussion/10291/issue-with-color-alpha

toto160

Ok I got something

PImage itemImage, itemImage2;

void setup() {
  size(800, 400);
  frameRate(60);
  itemImage = loadImage("data/rss.png");
  itemImage2 = loadImage("data/rss.png");
}  

void draw() {
  background(255);


 tint(255,255*mouseX/width);
 image(itemImage, 0, 0);

 tint(255,255*(1-mouseX/width));
 image(itemImage2, 0, 255);

}

It works just for one. Does anyone can correct my code ? :(

toto160

Ok I found it by myself

PImage itemImage, itemImage2;


void setup() {
  size(800, 400);
  frameRate(60);
  itemImage = loadImage("data/rss.png");
  itemImage2 = loadImage("data/rss.png");
}  

void draw() {
  background(255);


 tint(255,255*1-mouseX);
 image(itemImage, 0, 0);

 tint(255,255*mouseX/width);
 image(itemImage2, 0, 255);

}