Bodgers – Making For The International Space Station

Hello again everybody.
This week in the Bodgers group we started working on our code for the Mission Zero Challenge.

mission-zero-logo

We began by writing a simple text message on the 8×8 full-colour LED display, then we changed the text and background colours. We then coded a picture by assigning a colour to each of the 64 LEDs on the display. We finished the session by taking a quick look at using the temperature sensor to read the temperature. Here are my slides from this week day 2.
Next week we will recap what we covered this week and we will start to personalise our code for the challenge.

In the meantime, here’s a couple of fun videos on how the Astro Pi computers got to the ISS.

See you all next Saturday

Declan, Dave and Alaidh

Explorers – Week 3 – 2018, Your First Game!

Hi everyone!

Wow! what a fantastic turnout on Saturday again, 79 ninjas in the room! plus a few adults!

I hope you had a good time, I know that I really enjoyed it. There was a really great atmosphere and energy in the room.

A special thank you to Mentor Julia for getting 14 loaner laptops working for us this week, so that everyone that wanted to participate, could. Another thank you to the other Mentors in the room, Eoin and Ruaidhrí, it makes my job easy when they can get around the room and help out when needed. You are doing a great job.

One of the first things we must do before we start anything is make a plan.


We quickly learn when we begin our coding that it is very important to test our code as we go along. Making mistakes is good, but we must learn from them by spotting them (testing) and fixing them.

I am attaching my notes in PDF for you. CDA-S7 Week_03-FeedingtheFish.pdf

We will continue to add to the game next week but don’t worry if you weren’t here this week, I will have a copy of the game so that you can join in.

See you all nest week!

Martha and the Explorers Mentors, Julia, Eoin and Ruaidhrí

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.

 

 

Hackers – 3D Printers and Turing Machines!

We had a small but dedicated team of Hackers for our first week back at CoderDojo Athenry last Saturday.

To begin, we started working on 3D printers. 3D printers are a fantastic technology for turning 3D computer models into physical objects. Here are Kevin’s notes on how to set up a 3D printer: 3d-printer-setup (PDF)

Here are the configuration files needed for the Materia 101: https://www.dropbox.com/s/6otj5ok7i00ikds/Slic3r-Materia101-Settings.zip?dl=0

And here also is a diagram Kevin prepared, showing the 3D printing workflow:

3d-printing-workflow

In addition to setting up software for the 3D printers on group members’ Windows and Linux machines, we started planning potential projects for this year.

One possible project is to build an 8-bit PC from individual components. It was mentioned that it’s Turing complete, which led to a discussion of some concepts that are named after Alan Turing:

Turing Complete: a computer system is Turing Complete if it has the core features that mean it can run any algorithm. For a modern programming language, this means in practice: memory (variables); decisions (if statements); repetition (loops). However, this does not consider things like how data is input and output (file handling, displays, networking, etc), those secondary capabilities are a lot of what make computers useful.

A nice flip side of Turing Completeness is that if you are learning a new programming language, and you can figure out how to handle variables, decisions and loops in that language, you have mastered all the basics!

The Turing Test is a different concept that Alan Turing came up with, when he was thinking about early concepts of Artificial Intelligence (which was impressive considering how computers barely existed!) Rather than thinking about creating computer intelligence by replicating the functions of the human brain, he imagined an experiment where a human would communicate with either another human or a computer (selected at random); in the conversation, the asker could ask whatever they liked, and the human or computer answerer could try to deceive if they wished. If the experiment is repeated and askers cannot determine accurately whether the answerer is a human or computer, we should conclude that the computer is behaving intelligently.

Incidentally, Google’s recent Duplex demo, where an AI system can phone businesses to make appointments, is arguably an example of an AI system passing the Turing test, asn the people receiving the phone calls thought they were talking to a human:

Advancers – Piano

Welcome to all the new Advancers.

For our first week we built a Piano, which you could play manually or record a tune and then play it back.

We started with a basic plan:

  • 1 Piano Sprite
  • 3 Button Sprites
    • Record
    • Stop
    • Play
  • A list to store all the possible Piano notes.
  • A list to store the tune being played.

Luckily Scratch comes with a Piano Sprite, which we used and expanded it to fill the width of the screen.

PianoSprite

Next step was to create the list of all the notes, there are 14 keys on the Piano so we need at least 14 notes in our list.

We found out what notes are possible by using one of the Sound blocks and looking at what was possible

PossibleNotes

This gave us our list of possible notes:

NotesList

Now on to the code…

We needed to work out what key on the Piano had been clicked, and convert it to a number between 1 and 14 so we could play the correct note from the list.

This required some tricky calculations, to convert the Mouses “X” position to a positive integer between 1 and 14.

  • First we added a number to make X always positive
  • Second we divided that by the size of a note.
  • And finally we rounded it up, using the ceiling function.

