The Challenges To The Beginners Tutorial

Midimaster · January 25, 2022, 08:12:17

The Challenges To The Tutorial

This is the space to discuss your solutions related to the challenges of the beginner tutorial here:

https://www.syntaxbomb.com/tutorials/learning-basic-for-total-beginners-blitzmax-ng/

You will find "offical" posts with "tips and tricks" but also solutions. You can recognize them by the orange headline.

Important: If you really want to learn BASIC, try to solve the challenge yourself first, then vistis the solutions here.. And never copy parts from anywhere into your code, but copy it by writing word by word into your code.

You can also post your own ready solution here, but please do not ask questions. Therefore we have the BlitzMax-Question forum:
https://www.syntaxbomb.com/blitzmax-blitzmax-ng/

Midimaster · January 25, 2022, 08:23:38

Lesson I Challenge I

QuoteWrite in every corner
Try to write an app, that writes a word in every corner of the screen.

Tipps and Tricks

you need 4 DrawText commands and in each command line you need to adjust the x and y coordinates

Code: BlitzMax

Graphics 600,400
DrawText "top right", 500, 0
DrawText ....
....
Flip
WaitKey

If you still have questions feel free to ask the BlitzMax forum now:
https://www.syntaxbomb.com/blitzmax-blitzmax-ng/

Solution

you need 4 DrawText commands and in each command line you need to adjust the x and y coordinates. Depending on the word length the coordinates need to vary

Code: BlitzMax

Graphics 600,400
DrawText "top left", 10, 10
DrawText "top right", 520, 10
DrawText "bottom left", 10, 380
DrawText "bottom right", 490, 380
Flip
WaitKey

Midimaster · January 25, 2022, 08:33:29

Lesson I Challenge II

QuoteSmall App
Try to create a window, that has only 200x200pix.

Tipps and Tricks

To change the window size you have to adjust the parameters of the Graphics() command. If you use the code of challenge I do not forget to adjust also the coordinates of the four DrawText()s

This would make a bigger window:

Code: BlitzMax

Graphics 1200,900
...

If you still have questions feel free to ask the BlitzMax forum now:
https://www.syntaxbomb.com/blitzmax-blitzmax-ng/

Solution

Code: BlitzMax

Graphics 200,200
DrawText "top left", 10, 10
DrawText "top right", 120, 10
DrawText "left    bottom", 10, 180
DrawText "right", 150, 180
Flip
WaitKey

Midimaster · January 25, 2022, 08:43:11

Lesson I Challenge III

QuoteTest the limits
Now play around with this commands, change parameters or text content and observe, what happens. You can add as many DrawTexts as you like. But Graphics and Flip are only allowed one time an app!!

Therefore I can give you no solution, because it is a free challenge. Use the questions forum if you need assistence:
https://www.syntaxbomb.com/blitzmax-blitzmax-ng/

Tipps and Tricks

No hints here

Solution

No solution here

Midimaster · January 25, 2022, 09:02:39

Lesson II Challenge I

QuoteMove the Rectangle other ways
Try to change the code, that the rectangle move from top to bottom

Tipps and Tricks

You have to swap the variable towards the y coordinate of the DrawRect command:

Code: BlitzMax

...
DrawRect 300,X,5,5
...

As you see, you need not to change the name of the variable X towards a "Y". You can.. but the computer doesn't care what you name a variable!

If you still have questions feel free to ask the BlitzMax forum now:
https://www.syntaxbomb.com/blitzmax-blitzmax-ng/

Solution

If you tried to rename the variable towards "Y" you have to adjust the code in a lot of lines:

Code: BlitzMax

'pre-code-zone:
Graphics 600,400
Global y=5              '<----- CHANGE HERE
 
'main-loop-zone:
Repeat
	Cls
	DrawRect 300,y,5,5  '<----- CHANGE HERE
	y = y+1             '<----- CHANGE HERE
	Flip
Until AppTerminate()
 
' finish-code-zone:
Print  y               '<----- CHANGE HERE

Midimaster · January 25, 2022, 09:20:30

Lesson II Challenge II

QuoteResize A Circle
Try to change the code, that a Circle (Oval) increases in size, while moving from right bottom to left top

Tipps and Tricks

The command for a circle is:

Code: BlitzMax

DrawOval x , y , i,i

You need three variables: x y and an increasing i.
X and y already start with a big value, each turn we reduce them

Do you have the impression, that your circle only moves at the bottom line?

To move across the screen x needs to decrease faster than y and both faster than i grows!

Code: BlitzMax

...
	i = i+1
	x = x - ???
	y = y - ???
...

