Bodgers – Making a better game

Hello again everyone.

We continued working with Pygame Zero this week, we began by getting everyone up to date with where we were with the game. I forgot to mention we were following the tutorial at https://pygame-zero.readthedocs.io/en/stable/introduction.html. We then changed the screen size and added a score to make our game more fun.

Capture6

Next week we will add some elements to make our game more difficult and even more fun.

I don’t have any slides this week but the code for both versions of the game are available here: https://www.dropbox.com/sh/ccfaycpa1zluh8l/AAAA4dQH8EPNJicsQj7RwGgsa?dl=0

See you all next week.

Declan, dave and Alaidh.

 

Week 7 2018 Explorers – How fast can you type?

Hi everyone,

Thank you all for coming on Saturday.  A lot of us had to fit into the Advancers Room but we managed. We should be back to our own room next. Thanks to Oliver and his crew for moving to another room for us.

This week we did a new game, How fast can you Type? This week we used Backgrounds as Sprites. Just to mix it up!

We used a variable as our Timer, as we did with our Maths Guessing Game!

Full notes from today are here in PDF CDA-S7-Week 7-How fast can you Type.pdf

And my own game from today is up on the scratch.mit.edu website.

See you all next week.

Martha

Julie and Ruaidhrí

Bouncing around in Javascript

This week we looked at animations, and how to make objects move in p5.js.

We covered:

  • How to animate things in p5
  • Some mouse interaction

Animation in javascript (or all programming really!) is basically changing some variables in the draw function before we actually draw the object.  If we change each variable by a little bit, it looks like smooth movements, just like a cartoon!

To save some typing, there is a video below with a quick overview of what we did:

Okay, it’s pretty simple stuff and not exactly the most exciting animation in the world, but you guys did some playing around and came up with several interesting variations and now we know how to do it, the sky is the absolute limit on what we can build  🙂 !

As usual, the code is up on the github to be pulled down and played with or changed to your heart’s content!

 

Bodgers – Making With Pygame Zero

logo

Hello again everyone.

This week in the Bodgers group we started working with Pygame Zero. Pygame Zero allows us to write our own games quickly and easily by doing a lot of the work involved in setting up and running a game in the background. This allows us to focus on the more creative aspects of the game.

You will have to install Python and Pygame Zero if you’re going to use Pygame Zero at home, details on how to do this are in my slides. A few of us had installation problems on Saturday, so don’t worry if you have issues we will help sort it out when we return after the break.

We followed the first few parts of this tutorial: https://pygame-zero.readthedocs.io/en/stable/introduction.html. I gave everyone a folder with images and sounds for our game which you can find here: https://www.dropbox.com/sh/3q14pg3huev4pwb/AADjDuB0FBVZXM4ChqN8qRx2a?dl=0. Copy this folder on to your own computer and you’re ready to go.

Here are my slides from Saturday: day 5

See you all on the 10th of November.

Declan, Dave and Alaidh

Explorers Week 6 – Guessing Game!

Hello Everyone,

Great to see you all on Saturday and welcome to our new members.

We made a slight departure from the games we have done in previous weeks. This weeks game was a mathematical Guessing Game.

DUCK

We only had one sprite and one large block of code. We had to create variables and figure out all the possible situations that could occur when a guess was made.

guess

Here are the notes in PDF form from our Week 6 Session. CDA-S7-Week_06-GuessNumbers.pdf

I have also uploaded the game to the Scratch Website in our Explorers Account so you can see the full working game.

Advancers -Boiling Water

Introduction

This week we looked at what happens to water molecules when they are heated up.

We started with a little science experiment to demonstrate Brownian Motion, this was done with a glass of very hot water and a glass of very cold water and some ink.

When the ink is dropped in the two glasses it behaves very differently, in the cold water the ink stays suspended and visible as ink for a long time, but in the hot water the ink gets mixed into the water molecules very quickly, this is because the water molecules in the hot water are moving around much faster and bashing into the ink molecules and mixing them up.

BrownianMotion

Can you guess which glass has the cold water in?

The Plan

The plan was to build a scratch program that would  show the water molecules moving around faster or slower, depending on temperature. In order to do this we needed the following:

  • A Sprite for our water molecule
  • A slider to control the temperature
  • Some code to make them move around.

The Sprite

Water molecules are made up of 2 Hydrogen atoms and 1 Oxygen atom (H2O), the Oxygen atom is quite large compared to the Hydrogen atoms and the Hydrogen atoms stick to the Oxygen atom at about a 45 degree angle, they end up looking like Mickey Mouse, so our Sprite looked something like this:

Sprite            SpriteSettings

We changed the settings of the Clone so it didn’t rotate.

The Temperature Slider

In order top control the temperature we created a variable, making sure that it was set for “All Sprites” and that it was set to be a slider. We also set the minimum and maximum values:

TempSlider

The Code

As we needed lots of these Sprites we decided to use the Create Clone block (Control) to create 100 of them.

In order to move the Sprites around we needed to keep looping, picking a random direction and then moving a little bit. We also needed to change the amount we moved and also the direction as the temperature went up. The direction needed to be more upwards as the temperature got higher so the water molecules would start floating like steam if the temperature got high enough.

We used a Gravity variable to make sure the Sprites pointed upwards as the temperature got higher, because this needed to be different for all the Sprites so they moved in random directions, we created the Gravity variable “For this Sprite only”

The code ended up looking like this:

GreenFlagCode

 

Initialise the Temperature variable and then create 100 clones.

 

 

 

CloneCode

 

Initialise the Sprites Gravity variable

Pick a random spot along the bottom of the Stage

Make sure we are pointing more towards the top, depending on the temperature.

 

 

If the temperature is > -1 move around, otherwise we are frozen, so just go back to the bottom of the screen.

 

 

Notes:

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

User Name : cdadvancers1819
Password : advancers

Project : Class-BoilingWater

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.

Bodgers – Making Pictures With LEDs

Hello again everyone.

We started of this week’s session by looking at the recent Soyuz rocket launch which was to send two people to the ISS. During the launch one of the booster rockets failed and the launch had to be aborted. Both crew members, astronaut Nick Hague and cosmonaut Aleksey Ovchinin, escaped without injuries.

We then continued to work on our pictures and messages for the Mission Zero Challenge. I made a video of some of the work we did, but it’s very hard to film LEDs so the quality is very poor.

If you want to find out more about the Soyuz incident and have another look at how to make pictures and messages with the Sense-hat LEDs my notes are here day 4.

Next Saturday we’ll start looking at Pygame Zero. See you all then.

Declan, Dave and Alaidh

Creators – Pattern

washer-machine-porous-mechanical-83852

This week we looked at two important concepts, loops and lists.

Loops

Start by imagining we wanted to draw four circles next to each other. We could write four calls the ellipse function, like this:

let size = 50;

ellipse(25, 25, size, size);
ellipse(75, 25, size, size);
ellipse(125, 25, size, size);
ellipse(175, 25, size, size);

Pretty easy. What if we had variables for the positions? We’d get this:

let size = 50;
let x = size / 2;
ley y = size / 2;

ellipse(x, y, size, size);
x = x + size;
ellipse(x, y, size, size);
x = x + size;
ellipse(x, y, size, size);
x = x + size;
ellipse(x, y, size, size);
x = x + size;

It’s longer than before, but notice how the same two lines now keep repeating. If we had a way to say “do these two lines four times” then this would get much shorter, and we do. We use the for statement:

let size = 50;
let x = size / 2;
ley y = size / 2;

for (let i = 0; i < 4; i++){
  ellipse(x, y, size, size);
  x = x + size;
}

The for statement is a bit complicated, so let’s break it down:

for (do first; check to see if we keep going; do every time 2) {
  do every time 1
}

Note the curly brackets (braces) containing the stuff we want repeated.

So in our case we:

  1. First create a new variable called i and give it the value 0
  2. Check to make sure that i is less than 4
  3. Draw our ellipse and make x bigger
  4. Increase i by 1
  5. Go back to step 2 and check if we can keep going, otherwise stop

This means that i will have the values 0, 1, 2 and 3 and our two lines will be run four times in total. Result! Our code can draw a row of circles. If we increase the value in the check, we can have as many as we like. We choose to have 8.

Nested Loops

Nesting a loop means putting one loop inside another. What’s the point of that? Well in our case we have a loop that can draw a single row of circles. If we put all of that inside another loop we could draw several rows. The row outside has a different variable j and also runs eight times. After we draw our row we do two things:

  1. We make y bigger move down the screen
  2. We move x back to the left to its starting position for the next row

The code now looks like this:

let size = 50;
let x = size / 2;
let y = size / 2;

for (let j = 0; j < 8; j++){
  for (let i = 0; i < 8; i++){
    ellipse(x, y, size, size);
    x = x + size;
  }
  y = y + size; // Move down and
  x = size / 2; // Back to the left
}

We now have 8 x 8 = 64 circles in a grid.

Changing the Colour of Some Circles Based on a Check

We then added code just before our call to ellipse() to change the colour based on some check:

if( /* some check here */ ){
  fill("red");
}
else {
  fill("white");
}

We experimented with some different checks to see what might happen. This check turns the upper-left of the grid red:

if (i + j < 8 ){ 
  :  :  :

This check, using the modulus operator, turns every third circle of the grid red:

if ((i + j) % 3 == 0){ 
  :  :  :

This check paints a red cross through the centre of the grid:

if (i == 3 || i == 4 || j == 3 || j == 4){ 
  :  :  :

Lists

We then jumped quickly into lists. Also called arrays, lists are like a variable that can store several values. We create them simply like this:

let a = []; // An empty list
let b = [1, 2, 4, 7]; // A list created with four entries

To get at the entries in a list you just use the list variable’s name and square brackets containing the number of the entry in the list you want to get out, noting that the first one is zero:

b[0] = 10; // Set the first entry in the list to ten
b[4] = 301; // Set the fifth entry in the list to three hundred and one

A list isn’t just for holding numbers though, it can hold anything. It can hold strings for example, or even other lists!

It’s this idea of holding lists that we use to define our pattern.

Defining our Pattern

We make a list with eight entries, each of which is a list also containing eight entries, all zero. We write it so it forms a neat block like this:

let pattern = [
  [0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0]
];

Then down in our code, where we’re deciding what colour to make our circles, we change the check to read:

if (pattern[j][i] == 1){  
  : : :

What does this mean? Well, j is a counter that goes from 0 -> 7 as we go down our eight rows. Given that, pattern[j] means get entry from our list for that row. Since pattern[j] is a list too, we need to say which entry we want in. The variable i goes from 0 -> 7 as we go across each row. So, pattern[j][i] gets the list for the row and then picks out the number for that column.

Once it’s set up, we can then change zeros to one in our pattern and have our circles turn red to match (red in the text below to make them stand out):

let pattern = [
  [0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 1, 0, 0, 1, 0, 0],
  [0, 0, 1, 0, 1, 0, 0, 0],
  [0, 0, 1, 1, 0, 0, 0, 0],
  [0, 0, 1, 1, 0, 0, 0, 0],
  [0, 0, 1, 0, 1, 0, 0, 0],
  [0, 0, 1, 0, 0, 1, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0]
];

Screenshot 2018-10-15 at 18.14.34

We have essentially built something that works like an image file! Our pattern is the image data and our program is the code that draws it.

As several smart people already noticed, you’re not limited to one and zero. By using more numbers, and expanding the if statement, you can have as many colours as you like.

Download

The files for this week are on our GitHub, as always.