Mouse Hover and Image Transparency and Appearance

Programming Questions

slobo_sole

Mouse Hover and Image Transparency and Appearance

in Programming Questions • 1 year ago

Hello everyone,

I am working on a processing code for a map project. I want to make a map so that when I go with the mouse above certain area an image shows up on the screen, but then when I move the mouse from that area the image disappears. I am able to load an image when I have the mouse above certain area, but then when I move the mouse the image stays, i.e. it does not disappear. I was wondering if somehow I can control the transparency or appearance of the image? I feel this should be easy to do, but I am new to processing so I did not manage. Please send me your thoughts.

Below is the code I used.

Many thanks!

PImage bg;
PImage a;
PImage b;
PShape sh1;
int value = 0;
import processing.video.*;
Movie myMovie;
PFont font;

void setup(){
size(1200,900);
bg = loadImage("laguna_1200x900_full_gray.jpg");
background(bg);

imageMode(CENTER);

shapeMode(CENTER);
sh1 = loadShape("test.svg");


font = loadFont("Arial-Black-24.vlw");
textFont(font);

fill(250,169,86);
// historical monuments
ellipse(350, 250, 10, 10);
ellipse(250, 120, 10, 10);
ellipse(150, 250, 10, 10);
ellipse(250, 194, 10, 10);
ellipse(250, 750, 10, 10);
ellipse(170, 450, 10, 10);
ellipse(250, 240, 10, 10);
fill(56,169,86);
// green landscape
ellipse(250, 640, 10, 10);
ellipse(186, 700, 10, 10);
ellipse(230, 450, 10, 10);
ellipse(120, 650, 10, 10);
ellipse(310, 550, 10, 10);
ellipse(630, 350, 10, 10);
ellipse(220, 624, 10, 10);
ellipse(120, 230, 10, 10);
fill(0,176,236);
// marine boats, blue
ellipse(180, 550, 10, 10);
ellipse(455, 590, 10, 10);
ellipse(110, 750, 10, 10);
ellipse(200, 424, 10, 10);
ellipse(176, 800, 10, 10);

ellipse(520, 110, 10, 10);
ellipse(570, 80, 10, 10);
ellipse(430, 250, 10, 10);
ellipse(280, 324, 10, 10);
ellipse(150, 200, 10, 10);
}

void draw(){
if(mouseX >450 && mouseX < 650 && mouseY > 650 && mouseY <850) {

            fill(0);
            text("Transportation Node", 900, 750, 250, 500);
            text("Here you will encounter the door of Timeless Venice", 900, 780, 250, 500);




           }


}

void mousePressed() {

if(mouseX >345 && mouseX < 355 && mouseY > 245 && mouseY <255) {
    if (mouseButton == LEFT) {
      ellipse(350, 250, 0, 0);
      shape(sh1, 350, 250, 100, 100);
      shape(sh1, 750, 750, 200, 200);
      shape(sh1, 550, 750, 200, 200);






     }else if (mouseButton == RIGHT){
       shape(sh1, 0, 0, 0, 0);
        ellipse(350, 250, 10, 10);


      }
}

}

Replies(3)

tfguy44

Re: Mouse Hover and Image Transparency and Appearance

1 year ago

PImage bg;

PImage a;

PImage b;

PShape sh1;

int value = 0;

//import processing.video.*;

//Movie myMovie;

PFont font;

boolean showIt = false;

void setup() {

size(1200, 900);

imageMode(CENTER);

shapeMode(CENTER);

// sh1 = loadShape("test.svg");

font = createFont( "Arial", 24); //loadFont("Arial-Black-24.vlw");

textFont(font);

}

