Babies love mazes.

For discussion of xTalk topics related to education.
User avatar
richmond62
Posts: 3297
Joined: Sun Sep 12, 2021 11:03 am
Location: Bulgaria
Contact:

Babies love mazes.

Post by richmond62 »

This week I had some seven year olds working out instructions to navigate a person through a maze:
-
Model.jpg
Model.jpg (440.6 KiB) Viewed 864 times
-
Here a small girl who was as keen as mustard is doing great stuff. 8-)
https://richmondmathewson.owlstown.net/
User avatar
richmond62
Posts: 3297
Joined: Sun Sep 12, 2021 11:03 am
Location: Bulgaria
Contact:

Re: Babies love mazes.

Post by richmond62 »

Now, what would be really great fun would be to do this sort of thing in OXT Lite.

So, let's get started:
-
m1.jpg
m1.jpg (115.83 KiB) Viewed 863 times
-
We can make a new stack that is 1000 pixels wide and 700 pixels high, and call it "Maze", and remember to save it.
https://richmondmathewson.owlstown.net/
User avatar
richmond62
Posts: 3297
Joined: Sun Sep 12, 2021 11:03 am
Location: Bulgaria
Contact:

Re: Babies love mazes.

Post by richmond62 »

Now, as you can see from the photograph we need to make a 12 by 12 grid of square, so we should select a square vector from the tools palette:
-
m2.png
m2.png (189.09 KiB) Viewed 863 times
-
and place it on your stack, and set its size to 50 by 50 pixels:
-
m3.png
m3.png (357.76 KiB) Viewed 863 times
-
set its name to "xx"

This will be your TEMPLATE to make your grid.

Next to it place a button.
https://richmondmathewson.owlstown.net/
User avatar
richmond62
Posts: 3297
Joined: Sun Sep 12, 2021 11:03 am
Location: Bulgaria
Contact:

Re: Babies love mazes.

Post by richmond62 »

Put some code into you button to make your grid:

Code: Select all

on mouseUp
   put 1 into CYCLE1
   repeat until CYCLE1 > 12
      put 1 into CYCLE2
      repeat until CYCLE2 > 12
         clone graphic "xx"
         set the name of the last graphic to ("SQUARE" & CYCLE1 & "," & CYCLE2)
         set the location of the last graphic to (50 + (CYCLE1 *50)), (50 + (CYCLE2 * 50))
         add 1 to CYCLE2
      end repeat
      add 1 to CYCLE1
   end repeat
end mouseUp
Study this code to see how it goes through 2 cycles to generate 144 squares, name the sequentially, and position them on the stack.

Then click on the button to run the code:
-
m5.png
m5.png (475.49 KiB) Viewed 860 times
-
Remember to save your work.
https://richmondmathewson.owlstown.net/
User avatar
richmond62
Posts: 3297
Joined: Sun Sep 12, 2021 11:03 am
Location: Bulgaria
Contact:

Re: Babies love mazes.

Post by richmond62 »

Now you need to make some blocks (you can see those in the photograph).

Select the round rectangle graphic in the tools palette:
-
m6.png
m6.png (165.2 KiB) Viewed 859 times
-
And set it on your stack, set its size to 44 by 44 pixels, and call it "zz".
-
m7.png
m7.png (67.1 KiB) Viewed 859 times
https://richmondmathewson.owlstown.net/
User avatar
richmond62
Posts: 3297
Joined: Sun Sep 12, 2021 11:03 am
Location: Bulgaria
Contact:

Re: Babies love mazes.

Post by richmond62 »

If you look at the photograph you will see yellow, red, green and blue blocks, so let's make some a bit like that.

We can duplicate our round rectangle using the drop-down menu:
-
m8.png
m8.png (538.03 KiB) Viewed 860 times
-
Do that 3 time so you have 4 round rectangles:
-
m9.png
m9.png (99.1 KiB) Viewed 859 times
-
Then colour them:
-
m10.png
m10.png (269.84 KiB) Viewed 857 times
-
Remember to save your work.
https://richmondmathewson.owlstown.net/
User avatar
richmond62
Posts: 3297
Joined: Sun Sep 12, 2021 11:03 am
Location: Bulgaria
Contact:

Re: Babies love mazes.

Post by richmond62 »

Now you can make as many blocks of any of those 4 colours as you need, and arrange them over the grid:
-
m11.png
m11.png (159.92 KiB) Viewed 856 times
-
And build up your maze.
-
m12.png
m12.png (146.09 KiB) Viewed 854 times
https://richmondmathewson.owlstown.net/
User avatar
richmond62
Posts: 3297
Joined: Sun Sep 12, 2021 11:03 am
Location: Bulgaria
Contact:

Re: Babies love mazes.

Post by richmond62 »

Now select ALL the 'blocks'.

Do this by pressing on the SHIFT bottun on your keyboard as you select each block with your mouse.

