# Visual Basic > Visual Basic 6 and Earlier >  any body can help about design this 3d rotate contents and then this slide effect?

## Black_Storm

hi guys,i am just looking for any samples about 2 things like as attached image .

my attached image for better description :



image link : https://postimg.cc/xX13bRg2

1- The possibility of displaying the form when the texts or images can change depending on the percentage, and then the 3D rotation of the entire content of the form with the texts or images displayed in the last percentage of progress.


2- How can you display a slide like a panel on the form that darkens or blurs the background

i can attach video or more image if it was been neccessary.



i did try more before and i made something like these :

sample animated splash screen :
link



or this :
*link*


but its not look like what i need

----------


## The trick

https://github.com/thetrik/DX9VB/tree/main/Demos/3DForm

----------


## Black_Storm

> https://github.com/thetrik/DX9VB/tree/main/Demos/3DForm




thanks i see this before in my other threads too and still i am looking for more samples, my sample is about rounded forms or canvas used like as layred window  merged with controls in same time  and my other question was been about that slide effect with that dark bg or blured bg over form too.

----------


## Black_Storm

any body know any sample about rotate effect used like as layred windows or layred canvas or that slide effect?

----------


## baka

I would do a screenshot of whatever form u have,
and after that use different transform matrix so create the rotate effect.
the other side u need to have somewhere so it can also be copied and used in the effect.
the trick should have enough samples to do what u ask,
sure u need to do a bit yourself, but thats what programming is all about.

also, some of the stuff can be used in 2D as well (the other examples u showed)
for those u dont need matrix stuff, u could just use resize and cos() to resize in steps.
so even direct2d can be used here.

also "layered" u can have the whole window in a .png file and render to a empty form (transparent)
to create this.

----------


## Black_Storm

Actually, the two images that I showed in thread #1 were two projects that I made before and I wanted it to be similar to image #1, but I'm still looking for a way to design it.


If I want to explain in theory, yes, my idea is to have a canvas and then draw on it and then rotate it as a layred canvas and at the end display the form again, but still an example where the controls are combined with a canvas and as be displayed as a layered, and of course, most importantly, I have not found any effects such as the rotation of this layered  that imagein thread #1 like as 2d or 3d and etc , and I am still waiting for more examples


my means is about maybe some samples about show layered canvas and then apply some effects like as rotate,blur,wave and etc at runtime like as animations

----------


## reexre

hello
using RC5/6 you can take a cue from this code that uses RenderSurfaceWithinCorners. (That is the key point)
*This example does not apply to the entire form* but only to an image. (However, I hope it can be useful) If you are using RC you can probably capture on SrfFront and SrfBack the Forms you need containing any Widgets on it.

Written off the top of my head, so not optimized for generic scenarios, but I hope you find it useful.
(You can set the function that determines the angle to your liking).

You can use mouse movement with the button pressed on the image to rotate manually.

Please Note: Add the two image files Image1.jpg and Image2.jpg to the app folder.


Put this code on a Form with a Timer1



