# FrameRate hiccups

**URL:** <https://discourse.processing.org/t/framerate-hiccups/11947>\
**Category:** Coding Questions\
**Created:** [June 9, 2019, 6:07pm UTC](https://discourse.processing.org/t/framerate-hiccups/11947 "2019-06-09T18:07:04Z")\
**Posts on this page:** 1\
**Showing post:** 15

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [June 15, 2019, 11:59pm UTC](https://discourse.processing.org/t/framerate-hiccups/11947/15 "2019-06-15T23:59:41Z")

</div>

I had some fun visualizing the data available to me.

I displayed frameRate data (which averages) to framerate calculated from time between frames.  
[https://processing.org/reference/frameRate.html](https://processing.org/reference/frameRate.html)

Code (you will have to select use “true” or “false” to see different modes of output):

```auto
PrintWriter output;

Table table;
int time = 16*60+40; //16s*60f/s = 960f hiccups end after this time
boolean dispMode = true; // "true" stores to file and plots after "time", "false" plots in real time

long lastTime;
long currTime;
long diffTime;

void setup() 
  {
  size(1000, 600, P3D);
  background(0);
  frameRate(60);
  
  if (!dispMode)
    {
    output = createWriter("frameRate.csv");
    output.println("frameCount" + "," + "frameRate");
    textSize(30);
    textAlign(CENTER, CENTER);
  // text("Please wait for "+ time + " frameCounts...", width/2, height/2);
    text("Please wait for "+ time/60 + " seconds...", width/2, height/4);
    lastTime = System.nanoTime(); 
    }
  }

void draw() 
  {
  if (dispMode)
    {
    currTime = System.nanoTime();
    diffTime = currTime - lastTime;
  // println(frameCount, frameRate, 1000000000.0/diffTime);
    lastTime = currTime;
   
    if (frameCount%width == 0)
      background(0);   
    float scale = 5;
    float size = map(abs(1000000000.0/diffTime-60), 0, 100, 2, 30);
    strokeWeight(size);
    stroke(0, 255, 0);
    point(frameCount%width, float(height) - scale*1000000000.0/diffTime);
    strokeWeight(3);
    stroke(255, 255, 0);
    point(frameCount%width, float(height) - scale*(frameRate));
    }
  
  if (!dispMode)
    {
    output.println(frameCount + "," + frameRate);
    if (frameCount == time) closeFile(); 
    if (frameCount > time)
      {  
      table = loadTable("frameRate.csv", "header");  
      for (TableRow row : table.rows()) 
        {
        int x = row.getInt("frameCount");
        float y = row.getFloat("frameRate");
  
  // Add some colour
        if (y < 55) // Red for framerate < 55
          stroke(255, 0, 0);
        else if (y < 59) // Yellow for 55<= framerate <59 
          stroke(255, 255, 0);
        else
          stroke(0, 255, 0); // Green for 59<= framerate It can be > 60 fps!
  // Plot         
        strokeWeight(2);
        point(x%width, float(height)-5*y);
        }      
      }
    }
  }    

void closeFile()
  {
  output.flush(); // Writes the remaining data to the file
  output.close(); // Finishes the file
// exit();
  }

```

Plot of Average Processing “frameRate” (yellow) and Calculated Framerate (green) with enhancements:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/3a2361f1de624bdbc82903081e85c4873195f979.png)

Same program where it only collects data and plots after 16s:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/b3d61dc7c11fe6c43d4564e07236cc53023cce9d.png)

Data visualization can be fun!

---

_[View the full topic](https://discourse.processing.org/t/framerate-hiccups/11947)._