Loading...
Logo
Processing Forum
Programming Questions
brianat
brianat

image hover?

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: 

Copy code
  1.  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
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
Copy code
  1. String imgNames[] = { "World.png" , "blush.png" , ... };
  2. PImage images[] = PImage[imgNames.length];
  3. for(int i=0; i < imgNames.length; i++)
  4.       images[i] = loadImage(imgNames[i]);
this will also simplify the display, and checking when the mouse is over an image or not
Chrisir
Chrisir

Re: image hover?

7 months ago


without reading your code fully I would suggest to use
Copy code
  1. background(0);
at the beginning of draw()

Combine this with
Copy code
  1. // hover check
  2. if (mouseX>......             )   {
  3.    // hovering:
  4.    // make bezier
  5.    // ........
  6. }
 
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/

Copy code
  1. //
  2. // ================================================================
  3. //Tile Class (one image card)
  4. class Tile
  5. {
  6.   PImage img;   // the image
  7.   float px;     // position
  8.   float py;
  9.   float tileWidth = 100;
  10.   float tileHeight = 100;
  11.   //
  12.   // constr
  13.   Tile ( float px_, float py_ )
  14.   {
  15.     px=px_;
  16.     py=py_;
  17.   } // constr
  18.   //
  19.   void loadImageIntoTile ( String imageName_ ) {
  20.     img  = loadImage(imageName_);
  21.     img.resize(tileWidth, 0);
  22.   } // method
  23.   //
  24.   void draw()
  25.   {
  26.         if (img!=null)
  27.           image(img, px, py);
  28.         else
  29.           println ("image is null");
  30.         stroke(255);
  31.         noFill();
  32.         rect(px, py, tileWidth, tileHeight);
  33.   } // method
  34.   //
  35.   boolean mouseInside()
  36.   {
  37.     return ((px <= mouseX && mouseX <= px + tileWidth) &&
  38.       (py <= mouseY && mouseY <= py + tileHeight));
  39.   } // method
  40.   //
  41. } // class
  42. // ===========================================================





Chrisir
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



Copy code
  1. PImage world;
  2. PImage blush;
  3. PImage carmex;
  4. PImage deoderant;
  5. PImage eyepencil;
  6. PImage lipbalm;
  7. PImage lipstick;
  8. PImage makeuppads;
  9. PImage moisture;
  10. PImage sanitizer;
  11. PImage sephshadow;
  12. PImage stiletto;
  13. PImage shadow;
  14. PImage aquafresh;
  15. int [] me = {
  16.   156, 169
  17. };
  18. int [] france = {
  19.   519, 142
  20. };
  21. int [] china = {
  22.   874, 167
  23. };
  24. int [] taiwan = {
  25.   908, 183
  26. };
  27. int [] italy = {
  28.   552, 156
  29. };
  30. int [] germany = {
  31.   532, 119
  32. };
  33. int [] canada = {
  34.   222, 97
  35. };
  36. int [] canada2 = {
  37.   179, 124
  38. };
  39. int [] newyork = {
  40.   325, 156
  41. };
  42. int [] california = {
  43.   168, 195
  44. };
  45. int [] uk = {
  46.   505, 121
  47. };
  48. int [] surrey = {
  49.   509, 120
  50. };
  51. int [] ohio = {
  52.   303, 155
  53. };
  54. int [] wisconsin = {
  55.   281, 146
  56. };
  57. //
  58. int rotater =0;
  59. boolean blushOver = false;
  60. boolean carmexOver = false;
  61. void setup() {
  62.   size(1200, 800, P3D);
  63.   world = loadImage("World.png");
  64.   blush = loadImage("blush.png");
  65.   carmex = loadImage("carmex.png");
  66.   deoderant = loadImage("deoderant.png");
  67.   eyepencil = loadImage("eyepencil.png");
  68.   lipbalm = loadImage("lipbalm.png");
  69.   lipstick = loadImage("lipstick.png");
  70.   makeuppads = loadImage("makeuppads.png");
  71.   moisture = loadImage("moisture.png");
  72.   sanitizer = loadImage("sanitizer.png");
  73.   sephshadow = loadImage("sephshadow.png");
  74.   shadow = loadImage("shadow.png");
  75.   stiletto = loadImage("stiletto.png");
  76.   aquafresh = loadImage("aquafresh.png");
  77. }
  78. void draw() {
  79.   println(mouseX);
  80.   println(mouseY);
  81.   background(0);
  82.   fill(255);
  83.   text("blush", 50, 0, 200, 200);
  84.   translate(width/2, height/2);
  85.   rotateX(radians(35));
  86.   rotateZ(radians(rotater));
  87.   noFill();
  88.   // image(world, -width/2, -height/2);
  89.   translate(-width/2, -height/2);
  90.   stroke(255);
  91.   strokeWeight(5);
  92.   // hover check
  93.   if (mouseX>50 && mouseX<80 && mouseY<80 && mouseY > 0         ) {
  94.     // hovering:
  95.     // make bezier
  96.     r1() ;
  97.   }
  98. }
  99. void keyPressed() {
  100.   if (keyCode == LEFT) {
  101.     rotater += 1;
  102.   }
  103.   if (keyCode == RIGHT) {
  104.     rotater -= 1;
  105.   }
  106. }
  107. void r1() {
  108.   bezier(me[0], me[1], 0, me[0], me[1], 150, france[0], france[1], 150, france[0], france[1], 0);
  109.   bezier(me[0], me[1], 0, me[0], me[1], 150, china[0], china[1], 150, china[0], china[1], 0);
  110.   bezier(me[0], me[1], 0, me[0], me[1], 150, taiwan[0], taiwan[1], 150, taiwan[0], taiwan[1], 0);
  111.   bezier(me[0], me[1], 0, me[0], me[1], 150, italy[0], italy[1], 150, italy[0], italy[1], 0);
  112.   bezier(me[0], me[1], 0, me[0], me[1], 150, germany[0], germany[1], 150, germany[0], germany[1], 0);
  113.   bezier(me[0], me[1], 0, me[0], me[1], 150, canada[0], canada[1], 150, canada[0], canada[1], 0);
  114.   bezier(me[0], me[1], 0, me[0], me[1], 150, canada2[0], canada2[1], 150, canada2[0], canada2[1], 0);
  115.   bezier(me[0], me[1], 0, me[0], me[1], 150, newyork[0], newyork[1], 150, newyork[0], newyork[1], 0);
  116.   bezier(me[0], me[1], 0, me[0], me[1], 150, california[0], california[1], 150, california[0], california[1], 0);
  117.   bezier(me[0], me[1], 0, me[0], me[1], 150, uk[0], uk[1], 150, uk[0], uk[1], 0);
  118.   bezier(me[0], me[1], 0, me[0], me[1], 150, surrey[0], surrey[1], 150, surrey[0], surrey[1], 0);
  119.   bezier(me[0], me[1], 0, me[0], me[1], 150, ohio[0], ohio[1], 150, ohio[0], ohio[1], 0);
  120.   bezier(me[0], me[1], 0, me[0], me[1], 150, wisconsin[0], wisconsin[1], 150, wisconsin[0], wisconsin[1], 0);
  121. }

Top Reply

Statistics

  • 3 Replies
  • 585  Views
  • 1 Followers

Actions

Related Posts