Finding positions to paint around a circle?

Post

Posted
Rating:
#1 (In Topic #794)
Guru
BruceSteers is in the usergroup ‘Guru’
Hi all I'm trying to Draw some things on various points around a circle.
(Making a dial control)


If I use the following code…

Code (gambas)

  1.   Paint.LineWidth = 1
  2.   Paint.Ellipse(0, 0, 100,100)
  3.   Paint.Stroke
  4.  
That gives me a circle.
But now i want to Paint things at various places around the circle

Say If it was a clock and i wanted to place 60 dots around it.

360 degrees divided by 60 places around the circumference

But what commands would i use to get those positions?

Any help appreciated :)
Online now: No Back to the top

Post

Posted
Rating:
#2
Avatar
Regular
stevedee is in the usergroup ‘Regular’

BruceSteers said


…360 degrees divided by 60 places around the circumference

But what commands would i use to get those positions?


A rotating vector can be generated using trigonometry, so I think you use the Cosine of the angle to find the x & y points to draw your dots/marks/mini-circles.

I'll try and generate an example when I have time later today, unless Charlie comes up with an oven-ready solution in the meantime.
Online now: No Back to the top

Post

Posted
Rating:
#3
Avatar
Regular
stevedee is in the usergroup ‘Regular’
OK, this simple code demonstrates positioning a circle marker in one quadrant of a larger circle.
It just uses a Form, DrawingArea and a Timer;

Code (gambas)

  1. Public intAngle As Integer
  2.  
  3. Public Sub Form_Open()
  4.  
  5.  
  6. Public Sub dwgArea_Draw()
  7. Dim intRadius As Integer
  8. Dim fltXCosTheta As Float
  9. Dim fltYCosTheta As Float
  10.  
  11.   If intAngle > 90 Then
  12.     intAngle = 0
  13.   intRadius = dwgArea.Width * 0.4
  14.   fltXCosTheta = intRadius * Cos(Rad(intAngle))
  15.   fltYCosTheta = intRadius * Cos(Rad(90 - intAngle))
  16.   Draw.Circle(dwgArea.Width / 2, dwgArea.Height / 2, dwgArea.Width * 0.45)
  17.   Draw.Circle(dwgArea.Width / 2 + fltXCosTheta, dwgArea.Height / 2 + fltYCosTheta, 10)
  18.  
  19.  
  20. Public Sub Timer1_Timer()
  21.  
  22.   dwgArea.Refresh(intAngle)
  23.   intAngle += 10
  24.  

By changing line 19 to this, you get coverage of a second quadrant;

Code (gambas)

  1.   Draw.Circle(dwgArea.Width / 2 + fltXCosTheta, dwgArea.Height / 2 - fltYCosTheta, 10)


…and similar sign changes for the other 2 quadrants.

Obviously this is not the full solution to your problem, but I hope it sets you on the right path.
Online now: No Back to the top

Post

Posted
Rating:
#4
Avatar
Guru
cogier is in the usergroup ‘Guru’
I'll try and generate an example when I have time later today, unless Charlie comes up with an oven-ready solution in the meantime.

That made the wife and me laugh this morning. In true cooking programming style, here is one I prepared earlier. Have a look at 'Analogue Clock' which is on the Gambas Farm. The maths was done by my friend Matt.

<IMG src="https://www.cogier.com/gambas/AN_CLOCK.png"> </IMG>
Online now: No Back to the top

Post

Posted
Rating:
#5
Guru
BruceSteers is in the usergroup ‘Guru’
Not Matt Crick by any chance?
I have an old friend lives on your rock, Lucy Crick and her fella Mathew.


Thanks guys , i should be able to work stuff out from there :)
Online now: No Back to the top

Post

Posted
Rating:
#6
Avatar
Guru
cogier is in the usergroup ‘Guru’

BruceSteers said

Not Matt Crick by any chance?
I have an old friend lives on your rock, Lucy Crick and her fella Mathew.

No not that Mathew, this one.
Online now: No Back to the top

Post

Posted
Rating:
#7
Avatar
Guru
cogier is in the usergroup ‘Guru’
I have done a little more work on this. Does this help?
Run the code in a new graphical  program.

<IMG src="https://www.cogier.com/gambas/GoFaster.png"> </IMG>

