How to refresh an animation 60 times a second.

General Discussion Other

smithgi

How to refresh an animation 60 times a second.

in General Discussion • Other • 2 years ago

Hi, I'm currently writing a piece of code for visualising slices of a 3d object created from a depth map. The depth map is a 1024*1024 8 bit greyscale BMP file.

The problem I have is that the image() command which writes out the image does not seem to refresh the pixels rather, it waits in until the program has finished looping though all the frames before outputing the image, which contains every frame of animation.

I need it to fresh the screen at exactly 60hz.

regards

Gavin

import processing.opengl.*;

PImage img;
PImage destination;
int[] numbers = new int[25];    // Array of bit masks used to update individual color bit positions.
int h = 1;

void setup() {
frameRate(60);
noLoop();
size(1024, 1024, JAVA2D);
img = loadImage("seat.bmp");
destination = createImage(img.width, img.height, RGB);

numbers[0] = 0;
numbers[1] = 128 ;
numbers[2] = 64 ;
numbers[3] = 32 ; // blue
numbers[4] = 16 ;
numbers[5] = 8 ;
numbers[6] = 4 ;
numbers[7] = 2 ;
numbers[8] = 1 ;

numbers[9] = 8388608 ;
numbers[10] = 4194304 ;
numbers[11] = 2097152 ;
numbers[12] = 1048576 ; // red
numbers[13] = 524288 ;
numbers[14] = 262144 ;
numbers[15] = 131072 ;
numbers[16] = 65536 ;

numbers[17] = 32768 ;
numbers[18] = 16384 ;
numbers[19] = 8192 ;
numbers[20] = 4096 ; // green
numbers[21] = 2048 ;
numbers[22] = 1024 ;
numbers[23] = 512 ;
numbers[24] = 256 ;
}

void draw() {
loadPixels();
// Since we are going to access the image's pixels too
int z = 0;
img.loadPixels();

for (int l = 1;l < 240;l++) {

    if (z > 240) {
      z = z - 240;
    }
    h=h+1;
    for (int x = 0; x < width; x++) {
      int loc = x + z*width;
      int bright = round(brightness(img.pixels[loc]));
      float multi = 1;
      int offset = round(bright * multi);
      int lox = x + (240-offset)*width;
      // destination.pixels[lox] = color(55,z,66);
      destination.pixels[lox] = destination.pixels[lox] | (0x00FFFFFF & numbers[h]);
      // output.pixels[i] = output.pixels[i] | (myMovie.pixels[i] & 0x00FFFFFF & numbers[framepos]);

    }

    if (h == 24) {
     destination.updatePixels();
      println("hello");
      delay(40);
      image(destination, 0, 0);
      h = 0;
    }


    z = z + 7;
}

}

Replies(10)

smithgi

Re: How to refresh an animation 60 times a second.

2 years ago

I should add that I need to blank the screen after each group of 24 colored lines is drawn, so the next result is an animation of a cross section of a 3d mesh with each frame lasting 1/60th of a second and containing 24 colored lines of R,G,B color graduations.

PhiLho

Re: How to refresh an animation 60 times a second.

2 years ago

If I understand correctly what you say, you loop through the slices in draw(). Indeed, nothing will be drawn until the loops end. If you need to advance one slice per frame, you should use draw() as main loop, ie. increment the slice counter on each main() call.
In other words, make l a global variable (perhaps with a better name), and increment it at the start of draw(), just removing the for loop with l.

smithgi

Re: Re: How to refresh an animation 60 times a second.

2 years ago

Hi, thanks for your suggestion.

I tried removing the outer loop as you suggested and it works, thanks for that. The problem now, is that the speed is pretty poor. I am getting about 3 frames per second, which I initially put down to the number of pixels being processed, so i tried only processing every 20th pixel, and it made no difference. Any idea how to speed up the program to 60hz? Only CUDA springs to mind, and I'm not sure I know how to do that!

here the current code.

import processing.opengl.*;

PImage img;
PImage destination;
int[] numbers = new int[25];    // Array of bit masks used to update individual color bit positions.
int slice = 1;
int plane = 0;
int count = 1;

void setup() {    // start of setup
   size(1024, 1024,P2D);
img = loadImage("seat.bmp");
destination = createImage(img.width, img.height, RGB);

numbers[0] = 0;
numbers[1] = 128 ;
numbers[2] = 64 ;
numbers[3] = 32 ; // blue
numbers[4] = 16 ;
numbers[5] = 8 ;
numbers[6] = 4 ;
numbers[7] = 2 ;
numbers[8] = 1 ;

numbers[9] = 8388608 ;
numbers[10] = 4194304 ;
numbers[11] = 2097152 ;
numbers[12] = 1048576 ; // red
numbers[13] = 524288 ;
numbers[14] = 262144 ;
numbers[15] = 131072 ;
numbers[16] = 65536 ;

numbers[17] = 32768 ;
numbers[18] = 16384 ;
numbers[19] = 8192 ;
numbers[20] = 4096 ; // green
numbers[21] = 2048 ;
numbers[22] = 1024 ;
numbers[23] = 512 ;
numbers[24] = 256 ;
    loadPixels();
img.loadPixels();
                            } // end of setup

