How to work with graphics? (small basic)

# How to work with graphics? (small basic)

• Tuesday, September 25, 2012 9:31 PM

I found myself pretty big problem.

I don't understand how graphic works at all. For example i wanted to make a maze game.. you have to go through the tunnel of squares/circles and other objects with your mouse pointer until you reach the end, if you move your mouse from course you will "game over".

My only problem is GRAPHICS  how can i make that tunnel? can you explain me how can i put objects such as rectangles,squares.. on place exactly where i want,  It's easy to do GraphicsWindow.FillRectangle(100,100,30,30)  But i have no idea how coordinate system works at sb.  I could type any 4 coordinate number but i got no idea of what will it be placed. I though there is program where you can test graphic objects before using it on small basic, but i really have no idea how to place graphic objects exact size and spot where i want it.

### All Replies

• Tuesday, September 25, 2012 10:03 PM

It's easy to do GraphicsWindow.FillRectangle(100,100,30,30)  But i have no idea how coordinate system works at sb.  I could type any 4 coordinate number but i got no idea of what will it be placed.

SB uses the very Cartesian Coordinate System model approach as any other programming language which deals w/ graphics!

In GraphicsWindow.FillRectangle(100,100,30,30) example you mentioned, it's not 4 coordinates, but 1 absolute coordinate pair (100,100), the other one is a relative size/length pair (30,30).

For the absolute coordinate, the 1st/left number is the horizontal position, and 2nd/right number is the vertical position.

For the relative pair, 1st/left means its width, and 2nd/right means its height.

In short, it means it's gonna draw & fill a rectangle beginning at position (100,100) and with size (30,30).

Width works from left to right, and height from top to bottom. Coord. (0,0) is the far most left & far most top!

It's similar to the IV quadrant, but with a positive y position!

Just pay attention that GraphicsWindow.DrawTriangle(), GraphicsWindow.FillTriangle() and Shapes.AddTriangle use 3 absolute coordinates instead, and no relative ones.

P.S.: Small Basic displays a short explanation what each argument does on a vertical column at the very far right side of the screen. I'm pretty sure you already know that, right?

Click on "Propose As Answer" if some post solves your problem or "Vote As Helpful" if some post has been useful to you! (^_^)

• Tuesday, September 25, 2012 10:50 PM

My only problem is GRAPHICS  how can i make that tunnel? can you explain me how can i put objects such as rectangles,squares.. on place exactly where i want,

On an extra note...

Have you already looked at Nonki Takahashi's Shapes Editor?

I guess it can generate a shape w/ its coordinates. So you don't need to sweat on guessing the coordinate system yourself!  :P

Click on "Propose As Answer" if some post solves your problem or "Vote As Helpful" if some post has been useful to you! (^_^)

• Edited by Tuesday, September 25, 2012 10:51 PM
• Marked As Answer by Wednesday, September 26, 2012 5:18 AM
•
• Wednesday, September 26, 2012 1:55 AM

```GUI()

While "true"
Shapes.Move(sfire,shapes.GetLeft(sfire)-10,shapes.GetTop(sfire))
If Shapes.GetLeft(sfire)<-100-fW/2 Then
Shapes.Move(sfire,500,shapes.GetTop(sfire))
endif
Program.Delay(100)
endwhile

Sub GUI
GraphicsWindow.Width=1000                    '   Window width
GraphicsWindow.Height=500                   '   Window height
GraphicsWindow.BackgroundColor="Darkgreen"      '   Window's   backgroundcolor
GraphicsWindow.BrushColor="Khaki"           '   body Color  for box shape  ( in this case)
GraphicsWindow.PenColor="Khaki"             '   edge Color  for box shape  ( in this case)
url="http://illpop.com/img_illust/car/firetruck_a09.png"
fW= ImageList.GetWidthOfImage(fire)
fH= ImageList.GetHeightOfImage(fire)