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

CODE BELOW:

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");
}
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