Loading...
Logo
Processing Forum
Programming Questions
civicimages
CivicImag..

manipulate multiple PImage with mouse

in Programming Questions  •  1 year ago  
Hi,

I'm really new to programming and I need a bit of help. I want to write an app that has a bank of elements (PImage or Shape elements) on the left and a background image on the right. I want to be able to click on the elements on the left to add them to the image one at a time (or drag it on to the canvas), and I want to be able to resize the elements individually.

Is Processing capable of this? I know that might sound confusing, so I'll start with just one question. In this example have commented out the images and replaced them with rectangles. I want to be able to manipulate each rectangle individually, without affecting the other one. In my app, I want these to be images (.png) rather than shapes.

Now that I've typed this out. I feel like I should be able to answer my own question, but I'm stumped. Maybe I've been looking at this too long.

Thanks in advance!

Copy code
  2. //PImage clv;
  3. Tree tree;
  4. Tree tree2;

  6. void setup() {
  7.   size(800, 500);
  8.   smooth();
  9.   imageMode(CENTER);
  10. //  clv = loadImage("clv.png");
  11. //  tree = new Tree("tree.gif", 50, 50);
  12. //  tree2 = new Tree("tree.gif", 33, 60);
  13.   tree = new Tree(50,50);
  14.   tree2 = new Tree(150,150);
  15. }

  17. void draw() {
  18. //  background(clv);
  19.   background(150);
  20.   tree.display();
  21.   tree.move();
  22.   tree2.display();
  23.   tree2.move();
  24. }

  26. class Tree {
  27.   PImage tree;
  28.   float x,y;

  30.   Tree(
  31.   //String filename,
  32.   float x_, float y_) {
  33. //    tree = loadImage(filename);
  34.     x = x_;
  35.     y = y_;
  36.   }
  37.   
  38.   void display() {
  39. //    translate(x,y);
  40. //    image(tree, x, y);
  41.     rect(x,y,100,200);
  42.   }
  43.   
  44.   void move() {
  45.     if (mousePressed) {
  46.       x=mouseX;
  47.       y=mouseY;
  48.     }
  49.   }
  50. }

Replies(13)

PhiLho
PhiLho

Re: manipulate multiple PImage with mouse

1 year ago
PDE > File > Examples... > GUI > Handles or Scrollbar examples from Processing show how to handle dragging a shape.
CivicImages
CivicImag..

Re: manipulate multiple PImage with mouse

1 year ago
Humm, I had a look at those. I'll look again. I think I need to try again and start from scratch. 

Thanks
jas0501
jas0501

Re: manipulate multiple PImage with mouse

1 year ago
look at



for drag handle re-sizing. Note moving and re-sizing both are drag operations, So there needs to be mode change to display the drag handles, while still supporting the move drag. The example above just addresses the drag handles. Adding the move capability should give you what you need.

Note the drag re-size example supports edge and corner move, but does not support shift-corner move,needed to maintain aspect ratio during re-size. It should be easy to add.


jas0501
jas0501

Re: manipulate multiple PImage with mouse

1 year ago
Note, your code is stacking the rectangles, thus the second one disappears.

 Being new to programming you might want to tackle creating a class for you bank element. This will permit creating a set of attributes you would be manipulating via the mouse actions.

Creating you first classes can be daunting. Outlining possible scenario can be very helpful in organizing requirements. For example:

Setup: 
5 pictures to be arranges, movable and re-sizable.

Scenario A: select picture
1. User clicks on picture (mouse pressed and mouse released)
Question to answer:
  which picture?
Action to take: 
2.  for picture selected show resize handles.
(need global variable for 
      current selected picture
      selection state)
Scenario B: move picture
1. user presses mouse
Question: which picture
Action take: record start mouse position
                  current selected picture
                  dragging state (mouse pressed & picture found)
2. Mouse moves:
     compute delta from initial mouse position
      adjust current selected picture x & y position based on delta 
      store new start mouse position
      draw picture
   repeat 2 until mouse released
3. mouse released
      clear drag state
      clear current selection

Note: when checking mouse presses there are 5 pictures that need to be checked and if in select mode 8 resize handles.

Maintaining an arrayList of the pictures and adding support in the bank element class to support dragging will make checking to see if the mouse press is in a target.

