Creators: Snake

This week we looked at creating a user-steerable snake in the style of the classic phone game.

8185657641_2761c2acd2_z

Image from James Hamilton-Martin, Flickr

Things we need

The snakes head moves and the rest of the snake’s body is made up of places the head’s already been, up to a certain point. For this we use a JavaScript array (we’ve also called it a list at times).

We don’t want the snake’s length to grow indefinitely, so we have a maximum length. Once the list of stored locations gets larger than this, we use the JavaScript splice() command to remove the first (oldest) element from the list.

Direction and turning

Screen Shot 2018-02-06 at 22.59.28

We assign numbers to represent directions on the screen. Zero is right, one is up, two is left and three is down. Note then that if the snake is heading right (in the screen sense) and turns left it goes to up (in the screen sense); direction goes from zero to one. Similarly, if going up (in the screen sense) and it turns left then it goes to left (in the screen sense).

Generally then we note that turning to the left makes the direction number get bigger while turning to the right makes it get smaller. This rule hold until we get to a number bigger than three or smaller than zero; these make no sense. If direction is at zero and the snake goes right, we set direction to three. Similarly, if direction is at three and we turn left, we set direction to zero.

Getting this week’s code

As always, all the code from our Creator group can be found on our GitHub repository.

Creators: Spirograph

This week in the Creators group we looked at emulating the classic toy, the Spirograph.

spirograph3

The Spirograph consists of geared plastic discs. One disc is fixed in place over a sheet of paper and the other, with a pencil tracing the path, is allowed to spin around it. The result is a complex and beautiful design on the paper.

Screen Shot 2018-01-30 at 17.04.14

This diagram should help explain in conjunction with the photo. The centre of the black disc spins around the centre of the red disc, which itself doesn’t move. So the centre of the black disc rotates around in a circle. Pretty simple?

Now, the pencil itself rotates around the centre of the black disc. Shouldn’t that make a circle too? Well it would if the black disc wasn’t moving. Thankfully though, it is and that’s what makes this interesting.

Finding the Location of the “Pencil”

So how do we find the location of the pencil? Let’s look at our diagram again, but with things re-labeled a bit:

Screen Shot 2018-01-30 at 17.33.58

  • Centre: Formerly “centre of red disc”. It’s the fixed centre of our spirograph
  • Centre2: Formerly “centre of black disk”
  • Point: The point on our curve. This is where the pencil would be in a physical spirograph.
  • Radius0: Distance from Centre to Centre2
  • Radius1:Distance from Centre2 to Point
  • Angle0: The current angle of the line between Centre and Centre2
  • Speed0: The amount that angle0 increases every time we draw
  • Angle1: The current angle of the line between Centre2 and Point
  • Speed1: The amount that angle1 increases each time we draw

So at any time the location of our point is:

Point = Centre + [Centre2 relative to Centre] + [Point relative to Centre2]

So know where Centre is and if we can calculate where Centre2 is relative to Centre and similarly where Point is relative to Centre2, we can just add them all together!

Given an angle and a distance, can we get a location?

The answer to this is a resounding “yes”! Look at the diagram:

Screen Shot 2018-01-30 at 17.56.34

given an angle and a radius, we can calculate the X and Y position of any point around a circle. The magic is the COS and SIN (pronounced “kos” and “sign”) functions. These functions exist in almost all programming languages and JavaScript’s no exception.

Using p5.Vector

The last big concept we tackled thus week was using P5js’s built-in vector class to store (x, y) points and make our code tidier. To make a vector we just use createVector(x, y). We can then use functions to add them together, etc. We would get the same result working with the X and Y values separately but the code is a lot neater and shorter.

And in conclusion

This looks pretty cool:

 

Getting this week’s code

As aways, all the code from our Creator group can be found on our GitHub repository.

 

Creators – Arrays and Classes

Several Values in One Place

This week we looked at two very useful concepts in JavaScript, Arrays (we’ve also called them lists) and Classes (we’ve also called them objects). They are both things that allow one variable to store more than one value at at time. This can often be very convenient and has the potential to save us a lot of typing! Who doesn’t like that?

