Loops & GraphicsIP 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 100.

2. 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 = 200GraphicsWindow.Height = 200GraphicsWindow.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 = 200GraphicsWindow.Height = 200GraphicsWindow.PenColor = “Green”GraphicsWindow.DrawLine (10, 10, 100, 100)GraphicsWindow.PenColor = “Gold”GraphicsWindow.DrawLine (10, 100, 100, 10)

GraphicsWindow.Width = 200GraphicsWindow.Height = 200GraphicsWindow.PenWidth = 10GraphicsWindow.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 = 200GraphicsWindow.Height = 160GraphicsWindow.PenColor = “Blue”

For i = 1 to 10GraphicsWindow.PenWidth = iGraphicsWindow.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 = 200GraphicsWindow.Height = 200GraphicsWindow.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=300GraphicsWindow.Height=300GraphicsWindow.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=300GraphicsWindow.Height=300GraphicsWindow.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)