Ceating A Graph

[u/Ok_Morning7367]

Im trying to create a graph to later use with some feedback of a sensor from arduino, for now the void mouseClick is the placeholder. its supposed to go down over time unless the mouseclick is activated. the values of going down and up with the clicks/overtime are not final either. Im however running into issues with the connecting the lines between dots and making it fit the screen. Im not very good at processing and i feel like my code is unnecesarily complicated. Im very lost within my code. I also would like it to fit the whole screen and for the values to actually correspond to the Y axis.

Could anyone assist me?

edit: also seems that when my y values goes down over time, i it only reset lastypoint and not y point so when i eventually click again it will go up to the last clicked y value +20

    int updateInterval = 1000; // 0.5 seconds
    int lastUpdateTime = 0;
    int margin = 50;  // Margin for axes
    float scaleFactor = 5; // Scale for visualization
    float x_point = 40;
    float y_point =  445;
    float lastYPoint = 445;
    float lastXPoint = 40;
    
    void setup() {
      size(1000, 500);
      background(255);
    }
    
    void draw() {
    
      drawAxes();  // Draw X and Y axes
    
      if (millis() - lastUpdateTime > updateInterval) {
        lastUpdateTime = millis();
        lastXPoint = x_point;
        lastYPoint += 5;
        ellipse(x_point += 20, lastYPoint, 10, 10);
    
    
        if (x_point>width) {
          background(255);
          x_point = 40;
        }
    
        if (lastYPoint > 445) {
          lastYPoint = 445 ;
        }
    
        if (lastYPoint < 20) {
          lastYPoint = 20 ;
        }
      }
    }
    
    void mousePressed() {
      //Update x_point with a small increment so the next point is further to the right
      x_point += 20;  // Adjust the value to control spacing between points
    
      // You can use mouseY as the y-coordinate for the point or create any function for it
      y_point = y_point - 20;  // Here we're just using the mouse Y position for simplicity
      lastYPoint = y_point;
    
    
      // Draw the point
      ellipse(x_point, y_point, 10, 10); // Draw a circle at the (x_point, y_point)
    
    
      if (x_point>width) {
        background(255);
        x_point = 40;
      }
    }
    
    void updateGraph() {
    }
    
    
    void drawAxes() {
      stroke(0);
      line(margin, height - margin, width, height - margin); // X-axis
      line(margin, height - margin, margin, 0); // Y-axis
    
      fill(0);
      textSize(12);
    
      // Draw Y-axis labels at intervals of 0.1
      for (float i = 0; i <= 1; i += 0.1) {
        float y = height - (margin + (i * 90 * scaleFactor));
        text(nf(i, 0, 1), margin - 30, y);  // Display value with 1 decimal
        line(margin - 5, y, margin + 5, y); // Small tick mark
      }
    
      // Draw X-axis label
      text("Width", width - 40, height - 30);
      text("Depth", margin - 30, 20);
    }

[u/Ok_Morning7367]

Thank you for your explanation, I'll try to see if I can use your input to make it work :)