About the draw function

[Willian_Xz]

Hello people!!
I built a code on a lamp that goes on and off, the idea was to talk about the frequency in Hertz that a common lamp goes on and off, so I created a “simulation” of it.

The draw function as far as I know runs at 60 fps, why even at that frequency we can still observe an Oscillation in the light of the lamp I made in the code ??

I even increased the frequency of the fps using the frameRate command in a number greater than 60, even so it is still possible to observe an oscillation between the frames.

I have already used background instead of using a rectangle to make the background, even so it is still possible to observe an oscillation between the frames.

My thought is that at 60 fps or more it was not to be noticeable between the light on and off.

Does anyone correct me ?, tell me what is wrong or make a code that works so I can see what I am wrong, please.

Here is my code:

p5.js Web Editor

[noel]

Hi @Willian_Xz
Let’s assume that the lamp off would have a black color. When switching colors between frames, even at a frameRate of 60, you will see actually a lamp “color on” 30 times a second. (the other frame was black) If you have an Arduino you could test at what range you still would notice a flickering. It’s even different for each person. Would be nice to test.

[Willian_Xz]

I find that strange …

Even increasing the FPS by the frameRate function, placing it around 100 or more, we can still see an Oscillation between the frames of light on and light off.

In theory, just running at 60 fps, we couldn’t see this oscillation, however we could see it even increasing the FPS to 100 or more with the frameRate function …

The idea was that at 60 fps the draw function would switch frames so fast that it would create an illusion that the lamp was always on … but that is not the case, we can see an oscillation in this “simulation”.

I was wondering what the cause of this is or what is wrong with my code.

I will not make a code for an arduino, my class of students has not yet reached that level hehehe

[glv]

Hello,

You are also limited by the refresh rate of the monitor.

:)

[noel]

The maximum frameRate depends on the time needed to process what you are drawing, on your computer processing power, and sometimes on process interference from other not sketch related computer tasks. If you for instance draw just an ellipse on the background it will reach a high frameRate. With the code below I get a frameRate of about 5000 on my modest pc;
Also once again, the lamp goes only 30 times per second on and off. Not 60 times.

void setup() {
  frameRate(10000);
}

void draw() {
  background(0);
  ellipse(50, 50, 10, 10);
  if (frameCount % 10000 == 0) {
    println(frameRate);
  }
}

[Willian_Xz]

Really, this frameRate even set above 60, it doesn’t work …
Literally it only reaches a maximum of around 60 and this oscillation between 57, 58, 59, 60, 61, makes us able to perceive the flashing light.

The problem with frameRate is that even specifying to run only at 60 fps, it can’t … and it can’t go beyond 60 fps either.

So making this “simulation” more realistic about turning the light on and off is not possible.

It may work by adjusting the frequency of the monitor I use to over 60 fps, but I don’t want to do that.

This case was interesting, to know that there are limits in this frameRate that does not depend on the code.

Thank you all!!
And greetings from Brazil!

[noel]

The topic is actually interesting.
I believe that the irregularity also comes from the fact that frameRate is given by an average of 10 frames(?). Meaning that there can be long pauses (relatively) between frames.
But that’s a guess. Maybe someone with a deeper core knowledge can respond.
I also thinking of harmonics maybe.
The code below gives a more stable value(resulting gray) at 60 f/s on my pc.

float loc = 15;
boolean mouse_down;

void setup() {
  size(200, 200);
  frameRate(100);
  background(255);
  fill(0);
  rect(0, 0, 200, 175);
  drawSlider();
}

void draw() {
  if (mouse_down) drawSlider();
  if (frameCount % 2 == 0) fill(255);
  else fill(0);
  circle(100, 75, 50);
}

void mouseDragged() {
  loc = mouseX;
  if (loc < 15) loc = 15;
  if (loc > width-15) loc = width-15;
}

void mousePressed() {
  mouse_down = true;
}

void mouseReleased() {
  mouse_down = false;
  println(frameRate);
}

void drawSlider() {
  push();
  noStroke();
  frameRate(map(loc-10.55, 0.0, width, 0.0, 100));
  fill(255);
  rect(0, height-30, width, 30); 
  fill(200, 200, 255);
  rect(10, height-15, width-20, 5); 
  fill(150, 150, 255);
  ellipse(loc, height-13, 15, 15);
  pop();
}

[glv]

This statement is for P5.js:

@glv

You are also limited by the refresh rate of the monitor.

Some testing with my hardware reveals…

With p5.js:

The frameRate() that you set is capped at the refresh rate of your monitor.
Lower values than refresh rate can be set.
My monitor has a refresh rate of 60; I can set frameRate(100) but it will be capped at 60.
https://p5js.org/reference/#/p5/frameRate

With Processing Java:
Attempts to achieve the frameRate() that you set but is limited by processor (GPU and CPU).
The frameRate() is not capped by Processing but you will not see all the frames if you set this higher than the refresh rate.
https://processing.org/reference/frameRate_.html

Additional references:
Frame Rate (FPS) vs Refresh Rate (Hz) - AVADirect states:

“The refresh rate (Hz) of your monitor does not affect the frame rate (FPS) your GPU will be outputting. However, if your FPS is higher than your refresh rate, your display will not be able to display all of the frames your computer is producing, so although the refresh rate doesn’t technically limit the frame rate, it does effectively set a cap.”

:)

[glv]

@noel

The topic is actually interesting.

It sure is!

This may also be of interest:

FrameRate hiccups

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 Code (you will have to select use “true” or “false” to see different modes of output): 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 lo…

I may try this with P5.js sometime…

:)

[noel]

Oh, great! I totally missed that one.
But now, I also lost my hope for a solution.

[jeremydouglass]

p5.js has deltaTime to easily inspect inter-frame delay without averaging.

Here is an interesting detailed over view and tutorial on inspecting browser frame rate. It is specifically about using Mozilla Firefox browser developer tools, but it gets at some of the key ideas for rendering with JavaScript in the browser (in general, trying to consistently hit your max screen refresh rate is not going to happen.)

Animation performance and frame rate

[noel]

I still was thinking of that and I remembered that some years ago It was very hard for me to fall asleep. So I made a device that really helped me. I used some old glasses where I build some LEDs in, and an Arduino, which started flickering at the highest brainwave frequency Beta (35 Hz) down to Alpha (12), Theta (8), and finally Delta (4), with programmable time lapses.
I remember that I could see 60 Hz flickering. And in my youth, when fluorescent lamps still used around 50Hz, I often was annoyed by that. The common bulb has an afterglow, so it doesn’t actually switch off.
Here is an interesting article about light flickering.

Flicker in lighting - Arrant-Light Blog