Plan for Christmas Card – Improvements.

For the final week we are going to convert the Christmas Card into a Christmas Game.

We will be starting with the Christmas Card that we made last week, if you weren’t there or want to start with the same one that I will be using, have a look at the bottom of this document, I have added instructions on how to get it.

The Plan for this week.

We will be adding some additional Sprites. We will be using Scratch Sprites rather than drawing our own to save time.

  • A sprite for Santa’s sleigh
    • This will move backwards and forward across the top of the screen
  • A sprite for the Presents
    • This will fall from Santa’s sleigh to the bottom of the screen, not directly down though.
    • This sprite will have many costumes.
  • As sprite for you
    • You will be able to move Left and Right across the bottom of the screen to try and catch the falling presents.

The Sleigh Sprite

Scratch does not have a sleigh sprite, so I used the reindeer.

He needs to start on the top left of the screen and move all the way to the top right of the screen and then turn around and go back to the top left, he will just keep doing this.

The code might look something like this:

The Present Sprite

We might have to draw this one.

The present Sprite will start from wherever the Sleigh Sprite is glide down to a random place at the bottom of the Screen, you can make the Present a random size as well to make it more interesting.

The is a Scratch block to put one Sprite in the same place as another Sprite So the code to move down the screen will look something like this:

There will also be code to count the number of presents caught. So, if the Present Sprite touches you, it will count as being caught, so you can increase your score.

When the present is caught you can change to a random costume to display the unwrapped present.

I’ll let you figure out this code as a little challenge (I haven’t done it yet 😊 )

You Sprite

This is the one that catches the presents. I used the Scratch cat, finally.

Not much code for this one, he just needs to move left or right using the left or right keys on the keyboard. So, something like this:

Getting the Christmas Card project.

https://scratch.mit.edu

Login with user name AthenryAdvancers and Password Advancers

Select My Stuff and then click the See Inside button for the ClassVersion-ChritmasCard

You will then have to save it to your device, select File – Save to your computer, so you can work on your version.

Now you will have to open Scratch 3 on your device and open the file you just saved.

This week’s challenge to create a Christmas Card.

This will be an interactive Christmas Card.

  1. A nice background with Snow, Christmas Trees, a house.
    1. We might use different Sprites for the Trees.
  2. Flashing lights on the House and the Tree.
  3. Falling snow.
  4. Snow building up on the ground.
  5. An animated Snowman.

Snowflakes

To make it even more interesting, we are going to make the snowflakes different sizes and fall at different rates depending on how big they are.

We will use the clone functionality to make the snowflakes.

Each clone will pick a random size and will glide to the bottom of the screen, how fast if glides will be related to how big or small it is.

The snowflake is going to be quite hard to draw as it will be a small white dot on a white background, so we will be careful.

The building up on the ground part, is quite easy, we just pick a random Y value to stop at, as long as it is close to the bottom of the screen we should be ok.

Flashing Lights or Tree Sprites

Again, these might be quite difficult to draw as we have to draw them over the background and get them to be over the Trees?

If we draw the complete Tree in the Sprite I think it is going to be a lot easier.

Snowflake code

Flashing light code

This week’s Challenge – To build a Calculator.

I know Windows has a Calculator, but we are going to build our own. This will give you an idea of how real Calculators actually work.

The Calculator should be able to:

1. Add, Subtract, Multiply and Divide 2 numbers.

2. Be able to work with decimal points (2.5 for example).

3. Display the sum and the result on the screen.

4. Have a “clear” button to reset everything ready for the next calculation.

Let’s look at the steps that you need for a calculation

1. Clear the variables.

2. Click on the numbers for the first number.

3. Click on the operator you want to use.

4. Click on the numbers for the second number.

5. Click on the equals button.

6. Display the result.

Hint: When you click on the Operator, this indicates we have got the first number and need to start storing the second number. See variable 6.

It sounds like there is a lot to do, but if we are smart with the way we work, there is a lot of code that is very similar and we can copy and paste it and then modify it slightly.

You will need 6 variables (for all Sprites) to share:

1. The first number in the calculation (NumberOne), not visible.

