Overview | Computing basics | [HTML] | [smallBASIC] | [Python] |Construct | ActionScript | GameMaker | Kodu | Summative 

smallBasic

Microsoft has a freeware package for simple programming called smallBasic.

Install smallBasic and copy the following into the code window:

'Starting with a text window for the settings

TextWindow.WriteLine("Hello World")

TRYTHIS: What about "printing" something else?

Press the large play button (or faster yet, hit F5) and what happens? You have written and run your first bit of code! What about a more difficult bit of code. Copy the contents of example_code to the smallbasic code window. Run it. What do you notice?

What about FAR more complex problems?

Problem Solving

Steps to problems solving in Computer Programming can be dead simple. They consists of:

1. identify the problem,

2. create a plan (using algorithm and/or pseudocode)

3. write the code and test it

4. review for optimal solutions.

E.g. what are the steps to getting a pizza delivered to your home? What are the steps to filling your car with gas?

With smallBasic there are certain pieces of code, think of them as tags from HTML, that will allow you to solve your problem. They will appear as you begin typing in smallBasic.

Let's start with some of the basics of computer programming:

Sequential Programming

Literally, a set of instructions to be run in a pre-programmed sequence. There are several other types of concepts in computer science, but we'll address those shortly. In older versions of programming BASIC sequential lines of code used to be numbered and the computer would actually run according to this number. Number lines are no longer necessary, but still, code runs in order until you tell it to do otherwise.

Concepts in Sequential Programming:

• There are only 16 command in all of small basic

• input

  • something a user types into the computer as part of a program

• variable: something that can take on any given value (text or #)

  • a String Variable

    • (usually logical), which holds in memory, some input from a user

    • e.g. name = user's inputted name when prompted

    • a = <text input>

  • Integer Variable

    • mathematical operations can be done on it

    • a = <some number>

    • BEDMAS rules

      • Modulo Operators (math.remainder)

    • logic a=a+2 works in computer programming, but not in standard math. However a+2 = a doesn't work!

      • good way of keeping counters

Syntax errors vs. Logic errors

• syntax errors occur when you have typing mistakes. E.g. when you type textWindow.reed instead of textWindow.read in smallBasic. Logic errors occurs when there is a fallacy of reasoning. i.e. In python, typing if x < 0 and x > 5. Since a value can't be less than 0 and greater than 5, a logical error will occur.

Try the following things in smallBasic (smallBasic reference guide and API references and a complete list of commands):

1. Print the following sentence - "Hello World ", and in the next line down "I am Dave, the supercomputer"

2. Write a small program that asks the user to input their name, then captures that name, then prints it on the following line along with the line "i'm happy to meet you name")

3. Write a small program that converts a user-prompted variable in celcius to farenheight and prints the answer.

Conditional Logic

In programming, you can evaluate user inputted integers and strings against stored variables to incredible effect. Typical conditional logic commands include if, then, else. Typical logic would have the programmer checking either inputs or variables against some previous defined value or string to see what outcome should happen. It is important to remember

Usage of conditional logic can be seen as follows:

If (predicate) Then

 (consequent)

Else

 (alternative)

EndIf

if <condition> then

 -- statements;

elsif condition then

 -- more statements;

elsif condition then

 -- more statements;

...

else

 -- other statements;

endif

NOTE: We can use the boolean operators as well (greater than, less than, not equal to, equal to....) within the if/then/else statements

for example we can write the following:

textwindow.writeline("Enter a number")

 a=textwindow.read()

if a<10 then

 textwindow.writeline("Your number is <10")

Else

 textwindow.writeline("Your number is >=10")

Endif

GOTO statements are also useful in navigating through conditional logic. The GOTO command in a sequential bit of code to redirect the user to a different location within the code (thus forcing a change in the flow of the code). GOTO commands read UPWARDS well, but are inconsisten in use if you need to go "down" in your code. Usage is as follows:

start:

textwindow.writeline("Enter a number")

 a=textwindow.readnumber()

if a<10 then

 textwindow.writeline("Your number is <10")

Else

 GOTO start

Endif

- Notice what happens is that if the number input is greater than 10!

Repetition (loops)

