whats the most efficient way to load big amount of photos?

Programming Questions

miskebeke..

whats the most efficient way to load big amount of photos?

in Programming Questions • 11 months ago

Hello,

i'm creating some presentation program and it simply "lag's" (freezes) because of the photos.

1. What's the most efficient way of loading photos during draw() (is it requestImage()) ?
2. How to delete loaded image from RAM (is it enough/good to do img=null) ?
3. Should i run photos on separate thread(is it good/worth) ?

If you are interested in exact code:

The main sketch "Prezentatorius"

//Gui variables
Button[ ] buttons = new Button[ 5 ];
Handle handle = new Handle( 113, 300, 240, 15 );
color buttonColor, buttonOver, buttonPressed;
color textColor, textOver, mainBackground;
color previewBackground, versionTextColor;
//GUI, here you can change the color scheme ;)
int R = 255;
int G = 213;
int B = 0;
int softwareVersionTextSize = 20;
String softwareVersion = "prezentatorius 2.0";
Slider slider;
void setup( )
{
size( 580, 320 );
//the gui
colorScheme( R, G, B );
buttons[ 0 ] = new Button( 15, 58, 80, 30, "BROWSE", false );
buttons[ 1 ] = new Button( 15, 103, 80, 30, "LIVE SHOW", true );
buttons[ 2 ] = new Button( 15, 148, 80, 30, "EXPORT", true );
buttons[ 3 ] = new Button( 15, height - 45, 80, 30, "OPTIONS", false );
buttons[ 4 ] = new Button( 480, 18, 80, 30, "CLOSE", true );
slider = new Slider(128, 60, 430, 240, sketchPath(""), false, 2000);
smooth( );
}
void draw( )
{
background( mainBackground );
//the gui
noStroke();
fill( previewBackground );
rect( 126, 58, 434, 244 );
fill( 255 );
//rect( 128, 60, 430, 240 );
slider.display();
fill( versionTextColor );
textSize( softwareVersionTextSize );
text( softwareVersion, ( 128 + 430 ) -
( textWidth( softwareVersion ) / 2 ),
( 60 + 240 ) - 2 );
for( int i = 0; i < buttons . length; i++ )
{
buttons[ i ] . display( );
}
handle.display();
}
void mouseReleased( )
{
if( buttons[ 0 ] . released( ) )
{
//browsePopup( );
}
if( buttons[ 1 ] . released( ) )
{
//liveShow( );
}
if( buttons[ 2 ] . released( ) )
{
//export( );
}
if( buttons[ 3 ] . released( ) )
{
//options( );
}
if( buttons[ 4 ] . released( ) )
{
exit( );
}
}

Button class sketch

class Button
{
int locationX;
int locationY;
int sizeWidth;
int sizeHeight;
String textOfButton;
boolean over = false;
boolean state = true;
Button( int tempX, int tempY, int tempW, int tempH,
String tempT, boolean tempS )
{
locationX = tempX;
locationY = tempY;
sizeWidth = tempW;
sizeHeight = tempH;
textOfButton = tempT;
state = tempS;
}
boolean released( )
{
if( state )
{
if( over )
{
return true;
}
else
{
return false;
}
}
else
{
return false;
}
}
void update( )
{
if( state )
{
if ( overRect( locationX, locationY, sizeWidth, sizeHeight ) )
{
over = true;
}
else
{
over = false;
}
}
}
void display( )
{
if( state )
{
update( );
float tempX = locationX + ( sizeWidth / 2 );
float tempY = locationY + ( sizeHeight / 2 );
float sizeOfText = ( sizeHeight / 2 ) - 2;
if( over )
{
fill( buttonOver );
stroke( buttonColor );
rect( locationX, locationY, sizeWidth, sizeHeight );
noStroke();
if( mousePressed )
{
fill( buttonOver );
}
else
{
fill( textOver );
}
translate( tempX, tempY );
textSize( sizeOfText-1 );
text( textOfButton, 0, ( sizeOfText / 2 ) - 2 );
translate( -tempX, -tempY );
}
else
{
fill( buttonColor );
stroke( buttonOver );
rect( locationX, locationY, sizeWidth, sizeHeight );
noStroke();
fill( buttonPressed );
translate( tempX, tempY );
textSize( sizeOfText );
text( textOfButton, 0, ( sizeOfText / 2 ) - 2 );
translate( -tempX, -tempY );
}
}
}
}

