Abstract:

Turtle graphics is a popular subject for novice programming learners. In fact, however, turtle graphics present subtle and tricky problems for novice programmers and their teachers. Usually, popular programming languages can easily handle numbers that are integers or floating-point numbers. It is known that floating-point numbers cannot always accurately represent rational numbers such as 1/3 or finite decimal numbers such as 0.2. As is well known to experienced programmers, adding 0.001, say, 1000 times in a program does not exactly equal 1. This is a puzzling behavior for novices who do not have a precise understanding of binary numbers and floating-point numbers.

For this example, an exact number can be computed by using a library that can handle multi-precision rational numbers, such as the GMP (GNU Multi-Precision) Library. However, in the case of turtle graphics, even if the programmer does not explicitly use trigonometric functions, behind the scenes, trigonometric calculations such as sin(30) + sin(102) + sin(174) + sin(246) + sin(318) are required. The value of this equation should be exactly 0, but if we calculate it in JavaScript and output it, for example, we get the result 3.3306690738754696e-16. In order to accurately calculate such an expression, rational numbers are not sufficient; it is necessary to be able to handle square roots and the like. Otherwise, when the turtle's position is output as a numerical value for debugging, the value that should be 0 is not displayed as 0, or when a line should be drawn in the same place and the previous line should be hidden, the position shifts and the line gradually becomes thicker, and so on.

Considering automatic grading, the accumulation of errors can be a problem for the teacher as well. If images are saved in text format, such as SVG, it may be possible to automatically grade graphics programming problems in the same way as text output problems. However, a certain amount of error must be tolerated, because fomulas that should yield the same result may have different results due to differences in the calculation procedure and the way errors accumulate. However, without an understanding of the specifications of floating-point numbers, it is not easy for a teacher who does not necessarily come from a computer science background to determine what level of error is appropriate to set. If an accurate calculation is readily accessible, it is better to use it.

Of course, such formulas can be computed accurately using a computer algebra system such as Mathematica or SageMath. However, such systems are quirky and difficult to use in a programming learning environment for novice programmers, and it would be desirable to be able to perform accurate calculations from a Web-based graphical programming language such as Blockly.

Therefore, in this study, we implement a turtle graphics library using Calcium (pronounced "kalkium"), a library for computing algebraic numbers accurately. Calcium is a C library, but bindings are available for languages such as Python, Julia, Haskell, and C++. Here we use Emscripten to compile it into WebAssembly and use it from JavaScript for future use in Blockly and other applications.

This paper describes the implementation of the turtle graphics library in JavaScript, reports on its usability, including execution speed, and proposes actual usage. Finally, it discusses current problems and future plans.

Keywords:

Programming, Blockly, JavaScript, mathematics.