Scenario 3: Re-size operation
1. user selects picture (Scenario A)
2. use mouse presses re-size handle.
Which picture or if selection mode which handle
      resize handle NW corner pressed.
      record start mouse position
      in selected picture record handle selected
3. mouse moved
      compute delta
      call drag method of selected picture with mouse delta (this will resize picture and adjust handles)
      record start mouse position
      draw picture
      repeat 3 until mouse released
4. Mouse released
      resize selected picure based on handle positions
      in selected picture clear resize handle state

So roughly the Bank Element will keep track: of
   x, y, width, height
   resize handle state
   active resize handle
  selected state 
  DragHandles
with methods to
   draw()
   check mouse click in picture(x,y)
   check mouse click in resize handles(x,y)
   handleMove(x,y)
  set & get selection state
  set & get resize handle state
   
The above is just an example of how one can organize one's thoughts when construction a class. In this case the Bank Element class. This may not be anything like what you want of have imagined and is presented more to illustrate the organization and thought process using scenarios.

Hope this helps.

CivicImages
CivicImag..

Re: manipulate multiple PImage with mouse

1 year ago
Wow, thanks. Your resize example is better than what I had in mind. 

I was reworking my code and I was just thinking that an outline would be useful when I saw your second post. Thanks for the example, it really helps.
CivicImages
CivicImag..

Re: manipulate multiple PImage with mouse

1 year ago
I'm learning in small steps. I now have two shapes that can be moved around individually. But I have two questions.

1. When the shapes over lap, why does the mouse move the shape behind rather than the one on top? I know this has something to do with the order that things are displayed, but I'm not sure.

2. I want to use this with processing.js, but when I tried it (with the background image) all I got was a grey box, with no shapes inside it and no background image. My image file was in the same folder as html file and the processing.min.js file. Any tips?

Here's the code with the images commented out. 

Now I'm going to figure out how to resize them.  

Thanks again.
Copy code
  1. //PImage clv;
  2. int x, y, h, w;
  3. boolean captured;
  4. ShapeMove[] shapeMove = new ShapeMove[2];

  6. void setup()
  7. {
  8.   size(800, 500);
  9.   //clv = loadImage("clv.png");
  10.   int i;
  11.   i = 0;
  12.   shapeMove[0] = new ShapeMove(x, y, 250, 250);
  13.   shapeMove[1] = new ShapeMove(x, y, 250, 250);
  14. }

  16. void draw()
  17. {
  18.   background(255); 
  19. //  fill(255);
  20.   shapeMove[0].update();
  21.   shapeMove[0].display();
  22.   shapeMove[1].update();
  23.   shapeMove[1].display();
  24. }

  26. class ShapeMove
  27. {
  28.   int x, y, h, w, origx, origy, deltax, deltay, posXdiff, posYdiff;
  29.   boolean over;
  30.   boolean locked = false;
  31.   boolean press;
  32.   boolean imCaptured = false;
  33.   int xdragdelta, ydragdelta;

  35.   ShapeMove(int _x, int _y, int _h, int _w)
  36.   {
  37.     x = _x;
  38.     y = _y;
  39.     h = _h;
  40.     w = _w;
  41.   }

  43.   boolean over()
  44.   {
  45.     if (mouseX >= x && mouseX <=x+w &&
  46.       mouseY >= y && mouseY <= y+h)
  47.     {
  48.       over = true;
  49.       return true;
  50.     }
  51.     else 
  52.     {
  53.       over = false;
  54.       return false;
  55.     }
  56.   }

  58.   void update()
  59.   {
  60.     if (over() && mousePressed && !imCaptured && !captured)
  61.     {
  62.       deltax = x - mouseX;
  63.       deltay = y - mouseY;
  64.       origx = x;
  65.       origy = y;
  66.       captured = true;
  67.       imCaptured = true;
  68.     }
  69.     if(!mousePressed && imCaptured)
  70.     {
  71.       captured = false;
  72.       imCaptured = false;
  73.     }
  74.     if (imCaptured)
  75.     {
  76.       xdragdelta = x - (mouseX + posXdiff);
  77.       ydragdelta = y - (mouseY + posYdiff);
  78.       x = mouseX + deltax;
  79.       y = mouseY + deltay;
  80.     }
  81.   } 

  83.   void display()
  84.   {
  85.     if (over()) {
  86.       fill (0);
  87.     }
  88.     else { 
  89.       fill (80);
  90.     }  
  91.     rect(x, y, h, w);
  92.   }
  93. }

