Monday, April 6, 2015

Komodo vs. PyCharm - Teenager Reviews Two Famous Python IDEs

by Kai of Palo Alto High School
As a fifteen-year old novice programmer who codes in Python, I tested two different editors, PyCharm Professional and the new Komodo IDE 9 that was just released.

When I first opened up PyCharm, I felt like it provides the maximum amount of features from the start. Initially, the crowded menu and taskbar were too much of a distraction as I could not figure out what many of the options actually did.  I liked that PyCharm gives me the ability to see the file path of the program I am editing. This is useful when I edit multiple programs at once, as it is easy to quickly distinguish one program from another. 

The other tools worked well and the ability to access old variables when writing new code is nice. My first impression of PyCharm was that it tried to be too versatile and sacrificed usability in the process.
When I opened up Komodo the first thing I noticed was the elegant presentation. The editor relies on alternating color schemes to make text easy to read. The entire window is taken up by the code you are editing. Additionally, the menu consisted of simple icons and pop-up menu’s that made editing and running my program a easy task.

A nice feature is that Komodo lets you know which function you are editing, a feature that would be nice to have in PyCharm. Two arrows at the top of the page allow you to revisit code you were previously editing.

This functionality is extremely helpful for longer pieces of code. Unfortunately, the icon based menu occasionally made it difficult to find what I are looking for. For example, I wanted the command to comment out a section of my code. Usually, it would be housed under the section of the menu called “Edit”. With Komodo there is no such section. Therefore, one either has to reference the “Search” function or have previous knowledge of the command in order to use Komodo effectively. Ultimately, Komodo 9 is a more efficient editor than PyCharm, but is held back by an icon-heavy menu.

Saturday, January 31, 2015

4th Grade Girl Python Coder - Tiled Map Creation

As fathers and mothers, we protect our children from disappointment.  In our quest to shield them from failure, we expect too little from them.  Every week, I am amazed by an ordinary 9 year old girl, banging out Python code in PyCharm from a blank screen.  Girl Coder represents one possible future of America.  Although in 20 years, she may be a baker, ballerina, housewife, or teacher, today she is a coder.

For many years, I had under the mistaken impression that kids under age 12 could not learn to program effectively.  I was wrong.  They can do it.  I made many mistakes as a parent-as-teacher with my first child.   The breakthrough insight for me came when I realized that almost all the books and curriculum out there was designed for adults.  At the time, back in 2011, most of the curriculum for children was still based on Java.  The bigger problem was that the curriculum was designed for adults, not children.  

Today, is just another Saturday stay-at-home morning for Girl Coder, age 9.  No surfing today as her brother took off to Tahoe for snowboarding and we decided to relax indoors for a change.  Piano and Python got her attention, not necessarily in that order.  :-)

She built a tile map using Tiled today.  She then used PyCharm to write a Pygame program to move a  girl around a map. This is a modification of PyChildren Lesson 3, The Moving Square.

The first step to make the lesson easier for young children is to use Tiled to output a png file instead of a TMX or JSON file.  In this game, she is using one large image as the entire map.  By using an image instead of JSON or TMX data, we don't have to parse the data.  Girl Coder uses Tiled like a paint program.  She likes the stamps and bucket fills.  Within about 20 minutes, kids can build a pretty snazzy looking map for their games.

The modification to lesson 3 starts off pretty simply.  For this lesson, the girl stays in the center of the screen.  The map moves.   The first tricky part is that she needed to move the map to the left in order to move the girl to the right.   That's not too bad since you can immediately test and see that the girl is moving in the wrong direction and just change things from addition to subtraction.

The goal is to get the girl to appear to move to the right.

In order to do this, the girl remains stationary and the map moves to the left.

In order to move an image to the left, subtract 1 from the x-axis.

At this stage, I'm not sure if she understands the concept of moving the map to the left to get the girl to appear to be moving to the right.  I think it's okay if she doesn't get it.  I'll plan on going through the map lesson again from the beginning and have her implement bounds detection.  She's developing a story with the map.  There are scary places and places with treasure.

The sequence for this lesson.

  1. Blank Screen
  2. Stationary Square
    1. Modify lesson to blit the background map to the screen
  3. Moving Square
    1. Modify lesson to move the map around instead of the player
  4. Keyboard Input
    1. Using the keyboard instead of the touchscreen

At this stage you can stop.  it's cool to see the character move around a map that the child made.  it is somewhat unsettling to not have bounds detection and run out of map.   Since Girl Coder has completed this same drill a number of times, I added bounds detection to the lesson.

Challenge of Bounds Detection

The main challenge with the lesson is how to get the girl to stay on the screen.  To prevent the girl from moving left, it is relatively easy.  Remember, to give the appearance that she's moving left, you're moving the map to the right.  You move things to the right by adding 1 to the x coordinate.  If you name the x coordinate map_x, then you move the character to the right by adding 1 every time through the loop.  

So, what number does map_x need to be less than?  Well, if you started map_x at 0, then when you moved the map to left, you subtracted 1 every time through the loop.  map_x then existed only as a negative number.  As long as map_x is less than zero, you can add one to it.  As soon as the number gets to zero, stop adding numbers to it.

As this is confusing, let's look at the code.

The size of the map is 1216 pixels by 826 pixels. The size of the Pygame window that the game is played in is 480 by 320.  You'll need to help the child with this section.
Here's the entire code listing.

Read Previous Adventures of Girl Coder

Other Options If You Can't Teach Your Own Kids

My daughter also takes classes at in Palo Alto.  The class is great.  It's run by Dr. Mark Miller and Dr. Len Erickson.  There are two levels, grades 1-3 and grades 4-5.  You may wonder if a 2nd grader can code.  Can they even type?  Yes, they can.  

At the beginning of 2015, it's more common to teach children to program.  The curriculum at is great.  It resembles my PyChildren curriculum, though my curriculum is designed for one-to-one teaching.  I'm not sure which method is more effective for teaching, but the PyChildren method is designed to bond your kids, not just to teach them programming.