Posted on January 22, 2013. Written by Brent Sorrentino


Scaling

display object를 멀티 터치로 컨트롤 하면서 우리가 원하는 transformation을 적용하려면 모든 tracking dot들의 평균 값들이 필요합니다. 그리고 그 값을 display object의 midpoint (그 평균 위치) 에 이미지를 위치시켜야 합니다.


scaling 과 관련해서는 수학적인 계산이 필요합니다.

    midpoint 와 tracking dot들 간의 거리의 합 구하기
    거리의 합계를 dot 들의 갯수로 나눈 평균 거리 구하기
    tracking dot 들의 이전 위치에 대한 같은 평균 거리 구하기
    이전과 현재의 평균 거리 사이의 차이 구하기
    display object 의 .xScale 과 .yScale에  multiplication 으로 그 차이를 적용하기


이건 여러 tracking dot들이 움직일 때 display object 의 평균 transition 을 어떻게 적용할 지를 정해 주는 겁니다. 이 scaling 값을 얻도록 하는 기본 라이브러리 함수들을 만들 겁니다. 아래 함수는 스크린의 두개의 지점사이의 거리를 계산하는 함수입니다. 아주 전형적인 삼각함수죠.

sample8.lua

-- returns the distance between points a and b
function lengthOf( a, b )
   local width, height = b.x-a.x, b.y-a.y
   return (width*width + height*height)^0.5
end

tracking dot들의 midpoint 를 얻기 위해 sample 5 에서 다뤘던  calcAvgCentre() 함수를 사용할 겁니다.  midpoint 와 tracking dot 들 사이의 평균 거리를 구해서 저장하기 위해 다음과 같은 함수들을 사용할 겁니다. 첫번째는 각 dot 들의 현재 distance 를 get 해서 그 값을 tracking dot 에 저장할 겁니다. 그리고 이전 distance 도 물론 저장하구요. 두번째 함수에서는 이전과 현재 거리 set 들 사이의 차이를 계산하는 함수를 사용할 겁니다.

-- calculate each tracking dot's distance from the midpoint
local function updateTracking( centre, points )
    
   for i=1, #points do
      local point = points[i]
      point.prevDistance = point.distance
      point.distance = lengthOf( centre, point )
   end
end
 
-- calculates scaling amount based on the average change in tracking point distances
local function calcAverageScaling( points )
    
   local total = 0
   for i=1, #points do
      local point = points[i]
      total = total + point.distance / point.prevDistance
   end
   
   return total / #points
end

이 함수를 사용하는 방법은 간단합니다. rect:touch()의 began 과 ended phase 에서 call 하시면 됩니다. 그러면 이 함수들이 적당한 값으로 해당 tracking dot 들의 값을 update 할 겁니다. 아래는 began 과 ended phase 에서 call 하는 부분입니다.

-- "began"
-- pre-store the tracking dot scale and rotation values
updateTracking( rect.prevCentre, rect.dots )
return true  -- we handled the began phase
 
-- "ended"
-- store the new centre of all touch points
rect.prevCentre = calcAvgCentre( rect.dots )
-- refresh tracking dot scale and rotation values
updateTracking( rect.prevCentre, rect.dots )

moved phase 는 조금 더 복잡합니다. 왜냐하면 실제 이 부분에서 대부분의 일이 진행 될 거거든요. 다행히 여기서 우리가 해야 될 일은 tracking dot 을 update 하는 똑 같은 일에다가 tracking dot 이 한개 이상일 경우 scaling 을 적용하는 일 뿐입니다.