jas0501
jas0501

Re: manipulate multiple PImage with mouse

1 year ago
Change the order that you do your Shapemove to match the stacking order. Then the move will grab the one on top. 

As written the mouse can be over multiple shapes so each will have the fill changed. To avoid this you would need a global to maintain the isOver state. Otherwise multiple shapes will be fill(0) when the mouse if over more than one.

Try not setting captured and as you move you will collect multiple shapes in the move process, which is analogous to what is happening with fill.
---------------
Editorial comments:
1. In draw use for loops for the Shapemove[i]. This makes adding more shapes only require setup changes.
2. Have the shapes be different size so you can tell them apart. It makes deducing what is happening easier.
CivicImages
CivicImag..

Re: manipulate multiple PImage with mouse

1 year ago
Thanks, Jas0501. I changed the order that of ShapeMove in draw and it worked, but when I use a 'for' loop, I can't control the order. This isn't too big a deal since I need the loop to add other shapes. Maybe I'm doing it wrong, though.

I want to add a button so that the screen is blank to start and when the button is pressed a new ShapeMove is displayed. Eventually I want to have multiple buttons for various styles of ShapeMoves. I think it's possible to do this with only two classes (Button and ShapeMove), but I don't know how.

How do I get the button to insert a new ShapeMove?

Also, I feel like this should be simple, but how do I stop all three rects from changing fill color? I know this has to do with a global that maintains the isOverstate, but I'm stumped there. 

You'll notice I didn't use your resize yet. It's quite elegant, but I don't have the experience to know how to make it work. For now 's' and 'b' with a mouseover will work.

Thanks in advance.
Copy code
  1. //PImage clv;
  2. int x, y, h, w;
  3. boolean captured;
  4. boolean selected = false;
  5. ShapeMove[] shapeMove = new ShapeMove[2];
  6. Button button;

  8. void setup()
  9. {
  10.   size(800, 500);
  11.   //clv = loadImage("clv.png");
  12.   int i;
  13.   i = 0;
  14.   shapeMove[0] = new ShapeMove(0, 0, 200, 200);
  15.   shapeMove[1] = new ShapeMove(250, y, 250, 250);
  16.   button = new Button(200, 300);
  17. }

  19. void draw()
  20. {
  21.   background(255);
  22.   button.display();
  23.   for (int i = 0; i < 2; i++) {
  24.     shapeMove[i].update();
  25.     shapeMove[i].display();
  26.   }
  27. }

  29. //////////////////////////////////////////////////////////////////////////
  30. class ShapeMove
  31. {
  32.   int x, y, h, w, origx, origy, deltax, deltay, posXdiff, posYdiff;
  33.   boolean over;
  34.   boolean locked = false;
  35.   boolean press;
  36.   boolean imCaptured = false;
  37.   int xdragdelta, ydragdelta;

  39.   ShapeMove(int _x, int _y, int _h, int _w)
  40.   {
  41.     x = _x;
  42.     y = _y;
  43.     h = _h;
  44.     w = _w;
  45.   }

  47.   boolean over()
  48.   {
  49.     if (mouseX >= x && mouseX <=x+w &&
  50.       mouseY >= y && mouseY <= y+h)
  51.     {
  52.       over = true;
  53.       return true;
  54.     }
  55.     else 
  56.     {
  57.       over = false;
  58.       return false;
  59.     }
  60.   }

  62.   void update()
  63.   {
  64.     if (over() && mousePressed && !imCaptured && !captured)
  65.     {
  66.       deltax = x - mouseX;
  67.       deltay = y - mouseY;
  68.       origx = x;
  69.       origy = y;
  70.       captured = true;
  71.       imCaptured = true;
  72.     }
  73.     if (!mousePressed && imCaptured)
  74.     {
  75.       captured = false;
  76.       imCaptured = false;
  77.     }
  78.     if (imCaptured)
  79.     {
  80.       xdragdelta = x - (mouseX + posXdiff);
  81.       ydragdelta = y - (mouseY + posYdiff);
  82.       x = mouseX + deltax;
  83.       y = mouseY + deltay;
  84.     }
  85.   } 

  87.   void changesize() 
  88.   {
  89.     if (over() && keyPressed)
  90.     {
  91.       if (key == 'b')
  92.       {
  93.         h += 2;
  94.         w += 2;
  95.       }
  96.       if (key == 's')
  97.       {
  98.         h -= 2;
  99.         w -= 2;
  100.       }
  101.     }
  102.   }
  103.   
  104.   void display()
  105.   {
  106.     rect(x, y, h, w);
  107.     changesize(); 
  108.   }
  109. }
  110. /////////////////////////////////////////////////////////////////////////
  111. class Button
  112. {
  113.   int rectX, rectY;      // Position of square button
  114.   int rectSize = 50;     // Diameter of rect
  115.   color rectColor;
  116.   color rectHighlight;
  117.   boolean rectOver = false;
  118.   
  119.   Button(int _rectX, int _rectY)
  120.   {
  121.     smooth();
  122.     rectColor = color(0);
  123.     rectHighlight = color(51);
  124.     rectX = _rectX;
  125.     rectY = _rectY;
  126.   }
  127.   
  128.   void display()
  129.   {
  130.     update(mouseX, mouseY);    
  131.     if(rectOver) {
  132.       fill(rectHighlight);
  133.     } else {
  134.       fill(rectColor);
  135.     }
  136.     stroke(255);
  137.     rect(rectX, rectY, rectSize, rectSize);
  138.   }
  139.   
  140.   void update(int x, int y)
  141.   {
  142.     if ( overRect(rectX, rectY, rectSize, rectSize) ) {
  143.       rectOver = true;
  144.     } else {
  145.       rectOver = false;
  146.     }
  147.   }
  148.   
  149.   void mousePressed()
  150.   {
  151.     if(rectOver) {
  152. //      currentColor = rectColor;
  153.     }
  154.   }
  155.   
  156.   boolean overRect(int x, int y, int width, int height) 
  157.   {
  158.     if (mouseX >= x && mouseX <= x+width && 
  159.         mouseY >= y && mouseY <= y+height) {
  160.       return true;
  161.     } else {
  162.       return false;
  163.     }
  164.   }
  165. }
