Tuesday, February 25, 2014

Lesson 53 - #8888FF

Today I promised to show my daughter some new features that I've added to Turtle Roy lately. So we started with the new text function. First on the paper and then in Turtle Roy:

    text "mila"

Once again, I had to remind that the text must be surrounded with quotes. It's actually quite hard to explain why some things need quotes and some don't, when you're explaining to a 4-year-old. Even though she turns 5 in a few days. Fortunately the concept of surrounding with quotes is now familiar and she's also got mad line-editing skills so stuff happens quite quickly now. Except when we get sidetracked, which we do often.

Before the lesson I had flashed her a very nice trick and she wanted to do the same. That is, draw some text repeatedly in a different angle with different colors. I used pen and paper to illustrate how the desired effect can be achieved. Like this.

Then we discussed, once again, how do we make the computer do like "first draw some text and then turn right 45 degrees". By sequencing, of course! We we had this established, she was on the task.

    s [text "MILA", lt 45]

This took like 15 minutes because we went into discussions about the usage of the CAPSLOCK key and how different angles look like and are written. The result was quite cool and she repeated it many a time (8 times to be precise). Then it was COLOR TIME! Not hard to guess which color she picked.

    color "pink"

Once again, the quotes. Before she started repeating the previous sequence 8 times, I suggested that we should create these "text flowers" all around the screen with different colors. And now it seemed like a good idea to use the repeat function to avoid manual repetion. So, we edited our command a bit:

    r 8 (s [text "MILA", lt 45])

It was nice to notice, once again, that line editing and surrounding things with parentheses is no longer an issue. This was easy! And the result was stunning. Her name written like a PINK FLOWER!!!

We moved 100 pixels up with the turle pen up (using penup, fd 100, pendown), then defined a new function like this:

    let mila = r 8 (s [text "MILA", lt 45])

And now drawing another flower, in light blue (#8888ff) was just an issue of

    color "#8888ff"    

And that was it! Basically we went through the basic programming concepts of repetion, sequencing and functions again, with different examples and had fun. You can have a look at the final program in Turtle Roy here.

Wednesday, February 19, 2014

Lesson 52 - Spam, Eggs and Spam

Today she was drawing with Paintbrush by herself. She had already drawn some nice figures (herself and me) when I entered the scene. That was also when the fun stopped. When I started asking her questions and offering advice on having the picture saved, she wanted to stop.

I quick figured she was dehydrated. When offered a drink, she gulped the whole glass of milk at once. And was full of energy again. We continued painting and she learned a bunch of new tools to use. We had fun with different color pickers once again.

She was quite keen on going through the menus and finding all kinds of features there. Indeed, a lot of learning happened even though we didn't actually code this time. Instead she learned some general power-user skills. Like the keyboard shortcuts for Saving (Cmd-S) and Opening (Cmd-O) files and Undo (Cmd-Z).

We ended up making an Easter Egg card with some text. Text that she typed flawlessly. Even the word "pääsiäismuna". Not all adults can type that correctly.

Then she asked if we can send our new  "pictures message" to mom. Yes we can!

So after saving our Easter Egg card, we opened Mail. And whoa, she had got mail from Google+ and Github (yes, of course she has an account). I tried to explain the purpose of those spammish mails to her. And when she saw the embedded video, she told me that it's an "advertisement video". So, she now pretty much understands marketing and spam.

But the point was to send the picture to mom and so we did. New mail (she remembered the button), then attach using the paperclip button and so on. It was a lot of fun that we were doing all this activity secretly from mom. A lot of giggling occurred.

And mom got mail!

Wednesday, February 12, 2014

Lesson 51 - Big In Japan

Just wanted to welcome my newly found Japanese readers!

This is continuation of my story about me and my 4-year old daughter writing a simple game "Princess vs Lion". Please have a look at the previous posts for details!

Today I once again used the cheap trick of starting our session with "code juice" (actually orange smoothie). Also change the original plan of learning Javascript functions to a more visual one. Today it was time to bring the Princess on the stage.

This is a figure my daughter drew a while ago and that we already scanned together on her Macbook. Before today's session I converted the scanned images to PNG format and gave them sensible names: prinsessa.png and leijona.png (princess and lion they are). Then I took her to the command-line prompt again. It was time to recap some file and directory stuff. Like

    mv Desktop/prinsessa.png karkuun/

That was to move the princess image file to the directory where our game-under-development resides. Then

    cd karkuun

That was to "go" to the karkuun directory and list the files in there. She didn't remember much of the command-line skills we had practised earlierly. Actually ls was the only one she properly remembered. We had a brief look at the files in the directory. Then

    open index.html

.. to open the game's HTML page on the browser. And Cmd-Alt-J to open the "secret drawer" that is the Chrome Developer Tools section where we can play around with Javascript. This 3-finger shortcut she did remember, with just a little help. Then I introduced to here a newly written helper function "image" that can be used to display an image on the page. So by running


...we got the picture of the princess on the page. There was much rejoicing. And by the way at this point we had spent like 15 minutes mostly discussing this and that and singing and laughing and doing occasional somersaults on the bed. And doing computer stuff in the middle. She had had the idea that we'll so a little theatrical show right after our session to the rest of the family. It was a bit hard to concentrate, but it was fun anyways.

Yet, she wanted to save our work before quitting. So we went to command-line, used vim to add the same piece of code


...to our main Javascript file game.js. Then was time for the show. It was a success and the audience (mom) gave a standing ovation. Good times!

Oh and I told her that people in Japan are reading about her adventures.

Wednesday, February 5, 2014

Lesson 50 - You Are The Turtle

Today I came home very tired and was asked to do a computer lesson. I started with the pretext that the thing we're working on (the fairy vs. lion game) is in fact too complicated and that it doesn't make sense to even try when we were both so tired.

And I sucked. She wasn't very motivated to learn more about variables and I wasn't able to help.

Soon though, when having evening snack, I decided to try a little game. We had a kettle and a potholder on the table. I told her that the potholder is a variable. Then we agreed that the value of a spoon is 1. I put the spoon on the potholder and asked what was the value of the potholder variable. She knew it. Then we named the variable and agreed that the kettle is also a variable. By adding a spoon, we assign its value to 1 too. Then I asked here what is kettle + spoon. And there is was. She said 2.

So maybe that's how you should teach variables.

Then we went back to the computer again and she got quickly demotivated again. And so did I. I was sure there's no way to get her to play with variables anymore. Then I left the room with the younger sister to was her teeth.

What followed was surprising. Not only did my wife manage to motivate her to play like 10 minutes with variables by asking a lot of questions and being positive. They also made a cool drawing with Turtle Roy.

Not sure what to deduce from this, but I'll try.

  • If you're ever going to teach anything to a child, you've got to have a positive attitude yourself. 
  • Don't set expectations too high
  • Setbacks happen. It doesn't matter. What matters is how you react.
  • If something doesn't work, try something different. Maybe your wife/husband should teach instead.
  • Use analogues with stuff from the real world. A kettle is a nice variable. If your drawing with turtle roy, consider playing it in the real world. You're the turtle.
Always remember, you're the turtle.

Saturday, February 1, 2014

Lesson 49 - Memory Reset

Encouraging: subject wants to start having coding lessons everyday instead of once a week.

Disencouraging: subject seems to have forgotten everything from previous lesson, except the game we are supposed to make.

Also, she seemed dead tired during our brief session. We read through our previous code and practised variable assignments, increments (++) and function calls in Chrome Developer Console.