image looper

Hey all I have a fairly simple project that I’d like to make, but can’t seem to get my head around.

I have a container that I want to display 3 images in a looping manner.
All 3 images are inside of their own containers respectively and are displayed side by side in the main container.

What I want to do is the drive the x parameter of each img container so they move in unison (either to the right or left) in a smooth manner as if on a conveyor belt and when any part of one img moves off the main container it comes back on the other side like a loop.

Don’t know if I’m making myself clear, but any help would be appreciated!

you could double up the containers, so have containers A1 , B1, and C1, and then duplicates A2, B2, C2, so that as A1 starts moving out of frame, A2 will start moving in, then once A1 moves completely out of view, its position will move to the back of the line. in this case you might also keep the images outside the containers and reference them in the background TOP parameter on the Look page, so you don’t have to duplicate the actual images.

i’m wary of ever saying that you can’t do something in Touch, but i don’t think you can make a container split and show its parts in different sections of a parent component. if you know any GLSL, i know you can do this in a GLSL TOP.

It’s possible to do this in containers, you should set the parent crop parameter to ‘on’ so that the inside containers don’t show up if they move out of bounds.

I would probably do this with geo-instancing instead, you can set the textures of each instance to a video file, here’s an example.

Just like CorbinWhite said, double up your image instances, and loop the x position, put the camera in the middle and you will never see the loop happen.

convator_images.tox (1.58 KB)

Hey harveymoon,

That looks great! Thank you so much for this, I don’t think I’ve ever done any geo-instancing and look forward to learning more!

Because this is the first result in google which showed up when I was looking for something similar i will add my solution. I wanted to move rectangle in loop like you can do when you change phase of Ramp TOP and I found that you can use Extend in Transform CHOP. Maybe it will help some beginners like me. Cheers.

I’m also trying to move images to build sort of a parallax effect. but if I load an image in which the top half is transparent, the bottom row of pixels is repeated at the top? this pic is comp’d over a white rectangle to better illustrate the issue.

Hello @deseipel,

not sure how you are approaching it, but this sounds like you need set the Extend V texture sampling parameter from it\s default “Repeat” to “Zero”. The Texture Sampling parameters can be found when clicking onto the double arrow beside the TOP reference often used in materials:

image

cheers
Markus

1 Like

I tried that but I still see a line.

turning this on and setting it to a certain amount is a workaround

Hi @deseipel,

seeing that you don’t have Blending enabled - might be useful to see how your file is setup.

cheers
Markus

Ive placed the toe file and images here

https://drive.google.com/drive/folders/1ueiqiK3EtcMJ8jIFLOwzekSIghoEX6g2?usp=sharing

Hi @deseipel,

since you are instancing textures, you would want to use the Texture parameters on the Instance2 Page and set the extend conditions for u and v there:

image

cheers
Markus