# Issue rendering video/how to render video on processing

**URL:** <https://discourse.processing.org/t/issue-rendering-video-how-to-render-video-on-processing/6667>\
**Category:** Libraries\
**Created:** [December 16, 2018, 9:03pm UTC](https://discourse.processing.org/t/issue-rendering-video-how-to-render-video-on-processing/6667 "2018-12-16T21:03:23Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![ra0000mona94](https://avatars.discourse-cdn.com/v4/letter/r/a87d85/32.png) [@ra0000mona94](https://discourse.processing.org/u/ra0000mona94)\
**Post date:** [December 16, 2018, 9:03pm UTC](https://discourse.processing.org/t/issue-rendering-video-how-to-render-video-on-processing/6667/1 "2018-12-16T21:03:23Z")

</div>

I’m extremely new to this and have made a design using a tutorial. My code runs smoothly until I enter: saveFrame(“output/frames\_####.png”);

when I enter this, my video does not run, instead there is a blank screen. please help if you can

CODE BELOW:

```auto
float[] values; 

int i = 0;
int j = 0;

void setup() {
  size(600, 600);
  values = new float[width];
  for (int i = 0; i < values.length; i++) {
    values[i] = random(height);
  }
  
  //for (int i = 0; i < values.length; i++) {
  // for (int j = 0; j < values.length-i-1; j++) {
  // }
  //}
}

void draw() {
  background(0);

  if (i < values.length) {
    for (int j = 0; j < values.length-i-1; j++) {
      float a = values[j];
      float b = values[j+1];
      if (a > b) {
        swap(values, j, j+1);
      }
    }
  } else {
    println("finished");
    noLoop();
  }
  i++;

  for (int i = 0; i < values.length; i++) {
    stroke(255);
    line(i, height, i, height - values[i]);
  }
}

void swap(float[] arr, int a, int b) {
  float temp = arr[a];
  arr[a] = arr[b];
  arr[b] = temp;

  saveFrame("output/frames_####.png");
}

```

---

<div class="post-metadata">

**Author:** ![figraham](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/figraham/32/4161_2.png) [@figraham](https://discourse.processing.org/u/figraham)\
**Post date:** [December 16, 2018, 9:20pm UTC](https://discourse.processing.org/t/issue-rendering-video-how-to-render-video-on-processing/6667/2 "2018-12-16T21:20:07Z")

</div>

That’s a cool animation! Definitely a neat way to visualize sorting.

It hasn’t stopped working it just takes a while to save a frame and you’re trying to do it each time you swap a value. You won’t see anything render until it finishes the first loop through draw. Which will be after it saves 500ish frames. If you save a frame every time you swap a value it’ll take forever and you’ll end up with about 90000 images.

I suggest moving your saveFrame() call to the end of draw. You’ll see a drop in performance but it will finish in a couple minutes and you’ll get a much more reasonable 600 frames which is 10-20 seconds of video.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [December 18, 2018, 9:14pm UTC](https://discourse.processing.org/t/issue-rendering-video-how-to-render-video-on-processing/6667/3 "2018-12-18T21:14:27Z")

</div>

Nice work. You might also be interested in these related discussions of sorting visualization from the old forum:

- [https://forum.processing.org/two/discussion/17609/help-on-the-efficiency-of-bubble-sort-visualization](https://forum.processing.org/two/discussion/17609/help-on-the-efficiency-of-bubble-sort-visualization)
- [https://forum.processing.org/two/discussion/17605/issue-with-sorting-visualization](https://forum.processing.org/two/discussion/17605/issue-with-sorting-visualization)
- [https://forum.processing.org/two/discussion/25555/visualize-bubble-sort](https://forum.processing.org/two/discussion/25555/visualize-bubble-sort)