1. CRE Programming Club - Class 5 Robert Eckstein and Robert Heard

2. Subroutines When we write programs, we often want the computer to run certain statements more than once. You can avoid writing the same statements over and over if you use subroutines in your programs. To create a subroutine, you use the Sub keyword, and then you give the subroutine a specific name. You end the subroutine by using the EndSub keyword.

3. Subroutines Look at the following subroutine named PrintCurrentTime. What does it do? Why would we want to create a subroutine out of it? How can we make this subroutine better (Hint: what if Clock.Minute is less than 10)? Sub PrintCurrentTime TextWindow.WriteLine(Clock.Hour + ”:” + Clock.Minute) EndSub

4. Subroutines Let’s gain a better understanding of subroutines by writing a couple of them… Sub CalculateArea Answer = Radius * Radius * Math.PI EndSub Sub CalculateCircumference Answer = 2 * Math.PI * Radius EndSub

5. Import HVW825 While (i < 5) TextWindow.WriteLine("Enter Radius: ") Radius = TextWindow.Read() CalculateArea() TextWindow.WriteLine("Area: " + Answer) CalculateCircumference() TextWindow.WriteLine("Circumference: " + Answer) i = i + 1 EndWhile

6. Subroutines In this program, we use the CalculateArea() and CalculateCircumference() statements to run (or “call”) the subroutines from any location within the program. If you use subroutines, your programs will be easier to read and understand than if you use Goto statements. In this program, you write the subroutines once, but you can run them from anywhere in the program--as many times as you want!

7. Subroutines When you instruct the computer to run a subroutine, you use a statement that contains the name of the subroutine followed by a set of open and close parentheses. When you use this type of statement, you are calling the subroutine.

8. Subroutines and Events - Import XZN263 GraphicsWindow.MouseMove = handleMouseMovement Sub handleMouseMovement TextWindow.writeLine("Mouse is at " + GraphicsWindow.MouseX + "," + GraphicsWindow.MouseY) EndSub

9. Subroutines and Events This tells the GraphicsWindow object to call the handleMouseMovement() subroutine every time there is a movement of the mouse! You can use this to record the current position of the mouse on the screen, or perhaps to control a character in a game. Note that when you assign a subroutine to an event, you don’t use ()s after the name.

10. Learning GraphicsWindow Just like we had TextWindow that allowed us to work with text and numbers, Small Basic also provides a GraphicsWindow that we can use to draw things. Let’s begin by displaying the window. GraphicsWindow.Show() When you run this program, you’ll notice that instead of the usual black text window, you get a white window.

11. GraphicsWindow The GraphicsWindow object allows you to customize its appearance. For example, you can change the title, the background, and the size like this.... GraphicsWindow.BackgroundColor = "SteelBlue" GraphicsWindow.Title = "My Graphics Window" GraphicsWindow.Width = 320 GraphicsWindow.Height = 200 GraphicsWindow.Show()

12. Drawing Lines - HTZ844 Once we have the GraphicsWindow up, we can draw shapes, text and even pictures on it. Let’s start by drawing some simple shapes. Here’s a program that draws a couple lines on the GraphicsWindow. GraphicsWindow.DrawLine(10, 10, 100, 100) GraphicsWindow.DrawLine(10, 100, 100, 10)

13. Drawing Lines The first two lines of the program setup the window and the next two lines draw the crisscross lines. The first two numbers that follow DrawLine specify the starting x and y co-ordinates and the other two specify the ending x and y co-ordinates. The co-ordinates (0, 0) start at the top left corner of the window, and increase down and to the right.

14. Drawing Lines Small Basic allows you to modify the properties of the line, such as the color and its thickness. First, let’s modify the color of the lines...

15. Drawing Lines - CTB959 GraphicsWindow.PenColor = "Green" GraphicsWindow.DrawLine(10, 10, 100, 100) GraphicsWindow.PenColor = "Gold" GraphicsWindow.DrawLine(10, 100, 100, 10)

