Ruotare un cerchio disegnato in una DrawingArea

Rotazione in 2D

Mostriamo un possibile codice ^{[nota 1]} per ottenere la rotazione intorno al proprio asse centrale di un cerchio, disegnato in una DrawingArea. ^{[nota 2]}
Nell'esempio la rotazione del cerchio potrà essere notata attraverso visualizzazione della rotazione del suo raggio e soprattutto mediante la visualizzazione della colorazione della sua circonferenza.
La rotazione viene effettuata premendo i tasti freccia in su e freccia in giù della tastiera oppure ruotando la rotellina del mouse.

' Il fulcro del Metodo ".Translate()" agisce da vortice, da centro di rotazione intorno a una ipotetica circonferenza

Private da As DrawingArea
Private Const DIAMETRO As Short = 200   ' Memorizza il diametro del cerchio.
Private fAngolo As Float                ' Memorizza i gradi dell'angolo.
Private c As Integer[] = [Color.Blue, Color.Green, Color.Yellow, Color.Red]
Private f As Float[] = [0, 0.34, 0.67, 1]


Public Sub Form_Open()  
 
 With Me
   .W = DIAMETRO * 2
   .H = .W
   .Center
   .Arrangement = Arrange.Fill
 End With  

 With da  = New DrawingArea(Me) As "DrawingArea1"
   .Background = Color.White
 End With
 
End
 

Public Sub DrawingArea1_Draw()

 With Paint
   .Arc(da.W / 2, da.H / 2, 2, Rad(0), Rad(360), False)
   .Fill
   .Brush = .LinearGradient(0, 20, 15, 0, c, f)
' Imposta il fulcro/centro della rotazione - ad esempio -al centro dell'area di disegno:
   .Translate(da.W / 2, da.H / 2)
   .Rotate(Rad(fAngolo))   
   .LineWidth = 2.0
' Disegna il cerchio.
' Poiché l'angolo ruota su se stesso, si dà alle coordinate del cerchio la metà della dimensione del suo diametro.
' Non si devono modificare i valori né i segni dei primi quattro argomenti qui riportati.
   .Ellipse(DIAMETRO / 2, DIAMETRO / 2, -DIAMETRO, -DIAMETRO, Rad(0), Rad(360), False)
   .Stroke 
 End With     
    
End
 

Public Sub Form_KeyPress()
  
 Select Case Key.Code
   Case Key.Up
     fAngolo += 1
     If fAngolo = 361 Then fAngolo = 1
   Case Key.Down
     fAngolo -= 1
     If fAngolo = -361 Then fAngolo = -1
 End Select
 
 da.Refresh
  
End


Public Sub Form_MouseWheel()

 fAngolo += Mouse.Delta
 Select Case fAngolo
   Case 361
     fAngolo = 1
   Case -361
     fAngolo = -1
 End Select

 da.Refresh

End
 

Public Sub Form_Resize()   ' Con questo evento se cambia la dimensione del Form, il disegno non va perso.
  
 da.Refresh
  
End

Rotazione in 3D

Cerchio ruotato intorno al suo asse Y

Private angleY As Float


Public Sub Form_Open()
 
 With Me
  .Title = "Cerchio che ruota sui suoi assi X, Y e Z"
  .Move(0, 0, Screen.AvailableWidth, Screen.AvailableHeight)
  .Arrangement = Arrange.Fill
End With
 
 Timer1.Delay = 16  ' ~60 FPS
 Timer1.Start

End


Public Sub Timer1_Timer()

' Incrementa angolo di rotazione attorno all'asse Y:
 angleY += 2
 DrawingArea1.Refresh

End


Public Sub DrawingArea1_Draw()

' === Centro della DrawingArea ===
 Dim cx As Float = DrawingArea1.Width / 2
 Dim cy As Float = DrawingArea1.Height / 2

' === Parametri del cerchio ===
 Dim radius As Float = 1.0
 Dim d As Float = 4.0
 Dim numPoints As Integer = 60
 Dim ay As Float = Rad(angleY)
 Dim coords As Float[] = []

' === Generazione dei punti e rotazione attorno all'asse Y ===
 For i As Integer = 0 To numPoints
   Dim theta As Float = 2 * Pi * i / numPoints

' Punto iniziale sul piano XY (z = 0):
   Dim x As Float = radius * Cos(theta)
   Dim y As Float = radius * Sin(theta)
   Dim z As Float = 0.0
   Dim p As Float[] = [x, y, z]

' Rotazione SOLO attorno all’asse Y:
   p = RotateY(p, ay)

' Proiezione 3D → 2D:
   Dim pt As PointF = Project3D(p, d, cx, cy)

   coords.Add(pt.X)
   coords.Add(pt.Y)
 Next

' === Riempimento del cerchio proiettato ===
 Paint.Brush = Paint.Color(Color.RGB(173, 216, 230))
 Paint.Polygon(coords)
 Paint.Fill()

' === Bordo del cerchio ===
 Paint.LineWidth = 1
 Paint.Brush = Paint.Color(Color.DarkBlue)
 Paint.Polygon(coords)
 Paint.Stroke()

End


' === Proiezione prospettica 3D → 2D ===
Private Function Project3D(v As Float[], d As Float, cx As Float, cy As Float) As PointF

 Dim x As Float = v[0]
 Dim y As Float = v[1]
 Dim z As Float = v[2]

 Dim factor As Float = d / (z + d + 0.001)
 Dim x2D As Float = x * factor
 Dim y2D As Float = y * factor

 Return New PointF(cx + x2D * 100, cy - y2D * 100)

