image hover?

Programming Questions

brianat

in Programming Questions • 7 months ago

So I'm doing a project where when you hover over an image a bezier shows up and then goes away when you aren't hovering, but I can't get anything to work. Is there a simple way to do that for several images?

I don't know if this will help but here's my code right now w/o beziers:

PImage world;
PImage blush;
PImage carmex;
PImage deoderant;
PImage eyepencil;
PImage lipbalm;
PImage lipstick;
PImage makeuppads;
PImage moisture;
PImage sanitizer;
PImage sephshadow;
PImage stiletto;
PImage shadow;
PImage aquafresh;

int [] me = {156,169};
int [] france = {519,142};
int [] china = {874,167};
int [] taiwan = {908,183};
int [] italy = {552,156};
int [] germany = {532,119};
int [] canada = {222,97};
int [] canada2 = {179,124};
int [] newyork = {325,156};
int [] california = {168,195};
int [] uk = {505,121};
int [] surrey = {509,120};
int [] ohio = {303,155};
int [] wisconsin = {281,146};
//
int rotater =0;

boolean blushOver = false;
boolean carmexOver = false;

void setup() {
size(1200, 800, P3D);
world = loadImage("World.png");
blush = loadImage("blush.png");
carmex = loadImage("carmex.png");
deoderant = loadImage("deoderant.png");
eyepencil = loadImage("eyepencil.png");
lipbalm = loadImage("lipbalm.png");
lipstick = loadImage("lipstick.png");
makeuppads = loadImage("makeuppads.png");
moisture = loadImage("moisture.png");
sanitizer = loadImage("sanitizer.png");
sephshadow = loadImage("sephshadow.png");
shadow = loadImage("shadow.png");
stiletto = loadImage("stiletto.png");
aquafresh = loadImage("aquafresh.png");

}

void draw() {
println(mouseX);
println(mouseY);
background(0);
image(blush,-50,0,200,200);
image(carmex,0,125,100,100);
image(deoderant,0,200,100,100);
image(eyepencil,0,300,100,100);
image(lipbalm,1100,40,100,100);
image(lipstick,1110,120,100,100);
image(makeuppads,1100,200,100,100);
image(moisture,1100,300,100,100);
image(sanitizer,300,0,100,100);
image(shadow, 400,0,100,100);
image(stiletto,500,0,100,100);
image(aquafresh,580,0,130,100);
image(sephshadow,700,0,130,100);

translate(width/2, height/2);
rotateX(radians(35));
rotateZ(radians(rotater));
noFill();
image(world, -width/2,-height/2);
translate(-width/2, -height/2);
stroke(255);
strokeWeight(5);
}


void keyPressed() {
if (keyCode == LEFT) {
    rotater += 1;
}

if (keyCode == RIGHT) {
      rotater -= 1;
}

}

Here's my bezier's as well:

bezier(me[0],me[1], 0, me[0],me[1], 150, france[0],france[1],150, france[0],france[1], 0);

bezier(me[0],me[1], 0, me[0],me[1], 150, china[0],china[1],150, china[0],china[1], 0);

bezier(me[0],me[1], 0, me[0],me[1], 150, taiwan[0],taiwan[1],150, taiwan[0],taiwan[1], 0);

bezier(me[0],me[1], 0, me[0],me[1], 150, italy[0],italy[1],150, italy[0],italy[1], 0);

bezier(me[0],me[1], 0, me[0],me[1], 150, germany[0],germany[1],150, germany[0],germany[1], 0);

bezier(me[0],me[1], 0, me[0],me[1], 150, canada[0],canada[1],150, canada[0],canada[1], 0);

bezier(me[0],me[1], 0, me[0],me[1], 150, canada2[0],canada2[1],150, canada2[0],canada2[1], 0);

bezier(me[0],me[1], 0, me[0],me[1], 150, newyork[0],newyork[1],150, newyork[0],newyork[1], 0);

bezier(me[0],me[1], 0, me[0],me[1], 150, california[0],california[1],150, california[0],california[1], 0);

bezier(me[0],me[1], 0, me[0],me[1], 150, uk[0],uk[1],150, uk[0],uk[1], 0);

bezier(me[0],me[1], 0, me[0],me[1], 150, surrey[0],surrey[1],150, surrey[0],surrey[1], 0);

bezier(me[0],me[1], 0, me[0],me[1], 150, ohio[0],ohio[1],150, ohio[0],ohio[1], 0);

bezier(me[0],me[1], 0, me[0],me[1], 150, wisconsin[0],wisconsin[1],150, wisconsin[0],wisconsin[1], 0);

Replies(3)

ramin

Re: image hover?

7 months ago

From that I can not really see whats going wrong, I have a suggestion tho. Start with only one image, and/or one country.

What might also be helpfull is if you use arrays more, for the PImages maybe

String imgNames[] = { "World.png" , "blush.png" , ... };
PImage images[] = PImage[imgNames.length];
for(int i=0; i < imgNames.length; i++)
images[i] = loadImage(imgNames[i]);

this will also simplify the display, and checking when the mouse is over an image or not

Chrisir

Re: image hover?

7 months ago

without reading your code fully I would suggest to use

background(0);

at the beginning of draw()

Combine this with

// hover check
if (mouseX>...... ) {
// hovering:
// make bezier
// ........
}

in draw() for each image (try one image first) and when it's not hovering, the bezier is not drawn.

