Abstract: New features in the latest (next) specification of HyperText Markup Language (HTML), specificially, drawing on a canvas and incorporating video, provide powerful and flexible capabilities for the production of directions for folding origami models. The methodology shown here demonstrates topics in geometry, trigonometry and algebra as well as basic programming ?that would appeal to teachers and students. In this paper, after providing some background on origami and on HTML5 and JavaScript, I describe the programs for the business card frog and the talking fish.
Origami refers to the art of paper folding. It is typically associated with Japan, but has roots in China and Spain as well. Traditional folds include the water bomb and the crane and flapping bird. Lillian Oppenheimer is credited with popularizing origami in the United States and she personally taught me the business card frog in 1972. ?Origami is a vibrant art form practiced around the world as well as the focus of research in mathematics, engineering, and computational complexity.
There is a standard format for book directions, aka diagrams, for origami and I built on that standard. In this approach, each step shows the next fold to be made using a set typography. The most basic folds either assume a valley shape when unfolded or a mountain shape and this is indicated by dashed or dotted and dashed lines. Any subsequent steps with folds unfolded typically indicate the folds using thin lines unless the sense (valley or mountain) is critical for making the next fold.
As will be demonstrated by looking at the directions and reading the next sections, my methodology provides a way to achieve exact positions for the line drawings since all coordinates are calculated. It also makes use of images and videos for operations for which line drawings may not be good enough for the reader.
Hypertext Markup Language 5 (HTML5) is the latest specification for documents on the Web. It is not yet official, but many, though not all, browsers recognize most of the features. These programs were tested in Firefox and Chrome. Safari and Opera probably work. Microsoft promises that the next Internet Explorer (IE9) will support HTML5.
The specification of HTML5 includes specification for the application development interface (API) for JavaScript and other languages. The bulk of these directions are in the JavaScript code.
HTML5 provides a mechanism called the canvas element on which the programmer can write code to draw paths (lines and arcs) and rectangles as well as images using image files. These operations are performed using a coordinate system to specify positions. The coordinate system has the property that the origin is in the upper left corner of the canvas and vertical values increase moving down the screen. This is the opposite of the usual approach in which the origin is at the lower right and vertical values increase going up the page. I could have finessed this by using the transformations provided, but I chose to accept it as is since it is common in computer systems. JavaScript includes a library of mathematical functions provided in what is called the Math class. This was useful for the trig functions and square root.
HTML5 provides native support of video, meaning that no special plug-ins are required, nor is it necessary to link to YouTube or other video hosting sites. A negative feature is that the browser makers have not agreed on a single encoding (codec) for video so that the practice is to create 3 versions of each video clip, with each browser using the one it supports. This situation may improve.
HTML5 and JavaScript provide many ways for interaction. In my origami applications, the web page has buttons so the viewer/folder can advance or go back to see the steps of the directions.
Download your Reports for HTML5
Advertisement