Small Basic: GraphicsWindow Basics
This article covers the basic use of the Small Basic GraphicsWindow.
The Small Basic GraphicsWindow has 3 layers that appear on top of each other.
GraphicsWindow Layers
Layer 1 - Background
The bottom layer is just controlled by the GraphicsWindow.BackgroundColor property. When this property is changed the colour of the canvas changes and all drawings and shapes remain.
GraphicsWindow.BackgroundColor = "Black"
GraphicsWindow.DrawEllipse(100,100,50,50)
Program.Delay(1000)
GraphicsWindow.BackgroundColor = "Red"
Layer 2 - Drawings
On top of the background are stationary objects that can be drawn on the canvas. All of these are found in the GraphicsWindow.Draw… and GraphicsWindow.Fill… methods. These are good for objects that do not move and cannot be deleted or changed easily.
Layer 3 – Shapes and Controls
On top of the background and drawings on the canvas are shapes that float above the lower layers. These can be found in the Shapes.Add… and Controls.Add… methods. These objects can be moved and modified in other ways and are useful for moving objects.
The shapes include images that can be set. Often it is best to preload images using ImageList and use png images if your image has transparent regions.
sbImage = ImageList.LoadImage("http://i.msdn.microsoft.com/ff384126.SmallBasicBlocks(en-us,MSDN.10).jpg")
sbLogo = Shapes.AddImage(sbImage)
Shapes.Move(sbLogo,100,100)
Note that the GraphicsWindow.Clear() command will remove ALL drawings and shapes, leaving only the background colour and everything else will need to recreated again.
Shapes Properties
Shapes are the most interesting objects because they can be created and deleted and other properties modified.
All of these effects are found in the Shapes method and apply equally to Shapes and Controls. Most shapes have an interior colour set by GraphicsWindow.BrushColor and stroke (or border) set by GraphicsWindow.PenColor and GraphicsWindow.PenWidth.
Shapes can be moved, zoomed, rotated, hidden, reshown, opacity (transparency) changed and deleted.
square = Shapes.AddRectangle(50,50)
Program.Delay(1000)
Shapes.Move(square,200,200)
Program.Delay(1000)
Shapes.Zoom(square,2,2)
Program.Delay(1000)
Shapes.Rotate(square,45)
Program.Delay(1000)
Shapes.HideShape(square)
Program.Delay(1000)
Shapes.ShowShape(square)
Program.Delay(1000)
Shapes.SetOpacity(square,50)
Program.Delay(1000)
Shapes.Remove(square)
Moving Shapes
To move a shape we need to set the coordinates (x and y) for the new position. In Small Basic, x is the number of pixels from the left and y is the number of pixels from the top. Both x and y start at 0, for the left and top sides of the GraphicsWindow.
The position of a shape is defined by a bounding box. The bounding box is a rectangle that completely covers the shape when it was created. The position of the shape on the canvas is defined by the top left corner of the bounding box. The bounding box has a width and height which corresponds to the size set when the shape was created.
- If a shape has width w and height h, then to position a shape with its centre at (x,y), we need to set the top left corner at (x-w/2,y-h/2).
- Note that when a rotated or zoomed shape is moved it appears as if the rotation or zoom was performed after the positioning movement – the position is the top left corner of the un-rotated and un-zoomed bounding box.
In the images above, 3 ellipse shapes have been created and moved. The bounding box for each ellipse is shown in red. The second image has been zoomed and third has been zoomed and rotated. Notice that the second and third ellipses are still positioned by the top left corner of its original bounding box.
To create movement we need to move the shape a small amount in a series of steps. Often it is best to store the position and perhaps velocity in variables. This also allows us to know the location of the shape in the program code.
'Create a ball
ball = Shapes.AddEllipse(50,50)
'Initial position
xPos = 100
yPos = 100
'Initilal Velocity
xVel = 1
yVel = 2
While ("True")
'Update position
xPos = xPos+xVel
yPos = yPos+yVel
'Bounce on walls
If (xPos < 25 Or xPos > GraphicsWindow.Width-25) Then
xVel = -xVel
EndIf
If (yPos < 25 Or yPos > GraphicsWindow.Height-25) Then
yVel = -yVel
EndIf
'Update position
Shapes.Move(ball,xPos-25,yPos-25)
'A small delay to keep it smooth
Program.Delay(5)
EndWhile