mouse Drag & Drop

hellostranger

I'm doing some Instagram story-like things, like putting emojis on my processing sketch. I set 84 emojis in 7x12 array and if I click each of emojis, then the emoji should be dragged and dropped. the problem is the code I wrote. The emoji stuck when I click and drag.

---

void mouseDragged() {

if (155>mouseX && mouseX>100 && 100>mouseY && mouseY>51 == true) { image(emoji, pmouseX, pmouseY); }

---------------------============= I think that range is the issue. The emoji is just stuck in that range. how can I drag and drop images where I want to put on?

kfrajer

First this: if (155>mouseX && mouseX>100 && 100>mouseY && mouseY>51 == true)

should be this instead if (155>mouseX && mouseX>100 && 100>mouseY && mouseY>51)

Pseudo-code next.

Kf

    boolean emojiShift=false;
    int mx,my;

    void draw(){

      if(emojiShift==true)
        image(emoji,mouseX,mouseY);
      else 
        image(emoji,mx,my);
    }

    void mousePressed(){
      if(is hovering over emoji == true)
        emojiShift=true;  //Start dragging
    }

    void mouseReleased(){
        emojiShift=false;  //Dropped!
    }

You need to complete is hovering over emoji above. One strategy is to use the dist() function. Assuming your imageMode() is CENTER, then the checking would be:

if( dist(mouseX,mouseY,emojiX,emojiY)<emojiRadius) {...}

where emojiX and emojiY is the emoji's center position.

Kf

Chrisir

Also in draw I would say image(emoji,mx,my); outside the if

inside the if in draw say mx=mouseX;my=mouseY;

hellostranger

@kfrajer @Chrisir

Thank you guys, it worked!![20180420_162240]

However, as you can see the picture, the image keeps appearing when I drag. I guess this is because I put <<image(emoji,mouseX,mouseY);>> in draw(). must <<image(emoji,mouseX,mouseY);>>be in draw()?

Chrisir

Just use background at start of draw() and display everything after background

Chrisir

Ideally the emojis are in a grid so you can know their position

In mousePressed for loop over all emojis to figure out which one was pressed on

Ideally the emojis are in an array and all mx,my also in an array

hellostranger

@Chrisir

Thnx!!!!!!!!!!!!!!

Chrisir

...so that you can drag all

Displaying would happen in a for loop and the mousePressed function would also have a for loop