Loops & Graphics IP 10 Mr. Mellesmoen 2014. Recall Earlier we wrote a program listing numbers from 1...
-
Upload
griffin-james -
Category
Documents
-
view
213 -
download
1
Transcript of Loops & Graphics IP 10 Mr. Mellesmoen 2014. Recall Earlier we wrote a program listing numbers from 1...
![Page 1: 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.](https://reader035.fdocuments.us/reader035/viewer/2022070403/56649f285503460f94c4085a/html5/thumbnails/1.jpg)
Loops & GraphicsIP 10 Mr. Mellesmoen
2014
![Page 2: 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.](https://reader035.fdocuments.us/reader035/viewer/2022070403/56649f285503460f94c4085a/html5/thumbnails/2.jpg)
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
![Page 3: 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.](https://reader035.fdocuments.us/reader035/viewer/2022070403/56649f285503460f94c4085a/html5/thumbnails/3.jpg)
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
![Page 4: 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.](https://reader035.fdocuments.us/reader035/viewer/2022070403/56649f285503460f94c4085a/html5/thumbnails/4.jpg)
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.
![Page 5: 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.](https://reader035.fdocuments.us/reader035/viewer/2022070403/56649f285503460f94c4085a/html5/thumbnails/5.jpg)
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.
![Page 6: 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.](https://reader035.fdocuments.us/reader035/viewer/2022070403/56649f285503460f94c4085a/html5/thumbnails/6.jpg)
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.
![Page 7: 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.](https://reader035.fdocuments.us/reader035/viewer/2022070403/56649f285503460f94c4085a/html5/thumbnails/7.jpg)
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.
![Page 8: 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.](https://reader035.fdocuments.us/reader035/viewer/2022070403/56649f285503460f94c4085a/html5/thumbnails/8.jpg)
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)
![Page 9: 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.](https://reader035.fdocuments.us/reader035/viewer/2022070403/56649f285503460f94c4085a/html5/thumbnails/9.jpg)
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.
![Page 10: 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.](https://reader035.fdocuments.us/reader035/viewer/2022070403/56649f285503460f94c4085a/html5/thumbnails/10.jpg)
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
![Page 11: 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.](https://reader035.fdocuments.us/reader035/viewer/2022070403/56649f285503460f94c4085a/html5/thumbnails/11.jpg)
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
![Page 12: 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.](https://reader035.fdocuments.us/reader035/viewer/2022070403/56649f285503460f94c4085a/html5/thumbnails/12.jpg)
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)
![Page 13: 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.](https://reader035.fdocuments.us/reader035/viewer/2022070403/56649f285503460f94c4085a/html5/thumbnails/13.jpg)
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)
![Page 14: 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.](https://reader035.fdocuments.us/reader035/viewer/2022070403/56649f285503460f94c4085a/html5/thumbnails/14.jpg)
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)
![Page 15: 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.](https://reader035.fdocuments.us/reader035/viewer/2022070403/56649f285503460f94c4085a/html5/thumbnails/15.jpg)
Other Shapes
Try drawing ellipses, triangles, and rectangles.
You can also fill these shapes by entering the command:
GraphicsWindow.FillRectangle ( coordinates go in here )
![Page 16: 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.](https://reader035.fdocuments.us/reader035/viewer/2022070403/56649f285503460f94c4085a/html5/thumbnails/16.jpg)
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)