jas0501
jas0501

Re: manipulate multiple PImage with mouse

1 year ago
You can control the order with for via:

 for (int i = shapeMove.length-1; i >=0; i--) {
      shapeMove[i].update();
      shapeMove[i].display();
}
jas0501
jas0501

Re: manipulate multiple PImage with mouse

1 year ago
The fill color needs to be set for each rectangle. As the code stands the fill color is remembered from the button display so all rectangles get displayed as the button color.
jas0501
jas0501

Re: manipulate multiple PImage with mouse

1 year ago
Use global
 
boolean isOverSomething;

 and class attribute 

boolean overMe = false;

 with class method 

boolean over(){};


and a check in the form

if(isOverSomething) // over something
{
if(overMe) // over me!
{
    if(!over())
    {
overMe = false;
isOverSomething = false;
}
}
    }
}
else // not over anything at the moment
{
if(over()) // over me!
{
overMe = true;
isOverSomething = true;
}

}
   
CivicImages
CivicImag..

Re: manipulate multiple PImage with mouse

1 year ago
Thanks again for the help.

 for (int i = shapeMove.length-1; i >=0; i--) {
      shapeMove[i].update();
      shapeMove[i].display();
}

This changes the stack order of the squares, but the mouse still grabs the one on the bottom. What I need for it to work is something like the following, but that gives me a null pointer error.

  for (int i = 0; i < 2; i++) {
    shapeMove[i].display();
  }
  for (int i = shapeMove.length-1; i >=0; i--) 
  {
    shapeMove[i].update();
  }

It works properly if I write it out like this: 
  shapeMove[1].update();
  shapeMove[0].update();
  shapeMove[0].display();
  shapeMove[1].display();
CivicImages
CivicImag..

Re: manipulate multiple PImage with mouse

1 year ago
Woops, the shapeMove.update loop should be before the shapeMove.display loop. 
Top Reply

Statistics

  • 13 Replies
  • 1005  Views
  • 0 Followers

Tags

No tags available for this topic.

Actions

Related Posts