If you still have questions feel free to ask the BlitzMax forum now:
https://www.syntaxbomb.com/blitzmax-blitzmax-ng/

Solution

As the x-size of the screen is 600 and the y-size only 400 we have to substract different values from X and Y to really reach thee left top corner. We need minimum 2 for y, because an increasing circle would always relativate our step upside with his increasing of size. This makes the impression of "not moving".

Code: BlitzMax

Graphics 600,400
Global y=400  
Global x=600
Global i=1 

Repeat
	Cls
	i = i+1
	x = x-3
	y = y-2
	DrawOval x , y , i,i

	Flip
Until AppTerminate()

Midimaster · January 25, 2022, 09:36:18

Lesson II Challenge III

QuotePlay with Draw... commands
Now try to add other Draw...commands and learn by watching what happens.

Therefore I can give you no solution, because it is a free challenge. Use the questions forum if you need assistence:
https://www.syntaxbomb.com/blitzmax-blitzmax-ng/

Tipps and Tricks

No hints here

Solution

No solution here

Midimaster · January 25, 2022, 12:19:47

Lesson III Challenge I

QuoteChange direction
Rewrite the little app in lesson II with a change: The rectangle should change its direction, when X reaches 400. Now the rectangle should move (vertical ) downwards.

Tipps and Tricks

Tipp 1

This is the little app from lesson II:

Code: BlitzMax

Graphics 600,400
Global x=5

Repeat
	Cls
	DrawRect X,200,5,5
	x = x+1
	Flip
Until AppTerminate()

Tipp 2

From the beginning on you need 2 variables X and Y !

Code: BlitzMax

...
DrawRect X,Y,5,5
...

Tipp 3

You need a IF! At first Y is fix until X reaches 400. From that moment on Y increases while X does not longer increase

If you still have questions feel free to ask the BlitzMax forum now:
https://www.syntaxbomb.com/blitzmax-blitzmax-ng/

Solution

Both additions need to be inside the IF-branch.
X increases until it is 400. Then (ELSE) y increases:

Code: BlitzMax

Graphics 600,400
Global x=5
Global y=200 

Repeat
	Cls
	DrawRect X,Y,5,5
	If x=400
		y = y+1
	Else
		x = x+1	
	EndIf 
	Flip
Until AppTerminate()

Midimaster · January 25, 2022, 12:29:35

Lesson III Challenge II

QuoteChange direction again
Rewrite the little app in lesson II with two changes: The rectangle should change its direction, when X reaches 400. Now the rectangle should move downwards. When Y reaches 300 the rectangle should change the direction again: now moves horizontal to the right until it leaves the screen.

Tipps and Tricks

You need to check whether Y reaches the 300 inside the If x=400 branch

If you still have questions feel free to ask the BlitzMax forum now:
https://www.syntaxbomb.com/blitzmax-blitzmax-ng/

Solution

There are several possible solutions. Feel free to post your (working!) solution here

Code: BlitzMax

Graphics 600,400
Global x=5
Global y=200 

Repeat
	Cls
	DrawRect X,Y,5,5
	If x=400
		y = y+1
		If y=300
			x = 401
		EndIf 	
	Else
		x=x+1
	EndIf 
	Flip
Until AppTerminate()

or this:

Code: BlitzMax


...
	If y=300
		x=x+1
	ElseIf x=400
		y = y+1
	Else
		x=x+1
	EndIf 
	...
Until AppTerminate()

Midimaster · January 26, 2022, 08:30:29

Lesson IV Challenge I

QuoteStop at 234
Change the code above, that also X is diplayed in the sentence (and the result is displayed too), stop the app exactly at x=234 and compare your text with mine here:
Code: BASIC
the result of 234/600 = 0.39000001549720764
Is it exactly the same?

Tipps and Tricks

Tipp 1

To print a text with a combination of numbers and word you can use the "+" sign. Or define a new String variable, do the same there and then print the variable:

Code: BlitzMax

V0234
Print t$  +  "Hello"  +  123  + "again hello"   +   v   + "Last hello"
'or 
Local tt$= "Hello"  +  123  + "again hello"   +   v   + "Last hello"
Print t$  +  tt$

Tipp 2

To stop the app at a certain point you need a IF-branch and inside a WaitKey() command

Tipp 3

Have you problems to display the result of 234? You see always the result of 233?

This is caused by the position of your If-Branch and the position of your X=X+1 code line!

If you still have questions feel free to ask the BlitzMax forum now:
https://www.syntaxbomb.com/blitzmax-blitzmax-ng/

Solution

The order of the actions we need to do is a little bit "tricky". As you want to see the result of 234 you need a FLIP before you stop the app. Only a FLIP makes your last drawing visible.