This ended up with the following code and a couple of Variables to store the “Extra” number to make X positive and the size of a note:

NoteClickedBasic

Once we had the positive integer we could use it to select the correct note to play from the list:

NoteClickedMedium

We did start some of the Buttons, and we will complete them next week. Notes for the buttons will be included then.

Buttons

In order to make the Piano a bit more usable we added 3 Buttons:

  1. Record
  2. Stop
  3. Play

All three Buttons had two costumes, we used the second costume to change the colour of the Button, this made it easy to see if you had clicked the button or not.

The Record button, simply set a Data Flag to indicate to the Piano code that it should “record” the notes being played in a List variable.

It also flashed while recording was “on”, this is the code for the Record Button:

RecordButtonCode

We also had to add some additional code to the Piano to make sure the notes were recorded:

RecordPianoCode

The Stop button was quite simple, we just set the Data Flag back to 0, and changed the costume for a short while to make it clear that the button had been pressed.

StopButtonCode

The Play button was a little more complex as it need to read all the items in the List and play the correct notes. It also flashed while playing. This is the code from the Play button:

PlayButtonCode

The Final project looked something like this, you can get a copy from the Scratch Web Site, see the Notes below.

PianoStage

Notes:

Note: My version of the project has been uploaded to https://scratch.mit.edu you can Sign in using the following details:

  • Username : cdadvancers1819
  • Password : advancers
  • Project Name is : Class-Piano

Bodgers – Making a start

making

This week we got things off to a flying start with Bodgers Bingo where the Bodgers had to look out for various phrases as I went through a very long slideshow that introduced them to what we do in the Bodgers group, it went very well with lots of Starburst and Chewits for everyone. My slides are here Day 1 (PDF).

We are going to start of the year by working on the Astro Pi Mission Zero Challenge in which the Bodgers will use a Raspberry Pi Sense Hat to write a greeting and display the temperature inside the International Space Station to the astronauts on the ISS. Here are the guidelines for Mission Zero Astro_Pi_Mission_Zero_Guidelines_2018_19 (PDF).

If you’re interested in buying a Raspberry Pi I’d recommend the following sites:

https://thepihut.com/

https://shop.pimoroni.com/

For electronics components and for breadboards etc. I’ve found https://www.bitsbox.co.uk/ are good value, they also do cheap Arduino clones.

That’s all for this week, we’re really looking forward to next week.

Declan, Dave & Alaidh

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

Explorers – Week 2 – 2018, Your Name in Lights!

Hi everyone,

It was great to see such a big turnout on Saturday for our first full session. A special welcome to our Ninjas and thank you to the parents who attended with them.

I started off this year with a session that let you you see where some of the coding blocks can be found and how we can use them.

Using the Letters (Sprites) in the library, we wrote a word. Most people used their name.

We took each letter and used code from different sections of the palette of code.

For my First letter, M, I decided that when this Letter (Sprite) was clicked, that it would change colour. Experiment to see what happens when you change the number!

We used a different piece of code for each letter. Remember, you can use as many blocks of code as you want. A letter could change colour, size, move and talk! all at the same time.

Here are some more ideas of what you could do.

Here are my full notes from this weeks session in PDF CDA-S7 Week_02-YourNameinLights.pdf

Hope see you all next week. Have fun coding!

Martha

CoderDojo Athenry Information Session, Sept 2018

Slide2

Thanks to everybody who came along for our information session last Saturday the 15th September 2018.

Michael introduced us to the CoderDojo movement and spoke about CoderDojo Athenry and what we have planned for 2018/2019. His slides are here: CoderDojoAthenry-InfoSession-2018-Sept (PDF).

Martha then spoke about our shop, where we sell tea/coffee with biscuits for €2.00 or €1.50 if you bring your own cup, with all profits going towards equipment etc. for our CoderDojo.

Julie then talked about our loaner laptops where we provide laptops for people who don’t have their own. Speak to Julie or any of the mentors for more information.

Slide13

This year, we have 5 different rooms with different topics in them, for different levels of experience and age.

Explorers- led by Martha for Beginners from around age seven. Here are Martha’s slides CDA-WeeK_01_Information Session.

Advancers- led by Oliver for kids who have already been through Explorers. Here are Oliver’s slides Advancers2018.

Creators- led by Kieran and Mark for older kids who have been through Explorers and Advancers or have other coding experience. Here are Kieran and Mark’s slides Creators-2018-Intro.

Bodgers- Led by Declan also for older kids who have also been through Explorers and Advancers or have other coding experience. Here are Declan’s slides bodgers_introduction.

Hackers- led by Michael for older teenagers who have been through Creators and Bodgers. Here are Michael’s slides Hackers-Intro

You can find more on the About page of this website: https://coderdojoathenry.org/about/  and our schedule for 2018/2019 at https://coderdojoathenry.org/schedule/

We look forward to you joining us!