End

' === Rotazione attorno all’asse Y (unica attiva) ===
Private Function RotateY(v As Float[], angle As Float) As Float[]

 Dim x As Float = v[0]
 Dim y As Float = v[1]
 Dim z As Float = v[2]

 Dim xr As Float = x * Cos(angle) + z * Sin(angle)
 Dim zr As Float = -x * Sin(angle) + z * Cos(angle)

 Return [xr, y, zr]

End

Cerchio ruotato intorno ai suoi assi X, Y e Z

' === Variabili globali per la rotazione ===
Private angleX As Float
Private angleY As Float
Private angleZ As Float


Public Sub Form_Open()
 
 With Me
  .Title = "Cerchio che ruota sui suoi assi X, Y e Z"
  .Move(0, 0, Screen.AvailableWidth, Screen.AvailableHeight)
  .Arrangement = Arrange.Fill
End With
 
 Timer1.Delay = 16  ' ~60 FPS
 Timer1.Start

End


Public Sub Timer1_Timer()

' Incrementa gli angoli di rotazione per X, Y, Z:
 angleX += 1
 angleY += 2
 angleZ += 1.5

 DrawingArea1.Refresh

End


Public Sub DrawingArea1_Draw()

' === Centro della DrawingArea ===
 Dim cx As Float = DrawingArea1.Width / 2
 Dim cy As Float = DrawingArea1.Height / 2

' === Parametri cerchio 3D ===
 Dim radius As Float = 1.0         ' Raggio del cerchio
 Dim d As Float = 4.0              ' Distanza "camera"
 Dim numPoints As Integer = 60     ' Risoluzione del cerchio

' === Calcola gli angoli di rotazione in radianti ===
 Dim ax As Float = Rad(angleX)
 Dim ay As Float = Rad(angleY)
 Dim az As Float = Rad(angleZ)

' === Array dei punti 2D proiettati ===
 Dim coords As Float[] = []

' === Costruzione punti 3D del cerchio + rotazione + proiezione ===
 For i As Integer = 0 To numPoints
   Dim theta As Float = 2 * Pi * i / numPoints

' Punto nel piano XY (z=0):
   Dim x As Float = radius * Cos(theta)
   Dim y As Float = radius * Sin(theta)
   Dim z As Float = 0.0

' Vettore punto:
   Dim p As Float[] = [x, y, z]

' Rotazioni in ordine X → Y → Z:
   p = RotateX(p, ax)
   p = RotateY(p, ay)
   p = RotateZ(p, az)

' Proiezione 3D → 2D:
   Dim pt As PointF = Project3D(p, d, cx, cy)

' Aggiunta coordinate al contorno:
   coords.Add(pt.X)
   coords.Add(pt.Y)
 Next

' === Riempie il cerchio ruotato ===
 Paint.Brush = Paint.Color(Color.RGB(173, 216, 230))
 Paint.Polygon(coords)
 Paint.Fill()

' === Bordo del cerchio ===
 Paint.LineWidth = 1
 Paint.Brush = Paint.Color(Color.DarkBlue)
 Paint.Polygon(coords)
 Paint.Stroke()

End


' === ROTAZIONE ATTORNO A X ===
Private Function RotateX(v As Float[], angle As Float) As Float[]

 Dim x As Float = v[0]
 Dim y As Float = v[1]
 Dim z As Float = v[2]

' Rotazione attorno all'asse X: modifica y, z.
 Dim yr As Float = y * Cos(angle) - z * Sin(angle)
 Dim zr As Float = y * Sin(angle) + z * Cos(angle)

 Return [x, yr, zr]

End


' === ROTAZIONE ATTORNO A Y ===
Private Function RotateY(v As Float[], angle As Float) As Float[]

 Dim x As Float = v[0]
 Dim y As Float = v[1]
 Dim z As Float = v[2]

' Rotazione attorno all'asse Y: modifica x, z.
 Dim xr As Float = x * Cos(angle) + z * Sin(angle)
 Dim zr As Float = -x * Sin(angle) + z * Cos(angle)

 Return [xr, y, zr]

End


' === ROTAZIONE ATTORNO A Z ===
Private Function RotateZ(v As Float[], angle As Float) As Float[]

 Dim x As Float = v[0]
 Dim y As Float = v[1]
 Dim z As Float = v[2]

' Rotazione attorno all'asse Z: modifica x, y.
 Dim xr As Float = x * Cos(angle) - y * Sin(angle)
 Dim yr As Float = x * Sin(angle) + y * Cos(angle)

 Return [xr, yr, z]

End


' === PROIEZIONE PROSPETTICA 3D → 2D ===
Private Function Project3D(v As Float[], d As Float, cx As Float, cy As Float) As PointF

 Dim x As Float = v[0]
 Dim y As Float = v[1]
 Dim z As Float = v[2]

' Calcolo prospettico (più z è grande → più vicino):
 Dim factor As Float = d / (z + d + 0.001)

 Dim x2D As Float = x * factor
 Dim y2D As Float = y * factor

' Traslazione e scala: centro della DrawingArea:
 Return New PointF(cx + x2D * 100, cy - y2D * 100)

End

Note

[1] Il codice, presente in questa pagina, è tratto - con modifiche ed integrazioni - da un analogo codice suggerito dal membro Gianluigi del forum di gambas-it.org .

[2] Vedere anche queste pagine:

• Ruotare qualsiasi elemento da disegnare in una DrawingArea
• Ruotare una immagine sul proprio asse centrale