Issue rendering video/how to render video on processing

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


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() {

  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 {

  for (int i = 0; i < values.length; i++) {
    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;

1 Like

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.

1 Like

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

1 Like