[RESOLVED] Graph a Circle with Delay Function

[angel06]

I'm trying to graph a circle with a delay function with it. I know that using a timer is necessary. I created a code in timer1_click

Private Sub Timer1_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Timer1.Tick
        Me.startDelay += 1

        If Me.startDelay = 360 Then
            Me.Timer1.Stop()
        End If

        Me.Refresh()
    End Sub

Code of the graphing of circle:

Private Sub Form1_Paint(ByVal sender As Object, ByVal e As PaintEventArgs) Handles Me.Paint
If DrawIt Then
            x = CType(TextBox1.Text, Integer)
            y = CType(TextBox2.Text, Integer)
            r = CType(TextBox3.Text, Integer)
            FillCircle(g, x, y, 3, Brushes.Black)
            DrawCircle(g, x, y, r, Pens.Red)
End If
End Sub
Private Sub DrawCircle(ByVal g As Graphics, ByVal x As Single, ByVal y As Single, ByVal r As Single, ByVal p As Pen)
        g.DrawEllipse(p, x - r, y - r, r * 2, r * 2)
End Sub

Private Sub FillCircle(ByVal g As Graphics, ByVal x As Single, ByVal y As Single, ByVal r As Single, ByVal b As Brush)
        g.FillEllipse(b, x - r, y - r, r * 2, r * 2)
End Sub

Now how can I implement the timer delay to the graphing of the circle?

[jmcilhinney]

Your Tick event makes no sense. Why have a Timer Tick 360 times when you can simply multiply the Interval by 360 and have it Tick once?

All you need is a Boolean flag that indicates whether to draw the circle or not. When the Timer Ticks, toggle the flag and then Refresh. In the Paint event handler, test that flag and draw the circle if and only if it has the appropriate value.

Public Class Form1

    Private drawCircle As Boolean = False

    Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        Me.Timer1.Start()
    End Sub

    Private Sub Timer1_Tick(sender As Object, e As EventArgs) Handles Timer1.Tick
        Me.Timer1.Stop()
        Me.drawCircle = True
        Me.Refresh()
    End Sub

    Private Sub Form1_Paint(sender As Object, e As PaintEventArgs) Handles Me.Paint
        If Me.drawCircle Then
            'Draw circle here.
        End If
    End Sub

End Class

[angel06]

I tried to do your suggestion but it doesn't delay the drawing of circle. Here's what I did:

Private DrawCircles As Boolean = False

Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs) Handles MyBase.Load
        Me.Timer1.Start()
        g = Me.CreateGraphics()
    End Sub

Private Sub Form1_Paint(ByVal sender As Object, ByVal e As PaintEventArgs) Handles Me.Paint  ' //the drawing of Cartesian Plane
        Dim g As Graphics = e.Graphics
        g.TranslateTransform(500, 310)   'Put 0,0 of the plot at pixel 500,310
        g.ScaleTransform(1, -1)          'Reverse the Y axis so +Y is above 0,0

        g.FillRectangle(Brushes.White, New Rectangle(-250, -250, 500, 500))  'a 500x500 area centered on the 0,0 coordinate
        g.DrawLine(Pens.Black, 0, -250, 0, 250)
        g.DrawLine(Pens.Black, -250, 0, 250, 0)

        If Me.DrawCircles Then
            If DrawIt Then
                x = CType(TextBox1.Text, Integer)
                y = CType(TextBox2.Text, Integer)
                r = CType(TextBox3.Text, Integer)
                FillCircle(g, x, y, 3, Brushes.Black)
                DrawCircle(g, x, y, r, Pens.Red)

            End If
End Sub

