what is the best way to show many images together?

edited September 2016 in How To...

hi people...again... i want to draw many images (which maybe similar or different) on screen, they might be moving too... so its very important for the method to be fast, as they might move all together... images are png files... thanks in advanced...



  • The image () method is fast the slow bit will be loading the images which should be done in setup ().

    How many images are you talking about? I assume that if they move they will overlap, do you want them displayed in a particular Z order?

  • no... i do check them for coincidence so they repel each other... in fact the project is about "flower carpet"...there might be around 100 images, apart from that i have to do some other calculations... i'm not sure what causes delays but when many of them start to move, i face many delays...

  • This question really doesn't contain enough information for us to answer. Quark's answer already gives you about as much as we can.

    There are some obvious things to check:

    • Make sure you're only loading the images once. In other words, don't load them from the draw() function.

    • Make sure you're only resizing them once. In other words, don't resize them in the draw() function.

    But other than that, there is a limit to what a computer can do. If you have further questions, please post an MCVE (note: this should not be your entire project), and we'll go from there.

  • Answer ✓

    How big are the images?

    i do check them for coinciden each other... 

    This could be the problem if you have 100 images then to check every image against every other image once requires a minimum of 50000 tests which might take longer than displaying 100 small images. Can you post your draw () method and your checking code?

  • thanks Kevin, in fact this part is useful for many other projects... i do load images and resize them in setup()...

    thanks quark, i will cut that part of code... i have tried some ways, but now you mentioned this i think i have to find a way to limit how many objects i check... thanks again

  • Answer ✓

    i have to find a way to limit how many objects i check

    You might try spatial partitioning try googling it.

  • thank you... i'll try searching...

  • Roughly what size are the images?

  • i resize them to 100*100... but i don't check pixels, as i use objects, i just check the center position of each image against the input (here is the kinect raw depth)... i think i should find a way to reduce the calculations...

  • @quark, didn't you write this quad tree spatial partitioning demo a few years back?

    When I downloaded it from openprocessing I was able to get it running in Processing 3 by adding these lines to the top of QuadTreeDemo.pde:

    import java.util.LinkedList;
    import java.util.Collections;

    ...although the collision window size is wrong, for reasons I didn't try to debug.

  • it also occured to me that the use of image() with 5 parameters is slow because he is doing a reSize every time. Better resize them in setup() and use image() with 3 parameters only

  • edited October 2016

    Yes I wrote the quadtree demo and I might have suggested that approach but the images are quite large (100x100 pixels) which means the lowest level partition would need to be at least 200x200 which is a significant proportion of the display area, negating the benefit of that approach.

    BTW the version on Open Processing is old and uses an old version of G4P so won't work properly with PS3. I do have a PS3 friendly version if anyone wants it.

  • @quark : me me me! :)

  • edited October 2016


    Download QuadtreeDemo

    Unzip the file into your sketch folder. You will need to install G4P using the Contributions Manager.

    If you have questions about it post it as new discussion on the forum rather than continue this one.

    Enjoy :)

  • @quark : thank you so much! I'm gonna dive into it soon'ish :)

Sign In or Register to comment.