# Touchended() + coordinates issue

**URL:** <https://discourse.processing.org/t/touchended-coordinates-issue/40306>\
**Category:** Coding Questions\
**Created:** [December 25, 2022, 11:11pm UTC](https://discourse.processing.org/t/touchended-coordinates-issue/40306 "2022-12-25T23:11:54Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![frex](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/frex/32/17686_2.png) [@frex](https://discourse.processing.org/u/frex)\
**Post date:** [December 25, 2022, 11:11pm UTC](https://discourse.processing.org/t/touchended-coordinates-issue/40306/1 "2022-12-25T23:11:54Z")

</div>

Hey Merry Christmas ,  
I modified this code from the coding train with the function touches:

[![](https://img.youtube.com/vi/TaN5At5RWH8/maxresdefault.jpg "7.4: Mouse Interaction with Objects - p5.js Tutorial") ](https://www.youtube.com/watch?v=TaN5At5RWH8)

and I was trying to change the code to have the color of the bubble changing back to default on touchended(); ( it works fine with mouseReleased() but trying to implement it with touches)  
and I am ending with unexpected behavior ( looks like touchended() is unable to send the coordinate of touches which will make sense as there is no more touches when touchended is being called). I assume the way to processed would be to store the previous coordinates of all the touches (just before touchended()) and call them on the function touchended() ??  
if its the case, any direction would be very welcome to achieve this :🙂  
thank you!

modified code here :

let bubbles = ;

function setup() {  
createCanvas(600, 400);  
for (let i = 0; i \< 10; i++) {  
let x = random(width);  
let y = random(height);  
let r = random(20, 60);  
let b = new Bubble(x, y, r);  
bubbles.push(b);  
}  
}

function mousePressed() {  
for (let i = 0; i \< bubbles.length; i++) {  
bubbles[i].clicked(mouseX, mouseY);  
}  
}

function mouseReleased() {  
for (let i = 0; i \< bubbles.length; i++) {  
bubbles[i].unclicked(mouseX, mouseY);  
}  
}

function touchStarted() {  
for (let i = 0; i \< bubbles.length; i++) {  
for (var t = 0; t \< touches.length; t++) {  
bubbles[i].clicked(touches[t].x, touches[t].y);  
}  
}  
}

function touchEnded() {  
for (let i = 0; i \< bubbles.length; i++) {  
for (var t = 0; t \< touches.length; t++) {

```
  x = touches[t].x;
  y = touches[t].y;
  bubbles[i].unclicked(x, y);

}
              // console.log ("hi " + touches.length );

```

}

}

function draw() {  
background(0);  
for (let i = 0; i \< bubbles.length; i++) {  
bubbles[i].move();  
bubbles[i].show();  
}  
}

class Bubble {  
constructor(x, y, r) {  
this.x = x;  
this.y = y;  
this.r = r;  
this.brightness = 0;  
}

clicked(px, py) {  
let d = dist(px, py, this.x, this.y);  
if (d \< this.r) {  
this.brightness = 255;  
}  
}

```
unclicked(px, py) {
let d = dist(px, py, this.x, this.y);
if (d < this.r) {
  this.brightness = 0;
}

```

}

move() {  
this.x = this.x + random(-2, 2);  
this.y = this.y + random(-2, 2);  
}

show() {  
stroke(255);  
strokeWeight(4);  
fill(this.brightness, 125);  
ellipse(this.x, this.y, this.r \* 2);  
}  
}

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [December 26, 2022, 7:32pm UTC](https://discourse.processing.org/t/touchended-coordinates-issue/40306/2 "2022-12-26T19:32:24Z")

</div>

Hello @frex

Not sure if this will solve the problem but check out from p5js reference: 🙂

> [@frex](#):
>
> I assume the way to processed would be to store the previous coordinates of all the touches (just before touchended()) and call them on the function touchended() ??

**In the p5js reference:**

“Browsers may have different default behaviors attached to various touch events. To prevent any default behavior for this event, add “return false” to the end of the method.”

> **[reference | p5.js](https://p5js.org/reference/#/p5/touchEnded)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

🤓

---

<div class="post-metadata">

**Author:** ![frex](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/frex/32/17686_2.png) [@frex](https://discourse.processing.org/u/frex)\
**Post date:** [December 26, 2022, 8:53pm UTC](https://discourse.processing.org/t/touchended-coordinates-issue/40306/3 "2022-12-26T20:53:41Z")

</div>

hey, It’s something I tried but it didn’t change the behavior.  
I do use mouseReleased() for now (as long you want to interact with one object at the time).

thanks!