Functions sketch

boolean overRect( int x, int y, int width, int height )
{
if ( mouseX >= x && mouseX <= x+width &&
mouseY >= y && mouseY <= y+height )
{
return true;
}
else
{
return false;
}
}
boolean overCircle( int tmpX, int tmpY, int diameter )
{
float disX = tmpX - mouseX;
float disY = tmpY - mouseY;
if( sqrt( sq( disX ) + sq( disY ) ) < diameter )
{
return true;
}
else
{
return false;
}
}
void colorScheme( int R, int G, int B )
{
R = setValueInRange( R );
G = setValueInRange( G );
B = setValueInRange( B );
int tmpColor = setValueInRange( R / 4 );
buttonColor = color( R, setValueInRange( R - ( tmpColor / 2 ) ) , tmpColor );
buttonOver = color( R, setValueInRange( G / 2 ), B );
buttonPressed = color( setValueInRange( tmpColor * 2 ),
setValueInRange( B + 10 ), setValueInRange( tmpColor * 3 ) );
textColor = buttonOver;
textOver = buttonColor;
mainBackground = color( R, G, B );
previewBackground = color( buttonOver );
versionTextColor = color( R, setValueInRange( R -
( tmpColor / 2 ) ), setValueInRange( tmpColor * 2 ) );
}
int setValueInRange( float value )
{
int maxValue = 255;
int minValue = 0;
if( value > maxValue )
{
return maxValue;
}
else
{
if( value < minValue )
{
return minValue;
}
else
{
return int( value );
}
}
}
void browse( )
{
}
PImage changeImageDimensions (PImage ImageForChanges, float newW, float newH)
{
PImage temp = ImageForChanges ;
float ITLw = temp . width, ITLh = temp . height,
ratio = min ( newW / ITLw, newH / ITLh ) ;
temp . resize ( ( int )( ITLw * ratio ) ,
( int )( ITLh * ratio ) ) ;
return temp ;
}
// Function to get a list ofall files in a directory and all subdirectories
ArrayList listFilesRecursive(String dir, String ext) {
ArrayList fileList = new ArrayList();
recurseDir(fileList,dir, ext);
return fileList;
}
// Recursive function to traverse subdirectories
void recurseDir(ArrayList a, String dir, String ext) {
File file = new File(dir);
if (file.isDirectory()) {
// If you want to include directories in the list
//a.add(file);
File[] subfiles = file.listFiles();
for (int i = 0; i < subfiles.length; i++) {
// Call this function on all files in this directory
recurseDir(a,subfiles[i].getAbsolutePath(), ext);
}
} else {
String str = file.getName();
int len = str.length();
if(str.substring(len-3, len).equals(ext))
{
a.add(file.getAbsolutePath());
}
}
}

Handles sketch

