We were supposed to do this last week, but we had so much fun with the Spirals that we didn’t have enough time.
What we are going to learn this week.
- Recap on Saving Images created in Scratch to Picture files on your Computer.
- Drawing an accurate image – this is important for Truchet Tiling.
- Recap on Exporting Sprites.
- Truchet Tiling – these are cool…:)
Recap on Saving Images.
First you need to run you Scratch Project in Full Screen mode.
Then you press the Print Screen button, this should be on the top right of your keyboard somewhere 🙂 Nothing appears to happen when you press that button, but in the background the screen has been saved to your clipboard (same as copy and past).
Then, from the Start menu, go to Accesories and Paint, when Paint is open you cna just Paste in your picture. You will have to edit it a little as you will have the full screen in there!
Sorry, that was for the Windows Users, I’m not sure what it is on a Mac 😦
Truchet Tiling.
These are designs based on work done by Sébastien Truchet
From Wikipeadia:
“One particular pattern that he studied involved square tiles split by a diagonal line into two triangles, decorated in contrasting colors. By placing these tiles in different orientations with respect to each other, as part of a square tiling, Truchet observed that many different patterns could be formed.”
We can do them quite easily in Scratch, there are just a coule of key things that need to be done correctly.
Drawing an accurate image.
Start a new Scratch Project, delete the poor Cat as he is fed up being in every project and draw your own Sprite.
The key here is that your Sprite must obey the following rules:
- It must be perfectly Square.
- Any Lines that you draw must touch the edge of the Square at the exact Centre.
I did this in a few stages.
First draw a Square, in black, with a Vertical Line and a Horizontal Line, it should look something like this, don’t make it too big please.
Advanced Tip 1 -If you hold down the shift key when drawing the square in the Paint Editor, Scratch will force it to be a Square, you wont have to guess. This also applies to circles, if you hold the shift key down they will be perfectly round.
Advanced Tip 2 – If you draw a small square using tip 1, you an then use the stamp tool to make it into four perfect squares.
Now you can draw your own lines from the centre of each side, these don’t need to be accurate as long as they go to the centre of each side, in fact the more wibbly they are the better, then rub out the black lines, either use the rubber or the fill tool. So you will go through this…
To the final image which should look like this…
Now when you are back in your Scratch Project you will need to make a note of how big your Sprite is as you will need this information later…
And finally we can get to some coding. Basically you are going to go to the Top Left of the Screen STAMP your sprite, move it along the the right, so it is next to the first STAMPING, turn it round by 90,180 or 270 degrees and STAMP it again.You keep repeating this until you get to the far right of the screen, you then start another line and repeat until the Screen is full.
This means that your one little Sprite that looks pretty boring…
Can make a random picture which is quite interesting and could be used as a Maze in a game for example.
The Code you will need.
Remember, the screen is 480 wide by 360 tall, and you should have the dimensions of your Sprite from earlier as well.
If you drag your Sprite to the Top Left of the Screen you can see what your Starting X and Y coordinates should be…
You can then put these numbers into your code, which should give you somethign like this…
Next, you need to work out how many times you can STAMP this Sprite across the screen and down the screen.
480 / Size of your Sprite – This will give you the number of times you can go across – we can call this number – columns
360 / Size of your Sprite – This will give you the number of Rows you will be able to make across the screen – we can call this number – rows
Advanced Tip 3 – These numbers are not critical you may want to round up, or even add one to whatever you get to make sure the screen is completely filled.
So make a couple of variables, rows and columns and put them into your script as well, somethign like this…
We now need a two loops (repeat blocks) one inside the other, I did the columns inside the rows, if you do this it will make it easier. For each column we need to STAMP the Sprite and for each Row we need to go back to the left of the screen and down one row.
We know where the left is, in my case it is -210, and we know that the Sprite is roughly 60 high, so we need to drop down 60 or so as well. I found that to make sure teh edges joined up nicely that it was better to overlap by a couple of Pixels, that is why I used 58 as the number of Pixels to drop down.
Like this…
Finally you need to STAMP your Sprite and turn it round ready for the next STAMP. You will need to use a random number here, so it will turn 90, 180 or 270 degrees. So a random number between 1 and 3 multiplied by 90. Once you have the Sprite turned you will also need to move it along so it will STAMP next to the last STAMP. Again this is where you use the size of your Sprite that you noted down earlier, and once again, you might need to reduce it by a little bit in order to get the lines joining up nicely.
Once you have this working, you can change your Sprite to somehting different, as long as you stick with the two golden rules above you should still get interesting patterns, here are some ot the other ones that I have done.
This Sprite…
Makes this Maze…
Remeber, the trick with this is to get your little Sprite nice and accurate, everything else will then just fall into place.
Try colouring in either the centre or the two corners, see what patterns that can make. Something like these:
Advanced Tip 4 – Don’t forget to Export this Sprite and keep it with your Button Sprite you Exported last week. We are going to use these building blocks later on to build a Game.
CoderDojo Athenry 