if (e.phase == "moved") then
   print( e.phase, e.x, e.y )
   local centre, scale, rotate = {}, 1, 0  -- declare working variables
   centre = calcAvgCentre( rect.dots )  -- calculate the average centre position of all touch points
   updateTracking( rect.prevCentre, rect.dots )  -- refresh tracking dot scale and rotation values
   
   -- if there is more than one tracking dot, calculate the rotation and scaling
   if (#rect.dots > 1) then
      scale = calcAverageScaling( rect.dots )  -- calculate the average scaling of the tracking dots
      rect.xScale, rect.yScale = rect.xScale * scale, rect.yScale * scale  -- apply scaling to rect
   end
   
   rect.x = rect.x + (centre.x - rect.prevCentre.x)  -- update the X position of rect
   rect.y = rect.y + (centre.y - rect.prevCentre.y)  -- update the Y position of rect
   rect.prevCentre = centre  -- store the centre of all touch points
   
else -- "ended" and "cancelled" phases
    




main.lua
sample8.lua

위에서 moved phase 에서 우리가 바꾼 부분은 아래와 같습니다.

    앞으로 일어날 transformation 값들과 같이 사용될 변수들 정의
    tracking dot 들의 저장된 distance 값을 refresh 하기 위해 updateTracking 을 call 하기
    tracking scaling 에서 변한 값의 평균을 구하기 위해 distance 값들 사용하기
    display object "rect" 에 해당 scaling 적용하기

The display object now translates (moves) and scales (zooms) along with our tracking dots (touch points).
이제 이 display object 는 tracking dot 들 (touch point 들) 의 움직임에 따라 translates (moves) 과  scales (zooms) 를 하게 됐습니다.

두어달 가량 China Team 에 원격으로 진행된 Knowledge Transfer 가 끝났습니다. 

저도 한 네 다섯개의 Session 을 맡았던 것 같은데요.

두 나라의 시간 차이로 이곳 미국 동부 시간으로 밤 10시, 중국 시간으로는 아침 11시에 진행이 됐었습니다.

이 KT 가 끝나고 나서 China Team 에서 고맙다고 메일이 왔는데요.

이에 대해 우리 매니저가 보낸 답장을 가지고 오늘 영어 공부를 할 겁니다.

XXX

Thank you and the team very much for all your hard work these past few months! You have all done great work and are very quick at learning new technology as well as how our team works. We are very excited to continue the great work we have all started!

 

I hope you and the whole team in China have a great vacation and enjoy the New Year’s festivities!

 

Thank you!

당신과 당신 팀이 지난 몇달간 열심히 일해줘서 대단히 감사드립니다. 모두들 훌륭하게 일을 마쳤습니다. 그리고 아주 빠른 시간에 새로운 기술들과 우리팀 업무들을 잘 습득해 주셨습니다. 지금까지 그래왔듯이 훌륭하게 일을 진행할 여러분들과 같이 계속 근무하게 되서 무척 기대 됩니다.

중국에 있는 모든 팀들이 좋은 명절을 보내고 즐거운 설날 연휴를 보내시길 바랍니다.

감사합니다.

위 글은 프로젝트 매니저인 마이크가 보낸 메일이구요. 또 다른 프로젝트 매니저인 팻이 보낸 메일도 있어요.

Well said!

 

Thank you all for making the KT successful.  It really is a two way partnership and I appreciate all the hard work, early mornings, and late nights everyone has put in onshore and offshore.

 

R, L, K, and F – We wish you all a very happy, healthy, and enjoyable holiday.  I look forward to seeing you all soon.

 

Happy New Year,

얘기 잘 하셨어요!

KT 를 성공적으로 마칠 수 있게 되서 모두에게 감사드립니다. 말그대로 양쪽 방향으로 잘 진행된 파트너쉽이었습니다. 이른 아침 그리고 늦은 밤에 사무실 안에서 그리고 사무실 밖에서 열심히 일해 준 것에 감사의 마음을 표합니다.

R,L,K 그리고 F (사람 이름은 이니셜로 처리했습니다) -  모두들 행복하고 건강하고 즐거운 명절 보내길 바라며 조만간 만나기를 바랍니다.

새해 복 많이 받으세요.

아시다시피 그냥 영어로 들을 때는 존대말을 염두에 두지 않는데 이렇게 번역하면서 존대말로 하니까 말들이 너무 거리감 있게 느껴지네요.

어쨌든 팻이 보낸 메일 중에 onshore 와 offshore  해석할 때 조금 생각을 해야 됐는데요.

글자 그대로는 육상, 해상 이렇게 번역할 수 있겠지만 이 편지 내용에서는 무엇으로 해석할 까 고민이 됐으요.

또 다른 뜻인 국내, 국외로 해석하면 적당할 것 같기도 하구요.

KT Session 진행할 때 중국은 아침 11시니까 사무실에서 했는데 저희쪽에서는 밤 10시라서 집에서 진행했거든요.

그래서 저한테는 사무실 안과 밖이라는 느낌이 제일 먼저 와서 그냥 그걸로 번역해 버렸어요.

국내외가 맞을 수도 있겠네요.

어느 의미이든 이 메일을 이해하는데 크게 지장을 주지는 않는 것 같군요.

정확히 아시는 분 계시면 알려 주세요.

이전 글 까지만 해도 이 코드는 유용합니다. 하지만 좀 더 다듬어야 하죠. 작은 파란 사각형을 하나 이상의 손가락으로 움직일 수 있습니다. multitouch input device의 장점은 virtual 상황에서 real world 의 느낌을 주는데 있습니다. 이 코드에 rotation 과 scaling 효과를 주면 훨씬 더 실감나게 움직이곘죠.

Relative Motion


이 작업을 하기 전에 이전 코드(6번)를 실행 시킨 후 한 손가락을 이용했을 때 사각형이 어떻게 움직이는지 한번 보세요. touch point 로 사각형의 중심이 이동한 다음에 움직이죠. 이렇게 사각형의 중심이 이동하지 않고 그냥 touch point 와 그냥 relative 하게 움직이도록 할 겁니다. 이 작업을 하기 위해 moved와 ended phases 에 코드를 추가 할 겁니다.

sample7.lua

function rect:touch(e)
   local target = e.target  -- get the object which received the touch event
   
   -- handle began phase of the touch event life cycle...
   if (e.phase == "began") then
       
      print( e.phase, e.x, e.y )
      local dot = newTrackDot(e)  -- create a tracking dot
      rect.dots[ #rect.dots+1 ] = dot  -- add the new dot to the list
      
      -- pre-store the centre position of all touch points
      rect.prevCentre = calcAvgCentre( rect.dots )  
      return true  -- we handled the began phase
      
   elseif (e.parent == rect) then
       
      if (e.phase == "moved") then
          
         print( e.phase, e.x, e.y )
         -- calculate the centre position of all touch points
         local centre = calcAvgCentre( rect.dots )
         rect.x = rect.x + (centre.x - rect.prevCentre.x)  -- update the X position of rect
         rect.y = rect.y + (centre.y - rect.prevCentre.y)  -- update the Y position of rect
         rect.prevCentre = centre  -- store the centre of all touch points
         
      else  -- ‘ended’ and ‘cancelled’ phases
          
         print( e.phase, e.x, e.y )
         if (isDevice or e.numTaps == 2) then  -- remove the tracking dot from the list
            
            local index = table.indexOf( rect.dots, e.target )  -- get index of dot to be removed
            table.remove( rect.dots, index )  -- remove dot from list
            e.target:removeSelf()  -- remove tracking dot from the screen
            -- store the new centre of all touch points
            rect.prevCentre = calcAvgCentre( rect.dots )
         end
      end
      return true
   end
   
   return false  -- if the target is not responsible for this touch event return false
end
 





main.lua
sample7.lua

   

여기서 수정한 부분은 아래와 같습니다.

    모든 touch 들의 center 를 계산하고 began phase 안에서 참고하기 위해 그 값을 저장한다.
    moved phase 에서 사각형의 x,y 값에 이전 touch 와 현재의 touch center 사이의 차이점을 추가적용한다.
    ended phase 에 터치들의 저장된 터치들의 중심값을 업데이트한다. 그래서 손가락을 떼더라도 다음 moved phase 에서 사각형이 필요없이 이동하지 않도록 한다.

이제 사용자는 사각형 위에 여러 손가락을 얹어도 이상하게 움직이지 않을 겁니다. 그 손가락들을 바꾸고 움직이고 해도 어색하지 않게 움직입니다. 이제 사각형이 손가락 움직임에 따라 회전하면 더 자연스럽겠네요.