What about creating a "helper" Array to make company to your image[30] one! Let's call it index[30].
Let's say you load "845.jpg" into image[10]. In the same fashion do this -> index[10] = 845;

or look here

http://www.processing.org/reference/HashMap.html

thanks for the reply :
here's a little part of my code with a 5 dim buffers :

1. 
         image[1] = Textures.loadImage(this, counter +".jpg");
         image[2]= Textures.loadImage(this, counter +1 +".jpg");
         image[3]= Textures.loadImage(this, counter +2+ ".jpg");
         image[4]= Textures.loadImage(this, counter +3+".jpg");
         image[5] = Textures.loadImage(this, counter +4+".jpg");
   

and here's the class object:

1. public class Textures {
   
     public static HashMap<String, PImage> textures = new HashMap<String, PImage>();
   
     public  static PImage loadImage(PApplet app, String filename) {
       if (textures.containsKey(filename)) {
         return textures.get(filename);
       }
       PImage image = app.loadImage(filename);
       if (image != null) {
         textures.put(filename, image);
       }
       else
         PApplet.println("Unable to load image from file '" + filename+"'");
       return image;
     }

ok, you have t=0 and t=1 .....

but shouldn't you go

t=0, t=5 etc. to change all 5 pics at once?

the thing is I need to make really quick update to be ready to display any photo.
this project is like:

the user is at position x and he can see pictures which are around x. which means -counter[1to5].jpg
if he is at postion x +4, it will acess with no latency to picture counter[5].jpg or even counter[6].jpg, because it would have already been loaded. which it wouldn't be the case if I juste load pictures 5 by 5.
I have to create this method: dynamically load and unbind pictures from ram according to the position of the user to get best results.
Would it be an other way to do this ? hashmap looks pretty well to do kind of stuffs like that…
thanks

did you look at stuff like this?

http://wiki.processing.org/w/Asynchronous_data/image_loading

thanks Chrisir for your help !! I feel a little bit less alone ;)

So hashmap was not a good direction ?

Asynchronous loading of pictures seems to be very full of promise !
but too bad, every links are dead…and I can't compile the example and the source which are described: "cannot find a class or type named cache"

