Why text label upon mouseover doesn't work in this p5 code?

p5.js Coding Questions
1

I have a code drawing ellipses based on input data, and there is supposed to be text label on the ellipses upon mouse rollover, but so far that doesn’t work.

If I remove if (this.over) condition, the label shows.
If I use console.log to check if this.over condition is satisfied, it does too.

Any help appreciated.

// An Array of Bubble objects
var bubbles;
// A Table object
var table;

function preload() {
  table = loadTable("data/Sample.csv", "header");
}

function setup() {
  createCanvas(880, 570);
  loadData();
}

function draw() {
  background(255);
  textSize(32);
  
  // Display all bubbles
  for (var i = 0; i < bubbles.length; i++) {
    bubbles[i].display();
    bubbles[i].rollover(mouseX, mouseY);
  }


}

function loadData() {
  // Load CSV file into a Table object
  // "header" option indicates the file has a header row

  // The size of the array of Bubble objects is determined by the total number of rows in the CSV
  bubbles = []; 

  // You can access iterate over all the rows in a table
  for (var i = 0; i < 10; i++) {
    var row = table.getRow(i);
    // You can access the fields via their column name (or index)
    var x = row.get("a");
    var y = row.get("b");
    var d = row.get("c");
    var n = row.get("d");
    // Make a Bubble object out of the data read
    bubbles[i] = new Bubble(x,y,40);
    
  }
}

class Bubble {
  constructor(x, y, diameter) {
    this.x = 350 * Number(x);
    this.y = 500 * Number(y);
    this.diameter = 2*Number(diameter);
    this.over = false;
  }

  // Checking if mouse is over the Bubble
  rollover(px, py) {
    var d = dist(px, py, this.x, this.y);
    if (d < this.diameter/2) {
      this.over = true;
      console.log(d);
      console.log('over',this.over);
    } else {
      this.over = false;
    }
  }

  // Display the Bubble
  display() {
    stroke(0);
    strokeWeight(2);
    noFill();
    ellipse(this.x, this.y, this.diameter, this.diameter);

   
    
    if (this.over) {
      textAlign(CENTER);
      noStroke();
      text('yo', this.x, this.y + this.diameter/2 + 20);
    }
  }
}
2

because text color is
fill(); // color
but you say prior
nofill();

https://editor.p5js.org/kll/sketches/t3yzzeiO-

you see my sketch?
without your

  • CSV file and
  • class thing overhead

i created a example what show the problem
( and the solution )

and i loaded it at
p5js.org
so with a click everyone can read and test the code ( about THE problem only )
and not need lots of typing / copy paste / try to create files to get your code running