Loops are used to repeat a block of code. Being able to have your program repeatedly execute a block of code is one of the most basic but useful tasks in programming -- many programs or websites that produce extremely complex output (such as a message board) are really only executing a single task many times. The general loop looks like this:

for ( variable initialization; condition; variable update ) {

 Code to execute while the condition is true

}

repeat

There are generally 3 types of loops. The for, while, and do..while. Each of the types of loops are useful under certain circumstances.

FOR Loop

You can use a For loop if you know how many times you want the computer to repeat the instructions. This type of for loop is characterized by counting; enumerating each of the values within a numeric integer range, or arithmetic progression. The range is often specified by a beginning and ending number, and sometimes may include a step value (allowing one to count by twos or to count backwards for instance). A representative example in BASIC is:

For I = 1 to 10

 Loop contents

Next I

Often the code can be altered to include logic to escape the loop based on certain conditions:

//'using a different programming language NOT Small Basic|//

DO I = 1,N

 statements !Executed for all values of ''I'', up to a disaster if any.

 IF (no good) CYCLE !Skip this value of ''I'', continue with the next.

 statements !Executed only where goodness prevails.

 IF (disaster) EXIT !Abandon the loop.

 statements !While good and, no disaster.

END DO

In SmallBasic the syntax used is:

//'contents repeat the stated # of times//

For i= 1 to 10

 TextWindow.WriteLine(i)

EndFor

When you want to have steps skipped, or a non-linear number counter you can use:

'contents repeat with a step of 2

For i= 1 to 10 Step 2

TextWindow.WriteLine(i)

EndFor

Conditional loops using the 'for loop' have the following syntax

j=0 'sets j to 0

'will show whether the loop # i is either odd or even

For i = 1 To 10

'takes the loop number and divides it by 2. The REMAINDER function is the Small Basic equivalent of Modulo

 j=Math.Remainder(i,2) 

'yields the REMAINDER of what's left after division by the denominator 

'For example: If i=1 [the first loop] then Math.Remainder (i,2) is functionally 1/2 = 0 times with a remainder of 1. If i=7 then Math.Remainder (i,2) is 7/2 = 3 times with a remainder of 1.If i=10 then Math.Remainder (i,2) is 10/2 = 5 times with a remainder of 0.

 TextWindow.WriteLine(j) 'writes the variable to prove to us that it is what we think it is

 If j = 0 Then ' condition for when j has a 0 remainder after being divided by two

 TextWindow.WriteLine("Even")

 Else

 TextWindow.writeline("Odd")

 endif

EndFor

*Now - try changing the code so that the remainder function is (i,3) - see the change?

*Now - try changing the code so that the loop is for i = 1 to 50 and the remainder function is (i,5)

WHILE Loop

You can use a While loop if you want the program to repeat the instructions until a specific condition is true. The while construct consists of a block of code and a condition. The condition is evaluated, and if the condition is true, the code within the block is executed (continually checking that condition). This repeats until the condition becomes false. Because while loops check the condition before the block is executed, the control structure is often also known as a pre-test loop.

' Initialize the variables in a non-small basic language

Dim counter As Integer : counter = 5

Dim factorial As Long : factorial = 1

While counter > 0

factorial = factorial * counter ' Multiplies the factorial and counter

counter = counter - 1 ' Decrements the counter (subtracts it step by step)

Loop

Print factorial ' Prints out the result. 

In the above example, the value of 'factorial' is greater than 0 each time the loop repeats itself until the 6th iteration, at which time the loop exits - at which point the next line of code executes - printing (showing in a textbox.writeline in Small Basic) the variable factorial.

Here's a simpler view of how the while loop works

'A decreasing counter with an exit-condition

i=20

While i > 10

 TextWindow.WriteLine(i)

 i=i-1

EndWhile 

DO-WHILE Loop

The do while construct consists of a block of code and a condition. First, the code within the block is executed, and then the condition is evaluated. If the condition is true the code within the block is executed again. This repeats until the condition becomes false. Because do while loops check the condition after the block is executed, the control structure is often also known as a post-test loop. Contrast with the while loop, which tests the condition before the code within the block is executed.

