[XUI] 3D, rotations and pivots

[Star-Dust]

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

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

 

[Star-Dust]

Update:

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


Sample at post#48

 

[Deleted member 103]

6 un mostro!

 

[Star-Dust]

6 un mostro!

E non hai visto ancora la mia foto

 

[LucaMs]

The next step is to

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

 

[LucaMs]

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

 

[JordiCP]

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

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

 

[Star-Dust]

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.

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 °

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:

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]

I completed the calculation and the perspectives:

This is the code that generates these rotations.

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

 

[Star-Dust]

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]

Update

Cube

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

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

 

[Star-Dust]

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

PS. Maybe I will distribute the source code of this class, except for the image rendering, if someone is interested

 

[Star-Dust]

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]

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.

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

 

[Star-Dust]

I'm getting better results with BitmapCreaotr.
Probably by this month produced a library for Creating 3D Views for XUI

I'm working to correct some graphic defects in image representations, but nothing complicated.
Only time is missing

 

[Star-Dust]

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

 

[Star-Dust]

The code to produce these effects is simple:

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

A question also arises, but does it interest anyone?

You do not ask me questions ... maybe you get bored ...

 

[Erel]

A question also arises, but does it interest anyone?

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]

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]

A question also arises, but does it interest anyone?

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.