Arrays

A plain variable in JavaScript can store a single value, we’ve seen that loads of times:

let a = 5;
let b = 7;
let c = a + b; // will be 5 + 7 = 12

An array variable in JavaScript can store more than one value, just by putting them in square brackets and separating them with commas:

let a = [5, 7]
let c = a[0] + a[1]; // This is the same as above!

The code here does the exactly the same thing as the block above it. See that a now has two values in it and we use a[0] to get the first value and a[1] to get the second. This technique isn’t super useful when we only have two values, but the more we have to store, the more useful this gets. Imagine if we had 10 values,  how much shorter would the array version be?

You can also create an empty array and put values in it later:

let a = [];
a.push(5);
a.push(7);

In the code above we create an empty array (nothing between the square brackets) and then use the push() function to add two values into it.

Concept of Classes

A class is a programming concept that lets you define objects which contain both Properties and Methods. Properties are values associated with the object. Methods are actions that we can ask the object to perform.

class

Think of yourself as a Person object and imagine some of the Properties and Methods you might have.

Your Properties might include NameAgeHeightWeight, etc. A simple Method you might have could be SayHi(). That would make you say “Hi, it’s <Name>!”.

A method might have arguments, so it could be SayHiTo(“Dave”) which would make you say “Hi Dave!”.

Classes in JavaScript

Making classes in JavaScript is pretty easy. Let’s look at the Person class we showed above:

class Person{
  constructor(name, age, height, weight){
   this.Name = name; 
   this.Age = age; 
   this.Height = height; 
   this.Weight = weight;
  }
  
  SayHi(){
    Console.Log("Hi, it's " + this.Name + "!");
  }

  SayHi(who){
     Console.Log("Hi " + who + "!" );
  }
}

We say “class“, the name of the class and a pair of curly brackets. Inside these brackets we have three functions (but notice we don’t have to say “function“).

Let’s look at the first of these, called constructor(). This is where we set the class properties. Note that we must put “this.” before properties to distinguish them.

The second two functions, SayHi() and SayHiTo() aren’t too usual, again note that we must use “this.Name” to get the value of the name property.

Download

This week we created a class to represent a bouncing ball and we saw how easy it was, once we’d created the class, to make several of them, all bouncing around simultaneously. This would have taken us a lot more code to do if we hadn’t made a class. As always, the files can be downloaded from our Github page.

 

 

 

 

 

 

Creators – Being Random

Screen Shot 2017-10-17 at 00.56.49

This week we mainly looked at three things:

  • How data is organised on your computer
  • Creating functions
  • Using randomness to make things interesting

Data Organisation

Most of us had heard of a hard-disk before. This is a stack of metal disks inside your computer. Each metal disk has a special coating made of millions of tiny magnets (like you might find stuck to the fridge) that can be turned on and off.11644419853_9499fa0faa_b

We saw that able to turn something on and off, like a switch, was enough to count from zero to one, but the more switches we added, the higher we could count. Two switches can count from zero to three:

Switch 1          | Switch 2          | Total (Add)
[Off = 0, On = 1] | [Off = 0, On = 2] |
------------------+-------------------+-----------
Off = 0           | Off = 0           | 0
On  = 1           | Off = 0           | 1
Off = 0           | On  = 2           | 2
On  = 1           | On  = 2           | 3

With enough of these tiny switches, we can store anything we need. Each of these tiny switches is also known as a ‘bit’ and a 1 terabyte hard disk has a billion of them!

We also saw that the files on your disk are arranged with folders (also known as directories). Folders can contain both files and more folders. This allow us to keep our hard disk organised; without them all our files would be in the same place which would be difficult once we had more than a few. The location of a file is called its “path”. Looking at the highlighted file on the desktop of my Mac we can see the full path would be:

Screen Shot 2017-10-16 at 22.19.59

/Users/kierancoughlan/Desktop/Ball and Bat Sounds.m4a

 

