How to move an ellipse along a line with multiple points?

Question

I am currently doing up a mini project on the side as part of my beginner lesson to Javascript. I am hoping to allow an ellipse to appear along points on a few lines in a graph. The coordinates are derived from a css file, using the p5js library.

Following this example, I could only produce multiple ellipses (the amount corresponds to the number of points I have on the line). Is there any way I can somehow 'clear' the ellipses and allow only one to appear each time it travels on the lines?

Would also be great if there are any suggestions as to how I can make ellipses appear on exact coordinates when my mouse hovers over the lines at different points. I'm unable to use map() accurately.

The CSV has its heading with number of days in a month, first column with months and the remaining are data according to days in each month.

Below is a screenshot of what is currently happening, as well as a snippet the said code. Please do kindly correct me if my question wasn't well-asked. Thank you!

var endDay;
var beginX;
var beginY;
var beginY;
var endY;
var distX;
var distY;
var prevStart = null;
    
for (var i = 0; i < this.data.getRowCount(); i++) { 
    var a = this.data.getRow(i); 
    for(var k = 1; k < numDays; k++) {
    currEnd = {
        'day': this.firstDay  + k - 1 , 
        'case': a.getNum(k) //get no. of cases by day 
    } 


if(prevStart != null) {
    // this.mapDayToWidth, this.mapCaseToHeight are helpers to   
    // give scaled values    
    for plotting 
    beginX = this.mapDayToWidth(prevStart.day);
    endX = this.mapDayToWidth(currEnd.day);
    beginY = this.mapCaseToHeight(prevStart.case);
    endY = this.mapCaseToHeight(currEnd.case);

    let new_endX = constrain(mouseX, endX - 20, endX + 20);

    distX = endX - beginX;
    distY =  endY - beginY; 

    x = beginX + pct * distX;
    y = beginY + pct * distY; 
    pct += 0.00001; 

} 

prevStart = currEnd;

if(pct < 1.0) {
this.drawEllipses(mouseX, endY, 10); 
} 

} 
}

// how the ellipse is drawn
this.drawEllipse = function(ellipseX, ellipseY, size, begin_X, end_X) {
 fill('black');
 ellipse(ellipseX, ellipseY, size);

};

// how the line graph was plotted
this.drawLines = function(colr, x1, y1, x2, y2) {
strokeWeight(2);  
stroke(colr);
beginShape();
line(x1,
     y1,
     x2,
     y2
    );
endShape();
};

How to move an ellipse along a line with multiple points?

0 Answers0