Mouse dragged in P5js

p5.js Coding Questions
3

Hello janmaltel
thanke for your msg.

I needed to drag an image to a place on the canvas, but I can only drag them all together and I don’t understand how to separate the drag for each image.
If you can help me, thank you I’ve been trying for almost 3 weeks …:astonished:
This is the code:

let imgC;
let imgD;
let imgB;

let x = 100
let y = 100

let x1 = 50
let y1 = 50

let x2 = 20
let y2 = 20

let sz = 70

let startx;
let starty;
let startx1;
let starty1;
let startx2;
let starty2;

//let speed=0.5;
//let direction=1;

function preload() {

imgB = loadImage(‘Mircantha.Peq.Br.png’);
imgC = loadImage(‘Agrestis.Peq.Br.png’);
imgD = loadImage(‘R.Bl.Peq.Br.png’);

}

function setup() {
createCanvas(600, 600);

}

function draw() {
background(0);

image(imgB, x, y, sz, sz);

x = x + 2;
y = y + 2;

if (x > 600) {
x = -1;
}
if (y > 600) {
y = -1;
}

image(imgC, x1, y1, sz, sz);

x1 = x1 + 2;
y1 = y1 + 3;

if (x1 > 600) {
x1 = -1;
}
if (y1 > 600) {
y1 = -1;
}

image(imgD, x2, y2, sz, sz);
x2 = x2 + 1;
y2 = y2 + 3;

if (x2 > 600) {
x2 = -1;
}
if (y2 > 600) {
y2 = -1;
}
//if (dist(mouseX, mouseY, x, y) && mouseX< sz/2 && mouseY< sz/2){
// mouseX=x;
// mouseY=y;
// }

function mousePressed() {

startx = mouseX;
starty = mouseY;

// startx1 = mouseX;
// starty1 = mouseY;

// startx2 = mouseX;
// starty2 = mouseY;
}

function mouseDragged() {
diff = startx - mouseX;
x = x - diff;
startx = mouseX;

diff1 = starty - mouseY;
y = y - diff;
starty = mouseY;

// diff2 = startx1 - mouseX;
// x1 = x1 - diff;
// startx1 = mouseX;

//diff3 = starty1 - mouseY;
// y1 = y1 - diff;
// starty1 = mouseY;

// diff4 = startx2 - mouseX;
// x2 = x2 - diff;
// startx2 = mouseX;

// diff5 = starty2 - mouseY;
// y2 = y2 - diff;
// starty2 = mouseY;
}
}

I appreciate the help you can give

best regards
A.C.A.C.