1. /**
   DataLoadCallback taken from http://wiki.processing.org/w/Asynchronous_data/image_loading
   @author toxi
   */
   public interface DataLoadCallback {
     public void itemLoaded(DataBuffer buffer);
     public void itemFailed(Exception e);
     public void queueComplete(DataBuffer[] buffers);
   }
   /**
   CachedDataLoadQueue taken from http://wiki.processing.org/w/Asynchronous_data/image_loading
   @author toxi
   */
    
   class CachedDataLoadQueue extends Thread {
     private DataLoadCallback caller;
     private Cache cache;
     private PApplet app;
     private String[] files;
     private DataBuffer[] buffers;
    
     private boolean isAlive = true;
    
     public int sleepTime = 30;
    
     public CachedDataLoadQueue(PApplet app, String[] files, Cache c) {
       this.app=app;
       this.files=files;
       buffers=new DataBuffer[files.length];
       cache=c;
     }
    
     // use this constructor if you don't need/want caching
     public CachedDataLoadQueue(PApplet app, String[] files) {
       this(app,files,null);
     }
    
     public void setCallback(DataLoadCallback cb) {
       caller=cb;
       if (caller==null) isAlive=false;
     }
    
     // some web APIs require a minimum delay between requests from the same IP
     // you can set this duration here (in milliseconds)...
     public void setSleepTime(int delay) {
       sleepTime=delay;
     }
    
     // main thread loop, triggered by the start() method
     public void run() {
       int id=0;
       while(isAlive && id<files.length) {
         try {
           String itemKey=files[id];
           DataBuffer buffer=cache!=null ? (DataBuffer)cache.retrieve(itemKey) : null;
           if (buffer==null) {
             byte[] bytes=app.loadBytes(itemKey);
             if (bytes!=null) {
               buffer=new DataBuffer(bytes);
               buffers[id]=buffer;
               if (cache!=null) cache.store(itemKey,buffer);
               if (caller!=null) caller.itemLoaded(buffer);
               Thread.sleep(sleepTime);
             }
             else {
               isAlive=false;
               Exception e=new IOException("file not found: "+itemKey);
               if (caller!=null) caller.itemFailed(e);
               else e.printStackTrace();
               return;
             }
           }
           else {
             buffers[id]=buffer;
           }
           id++;
         }
         catch(InterruptedException e) {
           break;
         }
       }
       if (isAlive) {
         if (caller!=null) caller.queueComplete(buffers);
       }
     }
    
     public DataBuffer[] getResultBuffers() {
       return buffers;
     }
   }
   
   /**
   DataBuffer taken from http://wiki.processing.org/w/Asynchronous_data/image_loading
   @author toxi
   */
    
   import java.io.*;
   import javax.imageio.*;
   import java.awt.image.BufferedImage;
    
   import processing.core.PImage;
    
   public class DataBuffer {
    
     private byte[] bytes;
    
     public DataBuffer(byte[] buf) {
       bytes=buf;
     }
    
     public byte[] getRaw() {
        return bytes;
     }
    
     public String getAsText() {
       return getAsText("UTF-8");
     }
    
     public String getAsText(String encoding) {
       try {
         return new String(bytes,encoding);
       }
       catch(Exception e) {
         e.printStackTrace();
       }
       return null;
     }
    
     // updated according to:
     // http://forum.processing.org/topic/converting-bufferedimage-to-pimage#25080000000340208
     public PImage getAsImage() {
       try {
         ByteArrayInputStream bis=new ByteArrayInputStream(bytes);
         BufferedImage bimg = ImageIO.read(bis);
         PImage img=new PImage(bimg.getWidth(),bimg.getHeight(),PConstants.ARGB);
         bimg.getRGB(0, 0, img.width, img.height, img.pixels, 0, img.width);
         img.updatePixels();
         return img;
       }
       catch(Exception e) {
         System.err.println("Can't create image from buffer");
         e.printStackTrace();
       }
       return null;
     }
   }
   /**
   Flickr slideshow demo taken from http://wiki.processing.org/w/Asynchronous_data/image_loading
   @author toxi
   */
    
   QueueListener listener;
    
   int currID=0;
    
   void setup() {
     size(500,375);
     // list of images to load for the slideshow
     String[] files=new String[]{
       "http://farm4.static.flickr.com/3109/2477299178_d477ab631e.jpg",
       "http://farm3.static.flickr.com/2177/2477309902_703837b9f1.jpg",
       "http://farm3.static.flickr.com/2380/2477310788_cb4376cb53.jpg"
     };
     // create & start image loader
     listener=new QueueListener(this, files);
   }
    
   // the main loop will execute at full speed until the images are loaded
   void draw() {
     if (listener.isMediaLoaded) {
       // images are downloaded, now cycle through them...
       frameRate(1);
       background(0);
       image(listener.images[currID],0,0);
       currID=(currID+1)%listener.images.length;
     } else {
       // anything in here is executed during image loading
       stroke(random(255));
       line(0,frameCount%height,width,frameCount%height);
     }
   }
    
   // this is our little listener class which kicks off
   // and monitors the actual image loading
   class QueueListener implements DataLoadCallback {
    
     CachedDataLoadQueue queue;
     boolean isMediaLoaded=false;
     PImage[] images;
    
     QueueListener(PApplet app, String[] files) {
       queue=new CachedDataLoadQueue(app,files,null);
       queue.setCallback(this);
       queue.start();
     }
    
     // this method is called after a file has been downloaded successfully
     void itemLoaded(DataBuffer buffer) {
       println("itemloaded: "+buffer);
     }
    
     // called each time there was an error with downloading a file
     void itemFailed(Exception e) {
       println("itemFailed: "+e);
     }
    
     // final callback to say the whole queue has been processed
     void queueComplete(DataBuffer[] buffers) {
       println("queueComplete: "+buffers.length+" loaded");
       images=new PImage[buffers.length];
       for(int i=0; i<buffers.length; i++) {
         images[i]=buffers[i].getAsImage();
       }
       isMediaLoaded=true;
     }
   }

