Requesting Help with dragging images with mouse!

Hi! I’m relatively new to TouchDesigner and am trying to do something that is definitely out of my knowledge. I’d appreciate any help! I’m trying to create mouse interactive images such that you can drag them around. My goal is to make an interactive scrapbook.

In terms of my set up I have rectangle sop connected to a GEO for instancing and am using a texture and replicate to load my images onto the rectangle. The rectangles currently have x y z motion using noise. I’m trying to use the Multi Touch In and Render pick to read the tx ty tz of the mouse and when the mouse is clicked.

I tried to take the instance tx ty tz data from the noise into a chop to DAT and then use a DAT Execute to adjust it. In my DAT execute I’m trying to read the mouse position, instance number, click, and write it to a new table which can then be turned back into a CHOP and into the geometry. To be honest, I haven’t done much coding or ever used the DAT execute so I’m pretty lost. Not sure if this is even possible or if there’s an entirely different easier way to go about this, please let me know!

When I tried to write the new table as well as to the DAT that’s being read, neither have any changes.

Thank you!
bay_images.18.toe (14.7 KB)

code in my dat execute

def onTableChange(dat):
    mouse = op('mousein2')
    pick = op('renderpick1')
    pos_table = op('null3') # CHOP to DAT containing instance positions
    
    # Ensure Render Pick has valid data
    if pick.numRows > 1:
        instance = int(pick[1, 8]) # Instance number from Render Pick (column 4)
        tx, ty = int(pick[1, 1]), int(pick[1, 2]) # Get mouse positions?
        click = mouse['left'] # Left click state (1 when pressed)
    
    #if the user is clicking the mouse and on an image:
    if click == 1 and 0 <= instance < pos_table.numRows:
        # Update the corresponding row in chopto1
        pos_table[instance, 0] = str(tx) # Update x position
        pos_table[instance, 1] = str(ty) # Update y position
    
    #question - can I write to the read table or do I need to write to a new table?
    table1[instance, 0] = str(instance) # Store instance number
    table1[instance, 1] = str(tx) # Store new tx
    table1[instance, 2] = str(ty) # Store new ty
    return

You’re on the right track. I find render picking in TouchDesigner to often be a bit confusing and it typically requires a bit of infrastructure, so don’t get discouraged because this is definitely a more difficult task for your first foray into using Python. :slight_smile:

table1 doesn’t seem to be defined here. It might be helpful to think of the instance data you’re using to transform your images as a composite of two sources: first, the “base” transform data that describes the image position when the user hasn’t interacted with anything and, second, offset data that describe the accumulation of mouse movement. So the final transform instance operator you provide to your geo comp would just be a combination (sum) of these two sources.

I looked up and briefly scrubbed through this video which seems to be a pretty good tutorial. In the last section, they describe a similar approach, however using TOPs and a custom GLSL feedback patch, which may be more code than you want at the moment. However, it does provide a nice conceptual overview of the approach.

Thanks for your response (im definitely struggling here :smiling_face_with_tear:)! I was curious if there was anything wrong with my syntax/lacking node connections and how to read and write to dats. Since even with the added table1 definition, there’s no updates to the dat.

I did try to look through that video earlier and got pretty confused about how he connected the values back to the position data since he uses a grid sop and is not applying it to single instances of rectangle sop.

Hi @kylaf,

when debugging, you can check why the script is never actually getting past the if statement on line 27.

Apart from this I would encourage you to use the Render Pick DAT’s callbacks for all interaction. There you have states like when a selection starts and ends, helping you to pick old positions, gathering offsets and calculating/writing new positions for the instances.

Have a look at the OP Snippets for the Render Pick DAT for an example of how to use it.

Hope this helps a bit
cheers
Markus