2. The second number in the calcualtion (NumberTwo), not visible.

3. The complete sum (Question), visible.

4. The operator (+,-,x,/) for the calculation (Operator), not visible.

5. The result of the calculation (Result), visible.

6. A variable to indicate what number we are working with (SecondNumber). not visible.

Hint: When you press clear, all the variables should be set to blank, except the SecondNumber which should be 0

You will need 17 Sprites, don’t panic! Remember copy and paste is your friend:

11 Number Sprites 0,1,2,3,4,5,6,7,8,9 and the decimal point.

4 Operator Sprite +,-,x and /.

1 Equals (=) Sprite.

1 Clear Sprite.

Scratch code blocks that will be used:

Operators, we will use the join operator a lot as well as the +,-,x and /.

If Else block with variable 6 to decide what number to update.

set variable blocks – lots of these!

Hint:

Start by creating the variables.

Start with just 4 Sprites, 1, +, clear and Equals

Once you can get 1 + 1 working, the rest is quite easy.

The answer is 2 (not 11) by the way, just in case.

Coding Tips:

Here is some of the code that we will be using:

This is the code when you click on a number Sprite, this example is for the number 1, can you see what needs to change if this was the number 2 sprite?

This is the code for the + Sprite

And this is the code in the = Sprite

And finally, the CLR sprite

Advancers – Plan for Clock.

This weeks challenge is to build a working clock.

This is not just an ordinary clock though, we are going to build a clock that works in the same way as the Railway clocks works in Switzerland.

These clocks work in the following way:

  • The Clock waits for a signal from the master clock
  • When it gets the signal, it moves the minute hand on by one minute (and the hour hand if necessary)
  • then the second hand moves round once in about 58 seconds
  • It then waits for the signal again from the master clock.

This means that all the clocks on all the Stations are synchronised exactly.

In Computer speak this is called Event Driven Programming, where the code simply waits for an Event before doing anything.

So what’s the plan?

We need 4 Sprites

  1. For the Clock Face
  2. For the Hour Hand
  3. For the Minute Hand
  4. For the Second Hand

You can create them however you want but this is what the Swiss railway clocks look like and I will try and create something similar.

Remember one thing, when creating the Sprites make sure they are centred correctly.

So, the clock face should be perfectly centred and then the hands should be centred near one end something like this, I have highlighted where the centre is, with the green circle.

The code

Remember this will be event driven, so we will be using Broadcasts a lot. We will also have to calculate how far to move each hand, this means we will be using the number 360 a lot as that is one complete circle.

So just to let you know how far each hand should move:

  • The Second hand will move 360 degrees for each event.
  • The Minute hand will move 6 degrees for each event (360/60 minutes)
  • The Hour hand will move 0.5 degree for each event (360/60 minutes/ 12 hours)

The first event will be broadcast from the Stage:

The Minute hand will receive this broadcast and move 6 degrees it will then broadcast another 2 events, one to the Hour hand and one to the second hand so they can move.

This is the code for the Minute hand which should be enough to work out the rest of the code as well.

The extra code above is to make sure the Minute hand starts in the correct position.

And one final thing which might be a little tricky, but I’ll leave it as a challenge for you, the Second hand should only take 58 seconds to go all the way around.

Rock-Paper-Scissors for 1 and 2 Players

The Plan

Michael led the Advancers group this week, as Oliver was unavailable. Our plan was to work on 3 versions of Rock-Paper-Scissors:

  1. A one-person version where you play against the computer
  2. A two-person version where you and a friend play against each other on one computer
  3. A two-person version where you and a friend play against each other on different computers, using cloud variables (we did not get around to this)

We began by thinking about how the game works, and what we would need.

