[XUI] 3D, rotations and pivots

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.



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
 

Attachments

Last edited:

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:

Filippo

Expert
Licensed User
6 un mostro! ;)
 

LucaMs

Expert
Licensed User
The next step is to
... put images on the faces of the cube.
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
 

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:
B4X:
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
 

Star-Dust

Expert
Licensed User
I completed the calculation and the perspectives:
3.gif
5.gif


This is the code that generates these rotations.
B4X:
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:

Star-Dust

Expert
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 :)
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)
 

Star-Dust

Expert
Licensed User
Update
6.gif
7.gif


Cube
B4X:
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
B4X:
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:

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
 

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
 

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
 

Attachments

Last edited:

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:

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:

Star-Dust

Expert
Licensed User
The code to produce these effects is simple:
B4X:
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:

Erel

Administrator
Staff member
Licensed User
A question also arises, but does it interest anyone? :p

You do not ask me questions ... maybe you get bored ...
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.
 

Star-Dust

Expert
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.
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
 

JordiCP

Well-Known Member
Licensed User
A question also arises, but does it interest anyone? :p
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.
 
Top