Can I draw a figure every x milliseconds?

Processing Beginners
1

please format code with </> button * homework policy * asking questions

Hi! I’m new to programming and I’m challenging myself trying to:
-Draw a vertical line that moves to the left (or right) of the screen every x milliseconds
-Like this I should obtain a row of vertical lines that moves at 60 fps. I want to control the distance between those lines (or x milliseconds) via OSC ( i guess) with a MIDI controller to visualize the modulation of the lines scrolling. Is it possible in processing or should I use another language?

2

hi

idea to move the line with millis

int  c;
int Time = 0;
int xmove = 3;
int speed = 150;

void setup(){
  size(500, 500);
  Time = millis();
}

void draw(){
  if ( millis() - Time > speed ) {
    background(255);
   line(c, height,c , 10);
   c+=xmove;
    Time = millis();
  }
}
1 Like
3

Welcome to the forum.

Exact timings are tricky. What would happen when loop takes longer than the time you wanted to allocate to it? FPS would drop. In your case I don’t think that would be a problem, if you run your code with relatively recent computer.

Best of all processing has a very simple method for controlling FPS or framerate as it’s called in processing. frameRate / Reference / Processing.org
You just set frameRate(60) in setup() and processing will give 60 FPS if draw() cycle can be run with that rate.

4

Nice! Thanks i’ll try that.
But what about drawing a line every x milliseconds?
Would it be better to create an array and work with that or do something else like a ‘for’ cycling whenever frameRate % 60 == 0?

5

I think previously Processing didn’t allow higher frame rates than 60, so you couldn’t draw() every 10ms. I might be wrong. Anyways I had to try it with next code (with Processing 4.02b).

int[] diffs = new int[100];
int counter = 0;
int time = 0;

void setup(){
  frameRate(200);
  time = millis();
}

void draw(){
  if(counter >= 100) {
    counter = 0;
    int sum = 0;
    for(int value: diffs) {
      sum += value;
    }
    println(sum/100);
  } else {
    int ttime = millis();
    diffs[counter] = ttime - time;
    time = ttime;
    counter++;
  }
}

Pretty much as expected frame rate 20 gave 50 ms and frame rate 200 gave 5ms. So if your draw() loop is light you can easily control FPS with frameRate() and get good resolution for timing.

6

Hello,

Keep in mind that you can set a higher frameRate() for Processing draw() cycle but this may not translate to a better visual output.

If you set frameRate(120) and you monitor refresh rate is 60 Hz you will only see every other frame.

I often set a higher frameRate if I am saving frames to create animations from the saved images. When I do this my timing is with frameCount.

References:
https://processing.org/reference/saveFrame_.html

@Patriche98 I encourage you to start writing some code and experiment a little.

:)