What are we going to learn this week, well it might take two weeks to get this completed.

Lists – How to put stuff in.

Lists – How to get stuff out.

Record – How to record things that happen, we might use a list for this 🙂

Playback – How to replay things that have happened, we might use a list for this 🙂

Mouse – where is it on the Screen, we use this to determine which Piano key has been pressed.

Lists

So what is a List, well they are like variables, you get to them from the same screen, but there are just a lot of them joined together. You would normally use them for similar types of things, like a Shopping list for example, where you put different items of food:

Chocolate, Crisps, Biscuits, Tea, Coffee.

We are going to use a list to store all the different Piano Keys that have been clicked. We can then use the same list to Play the Notes back again.

We also get to use the Button Building Block to add some buttons, one for Record and one for Play etc.

So what do we need for out Piano, well, we need a keyboard for a Start, we only need 16 notes (2 octaves) and we can either draw it ourselves or borrow one from somewhere.

Something like this would be good

Then we need to play the right note depending upon where the user has clicked.

There is one piece of easy code that just needs to be repeated over and over again with slightly different numbers. Here is a sample of what is needed and then you just need to repeat it with the different numbers for the location (mouse X / Y position) of the different keys.

Playback Time – so how do we play back what we recorded, well I just imported my Go Button Sprite to start the Playback and added the following code to run when I recieve the Broadcast from the Go Button… Remember how we did this before.

I needed to create another variable as well to keep track of which Note in the List we should be playing.

And finally, there is some initialisation code that keeps things nice and tidy when you click the Green Flag. But you could import another Button and use that to reset the Notes List, which would be much nicer. And don’t forget we already have the Button as a Sprite, so this should be easy to add in.

The go to x,y code I found to be quite useful as when you Click on the Piano Keys it can move the Keyboard around a little. But again, remember this will only happen in “Design” mode, when you switch to Presentation Mode, you won’t see this problem.

What are we going to learn this week.

• Buzzer Game – Using old code and a little new code we can build a game.
• Code recycling – How to re-use code that you have already written.
• Parrallel vs Sequential Processing – sounds worse than it is 🙂

Buzzer Game

Navigate through the Maze to earn More Money, the more you get the Harder the game becomes.

Most of the code for this game you have already written, cool… But there is some  new code that you will need.

So, lets do the New code first…

We need a coin, or something that you can move with the mouse and that will BUZZ and Shake when it touches a particular colour.

This is my Coin here…

I have one costume for normal and one costume fo buzzing!

We now need to set up some code so that you can move it with the mouse, this is similar code to the button code we did, and I found a better way of doing it!

What you want to happen is if the mouse is on the Coin you can Click to grab it and it will move wherever the mouse moves until you let go of the mouse.

We also want it to Buzz! when it touches a particluar colour, to test this I just drew some lines on the Stage and used the Dropper tool to select the right colour.

SEQUENTIAL PROCESSING – This is my Buzz code, I just move it around a little and make a noise. Notice on the Broadcast that it is a Broadcast and Wait, this allows the Buzz code to work correctly.

And the code that allows you to click and drag the coin around the Screen goes something like this…

Advanced Tip 1. To test this piece of code, you will need to run your program in full screen mode, otherwise Scratch is in “design” mode and moves the Sprite anyway.

The Maze.

CODE RECYCLING PART 1. Remember last week whne you did the Truchet Patterns, they were pretty maze like, weren’t they. Well all we need to do is import the Truchet Sprite, maybe play around with it a little bit and you will have your maze.

What I changed in my Truchet Pattern, was the size of the initial square, I made it bigger, and also I didn’t stamp along the top line or the bottom line so the coin has somewhere to aim for.

The other thing that you might have to change is if you have used curved lines, you might want to change them for straight lines, otherwise the gaps between them can be very close. Alternatively you can make your coin very small.

So once I had adjusted my pattern, I ended up getting something like this.

CODE RECYCLING PART 2. Remember the Button we did, well let’s bring that into the Game as well so we can use it to Start everything off

Now you need to connect everything together. This is where the fun Starts…. 🙂

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:

1. It must be perfectly Square.
2. 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.

We are going to be in a seperate room this Satruday, next to the main room. This will give us a chance to complete what we started last week and go on to some more Art, using the Stamp Tool.

What we are going to learn this week…

• Stamping!
• Random Numbers
• Truchet Tiling – these are cool…:)
• Saving Images created in Scratch to Picture files on your Computer.

I have updated the Week 2 page with all Code from my Project to create the Spirals.

Stamping.

This is when you get really angry… Or in Scratch it’s when you copy the Sprite to the Background.

Here is a simple example, using the cat and some spiraling code…

And the same code with a Bat…

And here is the code that makes the pictures above. Can you spot anything that might be better as a variable or a Slider?

Random Numbers.

We are going to use a random number in the Truchet pattern that we are going to draw, this will make the pattern generated different every time.

Truchet Tiling.

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.”

And here are a couple of samples of what they end up looking like…

Saving Images created in Scratch to Picture files on your Computer.

What are we going to learn this week…

• How to imitate a Button
• How to use the Pen controls
• How to use sliders

Buttons.

 Wouldn’t it be great if you could have buttons in Scratch, that you can click and make things happen?

Well you can, there might not be a code block to do it, but we can make one.

 You will need a Sprite with Two Costumes

• One for the Up position
• One for the Down Position

See how I have given the Sprite a meaningful name and also each costume has a name. The only difference between the sprites is the bottom one has no shadow and is slightly lower and left (covering the shadow).

Cool Tip: You can export the Button Sprite which will save it with all the code as well. This means it is easy to add Buttons to any other Scratch Projects. 

Crazy Images.

We are going to use the Pen Tool to draw some fancy Spirograph like images.

First we need a Sprite that will do the drawing, I just created an invisible Sprite, so you only see the Line being drawn.

Spirographs work using circles, but we are going to use triangles, squares, pentagons, hexagons and heptagons (7 sided).

If you walk 10 steps turn 90 degrees and walk another 10 steps and again and again, you have wlaked in a square, but if you change either how many steps or the angle you turn by a very SMALL amount and just keep[ going you can generate some very interesting patterns.

Sliders.

We will also be using sliders to control the nember of sides to the shape and the change in angles.

Sliders are variables that are displayed on the screen with a slider control to change the value as the program is running. To get the variable to show as a Slider just dbl click on it, once, changes it to a Slider, dbl clicking again, removes the name.

If you right click on the SLider you can set Min and Max values.

The code to create the Spirals is split into two parts. One runs when youclick the Green Flag, this just sets everything up ready.

The next piece of code is what does all the work, notice where the Slider variables are used and how the code makes more sense when you give variables descriptive names.