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.

 

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.

Creators – Basic Scripting

Screenshot 2018-09-30 at 11.22.16

 

This week we were joined by some additional ninjas, welcome! We had to do a little revision of the first week’s content and probably didn’t manage to get quite a much done as I’d hoped.

Let’s review what we did manage to get done.

Embed a simple script in a web-page

The first thing we did was to create our folders for this week and then create a brand new HTML file called index.html. We then embedded a simple script in our html file using the tag, like this:

window.alarm("I'm alarmed");

When we opened our page in Chrome, our message popped up as an alert.

Seperate that script into its own file

We then created a new file in our folder called script.js. We cut out everything from in between our and tags and pasted it into this new file:

window.alarm("I'm alarmed");

and in our HTML file we gave the tag the name of this file instead, using the src= attribute (short for “source”) :


Our script continued to work as before, as we’d hoped.

The advantage of moving scripts into their own files is that as we get more scripts and these scripts get more complex, keeping them all within the HTML file gets messy and difficult to work with.

Developer Tools

The developer tools build into Chrome, and some other browsers, help us see what is happening with our pages and scripts and helps us to fix them when they’re not working correctly.

To open the developer tools, open the menu in Chrome (the three dots in the upper-right of the program) and select More Tools | Developer Tools.

The console, part of the developer tools, is a place for us, as programmers, to write out things that will help us check if our script is doing what we want it to do. Ordinary users never see what developers write to the console.

To write to the console, we changed our script.js to read:

console.log("I'm alarmed");

The message box stopped appearing and this message could only be seen by looking at the console.

Basic Script Concepts

The most important basic concept in programming is that of a variable. A variable is just a place to store something and a name to refer to it by. We can make a new variable, in this case called a, like this:

let a;

The first word, let, is known as a keyword and tells JavaScript “we’re going to make a new variable”. The name of the variable, in this case a, comes next and finally a semi-colon (;) to show that this line is finished. The semi-colon is how we mark the end of a command in JavaScript and it’s an easy thing to forget.

We quickly made this example more complex:

let a = 4;
let b = 5;
let c = a + b;

console.log("c");
console.log(c);

In this extended example we defined three variables called a, b, and c respectively. Not only do we define them, we also assign them a value (using the operator =) at the same time. The first two are just given a simple value, but c has a value calculated from adding a and together.

The two console.log() line are to show the difference between actually writing the letter c to the console (as in the first line) and writing the value of the variable called c to the console (as in the second line).

Strings

Strings are how we hold a piece of text in a program. Strings are surrounded by quotations marks:

"This is a string"

I didn’t mention the last day, although I mean to, that JavaScript also allows strings with single quotes, which many other programming languages do not:

'This is also a string'

We experimented with changing our script so that instead of numbers we set our variable to strings:

let a = "4";
let b = "5";
let c = a + b;

console.log("c");
console.log(c);

and in the console saw the perhaps surprising result:

c
45

We determined that when we have two number variables the operator + does normal addition but when one or both are strings it makes a new string with the two stuck together (this is often called “concatenation”).

We introduced the following four mathematical operators:

  • + : Plus does addition
  • – : Minus does subtraction
  • * : Asterix does multiplication
  • / : Forward-slash does division  (don’t confuse with back-slash \)

Conditions

We looked at a simple condition. This allows us to choose between two options based on whether a check was true or not:

if (c < 1){
  console.log("c is less than one")
}
else {
  console.log("c is greater than one")
}

The keyword if  starts this check. The thing we’re testing is then inside roundy brackets (). Here we’re checking “is c less than one?”. After this we get a block of code (contained in the curly brackets {}) to do if it is true. Here we’ve also added (which is optional, you don’t have to have this if you don’t need it) the keyword else and another block of code to do if it is not true.

Basic Functions

Functions perform an action. They contain a bunch of commands to run together.

They’re great where we’re doing the same thing repeatedly but from different places and they help to logically break-up and organise our scripts.

Here’s a basic function that just writes to the console:

function SayHi(){
  console.log("Hi");
}

The keyword function indicates that we’re going to define a function. Next comes the function name, SayHi in this case, followed by roundy brackets (), followed by a block of code surrounded by curly brackets {}. Inside the curly brackets are the commands that make up this function.

To make this function actually run we need this in our script:

SayHi();

Without this the function would never run. Functions only run when we “call” them.

Function Arguments

Sometimes it’s nice to be able to give a function more information about what we want to do. A function can take several values as input, these are called arguments.

Let’s imagine we don’t want our function to log the same thing to the console every time. We want to tell it what to write. Let’s see what that looks like:

function MyFunction(what){
  console.log(what);
}

MyFunction("Testing the function");

Here our function is defined as before, but we have a name, what, inside the roundy brackets. Firstly, this means that when you call the function, you’re expected to provide a value. Secontly, inside MyFunction(), we have a new variable, here called what, containing the supplied value and usable like any normal variable.

Finally here’s a more complex example with two arguments:

function Divide(m, n){
  return m / n;
}