'Initiallizing the variables. Seen in a non Small-Basic language

Dim counter As Integer = 5

Dim factorial As Integer = 1

Do

factorial = factorial * counter

counter = counter 1

Loop While counter > 0

Console.WriteLine(factorial)

In the above example, the value of factorial is returned after the conditions are met. In Small Basic there is no DO-WHILE loop per se....you use the while/endwhile loop and place the condition further on in the code to give you the post-test loop structure.

In Small Basic it's best coded into the condition of the loop itself. It could look like this:

'continues until the word is pirate

word="frank"

while word <> "pirate"  'while word is not equal to pirate

   word=textwindow.Read()

   textwindow.writeline("Nope")

   textwindow.clear()

endWhile

textwindow.writeline("Yep")

textwindow.pause

Try the following:

1. Write a program that displays the numbers 0 to 100 in 5 step increments.

2. Write a program that counts backwards from 100 to 1 displaying each step.

3. Write a program that continues asking for your favorite colour as long as it's not blue.

Independent vs. dependent counters

A dependent counter is one where the variable for the loop is used as part of the code in the loop block. For example:

fred = 0

for i = 3 to 15 step 3

  textwindow.writeline(i)

  'because i is tied directly to the variable or IS the variable the counter fred is DEPENDENT

  fred = fred + i

  textwindow.writeline(fred + ", " + i)

endfor

An independent counter is one where the variable is initiated outside the loop and is affected simply because it accumulates during the loop, but isn't tied to the loop counter itself. For example:

fred = 15

for i = 10 to 100

   'while the variable fred is accumulated (run) IN the loop, it isn't tied to i (or the loop number)

   fred = fred + 4

   textwindow.writeline(fred)

endfor

Subroutines

A subroutine is a sequence of program instructions that perform a specific task, packaged as a unit. This unit can then be used in programs wherever that particular task should be performed. Subprograms may be defined within programs (e.g. Small Basic), or separately in libraries that can be used by multiple programs (C+, java). In various languages they are called different things (procedure, a function, a routine, a method, or a subprogram). 

As the name subprogram suggests, a subroutine behaves in much the same way as a computer program that is used as one step in a larger program or another subprogram. A subroutine is often coded so that it can be started (called) several times and/or from several places during one execution of the program, including from other subroutines, and then branch back (return) to the next instruction after the call once the subroutine's task is done. In other words, a subroutine can be run from anywhere in the program at any time. This is the point in time where between loops and subroutines you may PURGE ALL MEMORY TRACES OF THE GOTO COMMAND

The form of a subroutine is fairly simple in Small Basic. The subroutine is called, then runs its course, then code continues from the point where the subroutine was called (unless otherwise specified).

Try the following:

TextWindow.WriteLine("Hi")

TextWindow.WriteLine("Press 'H' to cause something magic to happen")

a = TextWindow.readkey()

while a <> "H" and a<> "h"

wrong()

endwhile

TextWindow.WriteLine("Exactly!")

Sub wrong

 TextWindow.WriteLine("nope, press it again")

 a = TextWindow.readkey()

 EndSub

Graphics

Let's try this!

GraphicsWindow.Show()

GraphicsWindow.Title = "Button game"

GraphicsWindow.BackgroundColor = "Black"

GraphicsWindow.Width = 800

GraphicsWindow.Height = 600

GraphicsWindow.PenColor = "white"

GraphicsWindow.DrawLine(100,100,250,250)

This program illustrates some basic components of how to use graphics in SmallBasic.

1. The GraphicsWindow.XXX command controls aspects of the graphics window popup such as change the graphics window's background color, height, width, placement relative to the screen's top-left corner, title, and whether the user can resize the graphics window.