void draw()
{   // start of draw

    slice=slice+1;
    for (int x = 0; x < width; x++)
    { // start of render a scanline
      int loc = x + plane*width;
      int bright = round(brightness(img.pixels[loc]));
      float multi = 1;
      int offset = round(bright * multi);
      int lox = x + (240-offset)*width;
      destination.pixels[lox] = destination.pixels[lox] | (0x00FFFFFF & numbers[slice]);
      //destination.pixels[lox] = color(10*h,44,44) ;
     } //end of render a scanline

    if (slice == 24)
    { // start of write out a frame
     //destination.updatePixels();
     image(destination, 0, 0);
     for (int e = 1;e < 500000;e ++){destination.pixels[e] = color(0,0,0);}



     slice = 0;
    } // end of write out a frame

    count = count + 1;
    plane = plane + 3;
     //image(destination, 0, 0);
    if (plane > 240)
{ // start reset plane slice counter
      plane = plane - 240;
} // end of reset plane slice counter

} // end of draw

Greger

Re: How to refresh an animation 60 times a second.

2 years ago

You only update your image ever 24th frame, don't you?

You have:

if(slice ==24)
{
image(destination, 0, 0);

But slice is only increased once every frame, and with that you only show destination every 24th frame. That will give you a presumably lower frame rate.

Also, if there is just a limited number of frames being generated, and it is not very dynamic, you could, with enough memory, precalc all the frames first, and then show the animation.

smithgi

Re: Re: How to refresh an animation 60 times a second.

2 years ago

Hi,

Its a bit of a strange animation really, but it does have a very strict technical requirement, in that it has to create 60 fps, and each frame contains 24 'slices' of a 3d object, in this case, the 3d object being represented by a digital elevation map.

Each slice needs to be coloured according to the bit mask in the setup function , this is 'colorspace multiplexing' and will allow to encode 24 monochrome frames into 1 by encoding the on/off values for each subframe in the 24 bits of RGB. That probably does not make much sense ;-)

anyway, it needs to be able to run realtime , as will be eventually reading in data from kinect.

So every 60th of a second, I need to 1 image containing 24 colorful RGB slices, when using the milli() timing option , there seemed to be no time using in the calculations, but a delay of 0.17 seconds between the end of the draw loop and beginning.

not sure why.

cheers

Greger

Re: How to refresh an animation 60 times a second.

2 years ago

Okay, what you need to do, is do all the mulitplexing in one frame. Each call to draw is an update of the screen, and when you use frameRate() you set how many times draw() should ideally be called per second.

Your code should probably look more like this:

PImage img;
PImage destination;
int[] numbers = new int[25]; // Array of bit masks used to update individual color bit positions.
int slice = 1;
int plane = 0;
int count = 1;
void setup() { // start of setup
size(1024, 1024,P2D);
img = loadImage("seat.bmp");
destination = createImage(img.width, img.height, RGB);
numbers[0] = 0;
numbers[1] = 128 ;
numbers[2] = 64 ;
numbers[3] = 32 ; // blue
numbers[4] = 16 ;
numbers[5] = 8 ;
numbers[6] = 4 ;
numbers[7] = 2 ;
numbers[8] = 1 ;
numbers[9] = 8388608 ;
numbers[10] = 4194304 ;
numbers[11] = 2097152 ;
numbers[12] = 1048576 ; // red
numbers[13] = 524288 ;
numbers[14] = 262144 ;
numbers[15] = 131072 ;
numbers[16] = 65536 ;
numbers[17] = 32768 ;
numbers[18] = 16384 ;
numbers[19] = 8192 ;
numbers[20] = 4096 ; // green
numbers[21] = 2048 ;
numbers[22] = 1024 ;
numbers[23] = 512 ;
numbers[24] = 256 ;
// loadPixels();
// img.loadPixels();
} // end of setup
void draw()
{ // start of draw
destination.loadPixels();
for(slice = 0; slice < 24; slice++)
{
for (int x = 0; x < width; x++)
{ // start of render a scanline
int loc = x + plane*width;
int bright = round(brightness(img.pixels[loc]));
float multi = 1;
int offset = round(bright * multi);
int lox = x + (240-offset)*width;
destination.pixels[lox] = destination.pixels[lox] | (0x00FFFFFF & numbers[slice]);
//destination.pixels[lox] = color(10*h,44,44) ;
} //end of render a scanline
}
// start of write out a frame
destination.updatePixels();
image(destination, 0, 0);
count = count + 1;
plane = plane + 3;
//image(destination, 0, 0);
if (plane > 240)
{ // start reset plane slice counter
plane = plane - 240;
} // end of reset plane slice counter
} // end of draw