Private Sub DrawCircle(ByVal g As Graphics, ByVal x As Single, ByVal y As Single, ByVal r As Single, ByVal p As Pen)
        g.DrawEllipse(p, x - r, y - r, r * 2, r * 2)
    End Sub

    Private Sub FillCircle(ByVal g As Graphics, ByVal x As Single, ByVal y As Single, ByVal r As Single, ByVal b As Brush)
        g.FillEllipse(b, x - r, y - r, r * 2, r * 2)
    End Sub

    Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
        If TextBox1.TextLength <> 0 And TextBox2.TextLength <> 0 And TextBox3.TextLength <> 0 Then
            Label6.Text = "Center of Circle: (" + (CType(TextBox1.Text, Integer)).ToString + ", " + CType(TextBox2.Text, Integer).ToString + ")"
            DrawIt = True
            Invalidate()
        Else
            MessageBox.Show("Please fill-up the fields first before plotting the circle", "Error", MessageBoxButtons.OK, MessageBoxIcon.Warning)
        End If
    End Sub

Private Sub Timer1_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Timer1.Tick
        Me.Timer1.Stop()
        Me.DrawCircles = True
        Me.Refresh()
    End Sub

[jmcilhinney]

What is the Interval of your Timer set to? Did you multiply it by 360 from what it was before, like I said to?

By the way, get rid of this line from the Load event handler:

g = Me.CreateGraphics()

and move your declaration of `g` to inside the Paint event handler. You don;t need to create a Graphics object because you're using the one that the Paint event provides.

Also, why do you have both `DrawCircles` and `DrawIt` fields?

[jmcilhinney]

Note that the Interval of a Timer is measured in milliseconds, so 1000 is 1 second.

[angel06]

I want something like this solution of yours from other post. How can I implement something like this on my code? I need time delay of the drawing of the circle like this

    Private sweepAngle As Integer = 1
     
    Private Sub Timer1_Tick(ByVal sender As Object, _
                            ByVal e As EventArgs) Handles Timer1.Tick
        Me.sweepAngle += 1
     
        If Me.sweepAngle = 360 Then
            Me.Timer1.Stop()
        End If
     
        Me.Refresh()
    End Sub
     
    Private Sub Form1_Paint(ByVal sender As Object, _
                            ByVal e As PaintEventArgs) Handles Me.Paint
        e.Graphics.DrawArc(Pens.Black, 10, 10, 48, 48, 0, Me.sweepAngle)
    End Sub

[jmcilhinney]

So when you say that you want a time delay, do you actually mean that you want it to be drawn gradually? I took your meaning to be that you want it to be drawn all in one go but at some specified time after the form is first displayed. That code of mine will draw the circle gradually, in 1 degree increments. If that's what you want then you already have the code, so what's the issue? I think that maybe you need to provide a clear, more detailed explanation of what you're trying to achieve and how the code you already have doesn't achieve it.

[angel06]

I want to draw gradually each of the circles. For example, I input the center of the circle: (60,30) and its radius: 60. Then I'll click on Draw Circle button. This should draw the circle gradually on the coordinate plane. And if I'll click on the octant 2 button, this should also draw the circle gradually on the second octant. I have eight octant buttons all in all.

[passel]

You need to reset your sweepAngle to 1, and start your timer each time you press one of the buttons.
If you don't want redraw all the circles in slow action, you will need a way of maintaining which circle you want to use sweepAngle on (the one that should be drawn slowly), and using either 360 for the others with drawArc, or using a circle command, so have a conditional test in your drawing to choose drawArc.

It would probably be better to restructure the drawing, so that you can draw the circles independently without having to invalidate the whole form, but I don't have time to give an example of that.

For the first quick step, just add code like this in each button press to see how it acts.

'
      sweepAngle = 1
      Timer1.Start()

'for example in octantTwo_Click...
  Private Sub octantTwo_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles octantTwo.Click
    If TextBox1.TextLength <> 0 And TextBox2.TextLength <> 0 And TextBox3.TextLength <> 0 Then
      sweepAngle = 1
      Timer1.Start()
      Label6.Text = "Center: (" + Math.Abs(CType(TextBox2.Text, Integer)).ToString + ", " + CType(TextBox1.Text, Integer).ToString + ")"
      Label9.Text = "Octant 2"
      DrawIt2 = True
      Invalidate()
    Else
      MessageBox.Show("Please fill-up the fields first before plotting the circle", "Error", MessageBoxButtons.OK, MessageBoxIcon.Warning)
    End If
  End Sub

[passel]

Assuming you might only want to draw the last octant selected slow, then one way that could be done is use an index to indicate which circle should be draw slow, and check for that in your draw circle sub.