```
Option Explicit

Dim Srf           As cCairoSurface
Dim CC            As cCairoContext

Dim SrfFront      As cCairoSurface
Dim SrfBack       As cCairoSurface

Dim TargetWidth#, TargetHeight#

Dim SpeedA        As Double
Dim OldDX         As Double
Dim Angle         As Double
Dim CurrImg       As String

Private Sub Form_Load()
    Timer1.Enabled = False
    Timer1.Interval = 40
    
    Me.ScaleMode = vbPixels
    PIC.ScaleMode = vbPixels
    PIC.Appearance = 0
    PIC.ToolTipText = "Use mouse to rotate"
    Set Srf = Cairo.CreateSurface(PIC.Width, PIC.Height, ImageSurface)
    Set CC = Srf.CreateContext

    TargetWidth = 300
    TargetHeight = PIC.Height - 2

    Cairo.ImageList.AddImage "IMG1", App.Path & "\Image1.jpg"    ', TargetWidth, TargetHeight
    Cairo.ImageList.AddImage "IMG2", App.Path & "\Image2.jpg"    ', TargetWidth, TargetHeight

    Set SrfFront = Cairo.ImageList.Item("IMG1")
    Set SrfBack = Cairo.ImageList.Item("IMG2")

    SpeedA = 0.025
    CurrImg = "IMG1"
    Timer1.Enabled = True

End Sub

Private Sub PIC_Click()
    Timer1.Enabled = Not (Timer1.Enabled)
End Sub

Private Sub Timer1_Timer()
    Angle = Angle + SpeedA
    DrawRotated Angle
End Sub

Private Sub DrawRotated(Ang As Double)
    Dim DeltaX    As Double
    Dim DeltaY    As Double
    Dim CenterX#
    Dim X1#, Y1#, X2#, Y2#
    Dim X3#, Y3#, X4#, Y4#

    Const kDeformY As Double = 55

    DeltaX = TargetWidth * 0.5 * Cos(-Ang * 3.14159265358979)    'You can Play with ANG sign
    DeltaY = kDeformY * Sin(-Ang * 3.14159265358979)

    CenterX = PIC.ScaleWidth * 0.5
    X1 = CenterX + DeltaX: Y1 = kDeformY + DeltaY
    X2 = CenterX - DeltaX: Y2 = kDeformY - DeltaY
    X3 = X2: Y3 = TargetHeight - kDeformY + DeltaY
    X4 = X1: Y4 = TargetHeight - kDeformY - DeltaY

    If Sgn(DeltaX) <> Sgn(OldDX) Then
        If CurrImg = "IMG1" Then CurrImg = "IMG2" Else: CurrImg = "IMG1"
        OldDX = DeltaX
    End If

    CC.SetSourceColor 0: CC.Paint
    CC.RenderSurfaceWithinCorners CurrImg, X1, Y1, X2, Y2, X3, Y3, X4, Y4

    Srf.DrawToDC PIC.hDC
    DoEvents
End Sub

Private Sub PIC_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)
    If Button Then
        Timer1.Enabled = False
        Angle = (X - PIC.Width * 0.5) * 0.005
        DrawRotated Angle
    End If
End Sub
```

PS
The second image will be flipped on the Y-axis
Timer1.Enabled in Form must be set to False

----------


## Black_Storm

thanks i saved this codes maybe useful but looking for more samples yet.

----------


## Black_Storm

if i wanna dont use rc6 so i guess i can do that with direct 2d or direct x versions like as skew effect and layred window:
https://learn.microsoft.com/en-us/wi...2d/how-to-skew

any sample with direct 2d or direct x or idk any other way like as post #7 without use rc6?


and still  i could not find any sample about that slide effect with fade background transition from right to left in post #1

----------


## Black_Storm

I did about 70% of the questions asked in this thread based on my questions in these parts

*[RESOLVED] how can add save as png function to this attached class for layered canvas*
*[RESOLVED] how can load png image texture in opengl?*
*[RESOLVED] open gl and layered window?*

Now there are two more steps left:
*1-* Quality problem when I open the PNG image (screen captured of form and saved with nice quality and keep transparency background form, as i shown in No 1 in attached picture here ) in OpenGL like as Texture and display it as a layered window.


*2-* Taking a photo of the second form to be displayed on the second edge during rotation, while the second form should not be displayed on the screen to be photographed.


Before the second question step, the first question is how to maintain the quality, and of course some of the corners are faded and the fonts are displayed a little softer in OpenGL, how can you load the image with the same quality in OpenNG showed

The *PNG image* of the form that is supposed to be loaded in OpenGL is on the left (*No 1* in image attached below) and the image on the right is a page that displays OpenGL as a texture, and the quality of the image on the right (*No 2* in image attached below) is a little wrong.

*how can solve quality about No2 in image ?*

image with descriptions about problem :
image link : https://postimg.cc/XpMzqdGs




animated output with desciptions :
image link : https://postimg.cc/w7cR8QcL



Also, a video is attached for better viewing,

----------


## Black_Storm

I solved the problem about png quality loaded as texture in open gl as follows:



```
glTexParameteri glTexture2D, tpnTextureMinFilter, GL_NEAREST
glTexParameteri glTexture2D, tpnTextureMagFilter, GL_NEAREST
```

result with applied blur effect too :
image link : https://postimg.cc/YhHGHG7B


video link :
https://www.veed.io/view/5befd78f-b3...ue&panel=share

To improve the work, I want to try to remove the dependency on the external file, because in this project, the texture in OpenGL must be read from the hard disk, but I am looking for a way to load it as a stream or a presentation of bytes, and also Display as a layer on the form

----------

