Mouse dragged in P5js

[AKAC]

Hi
I’m new in P5 and need a help with “mouse dragged”

my code is:
let imgB;
let imgC;
let imgD;

let sz = 70

let y = 0;
let x = 0;
let y1 = 0;
let x1 = 0;
let y2 = 0;
let x2 = 0;

let startX = 0;
let startY = 0;
let startX1 = 0;
let startY1 = 0;
let startX2 = 0;
let startY2 = 0;

let speed = 3;

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

//img Mirc.
image(imgB, x, y, sz, sz)
x = x + speed * 0.5;
y = y + speed * 0.3;

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

//img Agres.
image(imgC, x1, y1, sz, sz);
x1 = x1 + speed * 0.4;
y1 = y1 + speed * 0.1;

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

//img R.Bl
image(imgD, x2, y2, sz, sz);
x2 = x2 + speed * 0.3;
y2 = y2 + speed * 0.4;
if (x2 > 600) {
x2 = -1;
}
if (y2 > 600) {
y2 = -1;
}

function mousePressed() {
if (dist(x, y, mouseX, mouseY) < sz / 2) {
startX = mouseX;
startY = mouseY;
}

if (dist(x1, y1, mouseX, mouseY) < sz / 2) {
  startX1 = mouseX;
  startY1 = mouseY;
}

if (dist(x2, y2, mouseX, mouseY) < sz / 2) {
  startX2 = mouseX;
  startY2 = mouseY;
}

}

function mouseDragged() {
if (dist(x1, y1, mouseX, mouseY) < sz / 2) {
diff = startX - mouseX;
x = x - diff;
startX = mouseX;
diff1 = startY - mouseY;
y = y - diff;
startY = mouseY;
}

if (dist(x1, y1, mouseX, mouseY) < sz / 2) {
  diff2 = startX1 - mouseX;
  x1 = x1 - diff2;
  startX1 = mouseX;
  diff3 = startY1 - mouseY;
  y1 = y1 - diff3;
  startY1 = mouseY;
}

if (dist(x2, y2, mouseX, mouseY) < sz / 2) {
  diff4 = startX2 - mouseX;
  x2 = x2 - diff4;
  startX2 = mouseX;
  diff5 = startY2 - mouseY;
  y2 = y2 - diff5;
  startY2 = mouseY;
}

}
}
but…that is not working
There is some one that can help me??
Thaks

[janmaltel]

Hi @AKAC

Welcome!

What exactly should happen when the mouse is dragged?

Do you want to move the images if the initial click is on one of the images?

[AKAC]

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 …
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.

[janmaltel]

Hi @AKAC,

all the good ideas were already in your code snippet!!

One thing that stopped it from working though (I think) is that you defined the mousePressed() / mouseDragged() functions inside your draw() function… all these event listeners should always be defined “outside” (on the same “level” as your setup() and draw() functions). It is only there that these so-called “event-listeners” are actually listening for your mouse and key “events”.

You can see a very simple example in this p5.js editor sketch. The dragging functionality is very basic but it should get you going! No worries if you get stuck again.

[AKAC]

Hello janmaltel

You save my i whole month🤯…

Thank you very , very much

Best regards

ACAC

[AKAC]

Hy janmaltel
hope you are ok.
I need your help again…
I would like to integrate the first sketch
into the second but when I do that the line only draws once and runs without leaving a trace …
Can you help me solve it?

first sketch : let imgW;

let ang1=0, ang2=0;
let raio=220;
let x1,y1,x2,y2;

function setup() {
createCanvas(1000, 1000);
background(0);
imgW = loadImage(‘Rosa_corymbifera.png’);

strokeWeight(1.5);
}

function draw() {
push() ;
stroke(random(220, 255), random(220, 255), random(220, 255));
ang1+=0.01;
if(ang1>2PI) ang1=0;
ang2+=0.05;
if(ang2>2PI) ang2=0;

let nx=sin(ang2)*raio/3;
let ny=cos(ang2)*raio/3;

let x1=nx-sin(ang1)*raio;
let y1=ny-cos(ang1)*raio;
let x2=nx+sin(ang1)*raio;
let y2=ny+cos(ang1)*raio;

translate(width/2,height/2);

line(x1,y1,x2,y2);

second sketch (is longer but a resume…)
push();
if (mouseX > 1305 && mouseX < 1325 && mouseY > 600 && mouseY < 620) {

stroke(255);
strokeWeight(4);
fill(0);
rect(620, 365, 570, 600);
image(imgMaq, random(1150, 1155), random(400, 405), 420, 660);
ele.autoplay(true);

// push();
stroke(random(220, 255), random(220, 255), random(220, 255));
ang1+= 0.01;
if (ang1 > 2 * PI) ang1 = 0;

ang2 += 0.05;
if (ang2 > 2 * PI) ang2 = 0;

let nx = sin(ang2) * raio/3;
let ny = cos(ang2) * raio/3;

let x1 = nx - sin(ang1) * raio;
let y1 = ny - cos(ang1) * raio;
let x2 = nx + sin(ang1) * raio;
let y2 = ny + cos(ang1) * raio;


translate(905, 670);

//rotate(ang1)
//translate(mouseX,mouseY);
line(x1, y1, x2, y2);

pop();

if you can tell me what i’m doing wrong i would appreciate it.
thanks
AKAC

[AKAC]

Hello janmaltel
hope you are ok.

I have send this msg via “Processing Foundation” i don’t now if it’s the better way??

I need your help again…
I would like to integrate the first sketch
into the second but when I do that the line only draws once and runs without leaving a trace …
Can you help me solve it?

first sketch : let imgW;

let ang1=0, ang2=0;
let raio=220;
let x1,y1,x2,y2;

function setup() {
createCanvas(1000, 1000);
background(0);
imgW = loadImage(‘Rosa_corymbifera.png’);

strokeWeight(1.5);
}

function draw() {
push() ;
stroke(random(220, 255), random(220, 255), random(220, 255));
ang1+=0.01;
if(ang1>2PI) ang1=0;
ang2+=0.05;
if(ang2>2PI) ang2=0;

let nx=sin(ang2)*raio/3;
let ny=cos(ang2)*raio/3;

let x1=nx-sin(ang1)*raio;
let y1=ny-cos(ang1)*raio;
let x2=nx+sin(ang1)*raio;
let y2=ny+cos(ang1)*raio;

translate(width/2,height/2);

line(x1,y1,x2,y2);

second sketch (is longer but a resume…)
push();
if (mouseX > 1305 && mouseX < 1325 && mouseY > 600 && mouseY < 620) {

stroke(255);
strokeWeight(4);
fill(0);
rect(620, 365, 570, 600);
image(imgMaq, random(1150, 1155), random(400, 405), 420, 660);
ele.autoplay(true);

// push();
stroke(random(220, 255), random(220, 255), random(220, 255));
ang1+= 0.01;
if (ang1 > 2 * PI) ang1 = 0;

ang2 += 0.05;
if (ang2 > 2 * PI) ang2 = 0;

let nx = sin(ang2) * raio/3;
let ny = cos(ang2) * raio/3;

let x1 = nx - sin(ang1) * raio;
let y1 = ny - cos(ang1) * raio;
let x2 = nx + sin(ang1) * raio;
let y2 = ny + cos(ang1) * raio;

translate(905, 670);

//rotate(ang1)
//translate(mouseX,mouseY);
line(x1, y1, x2, y2);

pop();

if you can tell me what i’m doing wrong i would appreciate it.
thanks
AKAC