Keywords

1 Introduction

Recently, the programming is getting popular and integrated into the grade school’s curriculum. The programming is said to be effective to cultivate the thought process that is so called “logical thinking.” Ministry of Education, Culture, Sports, Science, and Technology is now promoting the programming education in the elementary school [1]. We can expect the programming is a common practice for everyone.

This paper proposes a tangible programming environment which the user uses on a smartphone. Our goal is to provide those who possess only a smartphone programming environment so that they can start learning programming without any preparations. It is well known that visual programming languages are suitable for young programmers. The most famous one is Scratch that Mitchel Resnick developed [2]. The user manipulates visual joining blocks that represent syntax elements to construct programs. Visualization requires certain region, i.e. big screen. This may be a restriction for providing programming experience for those who do not have personal computers. Today, almost everybody has a smartphone and it has significant computing power. On the other hand, what hinders users from widely using it in programming is its small screen. It is not suitable for fine operations because of the poor operability, which causes frequent recognition errors.

In order to address this problem, we propose a tangible programming environment where the user can program not in a screen but on a table by using physical cards in this paper. Each card used in the environment represents a certain command of an abstract imperative programming language. The user places cards on a table by hand and combined them to create programs. Each card has a QR code, which the user makes his or her smartphone read. After reading all the codes, the user makes them execute on the smartphone and validates the results on the tiny screen. In addition, the user can draw arbitrary animation characters on a paper, which they input as a photo into their smartphones and use it in their programs just as the Scratch user can manipulate characters called sprits. Thus, the user of our programming environment can construct any program as the Scratch user can program without using personal computers.

2 Programming Environment

The user of this application program can learn programming while producing programs such that they can construct them in Scratch. The user can use up to three arbitrary images in the programs by taking their photos into their smartphones. When the user starts the application, first, the user is asked to take drawings called sprites as shown Fig. 1. A sprite must be identified by the identification marker.

Fig. 1.
figure 1

The identification marker and a marked sprite

Full size image

A program is constructed by combining command blocks that instruct a sprite how to move. A command block has a label that shows what the command block represents, and a QR code that represents a command for the corresponding sprite. Figure 2 shows a part of a program that uses five command blocks and how they are read though the camera on the smartphone. A command block consists of three items, namely ID, the explanation, and the command. ID is a six digit integer that is used for identifying each block to avoid reading the same command block more than once. The explanation is a short description showing what the block does. When the user read a command block by the smartphone, the explanation appears on the screen so that the user can confirm its read. The command is the instruction given to the sprite. This is corresponding to one statement of an ordinary procedural programming language. The commands are stored in an array in the system, and picked one by one during the execution.

Fig. 2.
figure 2

Command blocks and how they are read

Full size image

There are eight kinds of command blocks the programming environment provides; they are start blocks, instruction blocks, numeral blocks, variable blocks, wait/terminate blocks, repetition blocks, conditional branch blocks and cloning blocks. We describe them in the next sections.

2.1 Start Blocks

Each program begins with a start block. Since the system can handle three sprites, and they can behave concurrently, there are three start blocks. Each start block starts the corresponding sprite in action when the user pushes the “play” button. Also a sprite can be cloned as described later. Therefore there are three more start blocks to indicate at where the cloned sprite starts its action.

2.2 Instruction Blocks

Instruction blocks instruct how the corresponding sprite acts on the screen, such as moving in specified distance horizontally or vertically, rotation in specified degree, bouncing, expanding and reducing its size, making transparent (invisible), and making opaque (visible).

2.3 Numeral Blocks

Some instruction blocks need some numerical values such as moving distance and rotation degree. Numerical blocks provide the values. The system provide a feature for the user can input numerical values on the screen, but our experiments reveal that numerical blocks are more convenient than screen inputs.

2.4 Variable Blocks

Our programming environment is designed to produce ordinary procedural programs. Therefore we need variables to be defined with certain values and to be used them later. Variable blocks are used in such occasions. They are used with instruction blocks in the place where numerical blocks are allowed as well as in the assignment instructions.

2.5 Wait/Terminate Blocks

In a multi-thread environment, the functionalities of suspending and terminating an action is required for each sprite. Wait block and terminate block do the works. A wait block stops the corresponding sprite’s action for the specified period and resumes its action after that. It takes a numerical block or a variable block as the argument. Terminate block simply kill the corresponding concurrently running thread.

2.6 Repetition Blocks

A pair of repetition blocks provides repetition structure. Repetition-start block indicates where it starts repetition and takes a numerical block or a variable block as the argument as the number of iterations. Repetition-end block indicates where it stops. The sequence of actions the user want the sprite performs is placed between the repetition-start block and the repetition-end block. The system also has a pair of infinite repetition blocks.

2.7 Conditional Branch Blocks

In order to construct the conditional branch structure, the environment provides a triple of branch blocks and three condition blocks. Each of three branch blocks corresponds to the “if,” “else,” and “end-if” components of ordinary if-then-else structure, and three condition blocks represent =, <, and > respectively.

Since our programming environment mainly produces moving sprites’ actions, we provide special condition “when this sprite bump into the other sprite” construct. Since each thread represents one sprite’s action, “this sprite” is implicitly known. Therefore this structure simply specifies the sprite into which the current thread’s sprite bumps and what actions the current thread’s sprite takes.

2.8 Cloning Blocks

Our system allows a sprite to clone itself. The cloned sprite looks like the same as the original one, but has its own thread. Therefore it behaves independently from the original sprite’s thread.

3 Discussion and Conclusions

We have proposed a programming environment that provides enough features so that the users of this system can construct any program as the Scratch users can construct. Using QR codes is the key of our success because our system suppresses users’ operations on the screen. When using numerical blocks, the user can construct a program only placing various blocks on a table, and taking the blocks as images by his or her smartphone. Figure 3 shows an example program that imitates the “Pong Starter” published by a Scratch team (https://scratch.mit.edu/projects/10128515/). Figure 4 shows the execution screen on a smartphone.

Fig. 3.
figure 3

Example program imitating “Pong Starter”

Full size image
Fig. 4.
figure 4

Executing the Pong Starter like program

Full size image

Current system requires the user to scan the entire program at once. This requirement hinders the user from constructing a large scale complex program. Also current programming environment lacks of extensibility. The user cannot add new constructs to the environment. As the next steps, we plan to address these problems. Since one QR code can contain considerable amount of information, we plan to add the subprogram feature. By using this feature, the user should be able to collapse into a subprogram block. Then, the user could archive such subprograms as library functions. Also we plan to provision this programming environment so that the user can add new program constructs.

There are only a few tangible programming environment inspired by Scratch. Yashiro et al. extended the instruction blocks of the Scratch to physical blocks, designing a tangible interface where users can program the behaviors of physical robots by composing the blocks by hands as well as the behaviors of the images of robots on a display [3]. Matsuzaki et al. constructed an environment that composes graphical representations of programs with a tangible environment through the augmented reality technique [4]. Through studying related works, we would like to make our programming environment complete.