Android Question Eyes follow code

[Douglas Farias]

Hi all.
how can i make this
https://codepen.io/J-Roel/pen/wWGNQN

with panel and imageview, not canvas.

i want to put eyes into a imageview into a panel, and move this with a touch in panel.

someone can give me the way to make this? i need ideias!

the blue panel = is where i will move the finger
the red panel = the limit
the green is imageview = it need move

my question is...
the blue panel is too large compared to the red panel.
how can i move the imageviews, based on the blue panel move, if the redpanel
it's smaller?

thanks

 

[MarkusR]

something to start with

ImageView1 & 2 is the moving eye ball

B4J

Sub MainForm_Touch (Action As Int, X As Float, Y As Float)

    LookAt(ImageView1,300-100,300,X,Y,50)
    LookAt(ImageView2,300+100,300,X,Y,50)

End Sub

Sub LookAt(ImageViewX As ImageView,X1 As Float,Y1 As Float,X2 As Float,Y2 As Float,R As Float)

    Dim dx,dy As Float
    Dim rx,ry As Float
    Dim a As Float
     
    dx = X2 - X1
    dy = Y2 - Y1
             
    a = ATan2D(dy,dx)
     
    rx = CosD(a) * R
    ry = SinD(a) * (R * 1.5)
 
    ImageViewX.Left = -(ImageViewX.Width /2.0) + X1 + rx
    ImageViewX.Top = -(ImageViewX.Height /2.0) + Y1 + ry
 
End Sub

 

[Douglas Farias]

Hi.
thx for the example.

#Region  Project Attributes
    #ApplicationLabel: B4A Example
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: unspecified
    #CanInstallToExternalStorage: False
#End Region

#Region  Activity Attributes
    #FullScreen: False
    #IncludeTitle: False
#End Region

Sub Process_Globals
End Sub

Sub Globals
    'BLUE PANEL
    Private pMain As Panel
   
    'RED PANEL
    Private pLeft As Panel
    Private pRight As Panel
   
    'EYES
    Private pRightEye As Panel
    Private pLeftEye As Panel
End Sub

Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("1")

End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub


Sub pMain_Touch (Action As Int, X As Float, Y As Float)
    LookAt(pLeftEye,300-100,300,X,Y,50)
    LookAt(pRightEye,300+100,300,X,Y,50)
End Sub




Sub LookAt(pEye As Panel, X1 As Float, Y1 As Float, X2 As Float, Y2 As Float, R As Float )

    Dim dx,dy As Float
    Dim rx,ry As Float
    Dim a As Float
   
    dx = X2 - X1
    dy = Y2 - Y1
           
    a = ATan2D(dy,dx)
   
    rx = CosD(a) * R
    ry = SinD(a) * (R * 1.5)
 
    pEye.Left = -(pEye.Width / 2.0) + X1 + rx
    pEye.Top = -(pEye.Height / 2.0) + Y1 + ry
 
End Sub

i m trying to use this, but i need understand why this is not correct here on the code above.

here is the result before the touch


and here later



thx

 

[MarkusR]

its because your eyes are relativ to its parent panel.
so left,top is 0,0 inside this panel.

x1,y1 is the center of the eye in world coords, x2,y2 the mouse click position in world coords.
Sub LookAt(pEye As Panel, X1 As Float, Y1 As Float, X2 As Float, Y2 As Float, R As Float )

 

[Douglas Farias]

Here is the best result of i get.

#Region  Project Attributes
    #ApplicationLabel: B4A Example
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: unspecified
    #CanInstallToExternalStorage: False
#End Region

#Region  Activity Attributes
    #FullScreen: False
    #IncludeTitle: False
#End Region

Sub Process_Globals
    Private restart As Boolean = False
End Sub

Sub Globals
    'BLUE PANEL
    Private pMain As Panel
   
    'RED PANEL
    Private pLeft As Panel
    Private pRight As Panel
   
    'EYES
    Private pRightEye As Panel
    Private pLeftEye As Panel
   
   
   
End Sub

Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("1")

End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)
End Sub


Sub pMain_Touch (Action As Int, X As Float, Y As Float)
    Select Action
        Case Activity.ACTION_DOWN
           
        Case Activity.ACTION_MOVE
            If restart Then Return 'IF IS RESTARTING TO CENTER, WAIT FOR IT
           
            Private positionXPercentage As Int = x / pMain.Width * 100 'GET %x OF TOUCH
            Private positionYPercentage As Int = y / pMain.Height * 100 'GET %y OF TOUCH
           
           
            If positionXPercentage >= 0 And positionXPercentage <= 100 Then 'SEND THE % TOUCH AS X
                MoveHorizontal(pLeft,pRight,positionXPercentage)
            End If

            If positionYPercentage >= 0 And positionYPercentage <= 100 Then 'SEND THE % TOUCH AS Y
                MoveVertical(pLeft,pRight,positionYPercentage)
            End If
           
           
        Case Activity.ACTION_UP 'RESTART THE EYES TO CENTER POSITION
            moveBack(pLeft,pRight,50,50)
           

    End Select
End Sub


Sub MoveHorizontal(p1 As Panel, p2 As Panel,x As Int)
    Private positionx1 As Int = x * p1.Width / 100 'CONVERT % TO FLOAT
    Private positionx2 As Int = x * p2.Width / 100 'CONVERT % TO FLOAT
    pLeftEye.Left = positionx1 - (pLeftEye.Width/2)
    pRightEye.Left = positionx2 - (pRightEye.Width/2)
End Sub

Sub MoveVertical(p1 As Panel, p2 As Panel ,y As Int)
    Private positionY1 As Int = Y * p1.Height / 100 'CONVERT % TO FLOAT
    Private positionY2 As Int = Y * p2.Height / 100 'CONVERT % TO FLOAT
    pLeftEye.Top = positionY1 - (pLeftEye.Height/2)
    pRightEye.Top = positionY2 - (pRightEye.Height/2)
End Sub



Sub moveBack(p1 As Panel, p2 As Panel,x As Int, y As Int) 'RESTART TO ORIGINAL POSITION (CENTER)
    restart = True
    Private positionx1 As Int = x * p1.Width / 100 'CONVERT % TO FLOAT
    Private positionx2 As Int = x * p2.Width / 100 'CONVERT % TO FLOAT
    Private positionY1 As Int = Y * p1.Height / 100 'CONVERT % TO FLOAT
    Private positionY2 As Int = Y * p2.Height / 100 'CONVERT % TO FLOAT
    pLeftEye.SetLayoutAnimated(500,positionx1 - (pLeftEye.Width/2), positionY1 - (pLeftEye.Height/2),pLeftEye.Width,pLeftEye.Height)
    pRightEye.SetLayoutAnimated(500,positionx2 - (pRightEye.Width/2), positionY2 - (pRightEye.Height/2),pRightEye.Width,pRightEye.Height)
    Sleep(500)
    restart = False
End Sub

it works with all sizes of red panel, the only problem is the green panel go out 50% and i dont know how to fix it.

ps: i m added the function to back to center if ACTION_UP

how can i fix the 50% out problem of green panel?

 

[Douglas Farias]

Hi. sorry to post duplicate.
i made it and i m here to share it.
the example above its 100% working.

here is where i m using it

my PET virtual

a source is attached

thx