Category Archives: Creators

Creators – Starting Off

Posted on by

0

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

CoderDojo Athenry Information Session, Sept 2018

Posted on by

0

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!

Creators: Robot Arm

Posted on by

0

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

Posted on by

0

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

Posted on by

0

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

Posted on by

0

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

Posted on by

0

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 Name, Age, Height, Weight, 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.