Later
Since you have to make the hover check for each image,
you can also make a class that has the image, the position and the size (width and height), so
you can display the image at the position and also check the mouse hover by
the same position and size.

read
http://processing.org/learning/objects/

//
// ================================================================
//Tile Class (one image card)
class Tile
{
PImage img; // the image
float px; // position
float py;
float tileWidth = 100;
float tileHeight = 100;
//
// constr
Tile ( float px_, float py_ )
{
px=px_;
py=py_;
} // constr
//
void loadImageIntoTile ( String imageName_ ) {
img = loadImage(imageName_);
img.resize(tileWidth, 0);
} // method
//
void draw()
{
if (img!=null)
image(img, px, py);
else
println ("image is null");
stroke(255);
noFill();
rect(px, py, tileWidth, tileHeight);
} // method
//
boolean mouseInside()
{
return ((px <= mouseX && mouseX <= px + tileWidth) &&
(py <= mouseY && mouseY <= py + tileHeight));
} // method
//
} // class
// ===========================================================

Chrisir

Re: image hover?

7 months ago

here is the idea without the class

I had to remove the images (because I don't have them) but you see the idea
if you point mouse on word blush upper left corner

see bold for what is interesting

PImage world;
PImage blush;
PImage carmex;
PImage deoderant;
PImage eyepencil;
PImage lipbalm;
PImage lipstick;
PImage makeuppads;
PImage moisture;
PImage sanitizer;
PImage sephshadow;
PImage stiletto;
PImage shadow;
PImage aquafresh;
int [] me = {
156, 169
};
int [] france = {
519, 142
};
int [] china = {
874, 167
};
int [] taiwan = {
908, 183
};
int [] italy = {
552, 156
};
int [] germany = {
532, 119
};
int [] canada = {
222, 97
};
int [] canada2 = {
179, 124
};
int [] newyork = {
325, 156
};
int [] california = {
168, 195
};
int [] uk = {
505, 121
};
int [] surrey = {
509, 120
};
int [] ohio = {
303, 155
};
int [] wisconsin = {
281, 146
};
//
int rotater =0;
boolean blushOver = false;
boolean carmexOver = false;
void setup() {
size(1200, 800, P3D);
world = loadImage("World.png");
blush = loadImage("blush.png");
carmex = loadImage("carmex.png");
deoderant = loadImage("deoderant.png");
eyepencil = loadImage("eyepencil.png");
lipbalm = loadImage("lipbalm.png");
lipstick = loadImage("lipstick.png");
makeuppads = loadImage("makeuppads.png");
moisture = loadImage("moisture.png");
sanitizer = loadImage("sanitizer.png");
sephshadow = loadImage("sephshadow.png");
shadow = loadImage("shadow.png");
stiletto = loadImage("stiletto.png");
aquafresh = loadImage("aquafresh.png");
}
void draw() {
println(mouseX);
println(mouseY);
background(0);
fill(255);
text("blush", 50, 0, 200, 200);
translate(width/2, height/2);
rotateX(radians(35));
rotateZ(radians(rotater));
noFill();
// image(world, -width/2, -height/2);
translate(-width/2, -height/2);
stroke(255);
strokeWeight(5);
// hover check
if (mouseX>50 && mouseX<80 && mouseY<80 && mouseY > 0 ) {
// hovering:
// make bezier
r1() ;
}
}
void keyPressed() {
if (keyCode == LEFT) {
rotater += 1;
}
if (keyCode == RIGHT) {
rotater -= 1;
}
}
void r1() {
bezier(me[0], me[1], 0, me[0], me[1], 150, france[0], france[1], 150, france[0], france[1], 0);
bezier(me[0], me[1], 0, me[0], me[1], 150, china[0], china[1], 150, china[0], china[1], 0);
bezier(me[0], me[1], 0, me[0], me[1], 150, taiwan[0], taiwan[1], 150, taiwan[0], taiwan[1], 0);
bezier(me[0], me[1], 0, me[0], me[1], 150, italy[0], italy[1], 150, italy[0], italy[1], 0);
bezier(me[0], me[1], 0, me[0], me[1], 150, germany[0], germany[1], 150, germany[0], germany[1], 0);
bezier(me[0], me[1], 0, me[0], me[1], 150, canada[0], canada[1], 150, canada[0], canada[1], 0);
bezier(me[0], me[1], 0, me[0], me[1], 150, canada2[0], canada2[1], 150, canada2[0], canada2[1], 0);
bezier(me[0], me[1], 0, me[0], me[1], 150, newyork[0], newyork[1], 150, newyork[0], newyork[1], 0);
bezier(me[0], me[1], 0, me[0], me[1], 150, california[0], california[1], 150, california[0], california[1], 0);
bezier(me[0], me[1], 0, me[0], me[1], 150, uk[0], uk[1], 150, uk[0], uk[1], 0);
bezier(me[0], me[1], 0, me[0], me[1], 150, surrey[0], surrey[1], 150, surrey[0], surrey[1], 0);
bezier(me[0], me[1], 0, me[0], me[1], 150, ohio[0], ohio[1], 150, ohio[0], ohio[1], 0);
bezier(me[0], me[1], 0, me[0], me[1], 150, wisconsin[0], wisconsin[1], 150, wisconsin[0], wisconsin[1], 0);
}

Top Reply

image hover?

Replies(3)

Re: image hover?

Re: image hover?

Re: image hover?

Statistics

Tags

Actions

Related Posts