Hey Merry Christmas ,
I modified this code from the coding train with the function touches:
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);
}
}