'.....
  Private DrawIt7 As Boolean
  Private DrawIt8 As Boolean
  Private DrawSlow, ImDrawing As Integer 'Add two values that can be compared to see which circle should be drawn slow
 
'Modify each button press to set which circle should be drawn slow
'for example, set DrawSlow to 3 in the octantThree_Click event (note sweep angle reset, and timer started as well)
  Private Sub octantThree_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles octantThree.Click
    If TextBox1.TextLength <> 0 And TextBox2.TextLength <> 0 And TextBox3.TextLength <> 0 Then
      Label6.Text = "Center: (" + "-" + Math.Abs(CType(TextBox2.Text, Integer)).ToString + ", " + CType(TextBox1.Text, Integer).ToString + ")"
      Label9.Text = "Octant 3"
      sweepAngle = 1
      Timer1.Start()
      DrawSlow = 3
      DrawIt3 = True
      Invalidate()
    Else
      MessageBox.Show("Please fill-up the fields first before plotting the circle", "Error", MessageBoxButtons.OK, MessageBoxIcon.Warning)
    End If
  End Sub
 
'Note which circle you are drawing in the paint event by setting the ImDrawing variable, for example DrawIt3 and DrawIt4 cases.
    If DrawIt3 Then
      ImDrawing = 3
      x = CType(TextBox1.Text, Integer)
      y = CType(TextBox2.Text, Integer)
      r = CType(TextBox3.Text, Integer)
      FillCircle(g, -y, x, 3, Brushes.Black)
      DrawCircle(g, -y, x, r, Pens.Cyan)
 
    End If
 
    If DrawIt4 Then
      ImDrawing = 4
      x = CType(TextBox1.Text, Integer)
      y = CType(TextBox2.Text, Integer)
      r = CType(TextBox3.Text, Integer)
      FillCircle(g, -x, y, 3, Brushes.Black)
      DrawCircle(g, -x, y, r, Pens.Gold)
 
    End If
 
'And in your DrawCircle Sub, choose to drawArc or DrawCircle based on whether ImDrawing matches DrawSlow.
  Private Sub DrawCircle(ByVal g As Graphics, ByVal x As Single, ByVal y As Single, ByVal r As Single, ByVal p As Pen)
    If ImDrawing = DrawSlow Then
      g.DrawArc(p, x - r, y - r, r * 2, r * 2, 0, Me.sweepAngle)
    Else
      g.DrawEllipse(p, x - r, y - r, r * 2, r * 2)
    End If
 
  End Sub

p.s. As already mentioned, you don't need that Private g As Graphics declaration at the top, or setting it in the Form_Load event.
If you haven't set it in the IDE properties, I would add
DoubleBuffered = True
in the Form_Load event, to minimize flashing while you're drawing

  Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs) Handles MyBase.Load
    DoubleBuffered = True
  End Sub

p.s. I think I would change your timer code to make it draw the circle somewhat faster.

 Private Sub Timer1_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Timer1.Tick
    Me.sweepAngle += 3
    If Me.sweepAngle >= 360 Then
      Me.Timer1.Stop()
    End If
    Me.Refresh()
  End Sub

Maybe allow the user to pick a "speed", by changing that 3 to another value (between 1 and 180).

p.p.s. Given the colors you're using, drawing on a black background (swap your black and white pens and brushes), helps the circles stand out (other than the blue). If you want to stay with a white background, then probably choose a number of "dark" colors, not yellow and cyan.
The blue is the upper right, which is extremely hard to see on the image in the forum, since they've shrunk the image. The shrunk image makes it hard to see a few of the other circles, but in normal size on your screen, it is just the blue that doesn't stand out.

[angel06]

Assuming you might only want to draw the last octant selected slow, then one way that could be done is use an index to indicate which circle should be draw slow, and check for that in your draw circle sub.

'.....
  Private DrawIt7 As Boolean
  Private DrawIt8 As Boolean
  Private DrawSlow, ImDrawing As Integer 'Add two values that can be compared to see which circle should be drawn slow
 