In our design, we need three sprites:

  1. My Player
  2. Opponent (either another player or the computer, depending on the version)
  3. Controller (a sprite that displays instructions, does the countdown, and uses broadcasts to sync the start and end

We also need several variables, the most important of which are:

  • my-pick: what I pick (rock/paper/scissors)
  • other-pick: what the opponent picks
  • result: based on the picks, will be set to “I win”, “I lose”, or “Draw”
  • number: a random number in the range 1-3 that the computer picks, which we translate into either a value for other-pick of “rock”, “paper”, or “scissors”

One-Person Version

Here is the logic:

1player

The controller has 5 costumes: one with instructions and four with big numbers 3,2,1,0 for the countdown.

The controller looks after the countdown, and broadcasts messages at the start and end of the countdown. Here is the controller’s code:

code1

My sprite takes my keyboard input. When the countdown is over, it calculates who wins (result). Also, when the countdown is over, it says what I picked, waits 3 seconds, and then says who won.

Here is the start of its code – you will have to figure out the other combinations yourself!

code2

The opponent sprite is the computer. Its sprite picks a random number 1-3 and converts it into a word rock/paper/scissors. It also says what it picked when the time is up. Here is the code:

code3

Two-Person Version

Here is the design:

2player

In this version, the Controller and My Sprite are the same as in the one-player version, except you might want to change My Sprite to use keys 1,2,3 for Rock, Paper, Scissors.

The Opponent Sprite code is different than before, but it is simpler: the opponent is your friend who will press 7, 8, 9 for Rock, Paper, Scissors, so you just need the code to read those key-presses:

code4

Possible Enhancements

Here are some ideas:

  • You could add sound effects, celebrations, and different costumes
  • You could find the rules for a more complex version and implement it: Rock-Paper-Scissors-Lizard-Spock
  • You could figure out cloud variables!

Advancers – Mad House

Introduction

This week we built a Mad House with different rooms that you could go into and if you found the right place to click something would happen.

The coding for this project shows how you can re-use code, this has 2 benefits, it makes coding quicker and it also makes all the code consistent, so it all looks the same.

The Plan

As always, it’s best to have a little bit of a plan.

We decided on the following:

  • 4 Rooms – each room would have 2 Sprites
  • Clicking a room would make it large
  • Clicking the Space key would make the room small again
  • We would build one room first so we could copy the code.

The Code

The first room we created was the Kitchen, the plan was when you clicked on the saucepan, it would boil over.

The Sprites need to fill the whole screen and also need a coloured background to ensure that the Mouse Click is recognised by the code.

These are the 2 Sprites that I built:

kitchen

 

 

 

 

It’s not easy to see, but the “On” Sprite has some flames coming out of the pot.

 

 

 

 

Because we are having 4 Sprites, when the program starts we need to make the Sprite a quarter of it’s full size and move it to one of the corners of the Screen. We also discovered that we would need a variable (a flag) to indicate if the room was Large (1) or Small (0). We did this in the GreenFlag code like this:

greenflag

We moved to top left corner.
we set the size to 50% (this makes it fill a quarter of the screen
We set the variable to 0 (0 = small, 1 = large)
We set the start costume to the Off costume.

 

 

Next step was to write the code for when the Sprite was clicked, this would make the Sprite fill the screen, slowly! It would also set the flag to say that the Sprite was large.

The biggest piece of the code was making the Sprite grow slowly, we did it in 50 steps, changing the size was easy as it just changed by 1 each step, but the X and Y positions were a little trickier as we needed to make sure they were going in the right direction and also changing by the right amount to reach the full size in 50 steps.

spriteclicked

Only run this code if we are small (0)
Make we can’t run again set the flag to 1.
Make sure we are in front of the other Sprites

X needed to go from -120 to 0, 2.4 each time
Y needed to go from 90 to 0, so -1.8 each time
Size was simple, 1 each time
And to make it nice and smooth, we wait for .1 of a second in each step.

 

We then moved on to the code that should run when the Space key is pressed, this would reverse what happened when the Sprite was clicked.

spacekeyclicked

Again, we only run if we are large (1)

The X and Y changes are the reverse of the ones above.

And finally we set the size back to small again (0)

 

Now we can move on to the code that changes the costume if the user clicked on a certain spot on the screen.

We decided that the user should click on the pan for the costume to change, so first we needed to work out where the pan is on the screen (It’s X and Y positions). This is easy in Scratch 2, when you move the mouse across the Stage the X and Y position is shown at the bottom of the screen, so you just need to place the Mouse on the 4 sides of the Pan and make a note of the X and Y values. X values for the min and max left/right positions, Y values for the min and max up/down positions. Hopefully this picture will help:

pan$

We needed to place the Mouse on each of the positions indicated, which then gave use the correct values to place in the code.

The code then looked like this:

foreverloop

 

We loop forever
Only check X and Y if we are large (1) and the Mouse is clicked. Then check where the Mouse is. This where we use the values we got when checking where the Pan was on the screen.

 

And that is it for the first Room.

The Second Room.

Now that all the code is written for the first Room, the second Room becomes a lot easier, we simply duplicate the first Room Sprite and then make the following changes to the code:

  • Change the 2 Costumes to something else for this new Room.
  • Add a new Variable for this Room
  • Update all the places where the Variable is set to this new one.
  • Update the starting X and Y positions to one of the other corners of the Stage.
  • Update the X and Y changes when the Room grows and shrinks to make sure it is going to the centre of the screen correctly and also back to it’s own corner.
  • Update the X and Y values to a new location on the Screen, depending on what you have drawn on your new Costumes.

The Finished Program

I only got 3 Rooms finished and this what it looked like at the end:

stageandvariables

Next Steps

If you want to improve the program you can look at adding the following:

  • The final Room to make it 4 rooms.
  • Extra code change the Costume back to normal if the item is clicked again, this would check what Costume is currently, this can be done using the “costume #” from the Looks blocks.

Notes

The one I did in the class is available on the Scratch Web Site:

Project Name : ClassVersion-MadHouse

UserId : cdadvancers1819

Password : advancers

Advancers – Program + Recursion

Introduction

This week we looked at both the Progam project and the Recursion (Branching) project. with a plan to get the output of the Recursion project be the input of the Program project.

The 2 Projects

Program Project

The Program project that we did a couple of weeks ago can read a list of commands and get Scratch to perform those commands. We programmed it to be able to:

  • Put the Pen Up or Down (P:0 or P:1)
  • Move some steps (M:100, where 100 is the number of steps)
  • Turn in a different direction (T:90, where 90 is how far to turn)

Each Command was identified by the First Letter.

Recursion Project

The Recursion project that we did last week can draw a branching Tree pattern. The commands it uses to draw the Tree are:

  • Pen Up and Down
  • Move some steps
  • Turn in a different direction.

Joining them together

The Recursion Project changes

You can see that the Recursion project using the same commands as the Program project, but in order to get the commands from the Recursion project to the Program project we have to add some code to the Recursion project.

First job is to create a List, we called it Commands as it will store all the commands that we have run.

CommandsList

We then need to read through the code and wherever there is a Pen Up, Pen Down, Move or Turn we need to add an item to the Commands list.

This is the code and I have highlighted where

You can see that I have marked 7 places where we need to add code to Insert into commands.

AllCodeMarked

When the Inserts are added the code will look like this, just remember that the Insert has to put in the Command letter that Progam needs Joined to the same action that the Recursion code is doing. All the entries go in the last place in Commands.

GreenFlagCommands

 

You can see that we have added a delete all to start and then after the Pen down we have added a P:1 to the last place in Commands.

On the Pen up we have added a P:0 to the last place in Commands.

 

 

Then we did the same to the Code that did the drawing of the Branches.

CustomBlockCommands

 

Notice that all the Inserts use a JOIN block, the first section is the Command letter that the Program project is expecting, the second section is the exact same code from the code block above.

For example when the code turns Degrees * -2 the insert also has Degrees * -2 in the second section of the JOIN.

 

 

 

 

 

If we run the Recursion Program now, the Commands list will end up with lots of commands, if you have 10 Branches it creates 5117 Commands!

CommandsPopulated

 

You can see that Commands starts with a Pen Down (P:1) and then starts all the Moves (M:…) and Turns (T:…) and when the Tree is finished there are 5117 items in Commands.

 

Next step is to Export the Commands to a file. This is simply a case of Right Clicking on the Commands List and selecting Export, just make sure you add a .txt to the file name and also remember where you saved it!

The Program Project changes

Now we switch projects and open the Program Project.

First thing we changed was to remove all the test code, add some instructions and move the broadcast Play to when the space key pressed.

Instructions

Next step, click the green Flag and follow the instructions.

So right click on the Program List and Import the file that you Exported from the Recursion Project. And then press the Space key…

FirstTest

Hmm, not quite what we were expecting, but close, the Tree is on it’s side and the drawing has started in the centre of the screen rather than at the bottom.

This test has highlighted a number of problems with our Program Project. We don’t have any code to set the Direction of the Sprite or the X and Y Positions.

Well that is easy to fix, we just add some more Command Letters to our Programming code:

  • D:nnn – This will set the Direction to point in, where nnn is the Direction to point in.
  • X:nnn – This will set the X Position, where nnn is the X position.
  • Y:nnn – This will set the Y Position, where nnn is the Y Position.

This gave us 3 more IF sections in our code like this:

NewCommands

 

 

 

You can see that the new commands are almost the same as the old ones, we just change the letter we are looking for and the code block that gets run if we find one of the New letters.

So D:0 for example will run the Point in Direction code with the value 0 (Up).

 

 

The Recursion Project – more changes

Now this where we have to jump back to the recursion project and add some more Inserts so we can set the correct direction and the correct X and Y positions. Again this is not too difficult, we just look for code that sets the direction or X and Y Positions and add some Inserts into the Command list.

ExtraInserts

 

You can see 3 extra insert code blocks, 1 for the point in direction code and 2 for the go to x: y: code block. We have to add 2 here because our Program project is very basic and doesn’t know how to do a Go To…

 

 

 

 

The Commands List will now get 3 new entries at the beginning and have a total of 5120 commands now. Don’t forget to Export this new list to test the Program project again.

ExtraCommands

And Finally

Program Project – test 2

Now that we have the Recursion project writing out the extra Direction and X and Y commands we can test again in the Program project.

And, test 2 is a little better than test 1.

SecondTest

 

It’s still not perfect, the line is all the same thickness and the colour is always the same.

But you could easily add some more Program letters to add this extra functionality.

 

 

Notes:

As always the code is on the Scratch web site, I have added 2 projects that should produce the results you see above:

  • ClassVersion-Program
  • ClassVersion-Recursion

User Id : cdadvancers1819

Password : advancers

Advancers – Recursion (Broccolli!)

Introduction

This week we created another drawing program using recursion, code that calls itself.

This drawing program will draw a Tree with 2 number of Branches, each Branch will split in 2 and be a little smaller than the previous Branches, The Branches will split X number of times. The finished picture will look something like this when X = 5:

Tree5

 

You can see that each branch splits into 2 new branches which are a little thinner and a little shorter than the previous branches, just like a real tree.

 

 

The Plan

Very simple plan for this one, we wanted to be able to control:

  1. the amount of branches
  2. how many degrees the split should be
  3. and what size the first branch would be

So we created a variable for each of these and left them on the Screen as a Slider. We set some minimum and Maximum values as well.

  1. Branches (1-10)
  2. Degrees (0-180)
  3. Size (30-100)

Sliders

The Code

As always we have some code that initialises everything when the Green Flag is clicked.

GreenFlag

 

We point upwards, we go to the middle of the bottom of the screen, clear everything, set the Pen colour and then call our code with the values from the Sliders.

Improvement : This should be “When Spacebar Pressed”, then we could just adjust the Sliders and then click the Spacebar to see the next tree.

 

The recursive code

This is the code that calls itself, because the Branching code is just the same thing repeated over and over again, but with slightly different values (the branches are getting smaller) it is ideal to use recursive code. You just need to remember that the code next to be able to finish.

CustomBlock

The code has two values sent in the number of branches and the size of the branches.

First thing we do is check to see if the number of branches is > 0 otherwise we exit, this is our way to finish the code.

We move (draw the branch), turn and then call ourself with slightly different values.

Just for a bit of variety we change the Pen colour each time as well.


Note: The code for 2019 is slightly different, the middle “turn” code is slightly simpler, we turn anticlockwise and we multiply by 2 not -2, so like this:

Turn01
Both will work as they both do the same thing.

This results in some quite nice Trees 🙂

SampleTree

Notes

The project that we built is available on the Scratch Web Site:

User Name : cdadvancers1819
Password : advancers

Project : ClassVersionRecursion (2018) and Tree-ClassVersion (2019)

Remember, you can put your own projects up there as well if you want.

 

Advancers – Calculater

Introduction

Todays project is a Calculator that will be able to do simple addition, subtraction, multiplication and division.

There will be a Sprite for each number button and for each type of sum, plus an equal and a clear button, so lots of Sprites. The finished Calculator might look something like this:

CalculatorFull

The Plan

As always, it’s a good idea to have a think about what Sprites, Variables and Code you might need, having a think about the Calculator, we came up with the following list:

  • Sprites
    • 1 Sprite for each number button and one for the decimal point, so 11 in total.
    • 1 Sprite for each of the sum buttons, +, -, X and / so 4 in total.
    • 1 Sprite for the equals button.
    • 1 Sprite for the clear button.
  • Variables
    • 2 Variables, one for each number in the sum.
    • 1 Variable for the sum type.
    • 1 Variable for the full sum being calculated.
    • 1 Variable for the answer.
    • 1 Variable to indicate which number variable we should use.
  • Code
    • Code for a number buttons.
    • Code for the sum type buttons.
    • Code for the equal button.
    • Code for clear button. 

We also thought that it would be a good idea to complete only 1 number button and 1 sum type button and make sure that was all working before adding the rest of the buttons.

The Variables

We created all the variables we would need first:

Variables 

  • Variables
    • NumberOne – this is for the first number in the sum
    • NumberTwo – this is for the second number in the sum
    • Flag – this is to indicate which number we should be using when a button is pushed.
    • Operator – this is to indicate what sum, + – X or / we should be doing.
    • Question – this is to hold the complete sum, e.g. 10+23
    • Answer – this is to hold the answer, e.g 33

The First 3 Sprites

To get things started we created a number Sprite, a plus (+) Sprite and an equal Sprite

All the Sprites are very simple, just a square with text in the middle, just remember to make sure that there is a background colour as well, so the When Clicked code will work correctly.

The code for the Number Sprite looks like this:

NumberCode

The code will check the Flag variable and then add 1 to either the NumberOne or NumberTwo variable, it will also add 1 to the Question variable.

Note that the number 1 is added to whatever is already in the number or question variables.

 

The code for the + Sprite is very simple:

OperatrorCode

We just set the Flag to indicate that we should move on to NumberTwo, we set the Operator to + and finally we put the + in the Question as well.

 

 

The code for the equal Sprite again is quite simple as we only have one sum type.

EqualCode

We check the value of the Operator and if it is + we add the NumberOne and NumberTwo variables together and put the result in the Answer Variable.

 

The other Numbers and Sum types

Once we had the number one, the + and the equal Sprites working it was quite simple to copy and create the other number Sprites. The process was:

  • Right click on the Number One Sprite and Copy it.
  • Change the Costume of the Sprite to the next Number.
  • Change the code of the new Sprite to the next Number.

The bits of the code that we changed are circled in red here:

NumberCodeChanges

The other sum types we did the same way, copy the + Sprite and adjust the code circled in red:

OperatrorCodeChanges

As we added the different sum types we also had to add more code to the Equal Sprite, which ended up looking like this, where there is one IF for each sum type:

EqualCodeAll

The Clear Button

In order to do more sums we also added a clear button, again it is a simple Sprite with some text on it, the code looked like this:

Clear

This code was placed on the Stage, as we needed to run it when we clicked on the Green Flag as well as when we clicked on the Clear Sprite.

Notice that most of the variables start with nothing in them, so they are blank, it is only the Flag that needs to have 0 in it.

 

 

 

Notes

The project that we built is available on the Scratch Web Site:

User Name : cdadvancers1819
Password : advancers

Project : Class-Calculator

Remember, you can put your own projects up there as well if you want.