Lesson 48 - Variables and Vim

When I came home from work today, the first thing she said was "Let's have a coding lesson". So we started by opening our web page in the browser, using the command-line, of course: open index.html. This is honestly the fastest way I know. Then I told her to open the secret drawer and she pressed Cmd-Alt-J without hesitation.

Then we opened the Javascript file game.js in vim and started coding. She didn't remember the var keyword but with a little tips here and there, she produced this.

And when I suggested that we call the tell function and give it two things (some text plus the variable p) she quickly amended

    tell("pinsesa",p)

Exit insert mode, save etc. Then back to the browser. And it worked. The program printed the word "pinsesa" (almost prinsessa) and the value of the variable p on the page.

That was enough for today. She created her first Javascript file and ran it in the browser. Not bad!

Lesson 47 - Javascript and Variables

She's been asking for another lesson since we did our little game design session on the weekend. Today I told her that our programming day is actually tomorrow, but she insisted that we have a session today and also tomorrow. She really wants to implement this little game. I started to warn her like "You gotta remember thought that..." and she finished my sentence "... it's hard. Yes I know!". So here we go.

So today started learning Javascript. Calling functions and introducing and mutating variables was on schedule.

I explained her that I had made some preparations so that we can start coding in the browser. But the best things in life start from the command-line so that's where we started too. We recapped files and directories: the snake ~ character symbolizes her home directory. 

We used cd karkuun to change directory to the newly created directory (named after our game, remember). She typed flawlessly! Then I asked here to list the files in that directory. She remembered that the command ln is used for that. Well, the correct one would be ls of course.

So we saw the directory listing

  README.md    index.html    game.js    helpers.js    jquery.js

I told here that "index.html" is the most important file here and it's an HTML file that can be opened in the browser. She demanded that I explain the other files too so I did. The helper.js file contains some helper functions I've made for her to get started with Javascript.

Then we opened the index.html in the browser. She remembered the English word open and was able to open the file by herself. We marvelled at the simple web page titled "Milan peli". She read this by herself with ease (caps, small letters, no problemo!).

Then I told her that there's a SECRET DRAWER in the browser and the YOU CAN CODE IN THERE! That was exciting! So in Chrome you can use Cmd-Alt-J to open a developer console. And pow, there was a blinking cursor and she knew what it meant!

A brief intro to Javascript followed. Starting with function calls. They are just like in Roy or Haskell, except you have to use parentheses in Javascript. So, we use parentheses when we call the tell function that prints the given message on the HTML page. Like

    tell("mila") 

Worked like a charm. She mastered the use of parens and quotes once I told her. Then another function call that changes the document title. (these functions were already defined in my helpers.js file).

    title("peli")

It seems that syntax is not an issue! It's not a big deal that javascript has a different function call syntax.

Then variables. I explained that we use variables for the positions of the Lion and Princess in the game. The start at positions 0 and 4 respectively.

    var p=4
    tell(p)

Now that the Princess moves, the variable gets a new value which is ... and she knew: 5.

    p=5
    tell(p)

At this point her smaller sister had been harrassing .. err ... helping us for a while and had produced this on my computer screen:

    eduootttyjkkoåäö..eeeeiiè1ätrqt

So we decided that enough had been achieved for this session. What did she do? She went to code.org again and started solving the coding puzzles there. And is still doing that. Coding is fun, isn't it?

The Choice of Language and Libraries

I've spent several hours researching. What platform should we build our "Princess vs Lion" game on? Even though the game is seemingly simple, it is far from trivial to implement with the skillset we've built so far. The problem lies in asynchronicity: the Lion moves on a regular interval while the princess moves when the spacebar is pressed. The game result depends on both. 

As the main developer of the Bacon.js library I'd love to apply the Functional Reactive Programming (FRP) paradigm. The source code using Bacon.js and CoffeeScript would look something like this:

princessPos = spacePress.scan 4, inc
lionPos = Bacon.interval(500).scan 0, inc
lionWon = Bacon.combineTemplate { princessPos, lionPos }
               .filter ({princessPos, lionPos}) -> princessPos == lionPos
princessWon = princessPos.filter((pos) -> pos >= 13).take(1)

Fine? Well, to me this looks awesome, but how likely is a 4-year old to grok FRP while my colleagues are still struggling with it? Surely she beats 50% of them in her Vim skills already but FRP, really? Also, she's totally unspoilt by Object-Oriented Programming (OOP) too. The code above is full of object method calls. She can hardly understand functions.