Code (gambas)

  1. ' Gambas class file
  2.  
  3. Panel1 As Panel
  4. SliderValue As Slider
  5.  
  6. Public Sub Form_Open()
  7.  
  8.   With Me
  9.     .Height = 500
  10.     .Width = 500
  11.     .Padding = 5
  12.     .Arrangement = Arrange.Vertical
  13.     .Center
  14.     .Text = "Go faster dial >>>>>>"
  15.  
  16.   With Panel1 = New Panel(Me) As "Panel1"
  17.     .Expand = True
  18.  
  19.   With DA1 = New DrawingArea(Panel1) As "DA1"
  20.     .Cached = True
  21.     .x = 0
  22.     .y = 0
  23.  
  24.   With SliderValue = New Slider(Me) As "SliderValue"
  25.     .Height = 28
  26.     .MaxValue = 360
  27.     .Mark = True
  28.  
  29.  
  30. Public Sub Form_Resize()
  31.  
  32.   Dim iLoop, iCol As Integer
  33.   Dim iLen As Integer
  34.  
  35.   DA1.Height = Min(Panel1.Width, Panel1.Height)
  36.   DA1.Width = Min(Panel1.Width, Panel1.Height)
  37.   DA1.Clear
  38.  
  39.   ''Adds an outer circle
  40.   ' With Paint
  41.   '   .Begin(DA1)
  42.   '   .LineWidth = 1
  43.   '   .Arc(DA1.W / 2, DA1.H / 2, DA1.H / 2)
  44.   '   .Stroke
  45.   '   .End
  46.   ' End With
  47.  
  48.   ''Draws the lines around the outside of the circle
  49.  
  50.   For iLoop = 0 To 359 'Step 6 ''For time
  51.     With Paint
  52.       .Begin(DA1)
  53.       Paint.Brush = Paint.Color(Color.Black)
  54.       .LineCap = .LineCapRound
  55.       .LineWidth = 2
  56.       .Translate(DA1.W / 2, DA1.H / 2)
  57.       .Rotate(Rad(360 - iLoop))
  58.       .Translate(-(DA1.W / 2), -(DA1.H / 2))
  59.       'If iLoop Mod 5 = 0 Then iLen = 15 Else iLen = 25 ''For time
  60.       If iLoop Mod 10 = 0 Then iLen = 15 Else iLen = 25
  61.       .MoveTo(DA1.W / 2, DA1.H / iLen)
  62.       .LineTo(DA1.W / 2, iLen)
  63.       .Stroke
  64.       .End
  65.     End With
  66.   Next
  67.  
  68.   ''Paints the pointer
  69.  
  70.   If SliderValue.Value > 90 Then iCol = Color.Green
  71.   If SliderValue.Value > 180 Then iCol = Color.Yellow
  72.   If SliderValue.Value > 270 Then iCol = Color.Red
  73.  
  74.   With Paint
  75.     .Begin(DA1)
  76.     Paint.Brush = Paint.Color(iCol)
  77.     .LineCap = .LineCapRound
  78.     .LineWidth = 10
  79.     .Translate(DA1.W / 2, DA1.H / 2)
  80.     .Rotate(Rad(360 - SliderValue.Value))
  81.     .Translate(-(DA1.W / 2), -(DA1.H / 2))
  82.     .MoveTo(DA1.W / 2, DA1.H / 2)
  83.     .LineTo(DA1.W / 2, 40)
  84.     .Stroke
  85.  
  86.     ''Paints the center circle and fills it in
  87.     Paint.Brush = Paint.Color(Color.Blue)
  88.     .Arc(DA1.W / 2, DA1.H / 2, 20)
  89.     .Fill
  90.     .Stroke
  91.  
  92.     .End
  93.  
  94.  
  95. Public Sub SliderValue_Change()
  96.  
  97.   Form_Resize()
  98.  
  99.  
Online now: No Back to the top

Post

Posted
Rating:
#8
Guru
BruceSteers is in the usergroup ‘Guru’

cogier said

I have done a little more work on this. Does this help?
Run the code in a new graphical  program.



That's awesome m8 thank you :)
minimalistic so easier to get my head around :)

To be honest, as much as I really appreciated the previous help it did give me a headache so i resorted to using images and the image.Rotate command.

But with that example i think i could get on it with a hand drawn object :)

My objective was to make a cool slider like object that spins like a dial.

What i've made is something i call ImageSpinner.class

<VIDEO content="https://bws.org.uk/images/screenrecord-2022-01-06_20.00.42.mp4">[video size=300,300]
[/video]</VIDEO>

You can use custom images for the background and for the button.

it's wip at mo and needs a lot of work on the mouse controls

With the above code example i think i can possibly add a custom background making property to add the ticks like on the dial of your example :)

Nice one fella, cheers :)
Online now: No Back to the top

Post

Posted
Rating:
#9
Avatar
Guru
cogier is in the usergroup ‘Guru’
Hi Bruce, I had a look at your example and wondered if you were aware of the Dial available in Gambas. You need gb.qt5.ext for this: -

<IMG src="https://www.cogier.com/gambas/Dial.png"> </IMG>
Online now: No Back to the top

Post

Posted
Rating:
#10
Guru
BruceSteers is in the usergroup ‘Guru’

cogier said

Hi Bruce, I had a look at your example and wondered if you were aware of the Dial available in Gambas. You need gb.qt5.ext for this: -

<IMG src="https://www.cogier.com/gambas/Dial.png"> </IMG>

Haha , no i was not ,, that's exactly what i was aiming for.  but not qt dependant.

I'm hoping to make mine highly customisable.

currently it has 2 modes, spinner and switch ,
spinner for a dial that goes round and round
and switch for a positional switch
Online now: No Back to the top
1 guest and 0 members have just viewed this.