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

edited June 2015 in Questions about Code

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

Tagged:

Answers

  • edited June 2015

    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) ?
  • edited June 2015

    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

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

  • edited June 2015

    How can I write it ? Any help ? :(

  • 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 ? :(

  • Answer ✓

    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);
    
    }
    
Sign In or Register to comment.