Embed Size (px)
DESCRIPTION
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.
Citation preview
Creating Directions for Origami using HTML5Jeanine Meyer
Purchase College/SUNY
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.
BackgroundOrigami 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
4/10/2023 [email protected]
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.
Readers are invited to try out my directions by going to the websites: http://faculty.purchase.edu/jeanine.meyer/html5/origamifrog.html and http://faculty.purchase.edu/jeanine.meyer/html5/origamifish.html
The source code for HTML documents can be examined using commands in most browsers (e.g, in Firefox: View/Page source). I include the complete code for the two examples in Appendix 1.
ImplementationI describe the basic methodology I used to produce the directions, the utility functions required for these two examples, and then details for the frog and then the fish.
Basic outlineAn HTML document consists of text and tags, the tags called markup. An example of a tag is <html>. Most tags come in pairs, with the second one bearing the same name preceded by a slash. The general structure is
<html><head><title> title appearing a special place in the browser </title><style> formatting directives </style><script> Javascript code </script></head><body>content of the document, often structured using markup</body></html>
A canvas element (there can be more than one, but my examples each just use one) is contained in the body. Similarly, a place, called a div, for the text describing each step is in the body and will be shown later in this section.
My aim was to produce line drawings, similar to those found in books, with calculations for the coordinate positions of the critical points and lines. That is, I did not want to measure and record lengths or angles, but have JavaScript do that task for me. This would
4/10/2023 [email protected]
work even for folds done 'to taste' as the origami jargon goes because I could determine the exact positions I chose to use.
JavaScript, just like other programming languages, has functions, pieces of code that can be invoked by name with or without extra information stored in parameters, and variables, names associated with values. My programs include many of what I call utility functions, for example, a function that draws a dashed line of an indicated color from a point defined by x1, y1 to a point defined by x2, y2. I also programmed functions for determining the intersection point of two lines and the distance between two points. I used variables to represent the coordinates of significant points of my model and other values. For example, the fish model is made with a standard sheet of origami paper, called kami. I defined a variable:
var kamiw = 4
to hold the fact that the kami was 4 inches wide. I defined another variable representing the conversion from inches to pixels:
var i2p = 72;
I decided that, after showing the representation of valley and mountain folks, the fish diagrams would start with the kami rotated to be a diamond shape with corners a, b, c, and d. The a corner is to the left, the b at the top, the c at the right and the d on the bottom, directly below the b. I needed to make one independent decision: determine the location in terms of pixels for a. From that point on, everything else is determined by calculations. The following variable declaration statements set up the values that will be used for all that follow:
var diag = kamiw* Math.sqrt(2.0)*i2p;var ax = 10;var ay = 220;var bx = ax+ .5*diag;var by = ay - .5*diag;var cx = ax + diag;var cy = ay;var dx = bx;var dy = ay + .5*diag;
A similar approach is taken for the frog. Some calculations are more intricate than others.
Each folding step would be represented by a function to produce the image along with a piece of text. The image is produced on the one canvas element and the text placed in a div element. The entire <body> element for the frog follows:
<body onload="init();"><canvas id="canvas" width="900" height="400">Your browser does not recognize the canvas element </canvas><br/><div id="directions"> Press buttons to advance or go back </div><hr/><button onClick="goback();" style="color: #F00">Go back </button> <button onClick="donext();" style="color: #03F">Next step </button>
4/10/2023 [email protected]
</body>
The init function starts things off by setting key variables and showing the first image with its accompanying text. The whole set of directions is specified using an array of arrays, steps, with each inner array holding the name of a function name and a string of text. This made it easy for me to develop each application by adding steps one at a time. I determined the functions and relevant positions. I also inserted new steps in-between as needed. In fact, I added the very first step/picture for each model after I had completed everything else. I decided it was important to display the conventions for valley and mountain folds.
The features of HTML5 made it possible to create a function for displaying a video clip or a photograph as easily as creating a function for drawing lines on the canvas. This meant that I did not need to change the overall mechanism when I decided to add a photograph for the last step of the frog and later insert video clips and photos at certain points for the fish.
The viewer (folder) uses buttons to go forward or backwards in the display of steps.
The next screen shot shows an intermediate step for folding the frog, accompanying text, and the buttons.
4/10/2023 [email protected]
For purposes of this exposition, I will describe the utility functions next. Keep in mind that this was not the order in which they were created. After creating functions for representing valley and mountain folds, I started on the frog and did what was needed to describe each step.
Utility functionsI define a function as a utility function if it may be of use to another origami model, though I developed the functions as needed when programming the frog directions and then the fish. The current set of functions is shown in the table.
Functions relating to general schemedonext advances to the next stepgoback goes back to previous stepinit initializes: sets variables, and calls
donext to present conventions of diagramming
directions displays convention used for diagrams (e.g., valley being dashed line)
Diagrammingvalley draws dashed line, sometimes in a
color, representing valley foldmountain draws dots-and-dashes, sometimes in a
color, representing mountain foldsolidline draws solid line (lineWidth is 2). Note:
lines are drawn in other functions with the set lineWidth.
skinnyline draws thin line (lineWidth is 1)dot draws dot, used by mountain function
and debuggingshortdownarrow draws small vertical arrowscurvedarrow draws curved arrow
Mathematicsuselawofsines* uses Law of Sines in specific way to
calculate a position for frogproportion general function: returns position
along line segment a specified proportion
dist distance between two pointsintersect location of intersection of two line
segments (assumes lines do intersect)
4/10/2023 [email protected]
*The uselawofsines function is specific to the frog, but I decided to keep it around to remind me of how the Law of Sines can be used to determine an angle or a side length in a triangle assuming some information is known.
As an example, I developed the code for intersect by determining the equation for each of the two lines and then writing the expression for the solution. The so-called two point equation for a line going through points x1,y1 and x2,y2 isy-y1 = ((y2 – y1)/(x2-x1))* (x – x1)
and the slope of this line is (y2-y1)/(x2-x1).
Using the same form, the equation for a line going through x3,y3 and x4,y4 isy-y3 = ((y4 – y3)/(x4-x3))* (x – x3)
and the slope of this line is (y4-y3)/(x4-x3).
The intersection is found by solving each of these two equations for y and then setting the two equal to one another. This produces an equation in x. I/my code then solve this equation for x. Lastly, I/my code uses one of the two equations to get the corresponding y.
I create new variables to simplify the expressions: m12 is set to the slope of the first line segment and m34 is set to the slope of the second line segment. The variable m is set to m34/m12. Note that the calculation is to determine the intersection of the line segment going from (x1,y1) to (x2,y2) and the line segment (x3,y3) to (x4, y4). I am not consistent with naming: you can see in the examples below that I use midx and midy to define a position. Note also the comment in this code. This is not a general function, which would require checking for vertical or horizontal lines and for the lines being parallel.
function intersect(x1,y1,x2,y2,x3,y3,x4,y4) {//only works on line segments that do intersection & not vertical
var m12 = (y2-y1)/(x2-x1);var m34 = (y4-y3)/(x4-x3);var m = m34/m12;var x = (x1-y1/m12-m*x3+y3/m12)/(1-m);var y = m12*(x-x1)+y1;return ([x,y]);
}
Origami frogThe Japanese word for 'frog' and 'to return' are pronounced the same, kaeru, and so origami and ceramic frogs often were placed on shrines, such as places in the homes of fishermen or other travelers. In any case, there are many origami frog models. This one is a good first lesson, especially because it jumps when you stroke the back as shown in the following photograph.
4/10/2023 [email protected]
It also has a certain appeal because business cards are frequently available and often exchanged. The model must be made with a rectangle that is NOT a square and with stiff paper. An index card would also be suitable.
The final (at the time of writing this paper) set of steps for the frog is shown in the declaration statement for the steps array:var steps= [
[directions,"Diagram conventions"], [makebuscard,"Start with a business card..."],
[adiagonal1p,"...make a diagonal fold."],[diagonal1,"Unfold last fold."],[adiagonal1," you see one valley fold."],[adiagonal2p,"Now make the opposite diagonal"],[diagonal2,"Unfold last fold."],[adiagonal2, "Turn over."],[turnedover,"You see two mountain folds."],[unfoldedp,"Bring top to ends of x to make valley at waist of X."],[topdown,"Unfold last fold."],[unfolded,"Press sides in to collapse into arrow..."],[collapsing,"keep pressing."],[arrow,"Turn over."],[arrowunder,"Now to make the front legs"],[prerightleg,"Turn up right flap to form leg ( this is to taste)."],[preleftleg,"Turn up left flap to match."],[makeleftleg,"Both front legs made."],[prethinned,"Fold in sides to make frog body thinner (to taste)."],[thinned,"Two more folds to go. These are soft folds."],[thinned1,"Fold bottom up to top, soft crease."],[foldedup,"Folded up. One more fold."],[foldback,"Fold bottom back down to fold you just made, soft crease."],[doneupsidedown,"Turn over ..."],[showfrogpicture,"and stroke back to make frog jump!"]];
Repeat: readers need to understand that I did not write out this list all at once, but started with the first step, added steps one at a time and tested as I went along. This included deciding on the utility functions.
As an example, I describe the thought process for calculating the points for the upturned legs. The table shows the diagrams with critical points labeled. There actually is not a point mid, but a pair of variables, midx and midy and similarly for other points.
4/10/2023 [email protected]
The challenge here was determining the 'to taste' for forming the leg. I realized that I could define an exact position. I decided to calculate the position 1/3 of the way from c to mid. I wrote a function, proportion, that returned a two-element vector with the correct x and y values. The line of code was
var rightleg=proportion(cx,cy,midx,midy,.33);
The next step was to indicate that the folder is to make a valley fold from the middle of the base of the triangle to the calculated point. The middle of the base is point g and the calculated point to taste is rl. The relevant line of code is:
valley(gx,gy,rlx,rly,"green");
Now, the challenge is to compute the coordinates for what is labeled legpoint in the diagram. The red label ang refers to the angle of the smaller triangle. I use the Law of Sines to calculate the smaller angle. The Law of Sines says that the ratio of the sine of each angle in a triangle to its opposite side is the same as the ratio for the other corners. Note that the outer angle for the small triangle (and the whole, 'arrow head' triangle) is 45 degrees, PI/4 in radians, so since the ratio can be computed for this corner and the distance opposite ang is known, ang can be calculated.
My code doubles the value of ang to calculate the green angle and then uses basic trigonometry to compute the legpoint. The distance from g to legpoint is known, being the same as g to c.
4/10/2023 [email protected]
The photograph at the end served the purpose of showing how to make the frog jump. This can be done by a line drawing portraying a three-dimensional scene but I would need to do that plus draw a finger and a photograph seemed much easier and feasible with the HTML5 drawImage command.
function showfrogpicture() { ctx.drawImage(frog,40,40);}
Origami fishThe talking fish is an action model made from a square, such as the standard kami paper.
The figure is a screen shot of the video clip shown as the last step of the directions. Video clips are not necessary or even best for much of the folding but for the last step and also an intermediate step involving the sinking of the center square, the video clips serve a critical role.
Video is presented in HTML5 using the video element and, following current practice, each element references three distinct files, each holding the same video content, but made with different encodings. This is to accommodate the lack of standardization on encodings (codecs) for video by the different browsers. For this application, I include two video elements and use a directive in the style element to make them NOT display until the appropriate moment. The relevant coding is in three places. The style element holds
video {display: none;}
This makes all video elements not display. The code will change that at the appropriate time.
The body element holds the definitions of the video:
<video id="sink" loop="loop" preload="auto" controls="controls" width="400">
4/10/2023 [email protected]
<source src="sink.mp4video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'><source src="sink.theora.ogv" type='video/ogg; codecs="theora, vorbis"'><source src="sink.webmvp8.webm" type='video/webm; codec="vp8, vorbis"'>Your browser does not accept the video tag.</video><video id="talk" loop="loop" preload="auto" controls="controls"><source src="talk.mp4video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'><source src="talk.theora.ogv" type='video/ogg; codecs="theora, vorbis"'><source src="talk.webmvp8.webm" type='video/webm; codec="vp8, vorbis"'>Your browser does not accept the video tag.</video>
Lastly, the functions to display the steps involving video are similar:
function playtalk() {v = document.getElementById("talk");v.style.display="block";v.currentTime = 0;v.play();canvas1.height = 50;
}
function playsink() {v = document.getElementById("sink");v.style.display="block";v.currentTime = 0;v.play();canvas1.height = 50;
}
Notice that these functions each decrease the height of the canvas element in order to avoid pushing the buttons too far down the screen. The donext function erases any video and restores the height of the canvas. Most of the time, these have no effect, but this was the best place to put the code.
function donext() {if (nextstep>=steps.length) {
nextstep=steps.length-1;}v.pause();v.style.display = "none"; //erases last video playedcanvas1.height = 480; //restore heightctx.clearRect(0,0,cwidth,cheight);ctx.lineWidth = origwidth;steps[nextstep][0]();ta.innerHTML = steps[nextstep][1];nextstep++;
}
The fish model inspired me to add the facility of drawing a curved arrow. This was not easy and is the longest function in the application. Arcs in HTML5 are drawn using the
4/10/2023 [email protected]
center of a circle, the radius, the starting and stopping degrees, and the direction. For this application, I needed multiple cases (vertical, horizontal and other). There also was the challenge of drawing the small lines at the arrow head. See code in the Appendix.
The steps of the directions as captured in the array steps follows. Note: there are no line breaks in the code and each string of text appears on one line.var steps= [ [directions,"Diagram conventions"], [showkami,"Make quarter turn."], [diamond1,"Fold top point to bottom point."], [triangleM,"Divide line into thirds and make valley folds and unfold "], [thirds,"Fold in half to the left."], [rttriangle,"Fold down the right corner to the fold marking a third. "], [cornerdown,"Unfold everything."], [unfolded,"Prepare to sink middle square by reversing folds as indicated ..."], [changedfolds,"note middle square sides all valley folds, some other folds changed. Flip over."], [precollapse,"Push sides to sink middle square."], [playsink,"Sink square, collapse model."], [littleguy,"Now fold back the right flap to center valley fold. You are bisecting the indicated angle."], [oneflapup,"Do the same thing to the flap on the left"], [bothflapsup,"Make fins by wrapping top of right flap around 1 layer and left around back layer"], [finsp,"Now make lips...make preparation folds"], [preparelips,"and turn lips inside out. These are reverse folds."], [lips,"Pick up fish and look down throat."], [showthroat1,"Stick your finger in its mouth and move the inner folded material to one side"], [showthroat2,"Throat fixed."], [rotatefish,"Squeeze & release top and bottom to make fish's mouth close and open"], [playtalk,"Talking fish."]];
The addition of the showthroat functions was a late one. I decided it was helpful to the viewer to see a photograph of the fish throat.
To illustrate the use of the coordinate system transformation functions, here is the code for producing the last line drawing:
function rotatefish() { ctx.save(); ctx.translate(kx,my); ctx.rotate(-Math.PI/2); ctx.translate(-kx,-my); lips(); ctx.restore();}
This function saves and then restores the original coordinate system. You can say that since this is the last drawing, it isn't necessary, but it is a good practice. The first translate command moves the coordinate system to a point on the model. The rotate command
4/10/2023 [email protected]
rotates 90 degrees. The second translate command moves the coordinate system to a position analogous to using the next function to draw the whole model.
DiscussionThough the code may appear daunting, the applications came together relatively quickly, only a few hours for each one. I re-wrote each when I finally came to terms with how to show unfolded folds. I added the picture to the frog and the two video clips and then the two pictures to the fish later. Lastly, I added the very first step for showing the conventions for lines. This was easy to do because of the structure of the steps array.
My original objective was to demonstrate HTML5 capabilities and I consider it a success. However, the use of geometry, trigonometry and algebra also was fun and may be intriguing to teachers and students of algebra, geometry and trigonometry. The examples also demonstrate how programming involves the definition of small[er] functions that may be invoked multiple places in the application. I am confidant that other origami models will produce similar experiences.
Appendix 1: Source code Here are the source code documents for both applications. Note that not all of the utility functions are used in each case. An outline is
<html><head><title> title appearing a special place in the browser </title><style> formatting directives for buttons and the directions div for the accompanying text.Also, for the fish, the directive making all videos not display initially. </style><script> Javascript code variables for the modelutility function definitionsfunction definitions for individual steps for each model</script></head><body><body onLoad="init();">For the fish, the video elementsFor both:<canvas id="canvas" width="900" height="480">Your browser does not recognize the canvas element </canvas><br/><div id="directions"> Press buttons to advance or go back </div><hr/><button onClick="goback();" style="color: #F00">Go back </button> <button onClick="donext();" style="color: #03F">Next step </button></body></body>
4/10/2023 [email protected]
</html>
Source code for origamifrog.html
<!DOCTYPE html><html><head><title>Origami frog</title><style>button {font-size:large; font-family:Georgia, "Times New Roman", Times, serif;}#directions {font-family:"Comic Sans MS", cursive;}</style><script>var ctx;var ta;var buscardw = 2.0;var buscardh = 3.5;var i2p = 72;var dashlen = 8;var dgap = 2.0;var ddashlen = 6.0;var ddot = 2.0;var dratio = dashlen/(dashlen+dgap);var ddtotal = ddashlen+3*ddot;var ddratio1 = ddashlen/ddtotal;var ddratio2 = (ddashlen+ddot)/ddtotal;var ddratio3 = (ddashlen+2*ddot)/ddtotal;var busx = 10;var busy = 10;var nextstep;function dist(x1,y1,x2,y2) {
var x = x2-x1;var y = y2-y1;return Math.sqrt(x*x+y*y);
}//specific to frogvar steps= [
[directions,"Diagram conventions"], [makebuscard,"Start with a business card..."],
[adiagonal1p,"...make a diagonal fold."],[diagonal1,"Unfold last fold."],[adiagonal1," you see one valley fold."],[adiagonal2p,"Now make the opposite diagonal"],[diagonal2,"Unfold last fold."],[adiagonal2, "Turn over."],[turnedover,"You see two mountain folds."],
[unfoldedp,"Bring top to ends of x to make valley at waist of X."],[topdown,"Unfold last fold."],[unfolded,"Press sides in to collapse into arrow..."],[collapsing,"keep pressing."],[arrow,"Turn over."],[arrowunder,"Now to make the front legs"],
[prerightleg,"Turn up right flap to form leg ( this is to taste)."],[preleftleg,"Turn up left flap to match."],
4/10/2023 [email protected]
[makeleftleg,"Both front legs made."],[prethinned,"Fold in sides to make frog body thinner (to taste)."],
[thinned,"Two more folds to go. These are soft folds."],[thinned1,"Fold bottom up to top, soft crease."],[foldedup,"Folded up. One more fold."],
[foldback,"Fold bottom back down to fold you just made, soft crease."],[doneupsidedown,"Turn over ..."],[showfrogpicture,"and stroke back to make frog jump!"]];
var ax = busx;var ay = busy;var bx = busx + buscardw*i2p;var by = busy;var cx = bx;var cy = busy + buscardw*i2p;var dx = bx;var dy = busy + buscardh*i2p;var ex = ax;var ey = dy;var fx = ax;var fy = cy;var hx = ax;var hy = ay + buscardw*i2p*.5;var ix = ax + buscardw*i2p;var iy = hy;
var ease = .25 * (hy-ay);var aex = ax;var aey = ay+ease;var bex = bx;var bey = ay + ease;var hex = hx + ease;var hey = hy + ease;var iex = ix - ease;var iey = iy + ease;var midx = ax + buscardw*i2p*.5;var midy = ay + buscardw*i2p*.5;var gx = midx;var gy = fy;var rightleg = proportion(cx,cy,midx,midy,.33);var leftleg = proportion(fx,fy,midx,midy,.33);var rlx = rightleg[0];var rly = rightleg[1];var llx = leftleg[0];var lly = leftleg[1];var jy = midy + .5* (ey-midy);var frog = new Image();frog.src="frog.jpg";
function proportion(x1,y1,x2,y2,p) {var xs = x2-x1;var ys = y2-y1;var x = x1+ p*xs;var y = y1 + p* ys;return ([x,y]);
}function prerightleg() {
4/10/2023 [email protected]
arrowunder();valley(gx,gy,rlx,rly,"green");
}function makerightleg() { //right leg from underneath
arrowunder();ctx.beginPath();ctx.moveTo(gx,gy);ctx.lineTo(rlx,rly);var legpoint = uselawofsines(gx,gy,rlx,rly,cx,cy,1);ctx.lineTo(legpoint[0],legpoint[1]);ctx.lineTo(midx,fy); ctx.closePath();
ctx.fill();ctx.stroke();
}function preleftleg() {
makerightleg();valley(gx,gy,llx,lly,"green");
}function makeleftleg() {
makerightleg();ctx.beginPath();ctx.moveTo(gx,gy);ctx.lineTo(llx,lly);var legpoint = uselawofsines(gx,gy,llx,lly,fx,fy,-1);
ctx.lineTo(legpoint[0],legpoint[1]);ctx.lineTo(gx,gy); ctx.closePath();ctx.fill();ctx.stroke();
}function uselawofsines(gx,gy, ux,uy,ox,oy,dir) {
var d = dist(gx,gy,ox,oy);var sinea =
(Math.sin(Math.PI/4)/dist(gx,gy,ux,uy))*dist(ux,uy,ox,oy);var angle = 2*Math.asin(sinea);var nx = gx+ dir*d*Math.cos(angle);var ny = gy - d*Math.sin(angle);return ([nx,ny]);
}function prethinned() {
makeleftleg();valley(llx,lly,llx,ey,"green");valley(rlx,rly,rlx,dy,"green");
}function thinned() {
makeleftleg() ctx.clearRect(ax-ease,lly,llx-(ax-ease),ey-ay);ctx.clearRect(rlx,rly,bx+ease-rlx,dy-by);ctx.beginPath();ctx.moveTo(llx,lly);ctx.lineTo(llx+.5*(gx-llx),gy);ctx.lineTo(llx+.5*(gx-llx),ey);ctx.lineTo(llx,ey);
4/10/2023 [email protected]
ctx.lineTo(llx,lly);ctx.moveTo(rlx,rly);ctx.lineTo(rlx-.5*(rlx-gx),gy);ctx.lineTo(rlx-.5*(rlx-gx),ey);ctx.lineTo(rlx,dy);ctx.lineTo(rlx,rly);ctx.fill();ctx.stroke();
}function doneupsidedown() {
thinned();ctx.clearRect(llx-ease,lly,2*ease+ rlx-llx, ease +dy-lly);
ctx.beginPath();ctx.moveTo(llx,lly);ctx.lineTo(rlx,rly);ctx.lineTo(rlx,jy);ctx.lineTo(llx,jy);ctx.lineTo(llx,lly);ctx.closePath();ctx.fill();ctx.stroke();ctx.beginPath();ctx.moveTo(llx+.5*(gx-llx),lly);ctx.lineTo(llx+.5*(gx-llx),jy);ctx.moveTo(rlx-.5*(rlx-gx),rly);ctx.lineTo(rlx-.5*(rlx-gx),jy);ctx.closePath();ctx.stroke();
}function foldback() {
foldedup();valley(llx,midy+.5*(jy-midy),rlx,midy+.5*(jy-midy),"green");
}function thinned1() {
thinned();valley(llx,jy,rlx,jy,"green");
}function foldedup() {
ctx.beginPath();ctx.moveTo(llx,midy);ctx.lineTo(rlx,midy);ctx.lineTo(rlx,jy);ctx.lineTo(llx,jy);ctx.lineTo(llx,midy);ctx.closePath();ctx.fill();ctx.stroke();
}function showfrogpicture() { ctx.drawImage(frog,40,40);
}
4/10/2023 [email protected]
function makebuscard() {ctx.strokeRect(busx,busy,buscardw*i2p,buscardh*i2p);}function diagonal1 () {
ctx.beginPath();ctx.moveTo(bx,by);ctx.lineTo(cx,cy);ctx.lineTo(dx,dy);ctx.lineTo(ex,ey);ctx.lineTo(fx,fy);ctx.lineTo(bx,by);ctx.moveTo(fx,fy);ctx.lineTo(cx,cy);ctx.closePath();ctx.stroke();
}function diagonal2 () {
ctx.beginPath();ctx.moveTo(ax,ay);ctx.lineTo(cx,cy);ctx.lineTo(dx,dy);ctx.lineTo(ex,ey);ctx.lineTo(fx,fy);ctx.lineTo(ax,ay);ctx.moveTo(fx,fy);ctx.lineTo(cx,cy);ctx.closePath();ctx.stroke();
}function adiagonal1() {
makebuscard();skinnyline(bx,by,fx,fy);
}function adiagonal2() {
adiagonal1();skinnyline(ax,ay,cx,cy);
}function adiagonal1p() {
makebuscard();valley(bx,by,fx,fy,"green");
}function adiagonal2p() {
adiagonal1();valley(ax,ay,cx,cy,"green");
}function turnedover () {
makebuscard();mountain(ax,ay,cx,cy);mountain(bx,by, fx, fy);
}function topdown () {
ctx.beginPath();ctx.moveTo(hx,hy);ctx.lineTo(ix,iy);ctx.lineTo(dx,dy);ctx.lineTo(ex,ey);ctx.lineTo(hx,hy);
4/10/2023 [email protected]
ctx.moveTo(fx,fy);ctx.lineTo(cx,cy);ctx.closePath();ctx.stroke();
}function unfolded() {
turnedover();valley(hx,hy,ix,iy);
}function unfoldedp() {
turnedover();valley(hx,hy,ix,iy,"green");
}function collapsing () {
ctx.beginPath();ctx.moveTo(aex,aey);ctx.lineTo(bex,bey);ctx.lineTo(iex,iey);ctx.lineTo(cx,cy);ctx.lineTo(dx,dy);ctx.lineTo(ex,ey);ctx.lineTo(fx,fy);ctx.lineTo(hex,hey);ctx.lineTo(aex,aey);ctx.closePath();ctx.stroke();mountain(aex,aey,midx,midy);mountain(midx,midy,bex,bey);mountain(midx,midy, fx,fy);mountain(midx,midy, cx,cy);valley(hex,hey,midx,midy);valley(midx,midy,iex,iey);
}function arrow() {
ctx.beginPath();ctx.moveTo(midx,midy);ctx.lineTo(cx,cy);ctx.lineTo(dx,dy);ctx.lineTo(ex,ey);ctx.lineTo(fx,fy);ctx.lineTo(midx,midy);ctx.closePath();ctx.stroke();
}function arrowunder() {
ctx.beginPath();ctx.moveTo(midx,midy);ctx.lineTo(cx,cy);ctx.lineTo(dx,dy);ctx.lineTo(ex,ey);ctx.lineTo(fx,fy);ctx.lineTo(midx,midy);ctx.moveTo(fx,fy);ctx.lineTo(cx,cy);ctx.closePath();
4/10/2023 [email protected]
ctx.stroke();}
// end specific to frog
var origwidth = 2;function init() {ctx = document.getElementById("canvas").getContext("2d");ta = document.getElementById("directions");ctx.font = "15px Georgia, Times, serif";
ctx.fillStyle = "white";origstyle = ctx.strokeStyle;ctx.lineWidth = origwidth;nextstep = 0;donext();}function directions() {
ctx.fillStyle = "black";ctx.fillText("Make valley fold", 10,20);valley(200,18,300,18,"green");ctx.fillText("Make mountain fold",10,50);mountain(200,48,300,48,"green");ctx.fillText("unfolded fold line",10,100);skinnyline(200,98,300,98);ctx.fillText("When sense of fold matters:",10,150);ctx.fillText("unfolded valley fold", 10,180);valley(200,178,300,178);ctx.fillText("unfolded mountain fold",10,210);mountain(200,208,300,208);ctx.fillStyle = "white";
}function donext() {
if (nextstep>=steps.length) {nextstep=steps.length-1;
}//alert("nextstep is "+nextstep);ctx.clearRect(0,0,900,400);//alert("cleared");steps[nextstep][0]();ta.innerHTML = steps[nextstep][1];nextstep++;
}function goback() {
nextstep = nextstep -2;if (nextstep<0) { nextstep = 0;}donext();
}function skinnyline(x1,y1,x2,y2) {
ctx.lineWidth = 1;ctx.beginPath();ctx.moveTo(x1,y1);ctx.lineTo(x2,y2);ctx.closePath();ctx.stroke();
4/10/2023 [email protected]
ctx.lineWidth = origwidth;}
function solidline(x1,y1,x2,y2) {ctx.beginPath();ctx.moveTo(x1,y1);ctx.lineTo(x2,y2);ctx.closePath();ctx.stroke();
}var origstyle;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;
}function mountain(x1,y1,x2,y2,color) {
//alert("x1 is "+x1+" y1 is "+y1+" x2 is "+x2+" y2 is "+y2);var px=x2-x1;var py = y2-y1;var len = dist(x1,y1,x2,y2);var nd = Math.floor(len/ddtotal);//alert("nd is "+nd);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+ddratio1*xs,y1+n*ys+ddratio1*ys);ctx.moveTo(x1+n*xs+ddratio2*xs,y1+n*ys+ddratio2*ys);ctx.lineTo(x1+n*xs+ddratio3*xs,y1+n*ys+ddratio3*ys);
}ctx.closePath();ctx.stroke();ctx.strokeStyle = origstyle;
}
</script></head>
4/10/2023 [email protected]
<body onload="init();"><canvas id="canvas" width="900" height="400">Your browser does not recognize the canvas element </canvas><br/><div id="directions"> Press buttons to advance or go back </div><hr/><button onClick="goback();" style="color: #F00">Go back </button> <button onClick="donext();" style="color: #03F">Next step </button></body></html>
Source code for origamifish.html
<!DOCTYPE html><html><head><title>Origami fish</title><style>button {font-size:large; font-family:Georgia, "Times New Roman", Times, serif;}#directions {font-family:"Comic Sans MS", cursive;}video {display:none; }</style><script>var dotradius = 4;var ctx;var cwidth;var cheight;var ta;var kamiw = 4;var kamih = 4;var i2p = 72;var dashlen = 8;var dgap = 2.0;var ddashlen = 6.0;var ddot = 2.0;var dratio = dashlen/(dashlen+dgap);var ddtotal = ddashlen+3*ddot;var ddratio1 = ddashlen/ddtotal;var ddratio2 = (ddashlen+ddot)/ddtotal;var ddratio3 = (ddashlen+2*ddot)/ddtotal;var busx = 10;var busy = 10;var kamix = 10;var kamiy = 10;var nextstep;function dist(x1,y1,x2,y2) {
var x = x2-x1;var y = y2-y1;return Math.sqrt(x*x+y*y);
}
4/10/2023 [email protected]
function intersect(x1,y1,x2,y2,x3,y3,x4,y4) {//only works on line segments that do intersection and are not //verticalvar m12 = (y2-y1)/(x2-x1);var m34 = (y4-y3)/(x4-x3);var m = m34/m12;var x = (x1-y1/m12-m*x3+y3/m12)/(1-m);var y = m12*(x-x1)+y1;return ([x,y]);
}function uselawofsines(gx,gy, ux,uy,ox,oy,dir) {
var d = dist(gx,gy,ox,oy);var sinea =
(Math.sin(Math.PI/4)/dist(gx,gy,ux,uy))*dist(ux,uy,ox,oy);var angle = 2*Math.asin(sinea);var nx = gx+ dir*d*Math.cos(angle);var ny = gy - d*Math.sin(angle);return ([nx,ny]);
}
function init() {canvas1 = document.getElementById("canvas");ctx = canvas1.getContext("2d");cwidth = canvas1.width;cheight = canvas1.height;ta = document.getElementById("directions");nextstep = 0;ctx.fillStyle = "white";ctx.lineWidth = origwidth;origstyle = ctx.strokeStyle;ctx.font = "15px Georgia, Times, serif";v = document.getElementById("sink");donext();}
function directions() {ctx.fillStyle = "black";ctx.font = "15px Georgia, Times, serif";ctx.fillText("Make valley fold", 10,20);valley(200,18,300,18,"orange");ctx.fillText("Make mountain fold",10,50);mountain(200,48,300,48,"orange");ctx.fillText("unfolded fold line",10,100);skinnyline(200,98,300,98);ctx.fillText("When sense of fold matters:",10,150);ctx.fillText("unfolded valley fold", 10,180);valley(200,178,300,178);ctx.fillText("unfolded mountain fold",10,210);mountain(200,208,300,208);ctx.fillStyle = "white";
}function donext() {
if (nextstep>=steps.length) {nextstep=steps.length-1;
}v.pause();
4/10/2023 [email protected]
v.style.display = "none"; //erases last video playedcanvas1.height = 480; //restore heightctx.clearRect(0,0,cwidth,cheight);ctx.lineWidth = origwidth;steps[nextstep][0]();ta.innerHTML = steps[nextstep][1];nextstep++;
}
function dot(x,y) {var oldstyle = ctx.fillStyle;ctx.fillStyle="green";ctx.beginPath() ;ctx.arc(x,y,dotradius,0,2*Math.PI,true);ctx.closePath();ctx.fill();ctx.fillStyle = oldstyle;
}
function goback() {nextstep = nextstep -2;if (nextstep<0) { nextstep = 0;}donext();
}function shortdownarrow(x,y) {
ctx.beginPath();ctx.moveTo(x,y-20);ctx.lineTo(x,y-7);ctx.moveTo(x-5,y-12);ctx.lineTo(x,y-7);ctx.moveTo(x+5,y-12);ctx.lineTo(x,y-7);ctx.closePath();ctx.stroke();
}function proportion(x1,y1,x2,y2,p) {
var xs = x2-x1;var ys = y2-y1;var x = x1+ p*xs;var y = y1 + p* ys;return ([x,y]);
}function skinnyline(x1,y1,x2,y2) {
ctx.lineWidth = 1;ctx.beginPath();ctx.moveTo(x1,y1);ctx.lineTo(x2,y2);ctx.closePath();ctx.stroke();ctx.lineWidth = origwidth;
}
4/10/2023 [email protected]
function solidline(x1,y1,x2,y2) {ctx.beginPath();ctx.moveTo(x1,y1);ctx.lineTo(x2,y2);ctx.closePath();ctx.stroke();
}var origstyle;var origwidth = 2;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;
}function mountain(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/ddtotal);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+ddratio1*xs,y1+n*ys+ddratio1*ys);ctx.moveTo(x1+n*xs+ddratio2*xs,y1+n*ys+ddratio2*ys);ctx.lineTo(x1+n*xs+ddratio3*xs,y1+n*ys+ddratio3*ys);
}ctx.closePath();ctx.stroke();ctx.strokeStyle = origstyle;
}
function curvedarrow(x1,y1,x2,y2, px, py) {var arrowanglestart;var arrowanglefinish; var d = dist(x1,y1,x2,y2);var rad=Math.sqrt(4.25*d*d);var ctrx;var ctry;var ex;var ey;
4/10/2023 [email protected]
var angdel = Math.atan2(d/2,2*d);//angdel is .24497var fromhorizontal;ctx.strokeStyle = "red";ctx.beginPath();if (y1==y2) {
arrowanglestart = 1.5*Math.PI-angdel;arrowanglefinish = 1.5*Math.PI+angdel; ctrx = .5*(x1+x2) +px; ctry = y1+2*d +py; if (x1<x2) { ctx.arc(ctrx,ctry,
rad,arrowanglestart,arrowanglefinish,false); fromhorizontal=2*Math.PI- arrowanglefinish; ex = ctrx+rad*Math.cos(fromhorizontal); ey = ctry - rad*Math.sin(fromhorizontal); ctx.lineTo(ex-8,ey+8); ctx.moveTo(ex,ey); ctx.lineTo(ex-8,ey-8); } else {
ctx.arc(ctrx,ctry, rad,arrowanglefinish,arrowanglestart,true);
fromhorizontal=2*Math.PI- arrowanglestart;
ex = ctrx+rad*Math.cos(fromhorizontal); ey = ctry - rad*Math.sin(fromhorizontal); ctx.lineTo(ex+8,ey+8); ctx.moveTo(ex,ey); ctx.lineTo(ex+8,ey-8); } ctx.stroke();
}else if (x1==x2) {
arrowanglestart = -angdel;arrowanglefinish = angdel;
ctrx = x1-2*d+px; ctry = .5*(y1+y2) + py; if (y1<y2) {
ctx.arc(ctrx,ctry, rad,arrowanglestart,arrowanglefinish,false); fromhorizontal=- arrowanglefinish; ex = ctrx+rad*Math.cos(fromhorizontal); ey = ctry - rad*Math.sin(fromhorizontal); ctx.lineTo(ex-8,ey-8); ctx.moveTo(ex,ey); ctx.lineTo(ex+8,ey-8); } else {
ctx.arc(ctrx,ctry, rad,arrowanglefinish,arrowanglestart,true); fromhorizontal=- arrowanglestart;
ex = ctrx+rad*Math.cos(fromhorizontal); ey = ctry - rad*Math.sin(fromhorizontal); ctx.lineTo(ex-8,ey+8); ctx.moveTo(ex,ey); ctx.lineTo(ex+8,ey+8);
4/10/2023 [email protected]
} ctx.stroke();
}else {
//alert("slope of segment is "+(y2-y1)/(x2-x1)); //need to write code for arrows that are not against vertical or // horizontal
var m = - (x2-x1)/(y2-y1); //slope of perpendicular var nx = .5* (x1+x2); var ny = .5*(y1+y2); //alert("m is "+m+" nx is "+nx+" ny is "+ny); var b = ny-m*nx; var angle; if (px>0) {
ctrx = nx-Math.sqrt((4*d*d)/(m*m+1)); } else {
ctrx = nx+Math.sqrt((4*d*d)/(m*m+1)); }
ctry = m*ctrx+b;
angle = Math.atan2(ctry-ny,nx-ctrx); ctrx = ctrx + px; ctry = ctry + py; arrowanglestart = -angle-angdel;
arrowanglefinish = -angle+angdel; if (x1<x2) {
ctx.arc(ctrx,ctry, rad,arrowanglestart,arrowanglefinish,false); fromhorizontal=2*Math.PI- arrowanglefinish; ex = ctrx+rad*Math.cos(fromhorizontal); ey = ctry - rad*Math.sin(fromhorizontal); ctx.lineTo(ex-8,ey-8); ctx.moveTo(ex,ey); ctx.lineTo(ex+8,ey-8);
} else {
ctx.arc(ctrx,ctry, rad,arrowanglefinish,arrowanglestart,true); fromhorizontal=2*Math.PI- arrowanglestart;
ex = ctrx+rad*Math.cos(fromhorizontal); ey = ctry - rad*Math.sin(fromhorizontal); ctx.lineTo(ex+8,ey+8); ctx.moveTo(ex,ey); ctx.lineTo(ex-8,ey+8); } ctx.stroke();
}ctx.strokeStyle = "black";
}
//specific to fish// Note: line breaks are not in code, just in this document.
4/10/2023 [email protected]
var steps= [ [directions,"Diagram conventions"], [showkami,"Make quarter turn."], [diamond1,"Fold top point to bottom point."], [triangleM,"Divide line into thirds and make valley folds and unfold "], [thirds,"Fold in half to the left."],[rttriangle,"Fold down the right corner to the fold marking a third. "], [cornerdown,"Unfold everything."], [unfolded,"Prepare to sink middle square by reversing folds as indicated ..."], [changedfolds,"note middle square sides all valley folds, some other folds changed. Flip over."], [precollapse,"Push sides to sink middle square."], [playsink,"Sink square, collapse model."], [littleguy,"Now fold back the right flap to center valley fold. You are bisecting the indicated angle."], [oneflapup,"Do the same thing to the flap on the left"], [bothflapsup,"Make fins by wrapping top of right flap around 1 layer and left around back layer"], [finsp,"Now make lips...make preparation folds"], [preparelips,"and turn lips inside out. Turn corners in..."], [showcleftlip,"...making cleft lips."], [lips,"Pick up fish and look down throat..."], [showthroat1,"Stick your finger in its mouth and move the inner folded material to one side"], [showthroat2,"Throat fixed."], [rotatefish,"Squeeze & release top and bottom to make fish's mouth close and open"], [playtalk,"Talking fish."]
];
var diag = kamiw* Math.sqrt(2.0)*i2p;var ax = 10;var ay = 220;var bx = ax+ .5*diag;var by = ay - .5*diag;var cx = ax + diag;var cy = ay;var dx = bx;var dy = ay + .5*diag;var e = proportion(ax,ay,cx,cy,.333333);var ex = e[0];var ey = e[1];var f = proportion(ax,ay,cx,cy,.666666);var fx = f[0];var fy = f[1];var g = proportion(ax,ay,dx,dy,.666666);var gx = g[0];var gy = g[1];var h = proportion(cx,cy,dx,dy,.666666);var hx = h[0];var hy = h[1];var jx = ax + .5*diag;var jy = ay;var diag6 = diag/6;var gry = ay-(gy-ay);
4/10/2023 [email protected]
var kx = ax+diag/3;var ky = ay;var lx = kx + diag/3;var ly = ay;var mx = ax + diag/6;var innersq = Math.sqrt(2)*diag/6;var my = ay + innersq*Math.sin(Math.PI/4);var nx = ax+diag/3+diag/6;var ny = my;var px = mx;var py = dy;var rx = nx;var ry = py;var qx = kx;var qy = hy;var dkq = qy-ky;var sx = kx + (dkq/Math.cos(Math.PI/8))*Math.sin(Math.PI/8);var sy = ay;var tx = kx;var ty = qy-dist(qx,qy,lx,ly);
var xxa = intersect(sx,sy,qx,qy,kx,ky,nx,ny);var xxx = xxa[0];var xxy = xxa[1];var xxlx = kx-(xxx-kx);var xxly = xxy;var slx = kx- (sx-kx);var sly = sy;var tlx = tx-5;var tly = ty;var dkt=ky-ty;var finlx = kx-dkt;var finly = ky;var finrx = kx+dkt;var finry = ky;var w = Math.cos(Math.PI/4)*dkt;var wx = kx-.5*dkt;var wy = w*Math.sin(Math.PI/4)+ky;var zx = kx+.5*dkt;var zy = wy;var plipx = px;var plipy = py-10;var rlipx = rx;var rlipy = ry-10;var plipex = px - 10;var plipey = plipy;var rlipex = rx + 10;var rlipey = rlipy;var rclipcleft1 = proportion(rlipex,rlipey,rlipx,rlipy,.5);var pclipcleft1 = proportion(plipex,plipey,plipx,plipy,.5);var rclipcleft2 = proportion(rlipex,rlipey,qx,qy,.1);var pclipcleft2 = proportion(plipex,plipey,qx,qy,.1);var rcx1 = rclipcleft1[0];var rcy1 = rclipcleft1[1];var rcx2 = rclipcleft2[0];var rcy2 = rclipcleft2[1];
4/10/2023 [email protected]
var pcx1 = pclipcleft1[0];var pcy1 = pclipcleft1[1];var pcx2 = pclipcleft2[0];var pcy2 = pclipcleft2[1];
var v;var throat1 = new Image();throat1.src = "throat1.jpg";var throat2 = new Image();throat2.src = "throat2.jpg"var cleft = new Image();cleft.src="cleftlip.jpg";
function showcleftlip() {ctx.drawImage(cleft,40,40);
}
function showthroat1() { ctx.drawImage(throat1,40,40);}function showthroat2() { ctx.drawImage(throat2,40,40);}
function playtalk() {v = document.getElementById("talk");v.style.display="block";v.currentTime = 0;v.play();canvas1.height = 126; // adjust for height of video
}
function playsink() {v = document.getElementById("sink");v.style.display="block";v.currentTime = 0;v.play();canvas1.height = 178; //adjust for height of video
}
function lips() {ctx.fillStyle = "teal";ctx.beginPath();ctx.moveTo(finlx,finly);ctx.lineTo(kx,ky);ctx.lineTo(wx,wy);ctx.lineTo(finlx,finly);ctx.moveTo(finrx,finry);ctx.lineTo(kx,ky);ctx.lineTo(zx,zy);ctx.lineTo(finrx,finry);ctx.moveTo(mx,my);ctx.lineTo(kx,ky);ctx.lineTo(xxx,xxy);ctx.lineTo(qx,qy);
4/10/2023 [email protected]
ctx.lineTo(plipx,plipy);ctx.lineTo(mx,my);ctx.moveTo(xxx,xxy);ctx.lineTo(nx,ny);ctx.lineTo(rlipx,rlipy);ctx.lineTo(qx,qy);ctx.lineTo(xxx,xxy);ctx.closePath();ctx.fill();ctx.stroke();ctx.fillStyle="white";ctx.beginPath();ctx.moveTo(qx,qy);ctx.lineTo(pcx2,pcy2);ctx.lineTo(pcx1,pcy1);ctx.lineTo(plipx,plipy);ctx.lineTo(qx,qy);ctx.lineTo(rcx2,rcy2);ctx.lineTo(rcx1,rcy1);ctx.lineTo(rlipx,rlipy);ctx.lineTo(qx,qy);ctx.closePath();ctx.fill();ctx.stroke();skinnyline(kx,ky,qx,qy);ctx.fillStyle="teal";
}function rotatefish() {
ctx.save();ctx.translate(kx,my);ctx.rotate(-Math.PI/2);ctx.translate(-kx,-my);lips();ctx.restore();
}
function preparelips() {ctx.fillStyle="teal";fins();valley(qx,qy,rlipx,rlipy);valley(qx,qy,plipx,plipy);
}function finsp() {
ctx.fillStyle="teal";fins();valley(qx,qy,rlipx,rlipy,"orange");valley(qx,qy,plipx,plipy,"orange");
}
function fins() {ctx.beginPath();ctx.moveTo(finlx,finly);ctx.lineTo(kx,ky);ctx.lineTo(wx,wy);ctx.lineTo(finlx,finly);ctx.moveTo(finrx,finry);ctx.lineTo(kx,ky);
4/10/2023 [email protected]
ctx.lineTo(zx,zy);ctx.lineTo(finrx,finry);ctx.moveTo(mx,my);ctx.lineTo(kx,ky);ctx.lineTo(xxx,xxy);ctx.lineTo(qx,qy);ctx.lineTo(px,py);ctx.lineTo(mx,my);ctx.moveTo(xxx,xxy);ctx.lineTo(nx,ny);ctx.lineTo(rx,ry);ctx.lineTo(qx,qy);ctx.lineTo(xxx,xxy);ctx.closePath();ctx.fill();ctx.stroke();skinnyline(kx,ky,qx,qy);
}function bothflapsup () {
ctx.fillStyle="teal";ctx.beginPath();ctx.moveTo(slx,sly);ctx.lineTo(tlx,tly);ctx.lineTo(kx,ky);ctx.lineTo(xxlx,xxly);ctx.lineTo(slx,sly);ctx.moveTo(mx,my);ctx.lineTo(kx,ky);ctx.lineTo(sx,sy);ctx.lineTo(qx,qy);ctx.lineTo(px,py);ctx.lineTo(mx,my);ctx.moveTo(tx,ty);ctx.lineTo(sx,sy);ctx.lineTo(kx,ky);ctx.lineTo(tx,ty);ctx.moveTo(xxx,xxy);ctx.lineTo(nx,ny);ctx.lineTo(rx,ry);ctx.lineTo(qx,qy);ctx.lineTo(xxx,xxy);ctx.closePath();ctx.fill();ctx.stroke();skinnyline(kx,ky,qx,qy);
}function oneflapup() {
ctx.fillStyle="teal"; ctx.beginPath();
ctx.moveTo(ax,ay); ctx.lineTo(kx,ky); ctx.lineTo(mx,my); ctx.lineTo(ax,ay); ctx.moveTo(kx,ky); ctx.lineTo(sx,sy); ctx.lineTo(qx,qy);
4/10/2023 [email protected]
ctx.lineTo(px,py); ctx.lineTo(mx,my); ctx.lineTo(kx,ky); ctx.moveTo(xxx,xxy); ctx.lineTo(nx,ny); ctx.lineTo(rx,ry); ctx.lineTo(qx,qy); ctx.lineTo(xxx,xxy); ctx.moveTo(kx,ky); ctx.lineTo(tx,ty); ctx.lineTo(sx,sy); ctx.lineTo(kx,ky); ctx.closePath(); ctx.fill(); ctx.stroke(); skinnyline(qx,qy,kx,ky);}function littleguy() { ctx.fillStyle="teal"; ctx.beginPath(); ctx.moveTo(ax,ay); ctx.lineTo(kx,ky); ctx.lineTo(mx,my); ctx.lineTo(ax,ay); ctx.moveTo(kx,ky); ctx.lineTo(lx,ly); ctx.lineTo(px,py); ctx.lineTo(mx,my); ctx.lineTo(kx,ky); ctx.moveTo(nx,ny); ctx.lineTo(rx,ry); ctx.lineTo(qx,qy); ctx.lineTo(nx,ny); ctx.closePath(); ctx.fill(); ctx.stroke(); skinnyline(qx,qy,kx,ky); ctx.beginPath(); ctx.arc(qx,qy,30,-.5*Math.PI,-.25*Math.PI,false); ctx.stroke(); mountain(qx,qy,sx,sy,"orange")}
function unfolded() {diamond();valley(ax,ay,cx,cy);valley(ex,ey,gx,gy);valley(fx,fy,hx,hy);mountain(ex,ey,gx,gry);mountain(fx,fy,hx,gry);valley(jx,jy,dx,dy);mountain(jx,jy,bx,by);valley(ex,ey,jx,jy+diag6);valley(jx,jy-diag6,fx,fy);mountain(ex,ey,jx,jy-diag6);mountain(jx,jy+diag6,fx,fy);
}
4/10/2023 [email protected]
function precollapse() {diamondc();mountain(ax,ay,cx,cy);valley(ex,ey,gx,gy);valley(fx,fy,hx,hy);valley(ex,ey,gx,gry);valley(fx,fy,hx,gry);valley(jx,jy-diag6,jx,jy+diag6);
mountain(jx,jy-diag6,bx,by);mountain(jx,jy+diag6,dx,dy);mountain(ex,ey,jx,jy+diag6);mountain(jx,jy-diag6,fx,fy);mountain(ex,ey,jx,jy-diag6);mountain(jx,jy+diag6,fx,fy);
}function changedfolds() {
diamond();valley(ax,ay,cx,cy);mountain(ex,ey,gx,gy);mountain(fx,fy,hx,hy);mountain(ex,ey,gx,gry);mountain(fx,fy,hx,gry);mountain(jx,jy-diag6,jx,jy+diag6);valley(jx,jy-diag6,bx,by);valley(jx,jy+diag6,dx,dy);valley(ex,ey,jx,jy+diag6);valley(jx,jy-diag6,fx,fy);valley(ex,ey,jx,jy-diag6);valley(jx,jy+diag6,fx,fy);
}function triangleM() {
triangle();shortdownarrow(ex,ey);shortdownarrow(fx,fy);valley(ex,ey,gx,gy,"orange");valley(fx,fy,hx,hy,"orange");
}
function thirds() {triangle();skinnyline(ex,ey,gx,gy);skinnyline(fx,fy,hx,hy);curvedarrow(cx,cy,ax,ay,0,-20);valley(jx,jy,dx,dy,"orange");
}function cornerdown() {
rttriangle();ctx.clearRect(ex,ey, diag6+5,diag6);ctx.beginPath();ctx.moveTo(ex,ey);ctx.lineTo(ex+diag6,ey+diag6);ctx.lineTo(ex,ey+diag6);ctx.lineTo(ex,ey);ctx.closePath();ctx.fill();
4/10/2023 [email protected]
ctx.stroke();}
function showkami() {ctx.strokeRect(kamix,kamiy,kamiw*i2p,kamih*i2p);}
function diamond1() {diamond();valley(ax,ay,cx,cy,"orange");curvedarrow(bx,by,dx,dy,10,0);
}function diamondc() {
ctx.beginPath();ctx.moveTo(ax,ay);ctx.lineTo(bx,by);ctx.lineTo(cx,cy);ctx.lineTo(dx,dy);ctx.lineTo(ax,ay)ctx.closePath();ctx.fillStyle="teal";ctx.fill();ctx.stroke();
}
function diamond() {ctx.beginPath();ctx.moveTo(ax,ay);ctx.lineTo(bx,by);ctx.lineTo(cx,cy);ctx.lineTo(dx,dy);ctx.lineTo(ax,ay)ctx.closePath();ctx.stroke();
}
function triangle() { ctx.fillStyle="teal"; ctx.beginPath(); ctx.moveTo(ax,ay); ctx.lineTo(cx,cy); ctx.lineTo(dx,dy); ctx.lineTo(ax,ay); ctx.closePath(); ctx.fill();}function rttriangle() {
ctx.fillStyle="teal"; ctx.beginPath(); ctx.moveTo(ax,ay); ctx.lineTo(jx,jy); ctx.lineTo(dx,dy); ctx.lineTo(ax,ay); ctx.closePath(); ctx.fill();
4/10/2023 [email protected]
valley(ex,ey,ex+diag6,ey+diag6,"orange"); skinnyline(ex,ey,gx,gy);}
</script></head>
<body onLoad="init();"><video id="sink" loop="loop" preload="auto" controls="controls" width="400"><source src="sink.mp4video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'><source src="sink.theora.ogv" type='video/ogg; codecs="theora, vorbis"'><source src="sink.webmvp8.webm" type='video/webm; codec="vp8, vorbis"'>Your browser does not accept the video tag.</video><video id="talk" loop="loop" preload="auto" controls="controls"><source src="talk.mp4video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'><source src="talk.theora.ogv" type='video/ogg; codecs="theora, vorbis"'><source src="talk.webmvp8.webm" type='video/webm; codec="vp8, vorbis"'>Your browser does not accept the video tag.</video>
<canvas id="canvas" width="900" height="480">Your browser does not recognize the canvas element </canvas><br/><div id="directions"> Press buttons to advance or go back </div><hr/><button onClick="goback();" style="color: #F00">Go back </button> <button onClick="donext();" style="color: #03F">Next step </button></body></html>
Appendix 2: Selected screen shots with labeled positionsHere are screen shots with annotations connecting the variables with the drawings. If a position is labeled a, the code refers to ax and ay as the coordinates. Some positions use calculations within the functions to set the coordinates and most of these are not given here.
Origami Frog
4/10/2023 [email protected]
Bibliography
Meyer, Jeanine, The Essential Guide to HTML5: Using Games to learn HTML5 and JavaScript, Friends of Ed/Apress Publishers, October, 2010. http://www.friendsofed.com/book.html?isbn=9781430233831
OrigamiUSA, American National Origami organization, http://www.origami-usa.org/, viewed April 9, 2011.
World Wide Web Consortium (W3C), Specification of HTML5, http://dev.w3.org/html5/spec/Overview.html, viewed April 9, 2011.
Note: many sources exist for HTML5 and for origami both on- and off-line.
4/10/2023 [email protected]
(rcx2,rcy2) (rcx1,rcy1)rlip
(pcx2,pcy2) (pcx1,pcy1) plip
![Html 5 [users]](https://img.pdfslide.us/doc/110x75/546d986faf79597b298b5429/html-5-users.jpg)
