Ladybug Drawing Player


It is impossible to imagine the today's world without digital electronic devices. At every step we encounter smartphones, ATMs and computers. Modern TVs, wash machines, microwave oven and refrigerators are controlled by digital processors.

Children as well as adults use these devices and want to know how they do work. But children have little experience to understand computer science. Other side most of them use web browsers to chat with friends and to look cartoons.

These base skills of computer usage are enough to code for Ladybug — a virtual actor of the free online teaching environment. You need nothing except a device with web browser and free time to study basic concepts of the imperative programming.

Teaching environment

Ladybug Drawing Player is an online implementation of another teaching environment CangaRoo that was used in the USSR secondary schools in the early 90s.

A wholly-owned subsidiary, IBM USSR Ltd., is established in Moscow to take advantage of business opportunities in the Soviet Union. Since 1990 IBM has sold more than 13,000 personal computers to the Soviet Union for use primarily in secondary schools. Read the source.

Both ones, Ladybug and CangaRoo, have the same programming language and play in the same virtual world — a checkered board of 15 columns and 19 rows. The actor walks over the lines and can paint them or not. Of course it can turn, but left only. To turn right it must turn left three times.

15x19 checkered board
Fig. 1. Drawing Player board.

The Ladybug Drawing Player can be used online or instlled locally. It is developed using Web Standards (HTML, CSS and JavaScript) and works in any modern web browser. A nice feature of the Ladybug teaching environment is that as the user interface as the programming language both can be translated to the native language of studients. The sources of this software are open under GPL-3.0 license.

You can see video lessons how to use Ladybug Drawing Player on Youtube channel and use the teaching environment online.

User interface

Ladybug Drawing Player can be controlled using touch screen but preffered control devices are mouse (or touchpad) and keyboard. The user interface consists of the five main parts (fig. 2):

Five main parts of the interface
Fig. 2. Drawing Player user interface.
  1. Environment current mode indicator. Ladybug Drawing Player has three modes: Interactive (the actor executes entered commands immediately), Programming (entered commands are stored to the program) and Program execution (execute the entered program).
  2. Main menu. Menu item can be selected by clicking it or by pressing appropriate key on a keyboard. As sample, to select next environment mode you can click its title (interact on the fig. 2) or press [TAB] key.
  3. Program editor. Simple text editor is enabled in the Programming mode only. The commands can be entered manually using the keyboard or selected from the menu.
  4. Player board. The checkered board where the actor draws.
  5. Notification area. Here information and error messages are displayed.

Programming language

Main commands of the drawing player programming language are:

Any image can be drawn using these commands, but writing a program using them only might take a long time. To make programs shorter and more clear sequences of these commands can be aggregated into procedures:

There are conditional statements to check if the actor is on the edge of the board:

The last part of the programming language commands are the statements to execute a sequence of commands repeatedly:

That's all about programming language. Let's look at some code examples.

Code examples

Sample 1. Sequential program.

Let's the Ladybug draw a 2x2 box! Ok, the program is here:

Sample 2. Procedural program.

The above program works well but it is too long and nobody can say what it draw before it will be executed. Let's use procedures:

Sample 3. Recursive program.

Well... How about a row of boxes? No problem, let's use a recursion:

Sample 4. Condition.

Hm... The actor crashes after the fifth box due it tries to go out of board. Let's protect the actor using conditional command:

Sample 5. While loop.

The above program works correct. But there is another way to execute a part of code repeatedly — using while loop instruction:

Sample 6. Nested loops.

The program can be extended to draw as many rows of boxes as possible:

More interesting but complicated examples can be found on the site about CangaRoo teaching environment (in Russian).