or take a look here
http://www.generative-gestaltung.de/codes/generativedesign/examples/loadImageAsync/loadImageAsync.pde

from http://www.generative-gestaltung.de/codes/generativedesign/index.html

thanks for the links,
unfortunately under android it crashes (My goal project is under android)
So I'm gonna try to make the quarks'class using hashmap works. All I have to do is to find a way to tell: unbind 18.jpg for instance from ram, no matter what loadImage bind it…I'm keeping working on it…
thanks anyway !

I'm back with no good results……

Let me tell you a little bit more about the project, maybe I chose a wrong process from the beginnig.

It's an android project_
I want the user according to the position o f these fingers on the screen, see a lot of pictures.
The pictures 'number is 900. so from 0 to 1920 (its fingers position) he can see from picture 0.jpg to 900 (maybe less, we'll see).
The transition between photos are a blended fading which is handled by shader. (tint doesn't give good results
in android).
I planed to use a 25 preloaded pictures, and 5 image[ ] objects to make nice and fast transistions
between pictures.
I use java.util.ArrayList which gives me just the name of pictures which need to be download and
the ones which need to be removed from the cache.

I am glued in this problem:
How can I free ram, according to the name of the picture ?
Here is an example where I try to remove picture 12.jpg from the cache.
The program loads and displays pictures. When you click into the window, it should remove picture 12.jpg
from the cache but it didn't. the hashmap gives me the name of ressource used by picture 12.jpg,
but I can't reinit it…it's like : processing.core.PImage@77fe4169 . I don't know what
to do with that…

here's the sketch:

1. 
   int imageCount = 16;
   PImage[] picture = new PImage[imageCount];
   int counter;
   
   void setup() {
     orientation(PORTRAIT);
     size(400, 400);
     textSize(60);
     //  textAlign(CENTER, CENTER);
     picture[12] = loadImage("12.jpg");
   }
   
   void draw()
   {
     background(0);
     if (counter < 15)
     {
       counter++;
     }
     else {
       counter =0;
     }
     picture[counter] = Textures.loadImage(this, counter + ".jpg");
     image(picture[counter], 0, 0, 400, 400);
   }
   
   void mousePressed()
   {
   
     println("the image object of 12.jpg =    " + Textures.textures.get("12.jpg"));
     Textures.remove("12.jpg");//just remove the entry in the hashmap
     println("remove has been pressed");
     //    Textures.textures.get("12.jpg") = null; this doesn't work…
   }
   

umh...

to free RAM is easy.

You can either just re-write an old image with a new one (just use loadImage)

or you can set an image to null

1. image1 = null;

like this

1. //
2. //
3. PImage image1;
4. // ------------------------------------------------------------------
5. //
6. void setup()
7. {
8.   size( 800, 600);
9.   println("start of setup() ");
10.   image1=loadImage("0.jpg");
11. }
12. //
13. void draw()
14. {
15.   background(111);
16.   if (image1!=null)
17.     image (image1, 10, 10);
18.   //
19. } // func
20. void mouseReleased() {
21.   if (image1!=null)
22.     image1=null;
23.   else
24.     image1=loadImage("0.jpg");
25. }
26. //

here...


you had lines like  

1. Textures.remove("12.jpg");//just remove the entry in the hashmap

but Textures is the class;
we need an object first which I called test1
then do your operations with test1 instead of with the class.

You can now scroll through images with 1 and 9
mousePressed removes #6 which you see as black then

Greetings, Chrisir   

