Clicking and dragging an image

Processing Libraries
1

So I have a lot of images set up that change slightly with a mouse press (it’s like a day to night party scene) and I have an image of a person I made that I want to be able to click and drag along one x-axis line… any help would be much appreciated

Basically I want it to be so the image stays on the same x axis, but wherever the mouse is when pressed down is where the person will go

Here’s what I’ve got if that helps: (it’s also set up so I can add music later but I haven’t yet)

PImage alamo, buildings, flag, line, tower, Alamo, Buildings, cart, coaster, Flag, papel, moon, person;
  //Declare a variable of the type PImage
  
  import ddf.minim.*;

Minim minim;
AudioPlayer player;
AudioInput input;


void setup(){
  size(1000,700);
  
  alamo = loadImage("Alamo day.png");
  buildings = loadImage("buildings day.png");
  flag = loadImage("flag.png");
  line = loadImage("skyline.png");
  tower = loadImage("tower day.png");
  Alamo = loadImage("Alamo night.png");
  Buildings = loadImage("buildings night.png");
  cart = loadImage("cart.png");
  coaster = loadImage("coaster day.png");
  Flag = loadImage("flag night.png");
  papel = loadImage("papel.png");
  moon = loadImage("moon.png");
  person = loadImage("person.png");
  
 /// minim = new Minim(this);
 // player = minim.loadFile("squirt.wav");
 // input = minim.getLineIn();
  
}

void draw(){
  background (210, 201, 201);
    if (mousePressed == true){
    image (tower, 450,175);
    image (Alamo, 67,462);
    image (Buildings, 272,285);
    image (coaster, 550, 100);
    image (Flag, 32, 550);
    image (papel, 0,5);
    image (line, 0, 600);
    image (cart, 700, 295);
    image (moon, 45, 200);
    image (person, 45, 450);
    }else{
    image (flag, 32,550);
    image (line, 0, 600);
    image (coaster, 550, 100);
    image (alamo, 67, 462);
    image (buildings, 272, 285);
    image (tower, 450,175);
    }
}
1 Like
2

Hi @lib,

Not getting it 100% what you want, but let’s start by changing this line

image (person, 45, 450);

to

image (person, mouseX, 450);

Cheers
— mnse

2 Likes
3

Take a look at the scroll bar example. You may be able to adapt elements from that example for your project.

Reference:

image
image1280×720 44.1 KB

Interactivity tutoiral:

:)

4

That’s exactly what I wanted thank you!!

1 Like
5

This example moves a text (replace it with image) when you press the mouse.

It uses easing so that the text does not jump there but moves there slowly.

A link to describe this can be found in the code.

Chrisir


boolean moves=false;

float mousePosDesired; // stored as target when the mouse is clicked 
float posFromMouseUsedForDisplaying=height/2; // current text pos

float easing = 0.05; // speed 

void setup() {
  size(560, 360);
}

void draw() {
  background(0);

  // text / image
  text("person\nimage", width/2, posFromMouseUsedForDisplaying);

  // if mouse was clicked, we move
  if (moves) {
    // moves with easing, https://processing.org/examples/easing.html
    float dx = mousePosDesired - posFromMouseUsedForDisplaying;
    posFromMouseUsedForDisplaying += dx * easing;

    if (dist(0, posFromMouseUsedForDisplaying, 0, mousePosDesired) < 0.1) {
      // stop movement
      posFromMouseUsedForDisplaying=mousePosDesired;
      moves=false;
    }
  }
}

// ------------------------------------------------------------------

void mousePressed () {
  moves=true;             // start moving 
  mousePosDesired=mouseY; // store as target when the mouse is clicked 
}