There’s a new keyword here, return. This means “send back this value to the place that called me”. Let’s see how we might use it:

let a = 4;
let b = 5;
let c = Divide(a, b);

The third line here both calls the Divide() function and stores the value sent back.

P5.js

We had the briefest of introductions to P5.js and a flying visit to the new P5.js web editor. We’ll follow up properly on these next week.

Download

Files from this week can be found on our GitHub page.

 

 

Creators – Starting Off

code-944499_640

We kicked off our 2018/2019 session this week and it was good to see some new faces and also many familiar ones. Welcome all!

Our plan for the year is similar to last year’s, though we plan to do different projects, week-to-week. This week though we started with the basics.

Getting The Right Tools

We got pretty-much everyone set up with Google Chrome as our standard web browser and Visual Studio Code as our standard text editor.

512px-google_chrome_icon_28201129-svg

Google Chrome is a great browser for programers as it contains useful tools to help you debug your code. https://www.google.com/chrome/

512px-visual_studio_code_1-18_icon-svg

Visual Studio Code is a great text editor. It helps you with writing many languages, including the two we’ll be using, HTML and JavaScript. It also works well to help you manage your files and folders. Finally, we will see later in the year how it integrates with source control software.  https://code.visualstudio.com/download

Files and Folders

We talked about how computers store information and what’s inside a hard disk.

800px-seagate_st33232a_hard_disk_inner_view

The computer organises files with folders (also known as directories) and sub-folders (subdirectories). No two files in the same folder can have exactly the same name.

We looked at how to find your way, using File Explorer on Windows and Finder on Mac, to your account’s home directory and how to find your desktop folder. We all created folders to store our files for this year.

Web Pages

We talked about how there are three main languages used for most modern web pages:

  • HTML: This is the content of the page. HTML stands for HyperText Markup Language. Hypertext means enhanced text with links that can bring you to new pages. A markup language is one that adds tags around the text-based content. A program (web browser in this case) can interpret these tags to know how to treat the content.
  • CSS: This is the style of the page. CSS stands for Cascading Style Sheets. Colors, sizes, fonts, etc. are normally specific in CSS. The great benefit is that you can have one set of CSS files for your entire website and can quickly update the appearance of all pages in one go. Having said all that, we won’t be looking at them and we’ll be doing more old-fashioned formatting directly in the HTML files themselves.
  • JavaScript: This is the logic of the page. Scripts bring webpages to life and allow them to react when you interact with them. This is the language we will spend the vast majority of our time looking at this year.

Writing HTML

Tags in HTML generally come in pairs. We have a start tag such as <html> and and its corresponding end tag </html>. End tags are identical to their matching start tag except there is a forward slash before the name.

Some tags don’t need to enclose content. We saw <img> which didn’t need a </img> as it wasn’t around anything else. It was enough in itself.

Some tags had attributes. This was additional information inside the tag itself. For <img>, for example we specificified the src=”” attribute to provide the location of the image file. We also specified the width=”” and height=”” attributes. It looked something like this:

<img src="picture.jpg" width="400" height="300" >

Some of the tags we saw were:

  • <html> – The tag which wraps the entire content of the HTML file.
  • <head> – A section at the top of the file containing document information. In our case it just contained the page title.
  • <title> – The page title. Belongs in the <head> section.
  • <body> – The main content of the page. We saw how the bgcolor=”” attribute can be used to set the colour and talked about RGB colour and HTML colour names.
  • <p> – A paragraph.
  • <h1>,<h2>,<h3>,<h4>,<h5> – Heading levels. Large text in different levels.
  • <b>, <i>, <u> – Bold, italics and underscore respectively.
  • <img> – An image. We saw the scr=””, height=”” and width=”” attributes.
  • <a>: A link to another page. We saw the href=”” attribute to specify the destination.

 

Download

The files for this week can be found on GitHub.

Useful Resources

A really handy reference location for both JavaScript and HTML is:

https://www.w3schools.com/

Specifically, one page which is particularly convenient is the table of HTML colour names:

https://www.w3schools.com/colors/colors_names.asp

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/

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.

Hackers – Remote Controls for Our Bots!

Remotecontrols

In the Hackers group this week, we took a large step forward in our Project SABRE (Small Autonomous Battling Robotic Entities), when we started working with remote controllers for our robots.

Components

From what the group has read, it looks like the most widely-used controllers are Spektrum-compatible DSMX or DSM2 ones. Therefore, we bought 3x Lemon RX DSMX/DSM2 receivers and one MLP4DSM Blade transmitter (as shown in the photo).

Connecting to the Arduino

Pins on the receiver are simply connected to digital pins on the Arduino.

To program the Arduino to read the receiver, this code has been cross-referenced from other forums: https://www.sparkfun.com/tutorials/348

According to the comments, while this works, you should use interrupt-driven code.

This StackExchange post has a good list of possible references:

https://robotics.stackexchange.com/questions/1207/read-multiple-channels-of-rx-tx-with-arduino

There was a lot of excitement when people were able move the joystick on the transmitter and have it change the value being printed out in the Arduino console!

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.