I have not tested this, or looked very much through it, since it is kinda messy, and I don't have the data you have. Or actually know just what it is supposed to be.

smithgi

Re: Re: How to refresh an animation 60 times a second.

2 years ago

thanks again, but Im afraid Id made no difference, except the colour stopped working. THis is a working version, but it appears to redraw the screen after every line, not every 24th line. (Note its hard to see all the colors, as they get exponentially dimmer, i.e red 128, red 64, 32,16 etc. Its needs to draw 24 lines, then clear the screen, and draw the next lot. I've included the image too

//import processing.opengl.*;

PImage img;

PImage destination;

int[] numbers = new int[25]; // Array of bit masks used to update individual color bit positions.

int slice = 1;

int plane = 0;

int count = 1;

final float multi = .5;

void setup() { // start of setup

size(640,480,P2D);

img = loadImage("seat.bmp");

destination = createImage(img.width, img.height, RGB);

numbers[0] = 0;

numbers[1] = 128 ;

numbers[2] = 64 ;

numbers[3] = 32 ; // blue

numbers[4] = 16 ;

numbers[5] = 8 ;

numbers[6] = 4 ;

numbers[7] = 2 ;

numbers[8] = 1 ;

numbers[9] = 8388608 ;

numbers[10] = 4194304 ;

numbers[11] = 2097152 ;

numbers[12] = 1048576 ; // red

numbers[13] = 524288 ;

numbers[14] = 262144 ;

numbers[15] = 131072 ;

numbers[16] = 65536 ;

numbers[17] = 32768 ;

numbers[18] = 16384 ;

numbers[19] = 8192 ;

numbers[20] = 4096 ; // green

numbers[21] = 2048 ;

numbers[22] = 1024 ;

numbers[23] = 512 ;

numbers[24] = 256 ;

img.loadPixels();

} // end of setup

public void draw() {

float timer = millis();

slice = slice + 1;

for (int x = 0; x < width; x++) { // start of render a scanline

final int loc = x + plane * width;

final int bright = (int) (brightness(img.pixels[loc]));

final int offset = (int) (bright * multi);

final int lox = x + (240 - offset) * width;

destination.pixels[lox] |= (0x00FFFFFF & numbers[slice]);

} //end of render a scanline

image(destination, 0, 0);

if (slice == 24) { // start of write out a frame

destination = createImage(img.width, img.height, RGB);

image(destination, 0, 0);

println(timer);

slice = 0;

}

plane = plane + 3;

//image(destination, 0, 0);

if (plane > 240) { // start reset plane slice counter

plane = plane - 240;

} // end of reset plane slice counter

}

for an image , any heightmnap will do, I tried to attach mine but it didnt work, kept saying please attach an image. ANyway, heres a link to others. Just need to make sure its resized to 640 * 480

thanks for your help

PhiLho

Re: How to refresh an animation 60 times a second.

2 years ago

A little generic advice: you can replace the assignments to the array cells by an array initialization: it is a bit less tedious to type!
int[] numbers = { 0, 128, 64, 32, 16, 8, 4, 2, 1, 8388608, 4194304, 2097152, 1048576,
524288, 262144, 131072, 65536, 32768, 16384, 8192, 4096, 2048, 1024, 512, 256 };

Greger

Re: How to refresh an animation 60 times a second.

2 years ago

Try this for draw():

public void draw()
{
        destination = createImage(img.width, img.height, RGB);
        float timer = millis();
        for(slice = 1; slice < 25; slice++)
        {
          for (int x = 0; x < width; x++)
          { // start of render a scanline
              final int loc = x + plane * width;
              final int bright = (int) (brightness(img.pixels[loc]));
              final int offset = (int) (bright * multi);
              final int lox = x + (240 - offset) * width;
              destination.pixels[lox] |= (0x00FFFFFF & numbers[slice]);
          } //end of render a scanline
      plane = plane + 3;
        //image(destination, 0, 0);
        if (plane > 240) { // start reset plane slice counter
            plane = plane - 240;
        } // end of reset plane slice counter

      }
     image(destination, 0, 0);
}

smithgi

Re: Re: How to refresh an animation 60 times a second.

2 years ago

yay! that works! great stuff. I'm not really sure what you did, but it goes faster than a speeding bullet now! I gotta love processing. Lots to learn, but I onnly started 3 weeks ago, so plenty to pick up! Thanks for you help!

cheers

Gav

Top Reply