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.

 

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

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.

Advancers – Programming

Introduction

We used Scratch to build our own Programming Language

Scratch used different blocks for different commands, so we decided to write our own Programming Language that would then call the different blocks. This may sound strange, but what it means is that we can have a simple and generic Scratch Program that can run code written in a simple file.

The Plan

  • Describe how our language would work.
  • Create a List variable to hold all our commands.
  • Create a variable to hold the parameter value.
  • Write some test commands to the List variable.
  • Write some code to get the parameter from our commands.
  • Write some code to translate our commands to Scratch commands.

First job was to describe how our language would work with Scratch, we decided that our Programming Language would be able to Draw pictures using the Pen Down, Move, Turn and Pen Up controls.

So we needed 4 commands in our Language, we decided that all the commands would use the same format:

  • First Letter would indicate the command
  • Second Letter would be a colon “:”
  • The rest of the command would be the parameter to use with the corresponding Scratch command.

For example to Move the Sprite 10 steps we would use:

M:10

 To Turn the Sprite 90 degrees we would use

T:90

To put the Pen Up or Down we would use:

P:1 for Pen Down
P:0 for Pen Up

And then we wrote some test code to put some of these commands in to our list variable.

TestCommands

If you look closely you can see that the commands should draw a square, Pen down, Move 100, Turn 90 and so on until we have the square drawn.

 

 

 

This code was put under a When Green Flag temporarily for testing.

We then moved on to the code that would get the parameter value from the command, for example the command M:100 the Parameter is the 100 part. We used a Custom Block for this called P1. Which looked like this:

P1

We send in the full command (M:100 for example) and then we read each letter and if we are on the 3rd letter or more, we add the letter to the P1 Variable, this is similar to what we did for the Calculator numbers.

 

 

 

The last piece of the puzzle was to add some code to read every item in the List and process each command, again this was very similar to the Calculator where we have an IF block for each possible command. Something like this:

Play

 

We read all the items in the Program List and we check the first Letter, this will tell us what Scratch block that we need to use to run the code.

You can see for each item in the Program List we call the P1 block to get the Parameter value, which we then use in the Scratch Block.

 

 

 

 

This is what the project looks like when you run the Test Program:

FinalRun

Notes

The project that we built is available on the Scratch Web Site, note that I added a couple more commands Pen Colour and Pen Width as we may need these at some point.

User Name : cdadvancers1819
Password : advancers

Project : ClassVersionProgramming

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

Advancers – Gravity

Introduction

This week we decided to create a Lunar Lander game that demonstrated the effects of Gravity.

The Plan

As always we started with a plan:

  1. A Spaceship Sprite with 4 Costumes
    1. No power
    2. Up Rocket firing
    3. Left Rocket firing
    4. Right Rocket firing
  2. Buttons to control the Space Ship
  3. Stage which should be a picture of the moon.
  4. A landing pad to land on – just draw on the Stage
  5. Code to control the Space Ship
    1. 3 Variables, to store Gravity, Power and LeftRight information.

Space Ship Sprite

This what mine looked like:

SpaceShipSprite

Space Ship Sprite

 

 

 

The Left and Right costumes can be confusing, to move left, the flame needs to come out of the right, and to move right the flame needs to come out of the left hand side.

 

 

 

 

 

 

Stage

My Stage looked like this:

Stage

 

One thing to remember is to have the landing pad in a different colour.

Buttons and Code

I’ll put these 2 parts of the plan together as it makes more sense.

We decided to use 3 different buttons to control the Space Ship

  1. Up Arrow – This would fire the rocket at the bottom of the Space Ship
  2. Left Arrow – This would fire the rocket on the right side of the Space Ship
  3. Right Arrow – This would fire the rocket on the left side of the Space Ship

And now the code.

We needed code for each of the buttons, code to move the Space Ship and code to know when we have landed. This meant we had lots of small pieces of code all running together in Green Flags with forever loops.

We also decided that we would need 3 variables to store information so we could work out how far to move the Space Ship.

  1. Gravity – This would change as the Space Ship got higher, just as real gravity does.
  2. Power – This would change when the Up arrow was pressed and also when nothing was happening
  3. LeftRight – This would change when the left or right arrows were pressed

And don’t forget if we have variables, we should set them to starting values when the Green Flag is clicked.

Initialise

 

This also has the code that puts the Space Ship in to a starting position. Note the Y value as this is used later in the code to see if we are on the ground or not.

 

For example, when the one of the left or right arrow keys was pressed we would change the Costume and change the LeftRight variable.

RightArrow

 

We did the same for the left arrow. Note that we just add (or subtract for the left arrow) a small amount from the LeftRight variable.

The delay is to make sure that the variable is not updated too fast if the arrow button is held down.

 

For the Up arrow we have to change a different variable

UpArrow

 

Note the wait is much shorter, this is to match the wait in the forever loop that moves the Sprite.

We also change the Power variable by a large amount as this helps with the calculations.

 

Once we had the buttons working we could move on to the Code that moved the Sprite.

The Left or Right movements were easy, that would just be the amount in the LeftRight variable.

The Up or Down movements were a little trickier as we had to account for Gravity as well. So we just used the Y position of the Sprite and added 180 (to make it a positive number). This meant that Gravity changed as the Sprite moved up or down, which is exactly how Gravity works in real life.

This is how the code ended up

MainForeverLoop

 

We move first and then check how high we are.

If we are above the ground, we know this by checking that we are above the starting position of the Sprite, then we adjust Gravity and adjust the Power down.

Note the wait is the same as the Up Arrow code.

Also, if we are on the ground, we set Gravity and Power to 0.

 

 

There was one final piece of code that we didn’t do but I have added here, this was to check if we had landed and if we had, display a message and end.

It was just another Green Flag with a Forever loop and we kept checking to see if we were touching the colour of the landing pad.

Landing

 

Not much here, but might be better if there was a wait as well.

 

 

 

Finally, if you want to see all the code in one go, here it is

AllCode

Notes:

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

User Name : cdadvancers1819
Password : advancers

Project : Class-Gravity

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

Platformer Engine Week 2

This week we did a little code to finish our engine and spent the rest of the time working on our own platformer games using it. ¬†The code changes we made to last week’s game engine were:

Hit Boxes:

Fixed the platformer so that our character doesn’t get snagged on edges by its whiskers. ¬†This we did by learning about¬†hitboxes. The hitbox is just a costume which is rectangular in shape. ¬†Before we do our animation, we switch to the hitbox costume and after we switch back to the costume we want.

hitbox

Head Bumping:

Fixed the platformer so that we can bump our heads against the platforms without popping up. ¬†This was by adding a couple of lines to the “stay above ground block” sprite to move down if we are touching the ground while moving upwards.

The entire code for the platformer is below:

platform_code

DOWNLOAD THE FULL PLATFORM ENGINE CODE HERE!!!

Example Game: Mentor Dash

Finally Mark showed an example game pulling all the elements in together – “Mentor Dash”. ¬†It has¬†the same code as we covered, but adds a bit of animation, level changes, sound and some sillyness.

mentor_dash

DOWNLOAD MENTOR DASH HERE

There were lots of brilliant ideas from the ninjas on their own games .. looking forward to seeing what you can do!

Scratch Advanced: General Purpose Wireframe 3D Engine

This week in Scratch advanced we took on the¬†ambitious task of writing a general-purpose 3d wireframe engine. ¬†The goal here was to build an engine that we could use to view any structure in 3-dimensions as though we had x-ray vision. ¬† We didn’t really know how it might turn out but were delighted with the results! ¬†If you just want the code, skip to the bottom!

We didn’t quite know how to start this so we¬†Googled 3D and Wireframe, and we found this article on wikipedia that really helped us understand what it was:https://en.wikipedia.org/wiki/Wire-frame_model

wireframe examples

Continue reading

“Tick” Technique in Scratch – Illusions and 3D printing!

Today in scratch advanced, Mark¬†covered a very useful method¬†to organize your programs better if there are lots of moving sprites¬†– which he calls¬†the “tick” technique.tick_loop The idea is that a single master loop ticks time and the Sprites react to this tick in their own way.

We showed two examples of using this tick Рan optical illusion that shows that things can move in circles while just doing straight lines and a technique for building 3D models by layering sprites the same way that a 3D printer layers resin.

illusion_path

 

The FULL Instructions for today’s projects are here – Enjoy!!

It would be great if you tried out some of your own Tick projects, and demonstrated them next week at Scratch Advanced!

Scratch Advanced: Week 3 Top Down Game Engine Part 1

A “Game Engine” is a piece of code you can use to build different types of games. ¬†This week we looked at doing a top down scrolling game engine. ¬†It’s still pretty basic at the moment¬†but¬†it’s enough to get started on some projects of your own. ¬† What can you build with it?

Top Down Scrolling Game Part 1 Notes

screenshot-week1

Download the code for part 1 here.

Scratch Advanced: Twister Part 2

There was a huge group for today’s class where we took the Shape block from last week and built an amazing Twister project out of it.

We learnt:

  • more about angles and Sine and Cos
  • some basics of creating 3D illusions on a computer screen

week2

Twister Notes Week Two.

We didn’t get it quite finished, but managed to get to some 3D. Follow the notes to get to the end and check out this sample project that has all the pieces from the doc and a few extra features in. It’s addictive playing with the twister!

Download the completed project here!