1. //
2. int imageCount = 10;
3. int counter;
4. Textures test1 ;
5. //
6. void setup() {
7.   orientation(PORTRAIT);
8.   size(400, 400);
9.   // textSize(60);
10.   //  textAlign(CENTER, CENTER);
11.   // picture[9] = loadImage("9.jpg");
12.   test1 = new Textures();
13.   for (int i =0; i <= imageCount; i++ ) {
14.     // picture[counter] = test1.loadImage(this, counter + ".jpg");
15.     test1.loadImage(this, i + ".jpg");
16.   } // for
17.   // picture[counter] = test1.loadImage(this, counter + ".jpg");
18.   // image(picture[counter], 0, 0, 400, 400);
19.   counter =0;
20.   //
21.   println ("End setup()");
22. }
23. //
24. void draw()
25. {
26.   background(0);
27.   if ( test1.loadImage2(this, counter + ".jpg") != null )
28.     image(  test1.loadImage2(this, counter + ".jpg"), 0, 0, 400, 400);
29.   text(counter, 30, 30);
30. }
31. //
32. void keyPressed() {
33.   if (key=='1') {
34.     counter--;
35.     if (counter<0)
36.       counter=0;
37.   }
38.   else if (key=='9') {
39.     counter++;
40.     if (counter>=imageCount)
41.       counter=imageCount;
42.   }
43. }
44. //
45. void mousePressed()
46. {
47.   println("the image object of 6.jpg =    " + test1.textures.get("6.jpg"));
48.   test1.remove("6.jpg");//just remove the entry in the hashmap
49.   println(" 6 - remove has been pressed");
50.   //    Textures.textures.get("12.jpg") = null; this doesn't work…
51. }
52. // here's Textures.java class:  =========================================
53. //
54. import java.util.HashMap;
55. import java.util.Iterator;
56. import java.util.Map;
57. import processing.core.PApplet;
58. import processing.core.PImage;
59. public class Textures {
60.   public  HashMap<String, PImage> textures = new HashMap<String, PImage>();
61.   /**
62.    * Load an bitmap file return a reference to the PImage created.
63.    *
64.    * @param app
65.    * @param filename
66.    * @return null if the file does not exist else the PImage object
67.    */
68.   public PImage loadImage(PApplet app, String filename) {
69.     if (textures.containsKey(filename)) {
70.       return textures.get(filename);
71.     }
72.     PImage image = app.loadImage(filename);
73.     if (image != null) {
74.       textures.put(filename, image);
75.       Iterator i = textures.entrySet().iterator();  // Get an iterator
76.       while (i.hasNext ()) {
77.         Map.Entry me = (Map.Entry)i.next();
78.         PApplet.print(me.getKey() + " is "); //this is a way to know the image object loaded.
79.         PApplet.println(me.getValue());
80.       }
81.     }
82.     else
83.       PApplet.println("Unable to load image from file '" + filename+"'");
84.     return image;
85.   }
86.   //
87.   public PImage loadImage2(PApplet app, String filename) {
88.     if (textures.containsKey(filename)) {
89.       return textures.get(filename);
90.     }
91.     else
92.       return null;
93.   }
94.   //
95.   public void remove(String filename)
96.   {
97.     //filename =null;//just remove the entry of the hashmap, but not free any ram.
98.     Iterator i = textures.entrySet().iterator();  // Get an iterator
99.     while (i.hasNext ()) {
100.       Map.Entry me = (Map.Entry)i.next();
101.       if (me.getKey().equals(filename)) {
102.         textures.remove(me.getKey());
103.         return;
104.       }
105.       //PApplet.print(me.getKey() + " is "); //this is a way to know the image object loaded.
106.       //PApplet.println(me.getValue());
107.     }
108.     //  }
109.   }
110. } // class
111. // ========================

thank you so much Chrisir, I keep working on it to adapt this to my needs !
tiouss

hello pauline,

Please note that we have loadImage and loadImage2 now.

loadImage is the old one and is so intelligent to load an image that is not in RAM anymore - clever but bad for our goal.

So I invented loadImage2 which is not so clever and just returns null if we don't have the image in our RAM anymore. Good.

That's why we use loadImage first to load all images and then use loadImage2 to show/retrieve them.


Taking it further

He is always killing image #6 at the moment. You have to make it so that

• when the user goes to the next image he loads one image ahead of the images he has (and kill one image before the images he has) and
• when he goes to the previous image he has to load one image before the images he has (and kill one image after the images he has)

This means you always have a range of images in the RAM:
Index rangeFrom to Index rangeTo.
And you have one image to show.
The image to show is in the middle of the range: imageToShow.

