# Mouse dragged in P5js

**URL:** <https://discourse.processing.org/t/mouse-dragged-in-p5js/22066>\
**Category:** Coding Questions\
**Created:** [June 22, 2020, 3:29pm UTC](https://discourse.processing.org/t/mouse-dragged-in-p5js/22066 "2020-06-22T15:29:11Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![AKAC](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/akac/32/9836_2.png) [@AKAC](https://discourse.processing.org/u/AKAC)\
**Post date:** [June 22, 2020, 3:29pm UTC](https://discourse.processing.org/t/mouse-dragged-in-p5js/22066/1 "2020-06-22T15:29:11Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![janmaltel](https://avatars.discourse-cdn.com/v4/letter/j/47e85d/32.png) [@janmaltel](https://discourse.processing.org/u/janmaltel)\
**Post date:** [June 22, 2020, 5:57pm UTC](https://discourse.processing.org/t/mouse-dragged-in-p5js/22066/2 "2020-06-22T17:57:07Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![AKAC](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/akac/32/9836_2.png) [@AKAC](https://discourse.processing.org/u/AKAC)\
**Post date:** [June 23, 2020, 3:10pm UTC](https://discourse.processing.org/t/mouse-dragged-in-p5js/22066/3 "2020-06-23T15:10:22Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![janmaltel](https://avatars.discourse-cdn.com/v4/letter/j/47e85d/32.png) [@janmaltel](https://discourse.processing.org/u/janmaltel)\
**Post date:** [June 23, 2020, 8:57pm UTC](https://discourse.processing.org/t/mouse-dragged-in-p5js/22066/4 "2020-06-23T20:57:19Z")

</div>

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](https://editor.p5js.org/janmaltel/sketches/5XHtyltKc) p5.js editor sketch. The dragging functionality is very basic but it should get you going! No worries if you get stuck again.

---

<div class="post-metadata">

**Author:** ![AKAC](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/akac/32/9836_2.png) [@AKAC](https://discourse.processing.org/u/AKAC)\
**Post date:** [June 23, 2020, 10:24pm UTC](https://discourse.processing.org/t/mouse-dragged-in-p5js/22066/5 "2020-06-23T22:24:52Z")

</div>

Hello janmaltel

You save my i whole month🤯…

Thank you very , very much

Best regards

ACAC

---

<div class="post-metadata">

**Author:** ![AKAC](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/akac/32/9836_2.png) [@AKAC](https://discourse.processing.org/u/AKAC)\
**Post date:** [July 4, 2020, 12:21pm UTC](https://discourse.processing.org/t/mouse-dragged-in-p5js/22066/6 "2020-07-04T12:21:33Z")

</div>

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\>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(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

---

<div class="post-metadata">

**Author:** ![AKAC](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/akac/32/9836_2.png) [@AKAC](https://discourse.processing.org/u/AKAC)\
**Post date:** [July 4, 2020, 3:08pm UTC](https://discourse.processing.org/t/mouse-dragged-in-p5js/22066/7 "2020-07-04T15:08:33Z")

</div>

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… ![weary.png](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/6577cd01d67c3094b9474d2f1ec9a7698629b639.png)  
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\>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(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) {

```auto
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;

```auto
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