void draw() {

// bg = loadImage("laguna_1200x900_full_gray.jpg");

background(64, 0, 0); //bg);

fill(250, 169, 86);

// historical monuments

ellipse(350, 250, 10, 10);

ellipse(250, 120, 10, 10);

ellipse(150, 250, 10, 10);

ellipse(250, 194, 10, 10);

ellipse(250, 750, 10, 10);

ellipse(170, 450, 10, 10);

ellipse(250, 240, 10, 10);

fill(56, 169, 86);

// green landscape

ellipse(250, 640, 10, 10);

ellipse(186, 700, 10, 10);

ellipse(230, 450, 10, 10);

ellipse(120, 650, 10, 10);

ellipse(310, 550, 10, 10);

ellipse(630, 350, 10, 10);

ellipse(220, 624, 10, 10);

ellipse(120, 230, 10, 10);

fill(0, 176, 236);

// marine boats, blue

ellipse(180, 550, 10, 10);

ellipse(455, 590, 10, 10);

ellipse(110, 750, 10, 10);

ellipse(200, 424, 10, 10);

ellipse(176, 800, 10, 10);

ellipse(520, 110, 10, 10);

ellipse(570, 80, 10, 10);

ellipse(430, 250, 10, 10);

ellipse(280, 324, 10, 10);

ellipse(150, 200, 10, 10);

if (mouseX >450 && mouseX < 650 && mouseY > 650 && mouseY <850) {

fill(0);

text("Transportation Node", 900, 750, 250, 500);

text("Here you will encounter the door of Timeless Venice", 900, 780, 250, 500);

}

if ( showIt ) {

ellipse(350, 250, 0, 0);

// shape(sh1, 350, 250, 100, 100);

// shape(sh1, 750, 750, 200, 200);

// shape(sh1, 550, 750, 200, 200);

fill(0, 0, 255);

rect(350, 250, 100, 100);

rect(750, 750, 200, 200);

rect(550, 750, 200, 200);

}

void mousePressed() {

if (mouseX >345 && mouseX < 355 && mouseY > 245 && mouseY <255) {

if (mouseButton == LEFT) {

showIt = true;

}

else if (mouseButton == RIGHT) {

showIt = false;

}

tfguy44

Re: Re: Mouse Hover and Image Transparency and Appearance

1 year ago

I ripped out your images and movies. I have no way to know what they look like. Generally, you should do this when you ask for help, because no one can run your sketch without your images!

I moved the drawing code into draw. Notice that the ENTIRE SCENE is now redrawn each time draw is called.

Notice, also, that some drawn elements are now conditional on certain things. That is, the words only appear when the mouse is in a specific location. Blue rectangles only appear when the variable "showIt" is true, the value of which can be controlled with the mouse by clicking a certain dot.

You have fallen pray to the classic newbie error of trying to use what was drawn in the previous frame as a starting point for what should be drawn in the next frame. This is no good, as blue rectangles that appear will never disappear once drawn!

slobo_sole

Re: Mouse Hover and Image Transparency and Appearance

1 year ago

this is great, thank you so much!!

i'm sorry about the mess with uploading the files, but this is great. it took me a whole afternoon trying to figure this out:(

i have two more questions to ask you, if you don't mind:

1) in your code the text now shows up each time i hover above certain area, i.e. if (mouseX >450 && mouseX < 650 && mouseY > 650 && mouseY <850). I want it to appear only when the mouse goes above this area but also only when the blue rectangles are on. now when the rectangles disappear the text can still show up if i hover above this area. could you please advise how to fix this? i tried writing a condition

2) i want to draw lines between certain circles, so for instance the circle that I fist clicked on, ellipse(350, 250, 10, 10), and let's say ellipse(230, 450, 10, 10). Now the problem that I have is if I try to draw a line by clicking on the first circle "ellipse(350, 250, 10, 10)" the blue rectangles will also appear. Could I draw a line from this circle to another by using another method than clicking? Could I try dragging the mouse and as long as I drag the mouse to another point the line will be drawn? I hope this is clear, if you can suggest any way to make this happen it would be great. So, to sum up, I want to both be able to check the "property" of my circle by clicking on it (and having the blue rectangles appear), and to also draw the line between this point and any other point.

Thank you so much indeed for your help, I greatly appreciate it!!

Top Reply