So when you show image 425 imageToShow is 425 and rangeFrom is 420 and rangeTo is 430.
Now when the user scrolls we change imageToShow to 426 or to 427.
We also change rangeFrom and rangeTo (+ or -).
Then we kill a image and load another one.

The reason why this is so complicate is that

• A) we can't hold 900 images in the RAM and
• B) we assume we save time for the user when we keep images in RAM (so there is no delay when he goes fast to the next 3 or 4 images) instead of loading the one image he has just scrolled to

Reason B still let's me think of two threads but this seems hard to do on Android.
But thinking about it: You could do it with a trick.

A false approach would be:

• User goes to the next image, we kill one image, we load one image, we show the new image. This is the obvious approach and it would be much slower than just load the new image and show it (and only have one image in RAM all the time....... what could work too....... did you try it??)

Instead my trick works as this:

• You have a extra variable determing what the program has to do. It's a kind of state of the program. Now when the user scrolls to the next image set state to showNextImage. In draw() now if (or use switch) state == showNextImage show next image (only increase imageToShow and show it). Now the user looks at the the image. Note that in this approach the image already can be seen before we killed or loaded anything. Good. We saved time. We set state to adjustImageRange now. In draw() now if state == adjustImageRange we kill and load images.

Before setup():

1. final int doNothing = 0;
2. final int showNextImage = 1;
3. final int showPrevImage = 2;
4. final int adjustImageRangeAfterPrevious = 3;
5. final int adjustImageRangeAfterNext = 4;
6. //
7. int state = doNothing;

In draw():

1. switch (state) {
2. 
   
3. case doNothing :
4. // doing nothing
   
5. break;
6. 
   
7. case showNextImage :
8. imageToShow ++;
9. state = adjustImageRangeAfterNext;
10. break;
11. 
    
12. case showPrevImage :
13. imageToShow --;
14. state = adjustImageRangeAfterPrevious;
15. break;
16. 
    
17. case adjustImageRangeAfterNext:
18. // we move our range right (next)
19. kill(rangeFrom);
20. rangeFrom++;
21. rangeTo++;
22. load(rangeTo);
23. state = doNothing;
24. break;
25. 
    
26. case adjustImageRangeAfterPrevious:
27. // we move our range left (previous)
28. kill(rangeTo);
29. rangeTo--;
30. rangeFrom--;
31. load(rangeFrom);
32. state = doNothing;
33. break;
34.  
35. } // switch

You have to write kill() and load() both based on an index.
You have to check for lower and upper range resp.

The goal of the approach is that when we show the image we don't load or kill anything yet.
Instead, draw() goes on, comes to its end and shows the next image from RAM.
Only in the next round (since we have changed state) it kills and loads (while the user already views the image).

Use

1. state = showNextImage;

when the user goes to next image.


Greetings, Chrisir   

thanks thanks thanks Chrisir ;) again, I really appreciated your help.
I understand the new approach. Do I have to take the former setup from your previous post ? we still use hashmap are we ? Or did you forget to post a new setup()
I think I have to think before writing anything. the final project uses shader to make fades between each photos. and the final project uses a 2D array of images. -so the position chose by the user, is x and y coordinates.
this is my mistake: start to deal with all issues in the same time and in details,  rather than thinking about the whole program - with shaders, transitions…I have to this !
thanks a lot, opensource community is not a vain word.

My approach builds upon the old code.

Do I have to take the former setup from your previous post ?

yes.

we still use hashmap are we ?

yes.

sorry, me and my noise again.
I implement your code Chrisir. I get weird stuffs…
When I'm above 10 count images, the method of loading seems to change-
After few times, I have Out of memory, which would mean that picture aren't removed from the ram…
It seems that the pictures arent preloaded : Above 10, the image waits that the load is done…
I must have made mistakes…thanks if you still have courage to take a look
before setup():

1. //
   int imageCount = 10;
   int imageToShow, rangeFrom, rangeTo;
   Textures test1 ;
   final int doNothing = 0;
   final int showNextImage = 1;
   final int showPrevImage = 2;
   final int adjustImageRangeAfterPrevious = 3;
   final int adjustImageRangeAfterNext = 4;
   //
   int state = doNothing;

