1. Creating Directions for Origami using HTML5 JavaScript or Processing
Jeanine Meyer
Purchase College/SUNY

2. Overview Solution in search of a problem Demonstration, show code
JavaScript overview
Processing overview
Lessons for my classes

3. My challenge HTML5 (with JavaScript) added functionality
Drawing on canvas
Incorporating video (without use of plug-ins)
Already had use of images
I wanted a task that would use features (including images) together.
First used in Programming Games course, using HTML, JavaScript and CSS.

4. Later…
Realized that though I was driven by solution in search of a problem…
This was a way to encourage students to think in opposite way:
What technique was most appropriate for specific problem.

5. Origami Standard format for directions using line drawing.
Sometimes all photographs used.
Video clips becoming common
My approach is to use most appropriate for each step.
My objective as a programming teaching is to get students to think about what is the best for their applications at the appropriate level of granularity.
Demonstrate the power of mathematics (algebra, trigonometry, geometry).

6. Demonstration Page with other JavaScript examples:

7. Structure Array named steps holding functions and text
Basic functions such as valley, mountain, proportion, skinnyline, curvedarrow (most complex), etc.
Note: I should make this a distinct file to be brought in as external JavaScript
Specific to model, for example playtalk for playing video, lips, etc.
Standard trick of including video elements to make sure videos are loaded, but using CSS in style element to make them not be displayed immediately.
Look at source code online.

8. var steps= [ [directions,"Diagram conventions
var steps= [ [directions,"Diagram conventions. Kissy fish by Junior Fritz Jacquet from Piranha by Jun Maekawa."], [showkami,"Make quarter turn."], [diamond1,"Fold top point to bottom point."], [triangleM,"Divide line into thirds and make valley folds and unfold "], … ];

9. function valley(x1,y1,x2,y2,color) { var px=x2-x1; var py = y2-y1; var len = dist(x1,y1,x2,y2); var nd = Math.floor(len/(dashlen+dgap)); var xs = px/nd; var ys = py/nd; if (color) ctx.strokeStyle = color; ctx.beginPath(); for (var n=0;n<nd;n++) { ctx.moveTo(x1+n*xs,y1+n*ys); ctx.lineTo(x1+n*xs+dratio*xs,y1+n*ys+dratio*ys); } ctx.closePath(); ctx.stroke(); ctx.strokeStyle = origstyle;

10. Processing Processing is built on / with Java for digital artists.
Has its own Processing Development Environment.
We use it for Computer Science I. Strongly recommend!
Java in CS2
Java or Python in Data Structures
Python in Number Theory
JavaScript (and php) in Scripting course
php and SQL in Database course
Advanced Topics course can use R, Haskell, Max, ?
Processing has
Line drawing on canvas
Videos require a library and this can be problematic.
Images and videos can be independent of canvas
Programs very similar but
Processing required using parallel structures: an array steplabels for the labels and a switch statement for the function calls for the steps
Programs available on request and/or buy my books!

11. void donext() { if (nextstep>=steplabels
void donext() { if (nextstep>=steplabels.length) { nextstep=steplabels.length-1; } //this may be overkill. Stopping videos each time. talkPlaying = false; sinkPlaying = false; talkVideo.stop(); sinkVideo.stop(); background(255); switch (nextstep){ //this corresponds to the order of labels in the steplabels array case 0: directions(); break; case 1: showkami(); case 2: diamond1(); …

12. String[] steplabels= { //must correspond with the switch statement
String[] steplabels= { //must correspond with the switch statement. "Diagram conventions. Kissy fish by Junior Fritz Jacquet from Piranha by Jun Maekawa.", "Make quarter turn.", "Fold top point to bottom point.", "Divide line into thirds and make valley folds and unfold ", "Fold in half to the left.", "Fold down the right corner to the fold marking a third. ", … ];

13. void valley(float x1,float y1,float x2,float y2) { float px=x2-x1; float py = y2-y1; float len = dist(x1,y1,x2,y2); float nd = int(len/(dashlen+dgap)); float xs = px/nd; float ys = py/nd; for (int n=0;n<nd;n++) { line(x1+n*xs, y1+n*ys,x1+n*xs+dratio*xs,y1+n*ys+dratio*ys); }

14. References
My books frequently contain origami-related material
Programming 101 (Processing), Apress, June, 2018
Origami flower
HTML5 and JavaScript Projects, Apress, 2nd Edition on schedule for publication very soon.
Chapter on using HTML & JavaScript for Origami Directions