16. Drawing Lines Now, let’s modify the size of the lines too... GraphicsWindow.PenWidth = 10 # Add this line GraphicsWindow.PenColor = "Green" GraphicsWindow.DrawLine(10, 10, 100, 100) GraphicsWindow.PenColor = "Gold" GraphicsWindow.DrawLine(10, 100, 100, 10)

17. Drawing Lines PenWidth and PenColor modify the pen with which these lines are drawn. They not only affect lines but also any shape that is drawn after the properties are updated. By using the looping statements we learned, we can easily write a program that draws multiple lines with increasing pen thickness.

18. Drawing Lines - MSC750 GraphicsWindow.BackgroundColor = "Black" GraphicsWindow.Width = 200 GraphicsWindow.Height = 160 GraphicsWindow.PenColor = "Blue" For i = 1 To 10 GraphicsWindow.PenWidth = i GraphicsWindow.DrawLine(20, i*15, 180, i*15) EndFor

19. Draw and Fill Operations When it comes to drawing shapes, there are usually two types of operations for every shape: draw operations and fill operations. Draw operations draw the outline of the shape using a pen. Fill operations fill in the shape using a brush.

20. Drawing and Filling - ZJG878 Enter this program and watch what it does... GraphicsWindow.Width = 400 GraphicsWindow.Height = 300 GraphicsWindow.PenColor = "Red" GraphicsWindow.DrawRectangle(20, 20, 90, 60) GraphicsWindow.BrushColor = "Green" GraphicsWindow.FillRectangle(60, 100, 300, 60)

21. Rectangles To draw or fill a rectangle, you need four numbers. The first two numbers represent the X and Y coordinates for the top left corner of the rectangle. The third number specifies the width of the rectangle. The fourth specifies its height. In fact, the same applies for drawing and filling ellipses....

22. Drawing Ellipses - HGD349 GraphicsWindow.Width = 400 GraphicsWindow.Height = 300 GraphicsWindow.PenColor = "Red" GraphicsWindow.DrawEllipse(20, 20, 300, 60) GraphicsWindow.BrushColor = "Green" GraphicsWindow.FillEllipse(60, 100, 300, 60)

23. Ellipses (and Circles) Ellipses are just a general case of circles. If you want to draw circles, you would have to specify the same width and height. It’s helpful to think that there is a box that encloses the circle or the ellipse that defines its shape. The circle/ellipse will expand as much as possible to fill the box.

24. Drawing Circles GraphicsWindow.Width = 400 GraphicsWindow.Height = 300 GraphicsWindow.PenColor = "Red" GraphicsWindow.DrawEllipse(20, 20, 100, 100) GraphicsWindow.BrushColor = "Green" GraphicsWindow.FillEllipse(100, 100, 100, 100)

25. Fun with Shapes - CVB460 This program draws 20 rectangles in a loop, with increasing size. GraphicsWindow.BackgroundColor = "Black" GraphicsWindow.PenColor = "LightBlue" GraphicsWindow.Width = 200 GraphicsWindow.Height = 200 For i = 1 To 100 Step 5 GraphicsWindow.DrawRectangle(100-i, 100-i, i*2, i*2) EndFor

26. Fun with Shapes This next program uses the operation GraphicsWindow.GetRandomColor to set random colors for the brush and then uses Math.GetRandomNumber to set the x and y coordinates for the circles.

27. Fun with Shapes - ZHN117 GraphicsWindow.BackgroundColor = "Black" For i = 1 To 1000 GraphicsWindow.BrushColor = GraphicsWindow.GetRandomColor() x = Math.GetRandomNumber(640) y = Math.GetRandomNumber(480) GraphicsWindow.FillEllipse(x, y, 10, 10) EndFor

28. Next Time... We’re going to start learning about arrays and learn more about the GraphicsWindow.