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

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

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:

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.

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

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:

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!

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:

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:

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!

The game looks quite cool when finished!