This means that, reading backwards, the file called ‘Bat and Ball Sounds.m4a’ is in a folder called ‘Desktop’ which is itself inside a folder called ‘kierancoughlan’ which is, at the highest level, inside a folder called ‘Users’.

Functions

A function is a collection of commands that do a job together. We’ve already encountered them, even if you hadn’t especially noticed:

  • Our P5 template already contains two functions called start() and draw()
  • All of the P5 commands we have used, such as createCanvas() and rect() are functions themselves

We could add all our code to start() and draw(), in fact, that’s what we’ve done before this week. That’s fine starting out, but it does mean, once there are a lot of commands in those functions, that our code is gets harder to read and understand. Breaking out a few commands into a new function and giving it a name that describes what it is doing, really helps.

Once we’ve written a function, it can be called as many times, and from as many places, we as need.

Functions can do one other thing too: they can give back a value to the place where they were called from. For this we use the special word return. For example, let’s see what a function to pick the largest of two numbers, we’ll call it Max(), might look like:

function start(){
    let a = 4;
    let b = 10;
    let c = Max(a, b);
}

function Max(n1, n2){
    if (n1 > n2)
        return n1;
    else
        return n2;
}

We give Max() the two numbers we are comparing. If the first one is bigger than the second, it gives back the first. Otherwise, if gives back the second. Note too that the names of the variables in Max() are different to those in start(), and that’s not a problem.

Random

Finally, we looked at the P5 function random(). We used it two different ways:

random(); // gives a number between 0...1
random(n); // gives a number between 0...n (where n is a number!)

In the first form, we used it to pick a random colour. In the second, we used it to pick a random position for our squares.

Files

As usual, all the code is on the creators github repository. Head there and download it!! The files for this week contain both the script we wrote (sketch.js) and a longer version that I wrote (sketch2.js). Feel free to take a look at both!

Congratulations to all our ninjas who received belts in Summer 2017!

This slideshow requires JavaScript.

On 27 May 2017, at our final CoderDojo Athenry session of the 2016-17 year, we awarded a total of 93 belts to our ninjas for their great individual achievements in acquiring and demonstrating coding and computing skills. And then we had a party with pizza!

Here is a link to our presentation from the day: CoderDojo Athenry Belts Day 2017

We are very grateful to Clarin College Athenry and the principal, Ciaran Folan, for their enabling CoderDojo Athenry by making the school and its wifi available to us.

We are also very grateful for the sponsorship and support we have received this year:

  • Galway Roscommon Education and Training Board, who provide us with an annual Youth Club Grant
  • Medtronic, employer of our mentor Declan Fox, who provide us with a grant to match Declan’s excellent volunteering
  • HP Enterprise, employer of our mentor Mark Davis, who provide loaner laptops that we make great use of
  • Boston Scientific, employer of our mentor Kevin Madden, who provided us with a set of 3D printers this year, which allowed a great new learning experience

Because of these supports, no child or parent/guardian ever has to pay to participate in CoderDojo Athenry.

This year also, mentor Martha Fahy introduced a new idea, “Java Dojo”, where parents can buy a cup of tea/coffee, providing additional funds. With these, we have been able to buy a speaker system, electronics needed by some of our groups, and our own 3D printer! Thank you, our CoderDojo ninja sidekicks!

And of course we must thank our mentors, who volunteer their time and expertise entirely without charge week after week, to make CoderDojo Athenry the success that it is.

Here is the full list of belts we awarded:

  • Explorers:    44     (39 Yellow & 5 White)
  • Advancers:  18
  • Bodgers:     17
  • Hackers:      8
  • Creators:     5
  • Black Belt:   1

Special mention must go to Eoin Clarke, who received our first ever black belt award. Eoin has been in CoderDojo Athenry for several years, working his way up through the groups, and this year took on the role of Mentor. Well done, Eoin!

Above are some photos of the belts awarded. You can find more on our Facebook page: https://www.facebook.com/CoderDojoAthenry/posts/1465673366786859

CoderDojo Athenry is now closed for the summer. See you all in September!