'Modify each button press to set which circle should be drawn slow
'for example, set DrawSlow to 3 in the octantThree_Click event (note sweep angle reset, and timer started as well)
  Private Sub octantThree_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles octantThree.Click
    If TextBox1.TextLength <> 0 And TextBox2.TextLength <> 0 And TextBox3.TextLength <> 0 Then
      Label6.Text = "Center: (" + "-" + Math.Abs(CType(TextBox2.Text, Integer)).ToString + ", " + CType(TextBox1.Text, Integer).ToString + ")"
      Label9.Text = "Octant 3"
      sweepAngle = 1
      Timer1.Start()
      DrawSlow = 3
      DrawIt3 = True
      Invalidate()
    Else
      MessageBox.Show("Please fill-up the fields first before plotting the circle", "Error", MessageBoxButtons.OK, MessageBoxIcon.Warning)
    End If
  End Sub
 
'Note which circle you are drawing in the paint event by setting the ImDrawing variable, for example DrawIt3 and DrawIt4 cases.
    If DrawIt3 Then
      ImDrawing = 3
      x = CType(TextBox1.Text, Integer)
      y = CType(TextBox2.Text, Integer)
      r = CType(TextBox3.Text, Integer)
      FillCircle(g, -y, x, 3, Brushes.Black)
      DrawCircle(g, -y, x, r, Pens.Cyan)
 
    End If
 
    If DrawIt4 Then
      ImDrawing = 4
      x = CType(TextBox1.Text, Integer)
      y = CType(TextBox2.Text, Integer)
      r = CType(TextBox3.Text, Integer)
      FillCircle(g, -x, y, 3, Brushes.Black)
      DrawCircle(g, -x, y, r, Pens.Gold)
 
    End If
 
'And in your DrawCircle Sub, choose to drawArc or DrawCircle based on whether ImDrawing matches DrawSlow.
  Private Sub DrawCircle(ByVal g As Graphics, ByVal x As Single, ByVal y As Single, ByVal r As Single, ByVal p As Pen)
    If ImDrawing = DrawSlow Then
      g.DrawArc(p, x - r, y - r, r * 2, r * 2, 0, Me.sweepAngle)
    Else
      g.DrawEllipse(p, x - r, y - r, r * 2, r * 2)
    End If
 
  End Sub

p.s. As already mentioned, you don't need that Private g As Graphics declaration at the top, or setting it in the Form_Load event.
If you haven't set it in the IDE properties, I would add
DoubleBuffered = True
in the Form_Load event, to minimize flashing while you're drawing

  Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs) Handles MyBase.Load
    DoubleBuffered = True
  End Sub

p.s. I think I would change your timer code to make it draw the circle somewhat faster.

 Private Sub Timer1_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Timer1.Tick
    Me.sweepAngle += 3
    If Me.sweepAngle >= 360 Then
      Me.Timer1.Stop()
    End If
    Me.Refresh()
  End Sub

Maybe allow the user to pick a "speed", by changing that 3 to another value (between 1 and 180).

p.p.s. Given the colors you're using, drawing on a black background (swap your black and white pens and brushes), helps the circles stand out (other than the blue). If you want to stay with a white background, then probably choose a number of "dark" colors, not yellow and cyan.
The blue is the upper right, which is extremely hard to see on the image in the forum, since they've shrunk the image. The shrunk image makes it hard to see a few of the other circles, but in normal size on your screen, it is just the blue that doesn't stand out.

Thanks big time Sir Passel for the help and for reminding me again about that graphics declaration on the Form_Load event I'll keep in mind all of your suggestions. You really helped me a lot!

[jmcilhinney]

I want to draw gradually each of the circles. For example, I input the center of the circle: (60,30) and its radius: 60. Then I'll click on Draw Circle button. This should draw the circle gradually on the coordinate plane. And if I'll click on the octant 2 button, this should also draw the circle gradually on the second octant. I have eight octant buttons all in all.

I'd just like to point out that it wasn't until post #8 that you even mentioned that there were multiple circles involved. In future, please provide a FULL and CLEAR explanation of the issue up front. Otherwise, you're expecting us to know things that we can't possibly know.