Loops & Graphics IP 10 Mr. Mellesmoen 2014

Recall Earlier we wrote a program listing numbers from 1 – 24 i=1 start: TextWindow.WriteLine(i) i=i+1 If (i<25) Then Goto start EndIf This program is equivalent to: For i = 1 to 24 TextWindow.WriteLine (i) EndFor Run this program to see the results

For…EndFor For…EndFor is a called a loop, it allows you to take a variable and give it initial and ending values. Try this one: For i = 1 to 24 Step 2 TextWindow.WriteLine(i) EndFor

Task: 1. Use this program to list all the even numbers between 50 and Try to make your computer count down from 10 to 0. You will need to change the order of your numbers in your program AND Step -1 each time. 3. Look back to the first few programs we did and tell your computer to count from 0 to 100 but have the numbers appear YELLOW.

While Loop While Loops will run until a given condition is true. In this program we will continually divide a number by 2. Number=100 While (number>1) TextWindow.WriteLine(number) Number=number/2 Endwhile What’s happening here? We are giving a starting point: 100 We are saying that if the number is greater than 1 then divide it by 2. The program will keep doing this until an answer that is less than 1 is found, then it will stop.

Beginning Graphics So far we have just used Small Basic® to work with text & numbers, we did so in the TextWindow. Small Basic® also offers a place to work on graphics, that being the GraphicsWindow Type in to your editor: GraphicsWindow.Show( ) Now you should see a white screen.

Size & Color Enter the following code to customize the size & color of your graphics window. GraphicsWindow.BackgroundColor = "steelblue" GraphicsWindow.Title = "My Graphics Window" GraphicsWindow.Width = 320 GraphicsWindow.Height = 200 GraphicsWindow.Show( ) Play with the variables to change the size and color of your window.

Drawing Lines Once we have GraphicsWindow up we can draw shapes, text & even pictures on it. We will create a simple shape using the code listed at the right. GraphicsWindow.Width = 200 GraphicsWindow.Height = 200 GraphicsWindow.DrawLine (10, 10, 100, 100) GraphicsWindow.DrawLine (10, 100, 100, 10)

Pen Color & Pen Width Let’s add some color to our lines… GraphicsWindow.Width = 200 GraphicsWindow.Height = 200 GraphicsWindow.PenColor = “Green” GraphicsWindow.DrawLine (10, 10, 100, 100) GraphicsWindow.PenColor = “Gold” GraphicsWindow.DrawLine (10, 100, 100, 10) GraphicsWindow.Width = 200 GraphicsWindow.Height = 200 GraphicsWindow.PenWidth = 10 GraphicsWindow.PenColor = “Green” GraphicsWindow.DrawLine (10, 10, 100, 100) GraphicsWindow.PenColor = “Gold” GraphicsWindow.DrawLine (10, 100, 100, 10) As a default, the program has the pen width set to 1. Add line 3 to your program as shown below.

Looping With Graphics! By using a looping program (seen at right) we can write a program that creates multiple lines that increase in thickness. 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

How Did That Work? 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 What we notice is the PEN WIDTH is increased each loop. We said to start at 1 and go to 10 (For i=1 to 10) and then said our PenWidth = i

Coordinates In our GraphicsWindow, the top left corner corresponds to 0, 0 on the coordinate plane (think math now). After that we are simply adding coordinates. Let’s go back to drawing lines. Draw a line from 0, 0 to 10, 10 by entering the code at the right. GraphicsWindow.Width = 200 GraphicsWindow.Height = 200 GraphicsWindow.DrawLine (0, 0, 10, 10)

Squares In the command line GraphicsWindow.DrawLine (0, 0, 10, 10) you are identifying a starting point (0, 0) and an ending point (10, 10). Try to draw a square that starts at (1, 1)

Easier Ways That square took some figuring, and of course with programming there always seems to be an easier way. Enter the code at right: GraphicsWindow.Width=300 GraphicsWindow.Height=300 GraphicsWindow.DrawRectangle (20, 20, 220, 220)

Other Shapes Try drawing ellipses, triangles, and rectangles. You can also fill these shapes by entering the command: GraphicsWindow.FillRectangle ( coordinates go in here )

Task Try to draw a circle in a circle, you can try to color the circles if you wish. Here is how I created mine: Note: this filled the ellipse with a random color. This filled it with the color I specified GraphicsWindow.Width=300 GraphicsWindow.Height=300 GraphicsWindow.DrawEllipse (20, 20, 200, 200) GraphicsWindow.FillEllipse (20, 20, 200, 200) GraphicsWindow.DrawEllipse (70, 70, 100, 100) GraphicsWindow.BrushColor = "yellow" GraphicsWindow.FillEllipse (70, 70, 100, 100)