Additional we need to position the adding (x=x+1) after the IF-branch, because in the line before it would influence the IF-decision to early. If would stop when X=234, but this is the moment when the "X was 233" is displayed.

Code: BlitzMax

SuperStrict
Graphics 600,400
Global x:Int=5
Global t:String=" the result of "

Repeat
		Cls
		DrawRect X,200,5,5
		Local result:Double = x/600.0
		DrawText t + x + "/600 = " + result , 100 , 100
		Flip
		If x=234
			WaitKey
		EndIf 
		x = x+1
Until AppTerminate()

Midimaster · January 26, 2022, 08:51:36

Lesson IV Challenge II

QuoteSum of Floating Values
Change the code above, that also X is diplayed in the sentence (and the result is displayed too), stop the app exactly at x=234 and compare your text with mine here:
Code: BASIC
the result of 234/600 = 0.39000001549720764
Is it exactly the same?

Tipps and Tricks

Tipp 1

You need a new variable sum to add the results

Tipp 2

Do you get the 0 as result?
The variable sum need to be Double! Convert it to INTEGER when you want to display it.

If you still have questions feel free to ask the BlitzMax forum now:
https://www.syntaxbomb.com/blitzmax-blitzmax-ng/

Solution

If you use sum as a INTEGER from the beginning each adding of result leads to a result below 1, what means "stay 0" in the world of INTEGERs. At the next loop sum will again start with 0.

so you need a floating point variable sum:Double for the calculation and a second variable number:Int, which is INTEGER. Simply copy the content of sum to number before display number in our sentence:

Code: BlitzMax

SuperStrict
Graphics 600,400
Global x:Int=5
Global t:String=" the result of "
Global sum:Double

Repeat
	Cls
	DrawRect X,200,5,5
	Local result:Double = x/600.0
	sum=sum + result
	Local number:Int = sum
	DrawText t + x + "/600 = " + number , 100 , 100
		Flip
	If x=234
		WaitKey
	EndIf 
	x = x+1
Until AppTerminate()

Midimaster · January 26, 2022, 09:14:36

Lesson IV Challenge III

Quote
Write an app that outputs (PRINT) text lines like this. Each time the user presses any key the list should become one line longer:
Code: BASIC
0 + 1 = 1
0 + 1 + 2 = 3
0 + 1 + 2 + 3 = 6
0 + 1 + 2 + 3 + 4 = 10
0 + 1 + 2 + 3 + 4 + 5 = 15
0 + 1 + 2 + 3 + 4 + 5 + 6 = 21
...

Tipps and Tricks

Tipp 1

You need a increasing INTEGER variable v:Int and a second INTEGER variable sum:Int for the sum. Also you need a STRING variable t:String to append content each loop.

Tipp 2

How to get a + in a PRINT not as command but as sign?
Simply use it as string: "+"

Tipp 3

Do you see something like this?

Code: BASIC

1 + 2 = 3 + 3 = 6 + 4 = 10

You should not append the result sum in the string, but only in the PRINT command

Tipp 4

Do you see something disordered like this?

Code: BASIC

1+ 2=3
 1+ 2 +3=6
  1+ 2 +3 +4=10
   1+ 2 +3 +4  +5=15

You should experiment with SPACE characters inside the strings

If you still have questions feel free to ask the BlitzMax forum now:
https://www.syntaxbomb.com/blitzmax-blitzmax-ng/

Solution

For not to repeat the result sum again and again in the senctences, we do not append it to the string t. But only append it when using the PRINT command:

Code: BlitzMax

SuperStrict
Graphics 200,200
Global v:Int
Global t:String="0"
Global sum:Int 
Repeat
	v = v + 1
	sum = sum + v
	t= t + " + " + v 
	Print t + " = " + sum
	WaitKey
Until AppTerminate()

Midimaster · January 26, 2022, 09:47:20

Lesson V Challenge I

QuoteFollow the Mouse
Write an app, where a rectangle slowly follows the mouse. Means if you move the Mouse quickly to the right, the rectangle follows, but slowly.

Tipps and Tricks

Tipp 1

You need to calculate the difference between MouseX() and X and store the result in a new variable diff:Double

Tipp 2

To achieve that the rectangle does not reach MouseX() immediately, you need to divide diff, before adding it to X

Tipp 3
Does your rectangle run away from the Mouse?
You are doing the wrong calculation! Not ( x -MouseX() ), but...

Code: BlitzMax

diff = ( MouseX()-x )/10.0

If you still have questions feel free to ask the BlitzMax forum now:
https://www.syntaxbomb.com/blitzmax-blitzmax-ng/

Solution