Next, imperative Javascript without OOP, with some helper methods (key, tell, later) I wrote. (That's an image. Blogger is driving me crazy by consistently ruining my nice formatting)

Like that? Hmm. That doesn't seem daunting to me. Even my wife understood the code after I explained it to her. And she's never seen Javascript before. On the other hand, neither has my daughter. So, using this approach I'd have to expose her to Javascript with mutable variables. Would you do that to your daughter?

Then I tried the Elm programming language that has a syntax familiar to her already. The problem is I couldn't come up with a satisfying solution at all. See the Gist if you're into that kind of thing.

Currently I'm slightly leaned towards the Javascript solution even though it feels like domestic violence. The upside is that the code is indeed quite simple and it will teach her to write code that you can actually run in a browser without a complex toolchain. Because that's what she'd really want to learn. To write games she can run in her browser.

Maybe I'll teach her out of the bad habits later when she masters them already. I'd really really like to make this simple game happen... I started with BASIC and gotos and I come out pretty ok, didn't I? Ha.

Update: I got the Elm version to work too.

Game Design

Today we started working on a new game, the name of which will be "Karkuun", which means something like "Run".

It started with a discussion on touch typing (among adults) and how you could learn it. I came up with an idea of a simple game where you have a string of random characters that you have to type before a monster eats them. Then I reduced the idea to a chasing game with two characters where the game state can be represented by two numbers.

So I asked my daughter if she wanted to start working on a game and she was all in. She's currently drawing and cutting the game characters from paper. We're gonna scan them soon.

Here's our game design on paper (in Finnish though).

I started by drawing a number line starting from 0 and ending at 13. Then I suggested that the game is about you being chased by a monster. She dissed that. So the idea is that a Princess if being chased by a Lion. I put the characters P and L on the number line at positions 4 and 0 respectively. Then we concluded together that

• If L==P (L equals P), then the Lion eats the Princess
• If P==13, then the Princess wins

We also agreed that

• Twice a second L++ (L gets incremented by 1)
• When spacebar is pressed, P++ (P gets incremented by 1)

And finally that, in the beginning

• L = 0
• P = 4

This indeed is all we need and the rest is a fairly simple translation from human language to computer language.

Now I have to convince her that it's best to start with a text user interface and add the graphics later. Because that will be the hard part. But let's start by scanning the paper figures first. Wish me luck with this one!

Hard Disc Replacement

We are currently replacing the hard disk of our old Macbook Pro. Or more precisely she's removing all the chassis screws and storing them into a cigar box while I'm writing this. This is a good excercise for dexterity and learning which way is counter-clockwise.

She loves to use tools. Daddy's girl. Soon we'll find out what's inside the box and will probably have a discussion on computer topology.

Lesson 46 - Hour of Code

Yesterday we had the first public Koodikoulu (Code School) happening at Reaktor. There's a nice posting about that event in Reaktor blog here in Finnish.

That was also the day I discovered that Hour of Code has a huge collection of interactive programming tutorials. Check it out here yourself.

So today we played a cute game where you have to help Pixel the Puppy find back home. Practically it's a Scratch-based game where you have to make the correct sequence of Run and Jump commands to get to the goal. She loved it. It started with very simple things and ended up with ones where you have to use a couple of Repeat blocks, each of which is used to repeat a sequence of one or two Jumps or Runs. 

She mastered the easy ones where the solution is like (in Turtle Roy'ish notation)

  s [Run, Run, Jump]

or

  r 3 Run

But in the more complex ones she needed some help and retries. The most complex ones were like

  s [r 3 (s [Run, Jump]), Run]

She enjoyed it nevertheless and completed the 12-part tutorial in half-an-hour or so. And got a Certificate with her name on it! We saved it to her home directory.

And it wasn't enough. We wandered around and went to Scratch again and found out that she had created a program by herself a few weeks ago without telling me. Made me proud again.

Now she's working on another Hour of Code tutorial by herself. This one.

Oh, she got enough.

Nope. She's starting another one. Lightbot. It's quite fascinating to watch her play and learn.

Lesson 45 - The Xylophone Star

Motivation was an issue again. "Daddy I don't want a computer lesson today". So I had to make a strategy. She has recently learned to play the piano a bit, so that she can play parts of simple children's songs like "Jänis istui maassa". So I challenged her to play Twinkle Twinkle Little Start on the xylophone. And she was hooked.

I prepared some functions in Turtle Roy, like this:

  let ti n=play n 500
  let taa n=play n 1000
  let taaa n=play n 2000

  let shh = play " " 500

Basically, there are "ti" and "taa" functions for playing a short or long note and "shh" for a pause. After playing a bit with the xylophone and the piano, I introduced this "instrument" to her and she was quickly able to play notes, like

  ti a

After just 2 notes she said "I want to make a sequence so that I can play multiple notes at once". I was so happy!

Then she started working on Twinkle Twinkle. She mastered the syntax for sequencing actions quit well and there we were, playing the xylophone and writing our program. And that was fun!

There was a lot of inline editing: she made a partial version of the song and played it, then went back (arrow up) to edit the song and add more notes and played it again. And again. And again. The end result was the "twinkle blah blah how I wonder what you are", but with a twist. We discussed whether it should go like the original version but she insisted on a different timing. You can see and hear it here.

A nice thing about the xylophone: it has the note names (C,D,E,...) written on the keys. So after playing a note, she can pick the key up and write the same letter on the computer.

Let's she if she'll make more songs with the same method.