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!

CoderDojo Athenry Returns on 15 September 2018!

cdathenry-returning

CoderDojo Athenry is starting back with an information session on 15 September 2018 in Clarin College Athenry (“the Tech”) at 12:00 noon. All new and existing members are welcome to come along to find out what we have planned for this season.

Regular weekly sessions will start the following week, 22 September 2018, 12-2pm in the same venue.

New members are always welcome. If you are aged between 7 and 17, just come along on the first day and fill out a registration form. Young people aged 12 and under have to be accompanied by a parent/guardian for the whole session.

And don’t forget, CoderDojo Athenry is run by volunteers and is completely free for participants — no membership fees, no weekly contributions. You should bring a laptop if you have one, but we have some loaner laptops if you don’t. There is more information on our About page.

We hope you can join us. You are welcome to invite your friends along too!

Hackers – Great Progress on Project SABRE!

Our Hackers Group at CoderDojo Athenry made great progress last week on Project SABRE (Small Autonomous Battling Robotic Entities), in which two teams (Team DJARS and Team MEASAM) are building battlebots to compete with each other.

Here is a first test of the driving and steering of one of the bots, operated via a 2.4 GHz remote control with DSM2 protocol and an LemonRX receiver interfaced with an Arduino:

(The two teams worked together on the driving/steering code, which they will share.)

Team MEASAM’s bot has a flipper weapon, and they managed to get the actuator operating via the remote control last weekend also:

Meanwhile, Team DJARS have been working on their vertical spinner/grinder, which they are now controlling via a relay switch using the remote control also:

This project is proving to be a great and engaging learning experience!

Bodgers – Coolest Projects UK

As you may remember from before Christmas Kevin, Zack and Barry won a prize in the Raspberry Pi Pioneers competition, part of that prize was an invitation to Coolest Projects UK which was held in London last Saturday.IMG_20180428_130215

The first thing that struck us when we got there was how small the event was, there was about forty projects there, compared to Coolest Projects in the RDS. However this is the first time that Coolest Projects has been run in the UK so it’s a very good start. We also noticed that at least half the projects were hardware based which reflects the fact that there are more Raspberry Jams etc. than CoderDojos in the UK.

The day started with us setting up our “Piggy In The Middle” project, followed by a very nice speech by Philip Colligan. The lads then demoed their project to the public while they were waiting for the Judges. After the judging was finished there were science shows by Greg Foot and Neil Monteiro as well as stands to keep the kids entertained, Zack and Kevin really enjoyed the huge version of Connect 4 that was there. In what has now become Coolest Projects tradition for Kevin and Zack they had their picture taken again with Philip Colligan CEO of the Raspberry Pi Foundation.

Db3elddWAAA30cE

Then it was time for the results, the Mobile category award went to Meriem Ait Ziane for her app of healthy eating recipes and advice as well as support for diabetic people and a personalized diet plan according to your health conditions.

The Games category was won by Hamdan Syed and Amiyan Ezdi. The game they coded is called Calorie Challenge, which challenges you to remember the amount of calories in each meal/snack.

The Website award went to George Hart for his project called “Educelevate”. He designed the website to educate children of all ages on various topics.

The Scratch category was won by to Gabriella Jenkins and Liya John for their game “Toad Ahoy”.

The Hardware category went to Avye Couloute for her project: Voice O’tronik Bot. We were all very impressed by both Avye and her project and were delighted to see her win.

We enjoyed our visit to Coolest Projects UK and we can’t wait for Coolest Projects in the RDS.

Back in Athenry Dave helped the rest of the Bodgers with their projects.

Creators Quiz Time

This week at Creators we took some time out to play some games and do some quizzes – well done to everyone that took part!  We used the fantastic website “Kahoot!” to drive the quizzes.  Some of you had used this site before in school.  We had a little trouble getting it going due to network trouble, etc but got it sorted and interestingly saw how we could debug the issues in the kahoot javascript using the console to see that it was the network causing the problems, just like we did with our own code.

Anyhow the results of the quiz are below – everyone did brilliantly as expected but LORD PJO showed her quickfire dominance by amazingly winning two of the three games:

We then did a rapid-fire challenge to do a circle that changes color when the mouse is over it.  This is one of those ones that is easy in scratch (“touching mouse”) but we hadn’t covered collision detection really in javascript so you had to figure it out.  Most all of you got it, some with really clever solutions!  My pretty simplistic solution is checked up to github as usual.

Next week we have a break and then we plan to spend a week working on our own ideas – anything you like – either bring in a project that you are working on and Kieran and I will try to give advice or just start a new one in the class and we’ll try to get you off on a good footing.

A WebGL 3D Solar System!

solarsystem

This week we looked at WebGL and how it can be used in Javascript to easily create 3D animations and games.  After looking at different shapes for a while, someone suggested building a solar system so that’s what we did!  This project just did the first sample planet.

The code is up on github as usual!

Click here to view the project we did on Saturday!

What is WebGL?

WebGL is a javascript API that allows your programs to use the graphic cards on your computer.  Graphics cards are built for really fast graphics and have specially encoded hardware to quickly do the calculations needed for common graphics.  With 2D, you can often get away without graphics cards, but they really make things a lot faster in 3D!

