Demo sketches are stuttering / hanging up

Hi. I recently installed processing and have begun learning it. I have noticed that my sketches are stuttering, sometimes even hanging up for a moment. This happens even when I run demo sketches, such as Bounce from the motion examples. I have checked the frame rate of these sketches and found it’s steady and consistent. It doesn’t reflect the stuttering at all.

For context, this is with the latest version of Processing on windows 10. I did try an earlier version (3.5.4) and still had the stuttering issues. Has anyone else experienced this?

UPDATE: The issue seems to only happen when using P2D or the default renderer. When I change to P3D, the stutter is gone

Hello @User442B,

Try the bounce example with a higher frameRate:

float xspeed = 1.4;  // Speed of the shape
float yspeed = 1.1;  // Speed of the shape
frameRate(60); //default

I adjusted the step size to half of what it was with frameRate(30).

:)

Thank you for the quick reply. I made these adjustments, and while it makes the overall movement smoother there is still some stutter. I can tell because for brief periods of time it is super smooth, but then all of a sudden it will become a bit choppy and then smooth again. It is not a terrible stutter, but it is there nonetheless.

I’ve found older threads that seem to have this same problem, but none of the ones I found had an answer

Hello @User442B,

Try this code with and without P2D (or P3D):

/**
 * Bounce. 
 * 
 * When the shape hits the edge of the window, it reverses its direction. 
 */
 
 import processing.javafx.*;
 
int rad = 60;        // Width of the shape
float xpos, ypos;    // Starting position of shape    

float xspeed = 1.4;  // Speed of the shape
float yspeed = 1.1;  // Speed of the shape

int xdirection = 1;  // Left or Right
int ydirection = 1;  // Top to Bottom

int tlast;

boolean toggle = false;

void setup() 
  {
  //size(640, 760, P2D);
  size(640, 760);
  println("Renderer: " + g.getClass().getName());  

  frameRate(30);
  ellipseMode(RADIUS);
  // Set the starting position of the shape
  xpos = width/2;
  ypos = height/4;
  tlast = millis();
  background(102);
}

void draw() 
{
  //background(102);
  fill(102);
  noStroke();
  rect(0, 0, width, height-400);
  int tnow = millis();
  int tdif = tnow-tlast;
  int y = height-5*(tdif-33)-200;
  int tmp = frameCount%width;
  int x = tmp;
  if (tmp == 0)
    background(102);
  tlast = tnow;
  //println(x, tdif);
  stroke(255, 255, 0);
  strokeWeight(abs(tdif-33));
  point(x, y);
  
  // Update the position of the shape
  xpos = xpos + ( xspeed * xdirection );
  ypos = ypos + ( yspeed * ydirection );
  
  // Test to see if the shape exceeds the boundaries of the screen
  // If it does, reverse its direction by multiplying by -1
  if (xpos > width-rad || xpos < rad) 
    {
    xdirection *= -1;
    }
  if (ypos > height-rad-400 || ypos < rad) 
    {
    ydirection *= -1;
    }

  // Draw the shape
  fill(255);
  noStroke();
  ellipse(xpos, ypos, rad, rad);
  }

For frameRate(30) the expected period T = 1/30 = 33.33 ms
The above code plots the deviation from 33 ms.

size(640, 760) output:

size(640, 760, P3D) output:

Another exploration of this I did in the past:

Just an exploration…

P2D and P3D use OPENGL which can use hardware rendering on GPU.

References:

:)