# Can I draw a figure every x milliseconds?

**URL:** <https://discourse.processing.org/t/can-i-draw-a-figure-every-x-milliseconds/34611>\
**Category:** Beginners\
**Created:** [January 13, 2022, 5:16pm UTC](https://discourse.processing.org/t/can-i-draw-a-figure-every-x-milliseconds/34611 "2022-01-13T17:16:51Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Patriche98](https://avatars.discourse-cdn.com/v4/letter/p/bc8723/32.png) [@Patriche98](https://discourse.processing.org/u/Patriche98)\
**Post date:** [January 13, 2022, 5:16pm UTC](https://discourse.processing.org/t/can-i-draw-a-figure-every-x-milliseconds/34611/1 "2022-01-13T17:16:51Z")

</div>

> please format code with \</\> button \* [homework policy](https://discourse.processing.org/faq/#homework) \* [asking questions](https://discourse.processing.org/t/2147)

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?

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [January 13, 2022, 10:44pm UTC](https://discourse.processing.org/t/can-i-draw-a-figure-every-x-milliseconds/34611/2 "2022-01-13T22:44:45Z")

</div>

hi

idea to move the line with millis

```auto
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();
  }
}

```

---

<div class="post-metadata">

**Author:** ![SomeOne](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/someone/32/8639_2.png) [@SomeOne](https://discourse.processing.org/u/SomeOne)\
**Post date:** [January 14, 2022, 5:30am UTC](https://discourse.processing.org/t/can-i-draw-a-figure-every-x-milliseconds/34611/3 "2022-01-14T05:30:51Z")

</div>

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](https://processing.org/reference/frameRate.html)  
You just set frameRate(60) in setup() and processing will give 60 FPS if draw() cycle can be run with that rate.

---

<div class="post-metadata">

**Author:** ![Patriche98](https://avatars.discourse-cdn.com/v4/letter/p/bc8723/32.png) [@Patriche98](https://discourse.processing.org/u/Patriche98)\
**Post date:** [January 14, 2022, 7:10am UTC](https://discourse.processing.org/t/can-i-draw-a-figure-every-x-milliseconds/34611/4 "2022-01-14T07:10:20Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![SomeOne](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/someone/32/8639_2.png) [@SomeOne](https://discourse.processing.org/u/SomeOne)\
**Post date:** [January 14, 2022, 10:26am UTC](https://discourse.processing.org/t/can-i-draw-a-figure-every-x-milliseconds/34611/5 "2022-01-14T10:26:40Z")

</div>

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).

```auto
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.

---

<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:** [January 14, 2022, 12:02pm UTC](https://discourse.processing.org/t/can-i-draw-a-figure-every-x-milliseconds/34611/6 "2022-01-14T12:02:36Z")

</div>

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](https://processing.org/reference/saveFrame_.html)

> **[What Is Refresh Rate and Why Is It Important? - Intel](https://www.intel.ca/content/www/ca/en/gaming/resources/highest-refresh-rate-gaming.html)**
>
> Gaming at a high refresh rate makes a difference. Here’s what you need to know about testing, optimizing, and choosing a high-refresh rate display.

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

`:)`