2. In SmallBasic there are 4 basic shapes you can draw either full or empty, they are:

   1. ellipse (an ellipse of zero eccentricity is a circle)

   2. rectangle

   3. triangle

   4. line (well, you can't really fill this one)

Now, let's change the drawing a bit - try this:

GraphicsWindow.Show()

GraphicsWindow.Title = "Button game"

GraphicsWindow.BackgroundColor = "Black"

GraphicsWindow.Width = 800

GraphicsWindow.Height = 600

GraphicsWindow.PenColor = "white"

GraphicsWindow.DrawEllipse(100,280,150,400)

What did you notice? Let's analyze what happened. We drew our ellipse of y=400 high, BUT, our graphics window is only 600 pixels high AND we started drawing it at 280 which puts our ellipse's end at 680 pixels. When doing graphics you need to constantly remember positioning in your graphics window. Please remember this important fact as we keep going.

Other things you can do with graphics windows are:

1. Displaying images.

2. Resizing existing shapes and images.

3. Getting and changing the color of individual pixels.

4. Responding to user actions such as pressing and releasing keys on the keyboard, moving the mouse, and clicking and releasing mouse buttons.

let's try this interactive bit of code

'creates a graphics window that allows you to click and return something based on the click location

'sets up filepath

filepath = "d:\"

'start of code_________________________________________

GraphicsWindow.Show()

GraphicsWindow.Title = "Button game"

'graphics window fill is blue by default_______________________

GraphicsWindow.BackgroundColor = "Black"

GraphicsWindow.Width = 800

GraphicsWindow.Height = 600

'colour fills are blue by default_____________________________

GraphicsWindow.BrushColor = "blue"

GraphicsWindow.FillRectangle(400, 300, 50, 50)

'save the Google image to your root d:\ drive. Uncomment the line below and try it

GraphicsWindow.DrawImage(filepath + "logo1w.png",150,150)

'try this

'path = Program.Directory

'background = Shapes.AddImage(path+"\imageName.jpg") 

GraphicsWindow.MouseDown = OnMouseDown

Sub OnMouseDown

 'looks up the the x and y position_________________________

 x = GraphicsWindow.MouseX

 y = GraphicsWindow.MouseY

 'makes a condition based on what x and y are ________________

 If(x >349 And x <451 And y > 249 And y < 351) Then

 GraphicsWindow.ShowMessage("Congratulations! You have won the Button game!", "You Won!")

 EndIf

 EndSub

What do we notice about interactivity? By capturing mouse input we have included a level of complexity to our regular programming we've learned. What else can we do? We can capture text, redraw images etc. Here is an example of this interactivity:

GraphicsWindow.Show()

GraphicsWindow.Height = 800

GraphicsWindow.Width = 800

GraphicsWindow.MouseDown = OnMouseDown

GraphicsWindow.MouseUp = OnMouseUp

GraphicsWindow.MouseMove = OnMouseMove

GraphicsWindow.KeyDown = OnKeyDown

GraphicsWindow.KeyUp = OnKeyUp

GraphicsWindow.TextInput = OnTextInput

Sub OnKeyDown

GraphicsWindow.Title = "The " + GraphicsWindow.LastKey + " key was pressed down."

EndSub

Sub OnKeyUp

GraphicsWindow.Title = "The " + GraphicsWindow.LastKey + " key was released."

EndSub

Sub OnMouseDown

GraphicsWindow.Title = "The mouse button was pressed down."

EndSub

Sub OnMouseUp

GraphicsWindow.Title = "The mouse button was released."

EndSub

Sub OnMouseMove

GraphicsWindow.Title = "The mouse moved to " + GraphicsWindow.MouseX + ", " + GraphicsWindow.MouseY + "."

EndSub

Sub OnTextInput

GraphicsWindow.Title = "Some text was input."

If GraphicsWindow.LastKey = "H" then

GraphicsWindow.DrawBoundText(300,300,150,"Holy Crap this works!")

EndIf

If GraphicsWindow.LastKey = "C" Then

GraphicsWindow.Clear()

GraphicsWindow.DrawBoundText(300,300,150,"Clear!!!")

EndIf

EndSub

'__________________________

'Sub Timer

'If GraphicsWindow.LastKey = "T" then

'count = count +1

'GraphicsWindow.Clear()

'GraphicsWindow.DrawText(200,200,Clock.ElapsedMilliseconds)

'GraphicsWindow.DrawText(400,400,count)

'endif

' EndSub

In addition, we perform mathematical operations on the timers:

' sets timer interval in milliseconds

 Timer.Interval =1000

 'sets timer start time

 Timer=10

 'tells the system that on a tick (event) to do something, in this case - run OnTimerTick subroutine

 Timer.Tick = OnTimerTick

 Sub OnTimerTick

 GraphicsWindow.Clear()

 GraphicsWindow.DrawText(100,100,Timer)

 __'GraphicsWindow.DrawText(100,120,Clock.Millisecond)__

 Timer = Timer - 1 'counts the timer down

 If Timer <= 0 Then

 Program.End()

 EndIf

 EndSub

Notice how the timer didn't quite get to zero? Why? Uncomment the underlined line of code. What do you notice? So how could we have returned unbiased time?

We can also pull information from the mouse position. Try this:

GraphicsWindow.Show()

GraphicsWindow.Height = 800

GraphicsWindow.Width = 800

GraphicsWindow.MouseMove = OnMouseMove

Sub OnMouseMove

 GraphicsWindow.Clear()

 GraphicsWindow.DrawText(100,100,GraphicsWindow.MouseX)

 GraphicsWindow.DrawText(130,100,GraphicsWindow.MouseY)

 If (GraphicsWindow.MouseX >= 200 And GraphicsWindow.MouseX <= 300) And (GraphicsWindow.MouseY >= 200 And GraphicsWindow.MouseY <= 250) Then

 Program.End()

 EndIf

 EndSub

So you ask "How the heck do I make a guy run across the screen?". Patience grasshopper. Let's start with a simple control of a circle.

'_________________________________________________

'User enters how big and long the grpahics window will be

'_________________________________________________

TextWindow.writeline("How big do you want your screen to be?")

TextWindow.writeline("Height")

gh = TextWindow.Read()

TextWindow.writeline("Width")

gw = TextWindow.Read()

GraphicsWindow.Height = gh

GraphicsWindow.Width = gw

GraphicsWindow.Show()

'_________________________________________________

'Shape is drawn

'_________________________________________________

ball = Shapes.AddEllipse(100,100)

'_________________________________________________

'subroutine to move the shape called

GraphicsWindow.TextInput = MoveShape

'_________________________________________________

Sub MoveShape

 '_________________________________________________

 'finds out the location of the ball - useful in many games

 '_________________________________________________

 top = Shapes.GetTop(ball)

 side = Shapes.GetLeft(ball)

 '_________________________________________________

 'moves the ball

 '_________________________________________________

 GraphicsWindow.Title = "Last Key: " + GraphicsWindow.LastKey + " Screen Position Top: " + top + " Screen Position Left: " + side

 If GraphicsWindow.LastKey = "W" Then

 y = y-10

 Shapes.Move(ball,x,y)

 ElseIf GraphicsWindow.LastKey = "A" Then

 x = x-10

 Shapes.Move(ball,x,y)

 elseif GraphicsWindow.LastKey = "D" Then

 x = x+10

 Shapes.Move(ball,x,y)

 elseif GraphicsWindow.LastKey = "S" Then

 y = y+10

 Shapes.Move(ball,x,y)

 EndIf

 EndSub

Arrays

An array is a special kind of variable which can hold more than one value at a time. Basically, what it means is that instead of having to store individual inputs under different variable names, you can use a single variable to store multiple pieces of data. Arrays work from things called indexes which are the placeholders within the array. The great thing about arrays is that they can work off of loops since they're adding indexes to any particular array variable. There is a problem however with using arrays. Information about the arrayed shapes is ephemeral and exists only during the creation process and not once you've finished.

For example, we could include 5 colours as 5 different variables with the code:

Textwindow.write("Enter the 5 colours")

colour1=Textwindow.read()

colour2=Textwindow.read()

colour3=Textwindow.read()

colour4=Textwindow.read()

colour5=Textwindow.read()

Textwindow.write("These are the 5 colours you chose";)

Textwindow.write(colour1)

Textwindow.write(colour2)

Textwindow.write(colour3)

Textwindow.write(colour4)

Textwindow.write(colour5)

OR you could write the code in an array as such:

For i = 1 to 5

Textwindow.write("Enter Colour" + i + ":")

colour[i] = Textwindow.read()

Endfor

Textwindow.write("Here are you 5 colours")

For i = 1 to 5

Textwindow.write(colour[i] + ", ")

Endfor

Textwindow.writeline("")

We can do this with string variables, we can of course also do this with with integer variables as well:

For x = 1 to 4

Textwindow.write("Enter 4 numbers; ")

number[x] = Textwindow.read()

Endfor

Textwindow.write("Here are you 4 numbers")

For x = 1 to 4

Textwindow.write(number[x] + ", ")

Endfor

Textwindow.writeline("")

Now how is this useful? Well, for example, we could draw a grid using an array.

rows = 10

columns = 10

size = 40

For r = 1 To rows

For c = 1 To columns

GraphicsWindow.BrushColor = GraphicsWindow.GetRandomColor()

boxes[r][c] = Shapes.AddRectangle(size,size)

Shapes.Move(boxes[r][c], c * size, r * size)

EndFor

EndFor

For a summary of arrays, a good starting place is here:

Array-love

Some guidance for tic-tac-toe

GraphicsWindow.Show()

GraphicsWindow.Height=300

GraphicsWindow.width=300

'draws grid for game

For a = 0 To 300 Step 100

  For b = 0 To 300 Step 100

    GraphicsWindow.DrawRectangle(a,b,100,100)

  EndFor

  EndFor

'sets values for grid to zero (empty)

  For i = 1 to 3

    For j = 1 To 3

      gridvalue[i][j] = 0

      EndFor

    endfor

'sets flag for playerturn to player 1

playerturn = 1

'calls mouseclick event

GraphicsWindow.MouseDown = onmouseclick

'mouseclick event

Sub onmouseclick

'gets position of cursor

x = GraphicsWindow.MouseX

y = GraphicsWindow.MouseY

' places gamepiece for player

If playerturn = 1 Then

  ' sets shape for player 1

  GraphicsWindow.BrushColor="Black"

  player1 = Shapes.AddEllipse(50,50)

  Shapes.HideShape(player1)

  'moves shape to x/y coordinates

  Shapes.Move(player1,x-25,y-25)

  Shapes.ShowShape(player1)

  matrixupdate()

  playerturn = 2

ElseIf playerturn = 2 then

  'sets shape for player 2

  GraphicsWindow.BrushColor="Red"

  player2 = Shapes.AddRectangle(50,50)

  Shapes.HideShape(player2)

  'moves shape to x/y coordinates

  Shapes.Move(player2,x-25,y-25)

  Shapes.ShowShape(player2)

  matrixupdate()

  playerturn = 1

EndIf

EndSub

'sub for logic setting up gridspacing

sub matrixupdate 'or whatever you want to call it

  If playerturn = 1 And x > 0  And x < 100 and y>0 And y<100 Then

    gridvalue[1][1] = 1

  ElseIf playerturn = 1 And x > 100  And x < 200 and y>0 And y<100 Then

    gridvalue[2][1] = 1

  ElseIf playerturn = 1 And x > 200  And x < 300 and y>0 And y<100 Then

    gridvalue[3][1] = 1

  elseIf playerturn = 2 And x > 0  And x < 100 and y>0 And y<100 Then

    gridvalue[1][1] = 2

  ElseIf playerturn = 2 And x > 100  And x < 200 and y>0 And y<100 Then

    gridvalue[2][1] = 2

  ElseIf playerturn = 2 And x > 200  And x < 300 and y>0 And y<100 Then

    gridvalue[3][1] = 2

  EndIf

'debugging showing grid values in case you get stuck - debugging is your friend!!!

    GraphicsWindow.drawtext(5,2,"Value of grid space:" )

    GraphicsWindow.drawtext(5,12,gridvalue[1][1])

'logic dictating a win  for  either player

    If gridvalue[1][1] = 1 And gridvalue[2][1] =1 And gridvalue[3][1] = 1 Then

      GraphicsWindow.ShowMessage(win statement for 1)

      Program.Delay(1000)

      Program.End()

    ElseIf gridvalue[1][1] = 2 And gridvalue[2][1] =2 And gridvalue[3][1] = 2 Then

      GraphicsWindow.ShowMessage(win statement for #2)

      Program.Delay(1000)

      Program.End()

  EndIf

EndSub