[XUI] 3D, rotations and pivots

Discussion in 'Chit Chat' started by Star-Dust, May 17, 2018.

  1. Star-Dust

    Star-Dust Expert Licensed User

    So far I've used the native Android commands to rotate the views according to the X, Y, and Z axes. The native commands let you change the X and Y coordinates of the Pivot point and get this.

    [​IMG]

    But to get a rotating cube it is not enough to be able to rotate on three axes but you have to be able to move the pivot according to the x, y and z axis.

    I thought that the only solution was having to recover a source that I used 15 years ago in turbo pascal and in Vb4 to make the rotations. But unfortunately I did not find it.
    There is the LibGDX library that allows you to do this without having to study too much, but it is my challenge with myself
    So I went to memory and I made great strides ...
    16.gif 14.gif
    Obviously I developed with the XUI library
    In the meantime I'm creating a class to handle everything.
    As soon as I can rotate an image I will show it to you
     

    Attached Files:

    • 1.gif
      1.gif
      File size:
      55.8 KB
      Views:
      548
    Last edited: Jul 7, 2018
    Informatix, scsjc, MarcoRome and 14 others like this.
  2. Star-Dust

    Star-Dust Expert Licensed User

    Update:
    2.gif

    The next step is to create a sphere with the help of C-Spline curves.
    The C-SPline algorithm I posted here, fixing 5 points, creates a circle with many contiguous lines.
    Thus it is possible to create a sphere with lines.

    But now it's time to sleep :p


    Sample at post#48
     
    Last edited: Jul 5, 2018
  3. Filippo

    Filippo Expert Licensed User

    6 un mostro! ;)
     
  4. Star-Dust

    Star-Dust Expert Licensed User

    E non hai visto ancora la mia foto o_O :p
     
  5. LucaMs

    LucaMs Expert Licensed User

    ... put images on the faces of the cube.
     
  6. LucaMs

    LucaMs Expert Licensed User

    or, better, to allow the user-developer to put a B4XView (so not necessarily an ImageView) on any face of the cube.

    I'm thinking to an AMAZING "cube of settings", where each face is used to set a category of properties :)

    Dim pnlColors As B4XView
    ...
    pnlColors.LoadLayout(...)
    PropCube.Face(0) = pnlColors
     
    JordiCP likes this.
  7. JordiCP

    JordiCP Well-Known Member Licensed User

    Some months ago I spent some time with something that was for a different purpose, but based on a similar concept.
    Plan to be into it again soon, I think it is a really interesting challenge :)
     
    Peter Simpson, Star-Dust and LucaMs like this.
  8. Star-Dust

    Star-Dust Expert Licensed User

    A few explanations:

    Each point in space has three coordinates (X, Y, Z) that are considered the distance (positive or negative) with respect to each axis.
    H1.png

    But the position can also be indicated by the length of the line (or radius) that passes from the center of the axes to the point and the inclination in degrees or radians of the angle that forms this line with respect to the axes.

    To understand each other better I describe the thing on a 2-dimensional plane
    The Point (50,50) can also be indicated as follows: Radius = 70.7 Angle = 45 °
    H2.png

    This allows to recalculate the position:
    X = Cos(Angle) * Radius - Cos(45°) * 70.7 = 50
    Y = Sin (Angle) * Radius - Sin (45°) * 70.7 = 50


    When you need to rotate a point, just change the angle value.
    X = Cos(Angle + Value) * Radius
    Y = Sin (Angle + Value) * Radius


    This method helps a lot, but redoing these calculations for each rotation would weigh heavily on the processor. Then calculate the angle and radius when inserting the coordinates of the point:
    Code:
    public Sub AddPoint(X As Int, Y As Int)
        
    Dim NewPoint As T_Point
        NewPoint.Initialize
        NewPoint.X=X
        NewPoint.y=Y
        NewPoint.Angle=
    ATan2D(Y,X)
        NewPoint.Radius=
    Sqrt(Power(Y,2)+Power(X,2))
    End Sub
    This is just a simplistic example, because on a three-dimensional plane it gets complicated
     
    Sagenut likes this.
  9. Star-Dust

    Star-Dust Expert Licensed User

    I completed the calculation and the perspectives:
    3.gif 5.gif

    This is the code that generates these rotations.
    Code:
    Sub Activity_Create(FirstTime As Boolean)
        
    Activity.LoadLayout("Layout1")
        
    Panel = xui.CreatePanel("")
        
    Activity.Addview(Panel,40dip,40dip,100%x-40dip,100%y-80dip)
        
        Lines.Initialize
        
    ' CUBE
        Lines.AddRec(-50,-50,50,50,50,50,MyColor2)'
        Lines.AddRec(-50,-50,-50,50,50,-50,MyColor2)
       
        Lines.AddLine(-
    50,-50,50,-50,-50,-50,MyColor3)
        Lines.AddLine(
    50,-50,50,50,-50,-50,MyColor3)
        Lines.AddLine(
    50,50,50,50,50,-50,MyColor3)
        Lines.AddLine(-
    50,50,50,-50,50,-50,MyColor3)

       
    ' SPHERA
        Lines.AddCircleZ(0,0,0,80,MyColor)
        Lines.AddCircley(
    0,0,0,80,MyColor2)
        Lines.AddCirclex(
    0,0,0,80,MyColor3)

        
    ' DRaw
        Lines.RenderImage(Panel,2dip)
    End Sub

    Sub SeekBar_ValueChanged (Value As Int, UserChanged As Boolean)
        
    ' Rotate
        Lines.RotateY(SeekBarY.Value).RotateZ(SeekBarZ.Value).RotateX(SeekBarX.Value).RenderImage(Panel,2dip)
        LabelC.Text=
    $"X:${SeekBarX.Value} Y:${SeekBarY.Value} Z:${SeekBarZ.Value}"$
    End Sub
    Next step rotate full geometric figures
     
    Last edited: May 19, 2018
    Beja, Sagenut and Johan Hormaza like this.
  10. Star-Dust

    Star-Dust Expert Licensed User

    Thank you, surely I would appreciate your comments to improve this work, I saw some of your works you posted and are truly exceptional.
    Unfortunately, now, as soon as I finish an algorithm and it works, I think it's better.
    I rewrote the algorithm 3 times by totally changing it and improving it.
    But now I have thought of a new algorithm that makes it easy for me to render full images and polygons of every shape.
    But rewriting everything at once will require much more time and I never get to render the images, but I already have in mind how to do it in XUI (if I do not forget it in the meantime)
     
  11. Star-Dust

    Star-Dust Expert Licensed User

    Update
    6.gif 7.gif

    Cube
    Code:
    Lines.Initialize
        Lines.AddPolygon(
    1,-50,-50,50,C).AddPolygon(1,50,-50,50,C).AddPolygon(1,50,50,50,C).AddPolygon(1,-50,50,50,C)
        Lines.AddPolygon(
    2,-50,-50,50,C).AddPolygon(2,-50,50,50,C).AddPolygon(2,-50,50,-50,C).AddPolygon(2,-50,-50,-50,C)
        Lines.AddPolygon(
    3,-50,-50,-50,C).AddPolygon(3,50,-50,-50,C).AddPolygon(3,50,50,-50,C).AddPolygon(3,-50,50,-50,C)
        Lines.AddPolygon(
    4,50,-50,50,C).AddPolygon(4,50,50,50,C).AddPolygon(4,50,50,-50,C).AddPolygon(4,50,-50,-50,C)
        Lines.RenderToView(
    Panel,2dip)
    Pentagon
    Code:
    Lines.AddPolygon(1,-60,-30,50,xui.Color_White).AddPolygon(1,0,-60,50,xui.Color_White).AddPolygon(1,60,-30,50,xui.Color_White).AddPolygon(1,40,50,50,xui.Color_White).AddPolygon(1,-40,50,50,xui.Color_White)
    Now last step, rendering Image
     
    Last edited: May 21, 2018
  12. Star-Dust

    Star-Dust Expert Licensed User

    Without using native methods, but all created in B4X and XUI
    It is still in a rudimentary phase, it must be speeded up and improved ... but it is already something

    8.gif

    PS. Maybe I will distribute the source code of this class, except for the image rendering, if someone is interested
     
    Sagenut, Peter Simpson, Beja and 2 others like this.
  13. Star-Dust

    Star-Dust Expert Licensed User

    Wait B4A 8.30 which has been announced that it will be faster, so the movement will appear more natural.

    In addition, I am examining same algorithms for image deformation, what I now use does not satisfy
     
  14. Star-Dust

    Star-Dust Expert Licensed User

    Sorry but I'm absorbed by something else.
    I made some progress and as soon as I have time I will do a first application

    In the meantime for those who want I have attached the code. Obviously there are some parts that I will keep for myself.

    But certainly it will be a good start for those who want to study 3D without using the Android API.
    I created them to be used with XUI, so do not depend on the operating system but be independent.

    9.gif 10.gif 11.gif

    I hope that with the new bitmapCreator I can speed up the calculation of the image rotation
     

    Attached Files:

    Last edited: Jun 8, 2018
    Sagenut, Almora, inakigarm and 5 others like this.
  15. Star-Dust

    Star-Dust Expert Licensed User

    I'm getting better results with BitmapCreaotr.
    Probably by this month produced a library for Creating 3D Views for XUI
    12.gif 13.gif
    I'm working to correct some graphic defects in image representations, but nothing complicated.
    Only time is missing
     
    Last edited: Jun 9, 2018
    Sagenut, Almora, Erel and 4 others like this.
  16. Star-Dust

    Star-Dust Expert Licensed User

    I have used several algorithms found on the internet to display a draw imagine inside a trapezoid but none worked well.

    I put myself in a good deal with paper and pen and deepened my mathematical knowledge and developed my own algorithm for rendering the image.
    It works better than I found on the internet, but as you can see it still has some minor flaws, so I'm perfecting it and speeding it up.

    I'll show you the current progress
    14.gif
     
    Last edited: Jun 11, 2018
    Sagenut, Peter Simpson and Erel like this.
  17. Star-Dust

    Star-Dust Expert Licensed User

    The code to produce these effects is simple:
    Code:
    Sub SpinnerEffect_ItemClick (Position As Int, Value As Object)
        
    Select Position
            
    Case 0 ' effect 1
                For i=0 To 360 Step 10
                    
    ' Rotate All face/object
                    Poligon3D.RotateY(i).Rotatex(45).RenderToView(Panel,2dip)
                    Sleep(
    0)
                
    Next
            
    Case 1 ' effect 2
                For i=0 To 90 Step 15
                    
    ' Rotate single face/object from ID
                    Poligon3D.RotateObjX(Array As Int(10,11,12,13,14,15,16,17,18),i).RotateY(SeekBarY.Value).RotateZ(SeekBarZ.Value).RotateX(SeekBarX.Value).RenderToView(Panel,2dip)
                    Sleep(
    50)
                
    Next
            
    Case 2 ' effect 3
                For i=0 To 90 Step 15
                    
    ' Rotate single face/object from ID
                    Poligon3D.RotateObjy(Array As Int(2,5,8,11,14,17,20,23,26,29,32,35),i).RotateY(SeekBarY.Value).RotateZ(SeekBarZ.Value).RotateX(SeekBarX.Value).RenderToView(Panel,2dip)
                    Sleep(
    40)
                
    Next
        
    End Select
    End Sub
    10.gif 15.gif 16.gif

    A question also arises, but does it interest anyone? :p

    You do not ask me questions ... maybe you get bored ...
     
    Last edited: Jun 11, 2018
  18. Erel

    Erel Administrator Staff Member Licensed User

    It looks very impressive. I'm familiar with your feeling. I think that the best way to continue is to make a short tutorial or a post in the libraries forum and make it very simple to use it. If it will be simple to start with then developers will most probably use it.
     
  19. Star-Dust

    Star-Dust Expert Licensed User

    Thanks Erel for your intervention.

    I'm also confused, I do not have a clear goal to achieve and as it grows it takes a different path, I do not know what will be at the end and if it will be useful.

    I would like to have feedback from others
     
  20. JordiCP

    JordiCP Well-Known Member Licensed User

    Sure!! :)
    In my opinion, this sensation "not having a fixed goal", is due to the fact that it is initially so broad (create an XUI class/lib for 3D polygon manipulation and rendering) that it gives you too many freedom degrees and you can jump from one to another until everything starts to converge. Now it seems that the interface and equation methods are done, and you are focused in optimizing the rendering part.
    In your latest example you have everything for the Rubik's cube. What's missing to convert it into a small playable demo? --> I would face it as a project: define the "specs" in advance (colors, minimal interface to make it playable and an initial random set of movements to be applied to the cube). Surely this process will help to see if there are small code pieces that need to be optimized or even refactored.
     
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice