Week 9 Explorers – Scrolling backgrounds

Hi Everyone

We started work on on our scrolling platform game this week and I showed you all how to get started. You can customise even further to suit your game as the weeks go on .

To understand the concept, you must understand that the STAGE is only 480 pixels wide (x goes from -240 to +240). No one SPRITE can be larger than the STAGE and we won’t be able to see a SPRITE that isn’t on the STAGE (ie. it’s x position is less than -240 or greater than +240). So we have to set up a series of SPRITES that extend past the stage and move them across the stage from left to right and under Mario’s feet to make it look like he is moving over the ground from right to left!

1. We started picking our character from the internet or from the Sprite Library

2. Next, we drew our own Ground SPRITE using the PAINT NEW SPRITE button. Important!! The sprite must be the full length of the stage!! See the 1st picture above for an example of what the ground sprite could look like. Mine looked like a brick wall, but yours can look like a stone wall or concrete one or some kind of footpath or road.

3. Now we must code our Ground SPRITE! We need to set it’s inital x position to zero and continuously move it in a direction for as long as we are pushing the right or left arrow buttons. To do this we need a new VARIABLE called XPOS. Go to DATA and create this new VARIABLE. See the image below on the bottom the instructions for setting up the initial position of the first ground SPRITE. After you create and code the first one, we can duplicate Ground SPRITE 1 and create Ground SPRITE 2. Be sure that Ground SPRITE 2 has an xpos set to 480 pixels more than Ground SPRITE 1.

cda-s5-challenge-12-scrolling-ground_sprites_1

4. Lastly, for this week, we need to get the Ground SPRITES to move!!

!!IMPORTANT! !Click the little i button on your Ground  SPRITE and see all the information about the SPRITE. Change the rotational direction of the Ground SPRITE to non-rotational. It is a button that looks like a dot.

We then coded the Ground SPRITES to move to the left when we press the left arrow key and to the right when we press the right arrow key on our keyboards.  See below: Be careful to program the left arrow key to Point In Direction 90 and the right arrow key to Point In Direction -90. Notice both the Change xpos By commands have different numbers! (-5 and +5) Get these wrong and the SPRITE will not move in the correct direction. Once you have the 1st ground SPRITE working the way you like, duplicate it and all it’s coding. All you have to change in Ground SPRITE 2 is the xpos. It must be set to XPOS +480. If you duplicate that sprite, you must set it’s xpos to XPOS + 960 and so on and so on…cda-s5-challenge-12-scrolling-ground_sprites_2

We will add some obstacles this week and maybe have some rewards for our character as well.

See you Saturday

 

Martha

Bodgers – Pygame Zero

This week we took a break from hardware and we looked at Pygame Zero. Pygame Zero is for creating games quickly and with fewer lines of code than would be used with Pygame. It is intended for use in education, so we can learn basic programming without needing to understand the Pygame API or how to write an event loop.

Pygame Zero is designed for the Raspberry Pi but it can be installed on other systems, we used Windows without much hassle. It comes installed on the Raspberry Pi already if you have a recent version of Raspian. To install on windows open a command prompt and type:

pip install pgzero

You may need to install Pip if you didn’t install it when you installed Python. To do this go to Control Panel/Settings and then Add/Remove Programs, scroll down and click on Python then click on modify, tick the Pip check box and save your changes.

To run your code from Idle or any other IDE you need to add two lines to your code, at the beginning before any other code you need:

import pgzrun

and at the  end of your code put:

pgzrun.go()

We will be using Pygame Zero for graphical input/output in our projects but if you want to have a go at writing a game, CodeConjuring’s Froggit youtube tutorials are a good place to start.

 

See you all next week.

Declan, Dave and Alaidh.

Fractal Fun In Javascript

This week in Creators we looked at a brand new concept – functions that actually call themselves – also known as recursion.

recursion1

Though this seems at first glance like a really silly thing to do, we were quickly able to use it to generate some pretty effects.

The main things to remember about the recursion are:

1. Make sure to give it something that will let it exit – a function calling itself forever will not work and the browser will crash or throw an error.  For us, we passed a value as a parameter and made it smaller each time, exiting when it fell below a certain value.

2. Do the math! Recursion leads to big numbers of operations very quickly and can slow down or crash a browser easily.  Make sure to save often and think about the amount of times your function will run.

Recursion is really handy for cases where there are lots of operations that are similar.

Circle Pattern Project

In this project, we wrote a function which draws a shape (we picked a circle) before calling itself three times to draw the shape to the left, right and below.  The code is below:


function drawShape(x, y, size){
if(size > 5){
stroke(random(255), random(255), random(255));
fill(size, 50);
ellipse(x, y, size, size);
drawShape(x+size/2, y, size/2);
drawShape(x-size/2, y, size/2);
drawShape(x, y+size/2, size/2);
}
}

Notice the If statement?  This means that it will not bother drawing circles smaller than 5 pixels in diameter – this allows the code to work.

This simple code generated the following pretty fractal:

fractal_circles

Fractal Tree

For the next project, we used very similar code to create a beautiful fractal tree.  In this case we wrote a “drawBranch” function which can draw a branch at a given angle and length.

We added a little code to allow us to change the angle that the branches fan at – the fanangle – dynamically.  Depending on the variables, we could slow down our computer quite easily – the trick is to think about how many lines your computer will need to draw.

recursive-tree-steps

Each function called itself to draw a pair of smaller branches off of it.  The tree is shown below – just before I checked the code in, I added a little if statement to color the branched brown if the length is > 50.  The result is below:

fractal_tree

This looks quite pretty and is fun to play with if you have a pretty fast computer – play with it here:

https://coderdojoathenry.github.io/creators2017/week16-tree/index.html

As usual, all of our code is on the Creators 2017 github repository.

Creators: Robot Arm

cpccg_screening_robot

This week we looked at a representation of a robot arm. The body of our robot is allowed to slide horizontally and the arm can pivot at the shoulder (where the upper arm attaches to the body) and at the elbow (where the lower arm attaches to the upper arm).

Transformations

An important point about this project was to show how transformations add up together. Transformations include translations (moving in straight line), rotations (turning about a pivot point) and scaling (changing size). We’ve used translations and rotations for our robot.

In P5, the origin, or place where the x and y coordinates are both zero is at the upper left-hand corner of the screen. The x coordinate gets bigger as we move right and the y coordinate gets bigger as we move down.

When we translate, we move the origin to somewhere else. This is handy for a few reasons but if we are performing rotations. All rotations happen around the origin, wherever that happens to be at the time.

This diagram shows all the transformations we use for our robot:

Robot DOFs (1)

  1. Translate to move the origin to the centre of the robot body
  2. Translate to move the origin to the shoulder
  3. Upper arm rotation at the shoulder
  4. Translate to move the origin to the elbow
  5. Lower arm rotation at the elbow

Because these transformations stack up on top of each other, this is what each part experiences:

  1. Body – Transformations: 1
  2. Upper Arm – Transformations: 1, 2, 3
  3. Lower Arm – Transformations: 1, 2, 3, 4, 5

The body is only affected by one, but the lower arm is affected by all five.

Movement

To move the robot, we set up three variables:

  1. bodyPos to store the body position (our first transformation)
  2. upperArmAngle to store the rotation at the shoulder (our third transformation)
  3. lowerArmAngle to store the rotation at the elbow (our fifth transformation)

We created a function called handleInput() called from the draw() function (which is called every frame). In that we used the keyIsDown() function from P5 to check for keys being held down. We made the left/right arrow keys move the body horizontally, the up/down arrow keys rotate at the shoulder and the Z/X keys to rotate at the elbow.

Source Code

As always, the code can be downloaded from our GitHub repository.

Deadline for Registering for Coolest Projects 2018 is 25 March

Coolest-Projects-large.png

25 March 2018 is the deadline if you would like to enter Coolest Projects, which will take place in Dublin on 26 May. You can find out information and register here: http://coolestprojects.org/

We have had lots of great participation from CoderDojo Athenry at Coolest Projects in the past few years, from our youngest members to our oldest, in all of our groups. People who enter find it a fun and rewarding day.

Here is a presentation from 2 years ago about entering:

https://coderdojoathenry.org/2016/03/03/information-about-coolest-projects-2016/

Week 6 2018 Explorers – Greeting Card

Hi everyone,

Good to see everyone after our unplanned extended break, but it was nice to see some snow too!

This week we did a Greeting Card, I did a birthday card but some of you did a Mothers Day, I’m sure all your  Moms loved them.

I have uploaded the finished card up to the scratch website. You will find the log in details in the notes below.

Here are this weeks notes in PDF CDA-S7-Week 6-GreetingCard.PDF

Enjoy the break!

 

Martha

Advancers: Motorway Madness

This week in advancers, we simulated a true story!  Once Mark was driving past Athlone and encountered a car driving the wrong way down the motorway.  In this case it was a poor old gentleman who had somehow ended up turning down the sliproad, but we wrote a game which simulated the incident from a crazier drivers point of view!

The idea of the game was to drive as far as possible the wrong way down a 4-lane motorway before you crash.

The finished game is here if you want to play with it or look at the code!

Step 1: Draw the car

Out first step was to draw a car – we did this by switching to “Vector” mode and dragging a few boxes together – this is mark’s car below:

motor-01-draw-car

Step 2: Draw the road

The next step was to draw the road – the road was drawn the same way, using vectors.  One key point here was to space out the lanes more or less evenly, and to use the “Shift” button to ensure that the lines on the road were at 90 degree angles.  We drew the gaps in the white line using grey lines the same colour as the road.  A few bushes and buildings completed the scene!

motor-02-road

Step 2: Make the road scroll!

In this game, we wanted the road to scroll from top to bottom.  This meant that the ySpeed of the road was negative.  We also wanted the road to move back to the top whenever it got to the bottom.  We had done side-scrolling with multiple sprites year ago in Explorers, and this was the same idea – however we managed to do it with just one sprite by using clones in the code below:

motor-03-road-scroll

 

Step 4: Make the Car Move!

In this step we started off with basic movement – we were going to get to more realistic physics, but ran out of time!  I’ll see if I can show the code for this at the bottom and you can add it in yourself!

To make it move, we just checked for left and right arrows and added speed accordingly:

motor-04-player-code

Step 5: Enemies!

The game was already starting to feel fun, but it’s a lot better with some unsuspecting traffic on the road!  We cloned the “player” sprite, and created a bunch of costumes to represent different styles of vehicle:

Next we wrote some code VERY similar to the scrolling background code for the enemy – this also reappears at the top when it reaches the edge – the difference being that it appears in a random lane and with a new costume.  This turned out great!

Final Step: Game Over

The final step was a “Game Over” text sprite – this shows whenever the player crashes!

This was a really fun game – I enjoyed making it a lot!

Exercise: Realistic Turning Physics

I said I’d have a go at realistic turning physics for the car – this code works and looks great – try adding it to your game to see what you think – basically it turns the front of the car realistically and the back skids around like a real front-wheel-drive car.  It was a bit tricky so I’m glad I didn’t push it as people would have gotten really tired as I tried and failed a few times!  Just pop this code into your “player” script anywhere near the end!

motor-07-realistic-physics

The game looks quite cool when finished!

 

 

 

 

 

 

Week 5 2018 Explorers – How fast can you type?

Hi everyone,

Thank you all for coming on Saturday. I hope you liked the short video of the SpaceX Falcon Heavy Test Launch and the Intel Light Drones from the opening Ceremony of the Winter Olympics.

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

We used a variable as our Timer, our first time doing this, don’t forget if you want the time to start when you press the first letter rather than when the green flag is clicked then you are going to have to add another broadcast.

We are off for the next two weeks, to cover the school mid term break and also as Confirmation for all the Athenry Schools takes place on the 24th of February and there will be many families attending this from Coderdojo Athenry. Best wishes to any of our Ninjas and families who are being confirmed.

Hope you all have a great break and hope to see you all back on the 3rd of March

Bodgers – RPM & KPH

Last Saturday we had a look at how we might figure out how far and how fast a bike is going using a Raspberry Pi. We used a very basic set up with just a micro-switch attached to a toy trike with a little nut taped to the front wheel, each time the wheel rotates the nut would “click” the micro-switch.IMG_20180214_122408

We would need to use a reed switch or a hall effect sensor and a magnet attached to the wheel if we were to use this on a real bike.

We started of our coding by looking at the time.time() function. This function returns the number of seconds, in decimal form, since 01 January 1970. If we want to time an event all we have to do is use time.time() to get the start time and use it again to get the end time and then subtract the the start time from the end time.

We used this to get the the amount time it takes to do one rotation. Now we want to find out how many rotations we have per minute or RPM (revolutions per minute). As our result is in seconds the easiest thing to do is calculate revs per second so we divide 1 by the time it takes to do 1 rotation and then multiply the answer by 60 to get RPM.

Now we wanted to get KPH(kilometres per hour) so first we measured the circumference of the wheel and found it was 50cm or 0.5 Metres. We then calculated metres per minute by multiplying our RPM by 0.5 and we then multiplied this by 1000 to get KPH.

Here’s a picture of what our results could look like when displayed using Pygame. We will look at Pygame later on as it’s an excellent way of displaying information.IMG_20180214_122722

See you all after the break.

Declan, Dave and Alaidh