You can use diff for both precalculations. diff contains only intermediate values and so it can be LOCAL (not important)

Code: BlitzMax

SuperStrict
Graphics 800,600
Global X:Int, Y:Int

Repeat
	Local diff:Double
	Cls
	diff = ( MouseX()-x )/10.0
	x    = x+diff
	diff = ( MouseY()-y )/10.0
	y    = y+diff
	DrawRect X, Y, 30,30
	Flip
Until AppTerminate()

Midimaster · January 26, 2022, 10:20:45

Lesson V Challenge II

QuoteDia-Show
Write an app, where the user can display fotos and switch on with pressing any key.

Tipps and Tricks

Tipp 1

You need to find PNG or JPG or BMP-fotos for BlitzMax. If you have fotos in other formats you need to convert them with a paint tool app before loading them with BlitzMax

Tipp 2
You need to copy the fotos into the Project folder of your app. This means also you need to save your code as slideshow.bmx into this project folder. As long as you keep the default BlitzMax name untitlet1.bmx you cannot load anything, because the project folder is'n defined yet.

Tipp 3
You need a incrementing variable number:Int and a IF/ELSE-branch for each image you want to load.

Tipp 4
Do you know how to restart with picture 1 after all fotos are shown?

You nee to reset the variable number

Code: BlitzMax

Number = Number + 1
If number=6 Then number=1
...

If you still have questions feel free to ask the BlitzMax forum now:
https://www.syntaxbomb.com/blitzmax-blitzmax-ng/

Solution

This is only a symbolic code. It will not run on your computer, because you don't have the mentioned fotos. So replace their filenames with your filenames

Code: BlitzMax

Graphics 200,200
SuperStrict
Graphics 800,600
Global Show:TImage = LoadImage("peter.png")
Global Number:Int=1

Repeat
	Number = Number + 1
	If number=6 Then number=1
	
	If number=1 
		Show = LoadImage("peter.png")
	ElseIf number=2 
		Show = LoadImage("andrea.jpg")
	ElseIf number=3 
		Show = LoadImage("holiday.bmp")
	ElseIf number=4 
		Show = LoadImage("children.jpg")
	ElseIf number=5 
		Show = LoadImage("home.jpg")
	EndIf 
	DrawImage Show,0,0
	Flip	
	WaitKey
Until AppTerminate()

This is a more elgant version. All images are loaded at the beginning only once:

Code: BlitzMax

SuperStrict
Graphics 800,600
Global Show1:TImage = LoadImage("peter.png")
Global Show2:TImage = LoadImage("andrea.jpg")
Global Show3:TImage = LoadImage("holiday.bmp")
Global Show4:TImage = LoadImage("children.jpg")
Global Show5:TImage = LoadImage("home.jpg")

Global Number:Int=1

Repeat
	Number = Number + 1
	If number=6 Then number=1
	
	If number=1 
		DrawImage Show1 ,0,0
	ElseIf number=2 
		DrawImage Show2 ,0,0
	ElseIf number=3 
		DrawImage Show3 ,0,0
	ElseIf number=4 
		DrawImage Show4 ,0,0
	ElseIf number=5 
		DrawImage Show5 ,0,0
	EndIf 	
	Flip	
	WaitKey
Until AppTerminate()

iWasAdam · January 26, 2022, 11:51:17

hmm - ok both work.

Neither will teach you anything beyond the obvious.

Suggestions would be:
1. replace the Show1..5 with an array
2. increase the number and use mod to get the array reference
should end up with something like this (code my not be exact as I don't use NG):

Code: BASIC


Global Show:TImage[] = New TImage[6]
Show[0] = LoadImage("home1.jpg")
Show[1] = LoadImage("home2.jpg")
Show[2] = LoadImage("home3.jpg")
Show[3] = LoadImage("home4.jpg")
Show[4] = LoadImage("home5.jpg")
 
Global Number:Int=1
 
Repeat
	DrawImage Show[Number Mod 5] ,0,0
	
	Number :+ 1
	
	Flip   
	WaitKey
Until AppTerminate()

To really be elegant predefine the needed images and only load when required.
I've added a bit of protection for missing images in this one...
E.G

Code: BASIC

Global imagePaths:String[] = New String( "image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg", "image5.jpg" )
Global Show:TImage[] = New TImage[imagePaths.Length]
 
Global Number:Int=1
 
Repeat
	local img:int = Number Mod 5
	If Not Show[img] Then Show[img].Load( imagePath[img] )
	
	If Show[img] Then	
		DrawImage Show[Number Mod 5] ,0,0
	End If
	
	Number :+ 1
	
	Flip   
	WaitKey
Until AppTerminate()