1. void load(int toload)
2. {
3.   test1.loadImage2(this, toload+".jpg");
4. }

better I think

1. void load(int toload)
2. {
3.   test1.loadImage(this, toload+".jpg");
4. }

because loadImage really loads from hard drive where as loadImage2 just delivers what it has

Please note that we have loadImage and loadImage2 now.

loadImage is the old one and is so intelligent to load an image that is not in RAM anymore - clever but bad for our goal.

So I invented loadImage2 which is not so clever and just returns null if we don't have the image in our RAM anymore. Good.

That's why we use loadImage first to load all images and then use loadImage2 to show/retrieve them.

you're right !
I can't figure out why the preload doesn't seem to work. From picture 10 to picture 11, I go from 190 mb to 27 mb memory…I keep searching.
thanks

the pre-load should work now.

Wasn't that the loadImage2 versus loadImage mistake I made?

those need values at start-up:

1. int imageToShow, rangeFrom, rangeTo;

e.g.

in setup()

1. imageToShow = 0; // ok that's right
2. rangeFrom = 0;
3. rangeTo = 10;

this is a special case, since it's a beginning of the range (because it's 0)

easier would be to start with

1. imageToShow = 425; // ok that's right
2. rangeFrom = imageToShow - 5;
3. rangeTo = imageToShow + 5;

The special case is something like

1. rangeFrom = imageToShow - 5;
2. if ( rangeFrom < 0 )
3.      rangeFrom = 0;

The special case appears at the lower bound (zero) and upper bound (900).


      

this is really coooolll ! thanks you very very very much !!
now it's shader time with several players to make nice transitions between pictures.
Danke Well !!!

I edited my last post a little   

Hi, I need to improve the code-
For now, the image object waits for load and kill process are gone.
wouldn't it be possible to implement a thread which would handled case functions ? it would be a shame to wait for preloading to display pictures, although the images we want to display are already into the buffer.
here's my start of point- but this code doesn't seem to change anything

1. import java.util.HashMap;
   import java.util.Iterator;
   import java.util.Map;
   import processing.core.PApplet;
   import processing.core.PImage;
   class ImageLoaderThread extends Thread
   {
     public  HashMap<String, PImage> textures = new HashMap<String, PImage>();
   
     public PImage loadImage(PApplet app, String filename) {
       if (textures.containsKey(filename)) {
         return textures.get(filename);
       }
       PImage image = app.loadImage(filename);
       if (image != null) {
         textures.put(filename, image);
         Iterator i = textures.entrySet().iterator();  // Get an iterator
         while (i.hasNext ()) {
           Map.Entry me = (Map.Entry)i.next();
           //        PApplet.print(me.getKey() + " is "); //this is a way to know the image object loaded.
           //        PApplet.println(me.getValue());
         }
       }
       else
         PApplet.println("Unable to load image from file '" + filename+"'");
       return image;
     }
     //
     public PImage loadImage2(PApplet app, String filename) {
       if (textures.containsKey(filename)) {
         return textures.get(filename);
       }
       else
         return null;
     }
     //
     public void remove(String filename)
     {
       //filename =null;//just remove the entry of the hashmap, but not free any ram.
       Iterator i = textures.entrySet().iterator();  // Get an iterator
       while (i.hasNext ()) {
         Map.Entry me = (Map.Entry)i.next();
         if (me.getKey().equals(filename)) {
           textures.remove(me.getKey());
           //        PApplet.println("REMOVE=         " +me.getKey());
           return;
         }
         //PApplet.print(me.getKey() + " is "); //this is a way to know the image object loaded.
         //PApplet.println(me.getValue());
       }
       //  }
     }
   } // class
   
   

thanks in advance for any advises.

I don't know how.

Ouch ! I keep searching- but I am not yet java friendly   Your help has been amazing anyway ! thanks

Hi!

Did you read this:

http://wiki.processing.org/w/Asynchronous_data/image_loading

or search the forum for thread?

Sorry, I can't help you....