(Be very careful NOT to select any squares from the underlying grid.)
-
m13.png
m13.png (211.09 KiB) Viewed 853 times
-
Make all those blocks into a group using the drop-down menu:
-
m14.png
m14.png (451.23 KiB) Viewed 853 times
-
Name that group "walls".
-
m15.png
m15.png (262.14 KiB) Viewed 853 times
-
Remember to save your work.
https://richmondmathewson.owlstown.net/
User avatar
richmond62
Posts: 3297
Joined: Sun Sep 12, 2021 11:03 am
Location: Bulgaria
Contact:

Re: Babies love mazes.

Post by richmond62 »

Now IMPORT this image into your stack:
-
man.png
man.png (1.14 KiB) Viewed 853 times
-
Use the drop-down menu:
-
m16.png
m16.png (518.46 KiB) Viewed 853 times
-
Rename the imported image to 'man':
-
m17.png
m17.png (88.35 KiB) Viewed 852 times
-
Remember to save your work.
https://richmondmathewson.owlstown.net/
User avatar
richmond62
Posts: 3297
Joined: Sun Sep 12, 2021 11:03 am
Location: Bulgaria
Contact:

Re: Babies love mazes.

Post by richmond62 »

Now it is time to start computer programming.

Select a field from the tools palette:
-
m18.png
m18.png (139.77 KiB) Viewed 850 times
-
And set it on your stack, and name it "f1":
-
m19.png
m19.png (156.47 KiB) Viewed 849 times
-
Give it a vertical scrollbar:
-
m20.png
m20.png (121 KiB) Viewed 848 times
https://richmondmathewson.owlstown.net/
User avatar
richmond62
Posts: 3297
Joined: Sun Sep 12, 2021 11:03 am
Location: Bulgaria
Contact:

Re: Babies love mazes.

Post by richmond62 »

Move your 'man' to the START of your maze:
-
m21.png
m21.png (109.31 KiB) Viewed 847 times
-
Unselect '3D' for your field (this makes the field a lot easier to see):
-
m22.png
m22.png (133.28 KiB) Viewed 846 times
-
Make your field very nearly the same height as your stack:
-
m23.png
m23.png (146.95 KiB) Viewed 846 times
-
Remember to save your work.
https://richmondmathewson.owlstown.net/
User avatar
richmond62
Posts: 3297
Joined: Sun Sep 12, 2021 11:03 am
Location: Bulgaria
Contact:

Re: Babies love mazes.

Post by richmond62 »

Now your user can start entering their code:
-
m24.png
m24.png (414.99 KiB) Viewed 844 times
-
m25.png
m25.png (21.73 KiB) Viewed 843 times
-
But as you can see it will be hard to see onscreen, so:
-
m26.png
m26.png (102.26 KiB) Viewed 842 times
-
set the fontSize of field "f1" to size 18 and BOLD.
https://richmondmathewson.owlstown.net/
User avatar
richmond62
Posts: 3297
Joined: Sun Sep 12, 2021 11:03 am
Location: Bulgaria
Contact:

Re: Babies love mazes.

Post by richmond62 »

HOWEVER, we need to tell the computer how to interpret what is written in field "f1", so:
-
m27.png
m27.png (177.3 KiB) Viewed 841 times
-
Select a button from the tools palette

Set it on the stack and name it 'ACTION':
-
m28.png
m28.png (115.66 KiB) Viewed 840 times
-
Make its fontSize a bit bigger and BOLD so it is easier to see:
-
m29.png
m29.png (129.31 KiB) Viewed 840 times
-
In this button we are going to write the code to interpret what is written in field "f1".
https://richmondmathewson.owlstown.net/
User avatar
richmond62
Posts: 3297
Joined: Sun Sep 12, 2021 11:03 am
Location: Bulgaria
Contact:

Re: Babies love mazes.

Post by richmond62 »

If you look closely at what the child has been writing on the table you will see that there are ONLY 3 possible COMMANDS:

FORWARD followed by a number

TURN RIGHT

TURN LEFT

In OpenXTalk positions on a stack are numbered from the Top-Left hand corner like this:
-
m30.png
m30.png (91.5 KiB) Viewed 838 times
-
So, as our 'man' progresses UP the screen the number showing his vertical position will get smaller.
-
m31.png
m31.png (129.75 KiB) Viewed 837 times
https://richmondmathewson.owlstown.net/
User avatar
richmond62
Posts: 3297
Joined: Sun Sep 12, 2021 11:03 am
Location: Bulgaria
Contact:

Re: Babies love mazes.

Post by richmond62 »

Here is the stack at this stage in the lesson.
Attachments
MAZE.oxtstack.zip
(6.73 KiB) Downloaded 31 times
https://richmondmathewson.owlstown.net/
User avatar
richmond62
Posts: 3297
Joined: Sun Sep 12, 2021 11:03 am
Location: Bulgaria
Contact:

Re: Babies love mazes.

Post by richmond62 »

Before we start reading our input code to move the image "man" around we really need a 'reset' button in case things go wrong.

If we examine the image "man" we will find its start position is 150, 650:
-
m32.png
m32.png (115.72 KiB) Viewed 833 times
-
So, let's add a Reset button:
-
m33.png
m33.png (131.69 KiB) Viewed 831 times
-
And write some code inside the button to send the image "man" back to the START of the maze:

Code: Select all

on mouseUp
   set the location of image "man" to 150, 650
end mouseUp
-
m34.png
m34.png (53.55 KiB) Viewed 829 times
-
Remember to save your work.
https://richmondmathewson.owlstown.net/
User avatar
richmond62
Posts: 3297
Joined: Sun Sep 12, 2021 11:03 am
Location: Bulgaria
Contact:

Re: Babies love mazes.

Post by richmond62 »

Open the scriptEditor of your ACTION button:
-
m35.png
m35.png (77.78 KiB) Viewed 827 times
-
The first thing the computer needs to know is the location of the image "man", and which we just found out is 150, 650:
-
m36.png
m36.png (132.44 KiB) Viewed 826 times
-
Now we need to set up a repeat loop that reads each line of our field "f1" and acts on any instructions it finds there:
-
m37.png
m37.png (176.98 KiB) Viewed 825 times
-
You will see that each time the repeat loop repeats FieldLine's value increases by 1.
https://richmondmathewson.owlstown.net/
User avatar
richmond62
Posts: 3297
Joined: Sun Sep 12, 2021 11:03 am
Location: Bulgaria
Contact:

Re: Babies love mazes.

Post by richmond62 »

Now inside the repeat loop we have to find out if the line that is being examined contains either a

FORWARD

or a

TURN command.

And if it is a FORWARD command the number of forward movements required,

And if it is TURN command if it is a RIGHT or a LEFT TURN .

------------------------------
The first thing we do is set the itemDelimiter to SPACE:
-
m38.png
m38.png (237.89 KiB) Viewed 822 times
-
Then we have to find out what the first part of the relevant line consists of: FORWARD or TURN:
-
m39.png
m39.png (178.18 KiB) Viewed 819 times
-

Code: Select all

on mouseUp
   put 150 into LR -- I am using 'LR' to mean the Left-Right location of the 'man'
   
   put 650 into UD -- I am using 'UD' to mean the Up-Down location of the man
   
   put 1 into FieldLine
   repeat until line FieldLine of field "f1" is empty
      set the itemDelimiter to " " --this is so we can separate 'Forward' from a number, and 'Turn' from 'Right' or 'Left'
      put item 1 of line FieldLine of field "f1" into KOMMAND1
      if KOMMAND1 contains "FORWARD" then
         
      else --what follows assumes as KOMMAND1 does NOT contain "FORWARD" it contains "TURN"
         
      end if
      add 1 to FieldLine
   end repeat
end mouseUp
https://richmondmathewson.owlstown.net/
User avatar
richmond62
Posts: 3297
Joined: Sun Sep 12, 2021 11:03 am
Location: Bulgaria
Contact:

Re: Babies love mazes.

Post by richmond62 »

Now we can input the code for 'TURN':

Code: Select all

 else --what follows assumes as KOMMAND1 does NOT contain "FORWARD" it contains "TURN"
         put item 2 of line FieldLine of field "f1" into KOMMAND2
         if KOMMAND2 contains "RIGHT" then
            switch DIREXION
               case "U"
                  put "R" into DIREXION
                  break
               case "R"
                  put "D" into DIREXION
                  break
               case "D"
                  put "L" into DIREXION
                  break
               case "L"
                  put "U" into DIREXION
                  break
            end switch
         else --what follows assumes as KOMMAND2 does NOT contain "RIGHT" it contains "LEFT"
            switch DIREXION
               case "U"
                  put "L" into DIREXION
                  break
               case "L"
                  put "D" into DIREXION
                  break
               case "D"
                  put "R" into DIREXION
                  break
               case "R" 
                  put "U" into DIREXION
            end switch
         end if
Obviously we can use 'DIREXION' to tell us HOW to move the 'man' image.

Here you can see the code in context (you will also see that the code for FORWARD is not yet in place):
-
m40.png
m40.png (231.87 KiB) Viewed 726 times
https://richmondmathewson.owlstown.net/
User avatar
richmond62
Posts: 3297
Joined: Sun Sep 12, 2021 11:03 am
Location: Bulgaria
Contact:

Re: Babies love mazes.

Post by richmond62 »

Now we can input the code for MOVEMENT:

Code: Select all

 if KOMMAND1 contains "FORWARD" then
         put item 2 of line FieldLine of field "f1" into JUMPS
         put item 2 of line FieldLine of field "f1"
         put 1 into HOPS
         repeat until HOPS > JUMPS
         ------
         --This is where we check in which direction our man is meant to be moving and act appropriately
         switch DIREXION
         case "U"
         subtract 50 from UD
         break
         case "R"
         add 50 to LR
         break
         case "D"
         add 50 to UD
         break
         case "L"
         subtract 50 from LR
         break
         end switch
         move image "man" to LR, UD
         ------
         add 1 to HOPS
         end repeat
         --------
Here you can see it in conext:
-
m41.png
m41.png (233.22 KiB) Viewed 725 times
-
Please also note that the START position of the man has been altered to start outwith the maze.
https://richmondmathewson.owlstown.net/
Post Reply

Who is online

Users browsing this forum: No registered users and 0 guests