Clicking and dragging an image

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(){
  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);
    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

Hi @lib,

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

image (person, 45, 450);


image (person, mouseX, 450);

— mnse


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


Interactivity tutoiral:


That’s exactly what I wanted thank you!!

1 Like

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.


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() {

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

  // if mouse was clicked, we move
  if (moves) {
    // moves with easing,
    float dx = mousePosDesired - posFromMouseUsedForDisplaying;
    posFromMouseUsedForDisplaying += dx * easing;

    if (dist(0, posFromMouseUsedForDisplaying, 0, mousePosDesired) < 0.1) {
      // stop movement

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

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