There are several javascript libraries that let you use webGL – the most famous and probably the best of them is one called three.js, which lets you do really advanced 3d – however our trusty p5.js also has a pretty decent set of functions and for us is much easier to use.

Initializing the p5 canvas for 3D

The great thing we found about p5.js 3d is that is is REALLY similar to the 2D shape functions, so much so that we all intuitively were able to get going with little need to look at documentation.

Sadly, it’s not easy to mix 2D and 3D code in P5 as the “canvas” is created differently.

To get it started, we had to add one word to the createCanvas function call – “WEBGL” – so to create a canvas we use the function:


setup() {

createCanvas(800, 600, WEBGL);

}

P5 3D primitives

There are many better reference guides online so I won’t go int great detail here but the main built-in shapes that you can use to create things with are:

  • Box for all manners of cuboids
  • Plane for a flat plane (a “rect” also works actually!)
  • Sphere for a (duh!) sphere
  • Ellipsoid for a rugby ball shaped thing
  • Cone for a cone-shape
  • Torus for a donut shape
  • Cylinder for a cylinder

Using these basic building blocks, it’s possible to create all manner of shapes.

There is also a “loadModel” function that allows you to read in a model from a 3D package like “Blender”.  These can be models of spaceships, bad-guys, houses, ponies, whatever you like!  Maybe at some stage in the future we’ll try to learn a bit about blender.  One of the ninjas already had played with blended and managed to load in a model of a meteorite he’d been working on!

Positioning shapes

The models and shapes don’t have any coordinates on them – it’s all stuff like size and grid size.

Our first program involved creating a box and moving it around.

To position the shapes you use the “translate” function, just like you can in 2d. With this we moved the shape around


function draw(){
background(50);

push();
translate(0, 0, 0);
box(100, 100, 100);
pop();

// increase X - move right
push();
translate(200, 0, 0);
box(100, 100, 100);
pop();

// increase Y - move down
push();
translate(0, 200, 0);
box(100, 100, 100);
pop();

// upper left and closer to viewer
push();
translate(-200, -200, 200);
box(100, 100, 100);
pop();
}

We quickly noticed that the axis are slightly different:

  1. The box appeared in the center of the screen – i.e. 0,0 is the middle of the screen (like scratch) rather than the top left. (Box 1 below)
  2. Making X bigger moved it to the right (Box 2)
  3. That making Y bigger still moved it “down” unlike scratch! (Box 3)
  4. That making Z bigger moved it towards the viewer (Box 4)
  5. That there is perspective automatically built in

cubeFade

To Rotate shapes, there are three functions that are handy: rotateX, rotateY, rotateZ – these can rotate around the axes.  Just like in 2D the ddefault unit is radians so you need to set angleMode(DEGREES) if you want degrees.  For example – rotating the box by 45 degrees is per below:

angleMode(DEGREES);
rotateX(45);
box(50, 50, 50);

Push() and pop() can be used to stack the transformations on top of each other – just like in the 2d sketches!

Lights!

We learnt that there are three types of light:

  1. AmbientLight is light which comes from everywhere – it casts no shadow.  We just give it a color ambientLight(255) is a white ambient light for example
  2. pointLight is a light which is centered on a point.  It just has a color and a position – e.g. pointLight(r, g, b, x, y, z).  Pointlights are pretty dim, but you can stack lots of them on the same location to make them brighter – this is what we did for our sun!
  3. directionalLight is a light which has a color and a direction – this is very similar to the pointLight except that the light just shines in one direction and can be used for e.g. spotlights.

Material!

Depending on the material, the light reflects different ways – the main material types we tried were:

  • ambientMaterial: This is normal “Matte” material
  • specularMaterial: this is reflective material – it shines back like glass or water
  • normalMaterial: This is the default material type – this is kind of weird looking to me and I’d usually use ambient…

For each of these types, you simply set the material before drawing the shape – kind of like the fill function.

Explaining the Solar System Code

Our “Solar System” code was very basic – what we have here was one planet orbiting around a Sun in a spherical orbit, with a moon orbiting around that planet.  We didn’t have any physics in there – just spheres orbiting each other.

We did the following:

  1. set nostroke
  2. started a rotation around the Y axis
  3. created a bunch of lights at the center where the sun is
  4. drew a big yellow sphere for the sun
  5. translate 300 pixels out to draw a blue sphere
  6. set it’s rotation to 12 times faster than the “earths”
  7. moved 50 pixels out.
  8. drew another small white sphere

This sounds like a lot but the code is really simple and can be seen here.

Challenge!!

We did one planet and moon in the class because a lot of the time was spent playing with our own projects.  How about you take our solar system and change it so that all the planets have accurate relative rotation speeds?  i.e.

Mercury: 87.97 days (0.2 years)
Venus : 224.70 days (0.6 years)
Earth: 365.26 days(1 year)
Mars: 686.98 days(1.9 years)
Jupiter: 4,332.82 days (11.9 years)
Saturn: 10,755.70 days (29.5 years)
Uranus: 30,687.15 days (84 years)
Neptune: 60,190.03 days (164.8 years)

Try putting a ring (torus?) around Saturn!

The distance from the sun could also be put in, but it might be a bit weird looking – in fact you wouldn’t even see most of the planets as they get pretty spaced out as you move out!

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