Basic interactive sketches don't run smoothly

Processing
1

Hi all,

I’m having the weirdest issue here. I’ve switched to p5js and its been almost a year that I didn’t use Processing on my Macbook (13-inch 2017, running macOS 10.13.6). Now I’m running the Hello World of interactivity and trying to move an ellipse using mouse coordinates. It doesn’t run smoothly as expected. It seems like the frameRate is very low, but I’ve printed it to console, it is pretty normal… around 60 fps. What is wrong? I’ve tried it with Processing 3.5.4 and the alpha version of Processing 4, same result.

Can anyone help me?

Thx,

2

Maybe the refresh rate of your screen is just really low, or you have some problem with your graphis driver. Simple programs like

void setup() {
  size(1280, 720);
}

void draw() {
  background(255);
  stroke(0);
  strokeWeight(3);
  fill(255, 180, 0);
  ellipse(mouseX, mouseY, 50, 50);
}

should run at 60 fps (or whatever the default maximum is for your machine, but I think in most cases it is 60)

1 Like
3

Thx for the reply!

Yes the frameRate is around 60 fps for this very simple program, but the ellipse is not following the cursor smoothly… And now I’ve observed one more thing, the ellipse doesn’t move while I’m moving the mouse, it jumps to the point of the cursor after I stop moving. It looks like mouse movement is blocking the draw loop but below are the frameRate and frameCount values printed on console, so it seems nothing is wrong? But visually it is very wrong … any ideas?

59.92041 1
52.982334 2
53.152084 3
53.267273 4
53.658943 5
53.77972 6
54.46967 7
54.439957 8
54.77287 9
54.936268 10
55.223812 11
55.55422 12
55.887882 13
55.88683 14
56.00667 15
56.092365 16
56.363525 17
56.550713 18
56.884026 19
56.872078 20
57.3123 21
57.290966 22
57.44062 23
57.607468 24
57.678425 25
57.498352 26
57.886944 27
57.77772 28
57.771477 29
58.14217 30
4

Can you share the code? Also what happens without mouse, for example moving an ellipse with map(sin(millis()*0.01),-1,1,0,width) ?

5

Thx for the reply @micuat ! I’m using the same code that WeinSim posted…
There is no problem with animations as you’ve suggested, they are pretty smooth. I’ve tried the code below. But if I move the mouse during this animation, ellipse movement stops, draw continues to loop and prints the frameRate and frameCount :exploding_head: Any more ideas on what is going wrong?

void setup() {
  size(1280, 720);
}

void draw() {
  background(255);
  stroke(0);
  strokeWeight(3);
  fill(255, 180, 0);
  
  circle(map(sin(millis()*0.01),-1,1,0,width), height/2, 50);
  
  println(frameRate, frameCount);
  
}

This is how the console looks like:

60.222404 1
52.22927 2
52.530968 3
52.4702 4
53.0685 5
53.471985 6
53.83725 7
53.815617 8
54.29866 9
54.681328 10
54.887657 11
55.160927 12
55.35825 13
55.565506 14
55.550766 15
56.008003 16
55.692516 17
56.208244 18
56.279285 19
56.55302 20
56.83483 21
56.693428 22
56.87931 23
57.259018 24
57.183098 25
57.284416 26
57.57314 27
6

Hi @cern,

From what you posted, the framerate is fine and it should run well.

It might be your operating system or your graphic card / drivers…

Also did you try to run Processing alone with no other applications running in the background or windows around?

7

So if I am understanding this right, the draw() method stops being executed as soon as you start moving your mouse, and once you stop moving, draw() continues? That seems very odd
To quantify this, could you maybe add this to your code?

println(frameCount, frameRate, millis());  //instead of just println(frameRate)
8

Hi @josephh, I also tried to run Processing alone, no luck…

@WeinSim draw() doesn’t stop, it continues to print to console smoothly but the circle stops moving as soon as I start moving the mouse and once I stop moving the mouse the circle continues moving… I’ve also tried to press random keys. I’m trying to understand if any mouse/keyboard input is blocking the canvas update, but pressing keys doesn’t interrupt the animation. Here is the updated console output according to your suggestion:

57.249493 1 807
47.20708 2 820
47.49295 3 837
48.180977 4 853
48.581757 5 870
49.06544 6 887
49.369396 7 903
49.922966 8 920
50.37355 9 936
50.88027 10 953
51.14275 11 971
51.64865 12 986
51.658867 13 1004
52.260025 14 1020
52.784363 15 1035
53.00308 16 1052
53.223545 17 1069
53.295784 18 1088
53.981346 19 1102
54.115166 20 1120
1 Like
9

Hello,

It works fine on W10.

Try another renderer and report back.
Environment (IDE) \ Processing.org

size(1280, 720, P2D);
size(1280, 720, P3D);
size(1280, 720, FX2D);

:)

1 Like
10

@glv thank youuu! now it is displaying the animation smoothly :star2:
It seems I have to use the P2D or FX2D (it also works fine with P3D, but no need in my case since I work with 2D canvas only) I still don’t know why it doesn’t work with the default renderer, but it is solved!

2 Likes