Creating Directions for Origami using HTML5 JavaScript or Processing Jeanine Meyer Purchase College/SUNY http://faculty.purchase.edu/jeanine.meyer

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

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.

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.

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).

Demonstration Page with other JavaScript examples: http://faculty.purchase.edu/jeanine.meyer/morehtml5examples.html

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.

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 "], … ];

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;

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!

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(); …

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. ", … ];

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); }

References http://faculty.purchase.edu/jeanine.meyer/origamiDirections.pdf 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