Pinch and Rotate

[Thomas McGrath III]

I was playing around with the "Pinch to Zoom an object" lesson at: http://lessons.runrev.com/s/lessons/m/4069/l/11509-how-do-i-implement-a-multi-touch-pinch-motion

And I wanted to add rotate to it as well so that I could pinch and rotate at the same time. I ran into a big wall (called Math I think) in trying to rotate based on how far from the original start point and wether I was rotating left or right.

My solution works for the most part but it is not optimal or very clean and wanted to invite others to take a stab at it:

I stated with the Pinch lesson stack and changed the GRAPHIC to an IMAGE and then modified the script to come up with this solution. This script goes into the card script and the card has an image named "square" on it. I edited it and added the rotateimage handler;

local sTouchArray, sFRAMEWIDTH, sFRAMEHEIGHT

on touchStart pId, pX, pY
   put the width of image "square" into sFRAMEWIDTH
   put the height of image "square" into sFRAMEHEIGHT
end touchStart

on touchEnd pId
   delete variable sTouchArray[pId]
end touchEnd

on touchMove pId, pX, pY
    
    if sTouchArray[pId]["startloc"] is empty then
        put (pX & comma & pY) into sTouchArray[pId]["startloc"]
    end if
    
    put (pX & comma & pY) into sTouchArray[pId]["currentloc"]
    
    if the number of lines of the keys of sTouchArray is 2 then
        # First lets get the data out of the array
        put line 1 of the keys of sTouchArray into tPointOne
        put line 2 of the keys of sTouchArray into tPointTwo
        
        # First lets calculate the size of the picture base on the distance 
        # between the two touch points
        put sTouchArray[tPointOne]["startloc"] into tStartLoc1
        put sTouchArray[tPointTwo]["startloc"] into tStartLoc2
        put sTouchArray[tPointOne]["currentLoc"] into tCurrentLoc1
        if tStartLoc1 is not empty and tStartLoc2 is not empty then
            put resizeDistance(tStartLoc1, tStartLoc2) into tStartDistance
            put resizeDistance(sTouchArray[tPointOne]["currentloc"], sTouchArray[tPointTwo]["currentloc"]) into tCurrentDistance
            resizeimage tStartDistance, tCurrentDistance
            if item 2 of tStartLoc1 < item 2 of tCurrentLoc1 then
                rotateimage "left", item 2 of tStartLoc1, item 2 of tCurrentLoc1
            else
                rotateimage "right", item 2 of tStartLoc1, item 2 of tCurrentLoc1
            end if
        end if
    end if
end touchMove

function resizeDistance pLoc1, pLoc2
    local dy, dx, tDistance
    put item 2 of pLoc1 - item 2 of pLoc2 into dy
    put item 1 of  pLoc1 - item 1 of pLoc2 into dx
    put sqrt((dy*dy) + (dx*dx)) into tDistance
    return tDistance
end resizeDistance 

on rotateimage pAngle pStart pNew
    if pAngle contains "left" then
        put pStart - pNew into tDistance
        set the angle of image "square" to tDistance
    else
        put pNew - pStart into tDistance
        set the angle of image "square" to (- tDistance)
    end if
    unlock screen
end rotateimage

on resizeimage pStartDistance, pNewDistance
    # Work out the percentage change between the old and new image
    put round((pNewDistance / pStartDistance) * 100) into tPercentage
    
    # Store the original location of the image
    put the loc of image "square" into tLoc
    
    # Calculate the new width and height
    set the width of image "square"  to round(sFRAMEWIDTH * (tPercentage / 100))
    set the height of image "square" to round(sFRAMEHEIGHT * (tPercentage / 100))
    
    set the loc of image "square"  to tLoc
    unlock screen
end resize image


-- Tom McGrath III
http://lazyriver.on-rev.com
3mcgrath at comcast.net