Robot Antenna - Getting Started with Hardware Hacking

After our latest Scratch game project we haven't done much coding, just played few games like Lightbot on iPad. But since I have a Raspberry Pi, I started thinking she might like to do some coding with physical things rather than just something that's on the screen. And I would like to learn more about hacking with hardware myself, since I'm not that familiar with electronics. I talked about it with her and she got really exited and had an idea for a first project almost instantly. She wanted to build traffic lights for lego cars! That sounded like a great project, so I started looking what kind of stuff would be required for a project like that.

After Googling around a bit and brushing up my knowledge of basic electronics (that had gotten a bit rusty since I haven't done any electrical work after high-school), I had an idea how we would do it. I ordered various electronics bits and bobs from the net, such as LEDs, jumper wires, resistors, few breadboards, switches, a GPIO cable etc. You can get this stuff from pretty much any electronics shop, either online or if you have a brick and mortar one nearby. I ordered a shipment from Pimoroni since they have all kinds of nice accessories, for example a lego compatible breadboard, a lego compatible base plate for the Pibow case I already had, some colourful USB and HDMI cables and SD cards etc.

While waiting for the shipment to arrive, I talked to Kaisla about electronics and tried to teach her some basic concepts. Like what is an electric circuit, how current flows in the circuit and how we need to adjust the current to our needs with resistors and how switches work by breaking the circuit. She seemed to understand most of that pretty well and even came up with some examples from real life, like the light switches in our house. I also talked to her about how dangerous electricity can be and that we must be cautious whenever we're working with electronics. We also learned that it's important to plan the electric circuits and how it's usually done by drawing a circuit diagram and she drew a simple one with one LED and a resistor.

Robot Antenna

Before going ahead with the traffic lights project, I decided that we should try something a little more simple first. I found this nice beginner project called Robot Antenna in the official Raspberry Pi site that has lots of good learning resources. It involves a very simple circuit with one LED and one resistor and then it can be programmed using a modified version of Scratch, called ScratchGPIO, with the same familiar user interface that we are already used to with Scratch.

When we received the shipment, we were both excited and Kaisla was very happy about the things I had gotten her, like a pink SD card and a purple USB power cable. She was very pleased that she had her own memory card and wanted to decorate it with a butterfly sticker.

Before starting with the robot antenna project, we first tried if we could just light up a LED without any programming involved. The GPIO pins on the Rasberry Pi have different purposes, some need to be programmatically turned on but some have constant power output (you can read more about them here if interested). So we put together the circuit of one red LED and one resistor (we used 330 Ohm like in the instructions for the robot antenna) with some jumper wires and connected to the 3.3 volt power output pin and a ground pin on the RPi. It was an exiting moment when I plugged in the USB power cable for the first time, but the LED did light up! We then tried all the other different coloured LEDs I had bought, green, yellow and blue, and they all light up nicely (even the blue did light up without changing the resistor, even though it requires more voltage).

Next Kaisla started working on her robot. The only requirement was that it should have an antenna, otherwise it was all left to her imagination. She was sceptical at first whether she could draw a good enough robot, but after some encouragement she did it and it came out really nice and she was really pleased with it. We then cut it out and glued it to an empty kitchen paper roll and I made hole for the LED at the top of the antenna.

Then it was time to combine all of this. We needed to use one of the programmable output pins now instead of the one with constant power and we also put the RPi back into it's case so we needed to connect through the GPIO cable now. So we changed from female-to-female jumper wires to male-to-female wires for the ones that connect to the RPi. We put the wires and LED inside the robot and pushed the LED through the hole and it fit just nicely. We then booted up the Raspberry Pi (we are using the "default" Raspbian OS on it), but ran into some troubles since the ScratchGPIO doesn't come preinstalled on it and I hadn't configured the WiFi on it yet so we couldn't install it right away. I had to Google a little bit for instructions on setting up WiFi on Raspbian and Kaisla got bored. She went on to do a puzzle (one with Elsa from Frozen) while I got the WiFi set up and installed ScratchGPIO. After that we could finally do the actual coding, a very simple program at first with just a loop of 10 iterations that sets the pin on, waits one second, sets the pin off and waits another second and executes by pressing the spacebar key. With that, we had our very first program that interacts with hardware we had wired ourself. It worked as expected and Kaisla was very proud of it and wanted to show it to her mom and little sister.

All in all, it has been a very interesting first hardware project for both of us and we have both learned a lot. Next we will start planning the traffic lights project, and I'll write more about that later.

Owl flies - coding our second Scratch game

After all the graphics done and a pretty good idea how the game is going to work, it was time to start coding.

Scrolling background

I knew we were going to need a scrolling background and had some ideas how to implement it, but decided to do some research beforehand. I found this nice wiki page that explains few different scrolling concepts and we ended up using a variation of one of the solutions presented in that article. Just had to modify it a little so that it scrolls all the way from outside of the view to the other side.

Owl flies

Next it was time to add the owl. As I said in the previous post, we had two owls, one that sits on a tree branch and the one that flies. Adding the sitting owl was simple, just drag it to the correct position and scale it to appropriate size. We decided that pressing space bar starts the game, so we hide it when that happens. Because lots of other stuff also needs to happen as the game starts, I thought it would be good to implement the game start as an event that is broadcast from one place. We discussed few different analogies for the broadcasting of an event, she seemed to like the idea of sending a message by mail the most. So, when the game starts we broadcast an event "lennä" which is Finnish for "fly" (in imperative form).

The flying owl required some more coding. It needed to appear when the sitting owl disappears and then start moving. Because we have a scrolling background, our owl can remain static horizontally and only move vertically. We decided to use the space bar key for flying as well, so that the owl descends if the space key is not pressed and ascends if it is pressed. This logic required a simple loop that runs as long as the game is playing and inside it a simple if condition; if space key pressed, then move owl up, else move owl down. Also needed a small wait inside the loop so it doesn't run too fast. After that it took us some experimentation to get the right "speed" for the owl's ascend and descend and smoothness of the movement by adjusting the wait time and the amount of pixels for the movements. But it was fun to do and we had a few laughs while making the owl or the background move too fast.

Code for our flying owl.

Sound effects

Sound effects are always a fun part of creating a game. This time Kaisla wanted that I do the owl sounds and she does mosquito buzzing. We recorded the sounds in Scratch, edited them a little bit and added some to the game right away.

The owl is hungry

Now that we have a flying owl, we can finally get to the actual objective of the game: catching mosquitoes. Kaisla hadn't drawn an image of a mosquito, so we looked for one in the Scratch sprite library and found one that was good enough for our use. Maybe we will add a custom image later.

We needed multiple mosquitoes on the screen and they needed to scroll with the background (to appear staying static) so we took the scrolling logic from the background and modified it a little bit so we can set a custom starting point for the image to appear. Kaisla decided that the owl needs to catch 10 mosquitoes, but that sounded like too much to be on the screen at the same time so I thought that maybe we could have only a few sprites that we can reuse, by positioning them again after being eaten.

For this we needed to explore a new concept, randomization. After being eaten, we move the mosquito to a new position that is outside of the screen horizontally and then assign it a random position vertically. We encountered a few bugs while coding this that caused for some funny side effects, like the mosquito getting "stuck" to the owl's beak. But we finally got it working well and now the game could actually be played.

Because Kaisla is so careful about the details, she soon pointed out that there are too many mosquitoes because she had decided there should only be ten. So we needed a way to count the number of mosquitoes the owl has eaten. We had explored the concept of variables a few times before and she didn't have much trouble grasping the idea when I explained it as something like writing down a note on a piece of paper so it can be looked up later. We also discussed variable naming and I said that it's always good to name them after the values stored in them so that it's easier to understand later. She seemed to grasp this concept well and named the variable "hyttysiä syöty" (Finnish for "mosquitoes eaten").

Scratch has a nice feature where you can choose that it shows the contents of a variable on screen while playing so we didn't have to implement that by ourselves to see the value increase as intended.

Kaisla explaining the game to her little sister.

Finishing touches

We still had a few items left on our TODO list, like making the owl flap it's wings and making the owl go back to sitting on the tree branch after it has eaten 10 mosquitoes. We have since added the wing flapping effect by creating a second "costume" for the flying owl that we change in the loop. I just cut out the wings in an image editor and rotated them to create another one with the wings in a more upright position. It took a little tweaking until I got it to look good enough for her but I think it came out quite nice in the end.

We haven't done any coding for a while now and the owl returning to the branch is still not done. But we'll get to it sometime in the near future. Here is the game in it's current state, so you can check out all of the code, or just try it out. And why not leave a comment if you like it.

Update: And as I just discovered that Scratch games have embed codes, here is the game inline so you can try it out right here (if you're on a browser that supports Flash).

From idea to owl - designing our second Scratch game

Few weeks ago we started designing our second Scratch game. We were outside walking home from the playground and we started discussing something about games and the conversation led to us deciding to build another game. I asked if she had any ideas for the game and it only took her a couple of seconds to come up with an idea for a game where an owl flies and catches mosquitoes. The level of detail that comes with her ideas is always very rich and I have to try and keep it simple so it's actually something we can accomplish with any decent amount of work.

I instantly started thinking it would be easy to implement such a game with a scrolling background, so I tried to explain the concept to her a little bit. But I sensed it was not going down that well so we talked about the details for the background graphics for a bit more before we were home.

Graphic design

Demonstrating
scrolling background.

We decided to draw the graphics on paper again. She started with the backgrounds (we needed two so we could make them scroll) and they came out really well. I decided to illustrate the background scrolling effect to her again, but this time show it by example. So we also made a "screen" by drawing a frame on paper and cutting out the middle with scissors. Then she held the frame little bit above the table surface and I moved the background drawings beneath it. I think she understood the concept this time and was excited about how it will look on the computer.

But first we needed to draw the owl. Or actually we also needed two owls, because even though I tried to keep things simple as I said above, she was adamant that the owl must first sit on a tree branch and only start flying after a button has been pressed.

She was a little nervous about whether the owl would come out good enough, so I suggested we look up some example pictures from the internet. We headed to Google image search and found some nice colourful owl pictures. She needed a bit of help to get the body shape right on the symmetrical sitting owl, but it came out amazing, much better than what I had expected. And then she drew the flying owl all by her self, without any help from me. That one also came out amazing and she was very pleased with herself and ran to show it to her mummy.

With the drawings done, she was already eager to start coding, but we didn't have time to start right away. I took pictures of the drawings and later processed them on an image editor. Nothing much, just stuff like cut out the owls and straighten the backgrounds and some small color corrections etc.

Next time we'll fire up Scratch and start with the actual coding. But all of the designing, preparing and modelling is also fun so we had really good time.

Rapunzel climbs - our first Scratch game

After learning about some basic programming concepts with other tools and environments (more about these in the Introduction post), I thought we'd try out Scratch and see how it goes. It was over six months ago, so I don't remember exactly what conversations we had and whether we talked about game development before or after looking around in Scratch. But I do remember it didn't take long for her to come up with an idea for a game.

Graphics

I thought it would be nice to combine the "real" world with the digital game a little bit, so I suggested that she draws the background on paper and then I'll "move the picture inside the computer". She was really enthusiastic about the idea and started drawing immediately. The game is about the princess Rapunzel climbing up her tower, so she needed to draw the tower.

She was a little concerned that the lines for the tower walls would not be straight, so I suggested that she could try to use a ruler. We hadn't used a ruler that much before, so it was a nice exercise and the tower came out really well. She was very focused on the drawing and it came out really nice, much more details than what she normally otherwise draws. I only helped a little bit with the roof tiles.

Then of course we needed Rapunzel and also Flynn (the thief from Rapunzel movie) and some rope. I found some images from the internet and cut out backgrounds with an image editor.

Game mechanics

The  actual game mechanic is pretty simple, move the Rapunzel characters sprite up when space button is pressed. Kaisla also wanted to add some sound effects, so we recorded some sound inside Scratch and added them to few key points, like the beginning of a new game and then my voice if Flynn wins (saying "eka ylhäällä", which is "first on top" in Finnish) and her voice if Rapunzel wins (saying "minä voitin", which is "I won" in Finnish).

My daughter working on a Rapunzel game on #Scratch. With proper attire, of course. pic.twitter.com/nBvtAa0oAU
— Carl Vuorinen (@cvuorinen) July 28, 2014

Multiplayer

At first we had made Flynn climb by himself, with a loop that moves him up a bit and waits a second. But later we decided to make a multiplayer version so that I can play with Flynn and we can compete against each other. So we changed it so that pressing the up arrow key moves Flynn up. This turned out better than I had expected, it has been really fun to play after that. We have played it many times just for fun, without any programming. And Kaisla has also played it with her little sister Sohvi.

You can check out the final game here: Tähkäpää kiipeää (Rapunzel climbs). Why not try it out and leave a comment if you like it.Click the green flag to start a new game (and the blue rectangle on top left corner to make it bigger).

Introduction

This is a blog about the adventures I have with my daughter Kaisla as we learn to code and do other computer related stuff. She is 5 years old (at the time of writing this in March 2015) and we have been doing little "computer exercises" for a while already, mostly inspired by the Girls Can't Code blog and with some iPad apps etc. In this introduction post I will go through what kind of things we have already done together and what we have learned along the way.

I think it was a little over a year ago when we first started. She seemed quite interested whenever she saw me working on my computer and sometimes asked if she could "write on daddy's computer". I let her type with Word (put CapsLock on, big font size and pink color) and she would happily spend 20 minutes typing big bright letters on the screen.

After a while we started to really use the computer and I created a profile for her on my Ubuntu laptop. She was quite excited to pick her own password and desktop background image (nice butterfly we found using Google image search). Then we fired up the Terminal and started to explore the wonders of command-line. We learned how to create and edit text files with nano and I also created an alias "sano" (Finnish for "say") to espeak with Finnish language switch so we could make the computer speak. This was really exciting and would provide lots of fun for many "lessons".

And of course we explored the true power of Unix command-line by combining our skills with the pipe operator, we saved words to a file with nano and then piped that to "sano" which would then speak the file contents. Oh, what a joy when the file from earlier computer lesson would still be there next time and could be spoken out again. Our favourite one was a file with "1 2 3 4 5 6 7 8 9 10 täältä tullaan" (Finnish for "here I come", what you say after counting when playing hide and seek).

Getting started with programming

After a while it was time to get our hands dirty and start coding. I think the first programming we ever did was with Turtle Roy, a nice browser based programming environment where you can make a turtle (or other characters) move and draw on the screen. It is text based programming, but we were already quite used to typing commands as text after using the command-line. We have also used other, more graphical programming environments like Scratch and Lightbot game on the iPad. I have listed these and more links in Resources page.

She really likes Lightbot and has gotten pretty good at it, last time we did a recursive function which was loads of fun. We also go back to Turtle Roy every now and then, it's nice how it's so visual even though it's text based programming and every time she wants to draw more complex shapes with it so we have to learn some geometry to get all the shapes and angles right etc.

Taking things apart

Hardware work with little sister.

Many people today, even young people who use computers every day and are thought to be computer savvy, don't really know how they work inside. When I was a kid we always assembled our computers together with my dad. And we learned a lot about how they work while doing that. Today when people have their iPads and MacBooks, it's not that easy to really get a look inside a computer and take it apart. Luckily there are thinks like the Raspberry Pi that don't try to hide the computer inside a pretty shell that cannot be opened.

After we had started saving files on the computer, we started talking about how the computer memory and hard drive works. This naturally led to me promising her that we'll open up a computer and look inside. We first dismantled an old desktop computer to get a better look at how everything is wired together and discussed what each component does. Later I also let Kaisla and her little sister take apart my old laptop which wasn't working any more (picture above).

Game development

Once we started exploring Scratch, it didn't take long until she started thinking about developing a game. You can read more about our first game in a separate post.

We are currently developing our second game and I think I need to write at least a few posts about that too (Update: From idea to owl - designing our second Scratch game). Developing games together has been very entertaining and we have learned a lot. More info coming in future posts. Another dad developing Scratch games with his son has also inspired me to create this blog, so check out Games by Devon.

Closing thoughts

Learning about computers and coding has been very educational and we have had a lot of fun together, but most importantly I have spent time together with my daughter. Obviously it's not the only thing we do together and sometimes there are weeks or even a month when we don't do anything with computers, but so far we have always come back, either by her request or by my suggestion. It's something that I am interested in, and she enjoys it also. Programming is not for everyone and I'm not saying every parent with 5 year old kids should teach them programming, especially if the kid does not seem interested in it. But it's a great way to spend time together and learn new things if it's something that both enjoy.

If you have any thoughts, experiences with similar things or just comments about anything, please leave a comment below. And check back later for new posts.