Drag around an image

Programming Questions

kurainisei

in Programming Questions • 2 years ago

Hi there!

I'm really new to processing (and fairly new to coding, too!) and I'm trying to make a small prototype.

What I have is a big image (say, 4 time my viewport) and I need to drag it around in a smooth way. I have two behaviors I want:

1) if I drag, I move the map in the direction I'm dragging (like in PS or Illustrator when you drag around your artboard.

2) if I click on the viewport the map should center the point I've clicked in a smooth way.

Here is my code for now:

PImage mapSfondo;
float x=0;
float y=0;
float easing = 0.05;
void setup()
{
size (320, 240);
smooth();
imageMode(CENTER);
mapSfondo = loadImage("map.png");
}
void draw ()
{
image (mapSfondo, x,y);
}
void mouseDragged ()
{
x += (mouseX - x) * easing;
y += (mouseY-y)*easing;
}

Now, dragging is almost good, but if I start to drag slowly I get a very strange behavior, where the map seems to be moving in the opposite direction for a while and then catch up in the right way.

Plus, I'm still not sure how to do the second behavior. Can someone help me? Thanks!

Replies(6)

Greger

Re: Drag around an image

2 years ago

The second behaviour I can help you with, really quick.

If you click in the viewport, you get the mouse coordinates, if you from that subtract half the width on X; and half the height on Y, you would get 0,0 if someone clicked in the center of the viewport, which would mean you should not move the map at all.

If they click a bit to the right of center, you'd get e.g. 100, 0, which would mean you should move the map 100 pixels to the left of the current position. And if they clicked to the left, you'd get e.g. -100, 0, which would mean you'd move the map 100 pixels to the right.

So what you need to do, is update the position of the map like so:

x -= (mouseX-(width/2));

y -= (mouseY-(height/2));

on mouseClicked()

That, of course, is not a smooth way, but it is a start.

You should probably store the new center in temporary variables, that you ease in.

But getting everything to work "snappy" first is a good way to work. Then you can add the fancy stuff later.

kurainisei

Re: Re: Drag around an image

2 years ago

Oh, that's great. I will try to implement easing myself (I'm still a newbie ;)).

Now I need to better understand why I have the strange behavior in the mouseDrag function.

kurainisei

Re: Drag around an image

2 years ago

I've tried to remove easing to make the drag simpler, but I still get the strange behavior when I drag. Could someone help me on this? The code right now:

PImage mapSfondo;
float x=0;
float y=0;
float easing = 0.05;
void setup()
{
size (320, 240);
smooth();
imageMode(CENTER);
mapSfondo = loadImage("map.png");
}
void draw ()
{
image (mapSfondo, x,y);
}
void mouseDragged ()
{
x += (mouseX-x);
y += (mouseY-y);
}
void mouseClicked ()
{
x -= (mouseX-(width/2));
y -= (mouseY-(height/2));
}

I need to make the drag work correctly and use easing for both behaviors. Can someone help me out? I guess I'm stuck...

mbraendle

Re: Drag around an image

2 years ago

That's how I did it (see http://www.infochembio.ethz.ch/en/librarynavigator.html ). Not with an image, but with SVG objects, but the principle is the same.

Define the following global variables:

float x_offset_drag, y_offset_drag;

boolean locked = false;

Use mousePressed() instead of mouseClicked() (since click means pressing and releasing the mouse):

void mousePressed() {
x_offset_drag = mouseX - x;
y_offset_drag = mouseY - y;
locked = true;
cursor(HAND);
}
void mouseDragged() {
if (locked) {
x = mouseX - x_offset_drag;
y = mouseY - y_offset_drag;
}
}
void mouseReleased() {
locked = false;
cursor(ARROW);
}

mbraendle

Re: Drag around an image

2 years ago

Sorry, saw that you use mouseClicked() to center the image. mousePressed() however is needed to determine the initial offset of your mouse pointer with regards to the image coordinates.

This offset then is used in mouseDragged() to calculate the drag vector.

So a combination of my part and your mouseClicked() part should do it.

kurainisei

Re: Re: Drag around an image

2 years ago

It did the trick, indeed!

Thank you!

Top Reply