Etch A Sketch Basic

Heres your chance to share your own tutorials with the community. Just post them on here. If your lucky they may even be posted on the main site.
1 post Page 1 of 1
Contributors
User avatar
Usman55
VIP - Site Partner
VIP - Site Partner
Posts: 2821
Joined: Thu Dec 24, 2009 7:52 pm

Etch A Sketch Basic
Usman55
Hello Codenstuffers,

I've been thinking of doing this all week and I'm finally doing it. "What?", you ask? I'll tell you, of course. It was to write a tutorial explaining the method using which I made my Etch A Sketch app was made. But in this tutorial, only the basics will be covered. In order to know the whole app, download the source code from The Showcase.

Now less talking and more coding.

Open up Visual Studio and create a new Windows Forms Application and name it whatever you want your app to be called, preferably "Etch A Sketch".

Set the Form's MaximizeBox property to False and the FormBorderStyle to FixedSingle. Change it's size to something suitable. The original Etch A Sketch toy's dimensions were in the ratio of 600,480 so that's what I will be using. I suggest you set the StartPosition to CenterScreen.

Add a Timer to the Form. This Timer will be used to move the pointer on the screen after determining in which direction to move. Set the Timer's Enabled property to True and Interval to 10.

Coding Time!!!

Right-click on the Form and press 'View Code'. Below the 'Public Class Form1', add the following declarations:
Code: Select all
Dim DrawPoint As Point
    Dim DrawLeft As Boolean
    Dim DrawRight As Boolean
    Dim DrawUp As Boolean
    Dim DrawDown As Boolean
The DrawPoint will be the point which will determine the position of the pointer. With further coding, this pointer will leave a trail behind wherever we move it.
The Draw(Left, Right, Up, Down) Boolean values will determine in which direction the pointer should move depending on the keys pressed.

Now in the code window, at the top, select (Form1 Events) in the first combobox and in the adjacent combobox select the KeyDown event. This event will enable the Boolean values when a particular key is pressed while the Form is in focus. Type the following code in it:
Code: Select all
If e.KeyCode = Keys.Enter Then
            DrawPoint.X = Me.Width / 2
            DrawPoint.Y = Me.Height / 2
            Me.Invalidate()
        End If
        If e.KeyCode = 37 Then
            DrawLeft = True
        End If
        If e.KeyCode = 39 Then
            DrawRight = True
        End If
        If e.KeyCode = 38 Then
            DrawUp = True
        End If
        If e.KeyCode = 40 Then
            DrawDown = True
        End If
We're representing the arrow keys with the their codes. 37 is for left, 39 for right, 38 for up and 40 for down arrow keys. The Enter key is represented by Keys.Enter. This code tells the app to enable drawing in the direction of the arrow key(s) pressed. The Enter keys invalidates the Form, hence resetting the sketch.

Select the Form's KeyUp event this time from the same comboboxes as for the KeyDown event and type this code:
Code: Select all
If e.KeyCode = 37 Then
            DrawLeft = False
        End If
        If e.KeyCode = 39 Then
            DrawRight = False
        End If
        If e.KeyCode = 38 Then
            DrawUp = False
        End If
        If e.KeyCode = 40 Then
            DrawDown = False
        End If
This code disables drawing in the direction of the arrow key(s) when they are released.

Go back to the designer window and double-click on the Timer you added to the Form earlier and type the following code. In this timer's code, we first declare the graphics i.e. the surface on which we shall be drawing. In our case, it is the Form itself. The code can be modified to draw on a PictureBox by using the Paint event but as this is a basic build, we won't get into the details. Leave them for next time. So the Timer checks which arrow key is pressed and moves the pointer 1 pixel in that direction. For example, if the Up arrow key was pressed, the pointer will move 1 pixel upward and so on.
Code: Select all
Dim DrawSurface As Graphics
        DrawSurface = Me.CreateGraphics
        If DrawUp Then DrawPoint.Y = DrawPoint.Y - 1
        If DrawDown Then DrawPoint.Y = DrawPoint.Y + 1
        If DrawLeft Then DrawPoint.X = DrawPoint.X - 1
        If DrawRight Then DrawPoint.X = DrawPoint.X + 1
The next part of the code tells the app that if the pointer tries to leave the Form's boundaries, reset it to it's most recent location within the boundaries. For example, if the pointer was leaving the left boundary then it will be reset to the same X coordinate as it was before leaving the boundary. You'll need to modify these values if you decide to use a custom Form as it would have different border sizes. This tutorial assumes you're using the default Form present in Windows 8.
Code: Select all
If DrawPoint.X < 0 Then DrawPoint.X = 0
        If DrawPoint.X > Me.Width - 18 Then DrawPoint.X = Me.Width - 18
        If DrawPoint.Y < -1 Then DrawPoint.Y = -1
        If DrawPoint.Y > Me.Height - 41 Then DrawPoint.Y = Me.Height - 41
        
The final part of the code checks if the surface on which it is going to draw is available or not. If it is available, then it will draw an ellipse with a black brush having a size of (2, 2) at the location of the pointer. As the size of the ellipse is very small, it will act as a pointer for drawing lines and not as a real ellipse.
Code: Select all
If DrawSurface IsNot Nothing Then
            DrawSurface.FillEllipse(Brushes.Black, DrawPoint.X, DrawPoint.Y, 2, 2)
        End If
You can change the size of the pointer as well as the color of the brush by changing the values in the above code.

Here is an extra piece of code that you should add to your Form_Load event. You can do it by returning to the designer window and double-clicking on the Form.
Code: Select all
DrawPoint.X = Me.Width / 2
DrawPoint.Y = Me.Height / 2
This code will center the point on the Form when the app opens. It won't be the exact center, though. And that's because when we divide the Form's size by 2, the border size is also included in it and it's not the same on the top and bottom of the Form.

Now press Start Debugging from the Debug menu and test if it works. If all went well, then you'll be able to draw on the Form using the arrow keys.

Etch A Sketch Topic: viewtopic.php?f=70&t=11451
Source to Full Version: viewtopic.php?f=71&t=11512

Image
You do not have the required permissions to view the files attached to this post.
Image
1 post Page 1 of 1
Return to “Tutorials”