class Handle
{
int locationX;
int locationY;
int handleHeight;
int ellipseLocationX;
int ellipseLocationY;
int ellipseSize;
boolean state = false;
Handle( int tempX, int tempY,
int tempH, int tempS )
{
locationX = tempX;
locationY = tempY;
handleHeight = tempH;
ellipseSize = tempS;
ellipseLocationX = tempX ;
ellipseLocationY = tempY - 10;
}
void update( )
{
if( overCircle( ellipseLocationX,
ellipseLocationY, ellipseSize ) )
{
state = true;
}
else
{
state = false;
}
}
void display( )
{
update( );
textAlign( CENTER );
if( state )
{
if( mousePressed )
{
if( mouseY > ( locationY -
( ellipseSize/2 ) ) )
{
ellipseLocationY = locationY
- ( ellipseSize/2 );
}
else
{
if( mouseY < ( locationY - handleHeight
+ ( ellipseSize/2 ) ) )
{
ellipseLocationY = locationY -
handleHeight + ( ellipseSize/2 );
}
else
{
ellipseLocationY = mouseY;
}
}
fill( buttonPressed );
noStroke( );
text( ellipseLocationY, ellipseLocationX ,
ellipseLocationY - 10 );
fill( buttonOver );
stroke( buttonColor );
}
else
{
fill( textColor );
noStroke( );
text( ellipseLocationY, ellipseLocationX ,
ellipseLocationY - 10 );
fill( buttonColor );
stroke( buttonOver );
}
}
else
{
fill( buttonColor );
stroke( buttonOver );
}
ellipse( ellipseLocationX, ellipseLocationY,
ellipseSize, ellipseSize );
}
}

Slide sketch

class Slide
{
PImage img;
String path;
float slideW;
float slideH;
float slideX;
float slideY;
boolean loaded = false;
Slide(String p, float w, float h, float sx, float sy)
{
path = p;
slideW = w;
slideH = h;
slideX = sx;
slideY = sy;
}
void unload()
{
img = null;
}
void request()
{
img = requestImage(path);
if ( img . width !=0 )
{
img = changeImageDimensions(img, slideW, slideH);
loaded = true;
}
}
boolean load()
{
if(loaded)
{
return true;
}
else
{
img = loadImage(path);
if ( img . width !=0 )
{
img = changeImageDimensions(img, slideW, slideH);
return true;
}
}
return false;
}
void rePath(String p)
{
path = p;
}
void resizeTo(float w, float h)
{
slideW = w;
slideH = h;
}
void display()
{
image(img, slideX, slideY);
}
}

Slider sketch

class Slider
{
float sliderW;
float sliderH;
float sliderX;
float sliderY;
ArrayList paths;
boolean state;
int counter;
int duration;
int lastTime;
int sequential;
int rand;
boolean loaded = false;
boolean preloaded = false;
Slide[] slides;
Slider(float sx, float sy, float w, float h, String p, boolean s, int d)
{
sliderW = w;
sliderH = h;
sliderX = sx;
sliderY = sy;
paths = listFilesRecursive(p, "jpg");
slides = new Slide[paths.size()];
for(int i=0; i<slides.length; i++)
{
slides[i] = new Slide((String) paths.get(i), sliderW, sliderH, sx, sy);
}
state = s;
duration = d;
if(state)
{
getRand();
}
}
void getRand()
{
int tmp = (int) random((float) 0, (float)slides.length-1);
if(tmp != rand)
{
rand = tmp;
}
else
{
getRand();
}
}
void display()
{
String path;
if (millis() - lastTime >= duration)
{
if(state)
{
counter = sequential;
sequential++;
slides[sequential].request();
}
else
{
counter = rand;
slides[rand].unload();
getRand();
slides[rand].request();
}
lastTime = millis();
}
if(slides[counter].load())
{
slides[counter].display();
}
else
{
loaded = slides[counter].load();
}
}
void resizeTo(float w, float h)
{
sliderW = w;
sliderH = h;
}
void reposition(float sx, float sy)
{
sliderX = sx;
sliderY = sy;
}
}

Replies(1)

quarks

Re: whats the most efficient way to load big amount of photos?

11 months ago

1. What's the most efficient way of loading photos during draw() (is it requestImage()) ?

Never load image files during draw - it makes your sketch slow and unresponsive.

2. How to delete loaded image from RAM (is it enough/good to do img=null) ?

Provided img is the only reference to the image if not otherwise the garbage collector will not release the memory. FYI you can request a garbage collection with System.gc();

3. Should i run photos on separate thread(is it good/worth) ?

If you have a lot of images or large images then this is probably the best way. You can load lhe image in the thread and once loaded asign it to a PImage variable. The main loop can ignore this variable until it is not null

If you search the forum and the main site for thread you get a lot of useful hits.

HTH

Top Reply