Random Image Placement In A Fixed Grid

[bardof]

Hello everyone,

I am working on a projection project in TouchDesigner and would appreciate some guidance.

I would like to create a grid layout in which images are randomly placed inside each cell of the grid. Each grid cell should continuously transition from one image to another, using smooth opacity (crossfade) transitions.

The timing of these transitions should be synchronized to the tempo (BPM) of the music playing during the performance. In other words, when the tempo increases, the image-change speed should also increase.

My questions are:

1.⁠ ⁠What would be the best operator setup for randomly assigning images to each grid cell?

2.⁠ ⁠How can I implement opacity-based transitions between images per cell?

3.⁠ ⁠How do I link the transition speed to the detected BPM or audio analysis of the music?

**4.**⁠ ⁠Is there an efficient way to handle a large number of images without dropping frames?

5. In each cycle, all images in the grid must be different (no repetitions).

I am sharing a screenshot and the project folder if you want to take a deeper look.

Any suggestions, example networks, or references would be very helpful.

egemen_gpt.2.toe (5.1 KB)

---

[odaymansour]

I’d like to take a shot at this, as I worked on a similar project a while ago. The main problem was loading many images on the same frame. A few questions that can help me provide the best solution:

1. How many images do you have in that folder, and what’s their typical resolution?
2. How much VRAM does your GPU have?
3. Will you be adding more images during the performance or is the number of images fixed?
4. How big do you want the output image to be?
5. What kind of music will this play with? If it’s electronic music with a constant beat then I can also give you the beat detection widget I put together.

I’m preparing an example sketch with my ideas.

[bardof]

Hello, thank you for your interest.
As for your questions:

1. Number of the images is not certain at the moment, but there is a grid for 35 images and each image will be 290x290 pixels. (We will not see more than 35 images per frame)

2. I am using a MacBook Pro M3 with 16GB Memory.

3. Number of the images is fixed.

4. Output image will be around 290x220 cm.* I am sharing the exact place. It’s highlighted with the yellow frame.

5. These 3 songs will be played.

   egomancer - spotify link

   Thank you again. I appreciate your help.
   Have a great day.

[odaymansour]

Ok, so here’s what I put together. Main ideas are:

1. Preload all the images into Movie TOPs to avoid having to load them live. This works for me on ~300 images in the folder. I expect it to work for about 1000 images but I haven’t tested any more.
2. Prepare 2 layouts and use double buffering. The hidden layout will update on the beat and then we switch to it smoothly, then the other layout will change on the subsequent beat
3. I put together basic beat detection but the music you shared doesn’t have a kick or a bassline, so that wouldn’t work. So I added a Pulse LFO on the sketch tempo which should work if you set the tempo correctly (seems to be 90 BPM in the music you shared

Note: If you see that the crossfading is glitching, then go to the switch1 operator and flip the order of the inputs. This is a timing issue and I can’t be bothered to fix it now.

I like the music, is this your work?

If you like what I put together as a base then I’ll gladly continue collaborating with you. If you use any parts of this sketch then please make sure to give me credit, even if very discretely.

image_tiling.toe (17.6 KB)

[bardof]

Thank you so much for your effort.

I am sorry, I’ve been a bit busy lately and wasn’t able to reply earlier.
I am going to take a look at the project you shared and reply as soon as possible. Btw, music is not mine, it’s my friend’s. It will be an event at a place called MiniMusicLibrary.