Quil: An experimental system for online recognition ofhandwritten music notation

Geoff Chirgwin

December 31, 2010

Thesis submitted to the Faculty of the School of Informatics and Computing,Indiana University, Bloomington, in partial fulfillment for the requirements of the

degree

Master of ScienceIn

Human Computer Interaction / Music Informatics

1

Accepted by the faculty of the School of Informatics and Computing, Indiana University,

in partial fulfillment of the requirements for the degree Master of Science.

Master of Science Candidate: __________________________________________

Capstone Instructor: _________________________________________________

Advisor (s): ________________________________________________________

Final Project Approval

Person Signature Date

Primary Advisor __________________________________________

Secondary Advisor ________________________________________

Capstone Instructor ________________________________________

Program Director __________________________________________

Graduate Records Administrator ______________________________

Associate Dean ____________________________________________

Month and Year ___________________

Geoff Chirgwin

Erik Stolterman, Martin Siegel

Christopher Raphael, Larry Yaeger

2

Contents1 Abstract 3

2 Introduction 4

3 Background 43.1 Notating music by computer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43.2 Drawing music . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53.3 Music is visual, not just aural . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53.4 Prior work in optical music recognition . . . . . . . . . . . . . . . . . . . . . . . 5

4 Ideal 6

5 Prototypes 8

6 Implementation 86.1 Demonstrations and live application . . . . . . . . . . . . . . . . . . . . . . . . . 12

7 Conclusion 13

8 Future Work 14

9 References 15

10 Source Code Listing 1710.1 Gesture Recognition and Classification . . . . . . . . . . . . . . . . . . . . . . . . 1710.2 Language Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5010.3 Drawing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5410.4 Geometry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6910.5 Training . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9310.6 Utilities . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9510.7 Hypertext Markup Language (HTML) . . . . . . . . . . . . . . . . . . . . . . . . 99

11 Presentation Slides 111

12 Acknowledgements 121

1 AbstractThis paper describes a system for the online recognition of handwritten music notation. Quil isan experimental implementation of this system. The present software is an attempt to develop atransparent user interface not unlike pencil and paper. It is best suited for direct manipulation orgestural hardware interfaces using either a stylus or a finger for input, but can be used with a mouseor trackpad. Though still inchoate, the current implementation should work well enough on any

3

late-model web browser with HTML5 support. No additional software installation is required andno browser plugins are required.

2 IntroductionIn the process of notating music, there are two persistent antique relics: 1) the use of pencil andpaper and 2) the system of conventional western music notation (CWMN). These two things arehere to stay, and at their core, they are changing at a very slow pace.

While the problem is not intractable, it may well be impossible – or close to impossible – tosolve in a generalizable way. And even if a general solution is found, the implementation mustbe good enough to be accepted by users of the system. The true adoption of a system of musicnotation handwriting recognition will only be the result of solving these peripheral problems inaddition to the core problems central to recognition.

We have attempted to make the problem more tractable by defining clear and modest limitsfrom the outset. Admittedly, we took an already small subset of music representation and made iteven smaller by limiting it to only the most basic discrete symbols representing pitch and rhythmelements.

Of course, there are other means by which to convey musical ideas and intent– such as audiorecordings made by the creator, where the performer receives an audio recording and learns thematerial by rote– but those are entirely outside the scope of this paper. There are also numerousother systems for capturing musical ideas using visual symbols. These are also outside the scopeof the work described here.

Here we are only concerned with capturing musical ideas and conveying intent using conven-tional Western music notation (CWMN). CWMN is a system that can– despite its idiosyncrasies–succintly capture a large breadth and depth of musical information, as well as convey richly pre-scriptive musical ideas. While CWMN can be used as a descriptive notation– that is, to describe apreviously existing performance, such as in the case of a human-produced transcription of an audiorecording– we are primarily focused on using CWMN to prescribe a future musical performance.

We will ideally generalize the user group of this system to include any person wishing to createa CWMN sketch. That is, a user wishing to capture a simple prescriptive CWMN score from theirimagination. In practice, because of the limitations of the present software, the most commonpractical use case here is a composer roughly sketching a new idea.

3 Background

3.1 Notating music by computerThe basic landscape of music notation software has changed surprisingly little since Don Byrd’slandmark dissertation on the subject in 1984. [Byr84] Fully automated high quality music notationwas beyond the state of the art then, and it remains so today. The user input techniques haveremained little changed; they are 1) piano keyboard, 2) alphanumeric keyboard, 3) mouse, orsome combination of the three. Current systems generally use a palette of symbols that can beselected and placed on a staff by manipulating them with a mouse pointer. Keyboard shortcuts andinteractive keyboard input in combintation with graphical user interfaces are also quite common.

4

3.2 Drawing musicEven in short informal observations of musicians hand-copying a given printed musical, the anec-dotal evidence is surprising. Notating music is most often an activity that is private, and thereforenot often observed by others. Because of this, musicians generally have little knowledge of thedetails of how others notate music by hand. Take, for example the treble (or ”G”) clef. Eventhough two different users may draw the symbol with a single pen stroke, they may use one oftwo directions (either outside to inside or inside to outside). We can look to the research – notnecessarily music-related – in human motor control to learn something about drawing music.

Drawing and writing almost exclusively provide the expression of thoughts to others. [Ros91]Notating music lies somewhere between drawing and writing. Rosenbaum describes the model ofwriting in three stages:

1. The abstract message is selected,

2. The abstract message is translated into appropriate linguistic and expressive segments,

3. The segments are realized as a series of efferent commands.

3.3 Music is visual, not just auralIt is important to distinguish the aural (both real in the live acoustic world and imagined insidethe mind of the creator) from the visual facets of music. Much of the aural work is done by themind of the creator, possibly with the approximate feedback – perhaps musical pitch only– froman acoustic instrument or software external to the presently described system. What remains is apurely visual and symbolic world. This may seem strange, but it can be preferable to have a simpleand crude software pitch feedback (or no acoustic feedback at all) rather than that which is closebut misses the mark. Crude pitch-only or no in-sofware feedback is often sufficient for a trainedmusician and can prevent a sort of uncanny valley, caused when the audio recreation is fairly trueto the acoustic instrument it is emulating (but perhaps still low fidelity, non-audio sense). [Mor70]

3.4 Prior work in optical music recognitionIn order to describe related work, it is important to first make several distinctions. Firstly, thedistinction between online and offline recognition should be made. By online recognition, wemean systems with which the user interacts more or less in real time. By offline recognition, wemean systems that recognize CWMN from a pre-generated score, most likely a printed page (ora scanned bitmap thereof). Secondly, the distinction between typeset and handwritten CWMNshould be made.

Several research systems for gestural or online input have been developed, notably by Susan E.George at the University of South Australia [Geo05], and at work at IBM’s T.J. Watson ResearchCenter. As described, the Pen-based Music Editor developed at T.J. Watson seems to be the effortclosest yet to the ideal user interface. [Sil96] Purely gestural interfaces should be differentiatedby their requirement of learning a specialized set of gestures that are not necessarily related toCWMN. There has been much more work done in offline optical music recognition (OMR) for bothhandwritten and typeset CWMN, with significant contributions from Ichiro Fujinaga at McGill

5

University, beginning with his doctoral dissertation. [Fuj97]. Offline recognition is fundamentallydifferent in that it deals with pre-existing printed documents. There are several commerciallyavailable offline OMR programs that work on scanned images of typeset scores. There has alsobeen some recent work in offline recognition of handwritten scores [PF09], [RCC10]

4 IdealThe system presented here is an attempt to develop a transparent user interface not unlike penciland paper. It is best suited for gestural interfaces using either a stylus or a finger for input, but canbe used with a mouse or trackpad. The user can enter music notation with their existing knowledgeof CWMN and directly manipulate the recognized symbols.

Ideally, a music notation user interface should allow the user to sketch music notation quicklyenough before they forget it. Any tools used should not get in the way and should not force the userto think in a particular way, especially one that is unnatural or uncomfortable for the user. And,most importantly, the tools shouldn’t force any decisions to be made prematurely for the tools’ sake(or more accurately the convenience of implementation on the part of the person programming thesystem).

We aim to implement this system with no extensions or modifications to CWMN and no spe-cialized gestures for the user to learn. Previous gestural notation implementations have requiredthe user to learn a set of specialized gestures. One such system is the The Music Notepad [For98],developed by a group at Brown University. While the hardware interface is close to ideal, thesoftware interface is far from ideal.

The general quality of the handwritten sketch is unacceptable for expression of thoughts toothers, whereas the final typeset version is suitable for this purpose. Ideally, the path– in terms ofboth human time and effort– between these two versions will be a short as possible.

Figure 1: An example CWMN sketch.

6

Figure 2: Final version, notated and typeset using Nightingale music notation software.

The BrideDuration: c. 2:10 without repeats03

Violin I

Violin II

Viola

Cello

q = 60

&

&

B

?

4

4

4

4

4

4

4

4

(if you’re not crying, someone hasn’t done their job)

sempre tenuto, sadder than the saddest thing you know

w

Ó

œ

œ

P

P

œ

œ

P

#œ

˙

˙

#œ

P

w

˙

˙

œ œ

˙

˙

œ œ

bw

˙ .

w

œ œ ˙

œ

w

œ

bw

˙

œ

˙

œ œ

&

&

B

?

5

w

w

˙

b œ œ

˙

œ œ

˙

˙

w

bœ œ

bœ

b˙

œ

œ œbœ

œ

œ œbœ œ

bw

˙ .

œ

w

bœ ˙

œ

œ

w

˙

w

œ

˙

œ œ

&

&

B

?

9

w

œ

˙

˙

œ

˙

b˙

œœ

œ

œ

˙

˙

œ

œ

bœ

˙

œ

œ

œ œœ œ

œ

œ

bœ œœ œ

œ

b˙ .

˙ .

œ

œ œ

b œ

œ

œ

œ

œ ˙ .

˙

œ

œ

œ

œ

œ

œ

˙

œ

œ

œ

7

5 PrototypesThe initial implementation was naive and crude, but served a purpose nonetheless. It was intendedto do nothing more than demonstrate the concept and start the research conversation. This im-plementation was based heavily on the Noel Billing’s [Bil10] Adobe Flash implementation forrecognizing discrete roman alphabetic characters. Using ActionScript version 3 (AS3) [GH06]and Macromedia eXtensible Markup Language (MXML) [Inc07], this implementation runs in theAdobe Runtime Environment (AIR) [Inc10], a virtual machine for deploying Adobe Flash stan-dalone desktop applications. Since these tools are either open source and freely available, it ispossible to build and run this application without purchasing any software. A working version ofthis implementation is available on the World Wide Web (WWW or simply Web). [Chi10c]

There are two qualities of this initial demonstration of concept worth noting. Firstly, the stafflines provide nothing more than a vertical scale reference. Secondly, an attempt was made to addstaff lines to the drawing surface of the pen tablet itself. This was mocked up by placing a pieceof paper with hand-drawn staff lines over the surface of the tablet. An attempt was made to matchthe scale and spacing of the lines on the tablet to those on the screen. The main limitation of thisapproach is the physical separation and seeming disconnectedness between visual feedback on thescreen and the drawing hand. This mockup would be better with a touchscreen, where the drawingsurface and display were one and the same.

To remove some of the cumbersome installation requirements of the AIR version, this imple-mentation was ported to pure JavaScript (ECMAScript) [Int10] and Hypertext Markup Languageversion 5 (HTML5) [Hic10]. A working version of this implementation is also available on theWWW. [Chi10e] A very large majority of the initial prototype code was in the ActionScript lan-guage. Since ActionScript is effectively an extended variation of ECMAScript, this bulk of thisport was relatively trivial. Since ActionScript is a stricter language, this port largely consisted ofdeletions such as omitting the static typing ActionScript introduces to an otherwise dynamicallytyped language.

These early implementations have one major limitation; they only support a single characterwhich can only consist of a single stroke. Another limitation is that they only support a very limitedset of symbols: 1) whole note, 2) stem down quarter note, 3) stem up quarter note, 4) eighth rest, 5)quarter rest, 6) stem up eighth note, 7) stem down eighth note, 8) stem down half note, 9) stem uphalf note, 10) flat, 11) treble clef. These eleven symbols were cherry picked based on the criterionof single-stroke drawability.

Prior to this work, but relevant enough to warrant a mention is an early prototype in purelygestural CWMN input. [Chi08]

6 ImplementationThe final implementation can be described in terms of its three major component stages:

1. segmentation is defined as which combination of user-input strokes form a symbol. A strokeis defined as a vector of Cartesian points captured from pen down to pen up. The user-drawnink is segmented to determine which combination of strokes are most likely to combine toform a symbol.

8

Figure 3: AirQuil Sketchpad Mockup

2. classification is defined as what is the most likely symbol for a given combination of strokes.Classification always works on user-drawn templates of ink. At present, all templates arebased on the author’s hand. It is important to note that drawn symbols are nearly always verydifferent from typeset or printed CWMN symbols. Only a small subset of all the symbols thatconstitute CWMN are recognized. This subset of symbols currently only includes discretesymbols, and was chosen to capture the meat of CWMN: all core symbols directly relatingdirectly to pitch and rhythm. Recognition of continuous symbols, such as beams or slurs, isnot currently possible. After both template strokes and input strokes are normalized by scaleand to an equidistant fixed number of points template matching is performed by calculatingthe mean of the distances from each drawn point to the nearest hand-trained template pointand vice-versa. In other words, this comparison is bi-directional between drawn ink and thetemplate. This could also be described as nearest neighbor Euclidean distance.

3. language model is defined as how the discrete symbols fit together in a musically meaningfulway. A hand-coded collection of bigrams define how likely one symbol is to follow another.It seems unlikely that the language model is of that much importance, as these bigrams seemto have little meaning or significance. Because of this suspected insignificance, we chose tosimply hand-code, rather than train the language model on a large corpus of symbolic music.

9

Figure 4: AirQuil Screenshot

Figure 5: iQuil Version 1 Screenshot

Once each symbol is recognized, it is typeset more or less at the same position of the user-drawnink. It is possible to proportionatley scale up and down everything visible on screen, and to changethe color and opacity of the drawn ink in order to increase contrast against the typeset symbols. A

10

Figure 6: Example of raw pen input

Figure 7: Example as recognized and typeset

Figure 8: user feedback for symbol correction

11

testing framework can record and replay serialized ink, as well as take bitmap captures for iterativetest comparisons and identification of regressions. The user can also interactively correct mis-classified symbols by explicitly selecting the intended symbol from a contextual menu. This menucontains a set of the first n symbols (where n is roughly 9) ordered in decreasing order of likeliness.Because of this ordering, it is hoped that the intended symbol will appear in this list, but that maynot always be the case. We made some attempts to allow interactive session-based model feedbackincorporating user correction, but it would more beneficial to capture the user correction data aspart of a larger scheme for training an improved classifier.

In this implementation, we attempt to recognize a large subset of CWMN symbols. Thissubset has been expanded to include 1) bass (”F”) clef, 2) treble (”G”) clef, 3) flat, 4&5) six-teenth note (stem upwards or downwards), 6&7) thirty-second note (stem upwards or downwards),8&9) eighth note (stem upwards or downwards), 10&11) half note (stem upwards or downwards),12&13) quarter note (stem upwards or downwards), 14) whole note, 15) sixteenth rest, 16) eighthrest, 17) half rest, 18) quarter rest, 19) whole rest, 20) sharp, 21) natural, 22) barline, 23) dot(augmentation), 24-32) Arabic numerals nine through one. Even though we have nearly tripledthe number of recognized symbols from the initial prototype, this is still a very small subset ofall possible CWMN symbols. It might prove impossible to define such a complete set of CWMNsymbols upon which a consensus among experts can be made.

Figure 9: Two symbols drawn with five strokes. The first stroke forms a treble clef, while strokes2 through four form a sharp

Figure 10: All recognized symbols.

6.1 Demonstrations and live applicationA collection of demonstration videos and a video of a talk on the system can be found on the Web.[Chi10b] A live version of the application is available for use on the Web. [Chi10d]

12

Figure 11: Illustration of a close (good) template match

Figure 12: Illustration of a far (bad) template match of the same input ink

Figure 13: Example of input ink superimposed over recognized and typeset symbols and illustrat-ing the language model, such as it is.

7 ConclusionIn this paper, we have described an experimental and inchoate system for the online recognition ofhandwritten CWMN. Because we imposed limitations to what the system could handle– a single

13

Figure 14: iQuil in use on an Apple iPad

staff containing a single voice and a very limited number of recognized symbols– we were able todevelop a crudely working system.

8 Future WorkThe weakest component of the current system is the symbol classifier, which should be replacedwith a more sophisticated classifier. As of this writing, the most promising group of classifiersappears to be neural networks, possibly either convolutional neural networks or some variationusing the spatial domain. [WLJJ93], [LBH+93] There is not yet enough training data to make sucha classifier feasible. In the final implementation described in the paper, the system was only trainedon the author’s hand.

Nearly all classifiers would require a wider sampling and much larger corpus of training data.One possible method for collecting large amounts of training data would be to crowd-source us-ing a simple Web browser-based application, and allowing large numbers of users to input theirindividual interpretations of each symbol used in classification. A tricky problem here is the ten-

14

dency to take the shown symbol literally. Briefly showing a typeset symbol and then hiding it isan attempt to eliminate the problem of the user literally tracing the typeset symbol. While not yetused or even tested much, we have already implemented a simple application to serve this purpose.[Chi10a] In this application, the user is presented with a series of symbols. Each symbol is dis-played for a short time, after which the user draws that symbol. Each symbol is captured by thesystem as a series of points, which can then later be used to train the recognizer. It would also bepossible to capture some kind of meaningful training data using the inline user feedback correctioninterface described previously.

Non-linear writing systems such as mathematical notation or Chinese are similar to musicnotation, and applying recognition techniques previously successful in those domains would likelybenefit research in the CWMN domain. Finally, it might be interesting to attempt to distill ameaningful language model from a large corpus of visual symbolic music.

9 References

References[Bil10] Noel Billing, Gesture recognition in flash, Website, 2010, http://www.dncompute.

com/blog/2006/05/22/gesture-recognition-in-flash.html.

[Byr84] Donald Byrd, Music notation by computer, PhD dissertation, Indiana Uni-versity, 1984, http://www.informatics.indiana.edu/donbyrd/Papers/

DonDissScanned.pdf.

[Chi08] Geoff Chirgwin, Note input: a prototype system for purely gestural music notationinput, Website, 2008, http://chirgwin.com/musicsearch/noteinput/.

[Chi10a] , iquil training application, Website, 2010, http://iquil.com/training.html.

[Chi10b] , Quil demonstration videos, Website, 2010, http://demo.iquil.com/.

[Chi10c] , Quil, first prototype, Website, 2010, http://chirgwin.com/quil/.

[Chi10d] , Quil, latest working implementation, Website, 2010, http://iquil.com/.

[Chi10e] , Quil, second prototype, Website, 2010, http://iquil.com/iQuil1/.

[For98] Forsberg, Andrew, Mark Dieterich, and Robert Zeleznik, The music notepad, Pro-ceedings of UIST 1998, ACM SIGGRAPH, ACM, 1998, http://graphics.cs.brown.edu/research/music/home.html.

[Fuj97] Ichiro Fujinaga, Adaptive optical music recognition, PhD dissertation, McGill Univer-sity, 1997.

[Geo05] Susan E. George, Visual perception of music notation: On-line and off-line recognition,IRM Press, 2005.

15

[GH06] Gary Grossman and Emmy Huang, Actionscript 3.0 overview, Website,2006, http://www.adobe.com/devnet/actionscript/articles/

actionscript3 overview.html.

[Hic10] Ian Hickson, Html5: A vocabulary and associated apis for html and xhtml, Website,2010, http://dev.w3.org/html5/spec/Overview.html.

[Inc07] Adobe Systems Incorporated, Mxml, Website, 2007, http://learn.adobe.com/wiki/display/Flex/MXML.

[Inc10] , Adobe air, Website, 2010, http://www.adobe.com/products/air/.

[Int10] ECMA International, Ecmascript language specification, Website, 2010, http://www.ecma-international.org/publications/standards/Ecma-262.htm.

[LBH+93] Y. LeCun, Y. Bengio, D. Henderson, A. Weisbuch, H. Weissman, and Jackel L., on-linehandwriting recognition with neural networks: spatial representation versus temporalrepresentation., Proc. International Conference on handwriting and drawing., EcoleNationale Superieure des Telecommunications, 1993.

[Mor70] M. Mori, Bukimi no tani [The uncanny valley], Energy 7 (1970), no. 4, 33–35.

[PF09] Thomas Plotz and Gernot Fink, Markov models for offline handwriting recognition: asurvey, International Journal on Document Analysis and Recognition 12 (2009), no. 4,269–298.

[RCC10] A. Rebelo, G. Capela, and Jaime Cardoso, Optical recognition of music symbols, In-ternational Journal on Document Analysis and Recognition 13 (2010), no. 1, 19–31.

[Ros91] David A. Rosenbaum, Human motor control, Academic Press, 1991.

[Sil96] Katherine Silberger, Putting composers in control, Website, 1996, http:

//domino.research.ibm.com/comm/wwwr thinkresearch.nsf/pages/

musiceditor496.html.

[WLJJ93] Q.Z. Wu, Y. LeCun, L. D. Jackel, and B.S. Jeng, on-line recognition of limited vocabu-lary chinese character using multiple convolutional neural networks, Proc. of the 1993IEEE International Symposium on circuits and systems, vol. 4, IEEE, 1993, pp. 2435–2438.

16

10 Source Code Listing

10.1 Gesture Recognition and Classification

../Gesture.js1 f u n c t i o n G e s t u r e ( )2 {3 /∗ s t a t i c ∗ /4 DEFAULT NUM POINTS = 8 0 ;5 MIN NUM POINTS = 4 ;6 MAX NUM POINTS = 4096 ;78 /∗ p u b l i c ∗ /9 t h i s . symbol = ” ” ;

10 t h i s . numNormalPoints = DEFAULT NUM POINTS ;11 t h i s . s t r o k e s = [ ] ;12 t h i s . s t r o k e s . push ( new Array ( ) ) ;1314 t h i s . ma tches = [ ] ;15 t h i s . o r i g i n a l S t r o k e I n d i c e s = [ ] ;16 t h i s . s t a r t i n g P o i n t = new P o i n t ( ) ;17 t h i s . t o p L e f t = n u l l ;18 t h i s . b o t t o m R i g h t = n u l l ;19 t h i s . h e i g h t = n u l l ;20 t h i s . w id th = n u l l ;21 t h i s . s t r o k e I d x = 0 ;2223 t h i s . b a g O f P o i n t s S o r t e d = f a l s e ;24 t h i s . s t a f f S i z e = 128 ;2526 /∗ p r i v a t e ∗ /27 v a r o f f s e t X = 0 ;28 v a r o f f s e t Y = 0 ;29 v a r s h a p e N e e d s U p d a t i n g = f a l s e ;30 v a r l i n e T h i c k n e s s = 7 ;31 v a r l i n e C o l o r = 0 x000000 ;32 v a r shapeMarg inTop = 1 0 ;33 v a r s h a p e M a r g i n L e f t = 1 0 ;34 v a r l e n g t h = −1;35 v a r a v e r a g e C e n t e r ;363738 v a r MAX SCALE X = 1 . 1 5 ;39 v a r MIN SCALE X = 1 / MAX SCALE X ;4041 v a r MAX SCALE Y = 1 . 1 5 ;42 v a r MIN SCALE Y = 1 / MAX SCALE Y ;4344 v a r MAX ASPECT RATIO DELTA = 1 . 0 ;4546 t h i s . g e t T o p L e f t = f u n c t i o n ( )47 {48 i f ( ! t h i s . t o p L e f t )

17

49 {50 t h i s . ge tBoundingBox ( ) ;51 }5253 re turn t h i s . t o p L e f t ;54 }5556 t h i s . g e t B o t t o m R i g h t = f u n c t i o n ( )57 {58 i f ( ! t h i s . b o t t o m R i g h t )59 {60 t h i s . ge tBoundingBox ( ) ;61 }62 re turn t h i s . b o t t o m R i g h t ;63 }6465 t h i s . ge tWid th = f u n c t i o n ( )66 {67 i f ( ! t h i s . w id th )68 {69 t h i s . ge tBoundingBox ( ) ;70 }7172 re turn t h i s . w id th ;73 }7475 t h i s . g e t H e i g h t = f u n c t i o n ( )76 {77 i f ( ! t h i s . h e i g h t )78 {79 t h i s . ge tBoundingBox ( ) ;80 }8182 re turn t h i s . h e i g h t ;83 }8485 t h i s . a d d P o i n t = f u n c t i o n ( x , y )86 {87 t h i s . s t r o k e s [ t h i s . s t r o k e I d x ] . push ( new P o i n t ( x , y ) ) ;88 s h a p e N e e d s U p d a t i n g = t rue ;89 }9091 t h i s . s t r o k e L e n g t h = f u n c t i o n ( )92 {93 v a r l e n g t h = 0 ;94 f o r ( v a r i = 0 ; i < t h i s . s t r o k e s . l e n g t h ; i ++)95 {96 f o r ( v a r j = 1 ; j < t h i s . s t r o k e s [ i ] . l e n g t h ; j ++)97 {98 l e n g t h += P o i n t . d i s t a n c e ( t h i s . s t r o k e s [ i ] [ j −1] , t h i s . s t r o k e s [ i

] [ j ] ) ;99 }

100 }101 re turn l e n g t h ;

18

102 }103104 t h i s . n o r m a l i z e S h a p e = f u n c t i o n ( )105 {106107 v a r n o r m a l S t r o k e L e n g t h = t h i s . s t r o k e L e n g t h ( ) / ( t h i s . numNormalPoints −

1) ;108 f o r ( v a r i = 0 ; i < t h i s . s t r o k e s . l e n g t h ; i ++)109 {110 v a r newPo in t s = [ ] ;111 i f ( t h i s . s t r o k e s [ i ] . l e n g t h <= 0)112 {113 c o n t in u e ;114 }115 newPo in t s . push ( t h i s . s t r o k e s [ i ] [ 0 ] ) ;116 v a r s t a r t P o i n t = t h i s . s t r o k e s [ i ] [ 0 ] ;117 v a r e n d P o i n t = t h i s . s t r o k e s [ i ] [ 0 ] ;118119 v a r p r e v i o u s D i s t a n c e E n d = 0 ;120 v a r p r e v i o u s D i s t a n c e S t a r t = 0 ;121 v a r d i s t a n c e = 0 ;122 v a r s t r o k e L e n g t h = 0 ;123 v a r p o i n t I d x = 1 ;124 v a r j = 0 ;125 whi le ( j <= MAX NUM POINTS)126 {127 j ++;128 v a r e x c e s s = p r e v i o u s D i s t a n c e E n d − d i s t a n c e ;129 i f ( e x c e s s >= n o r m a l S t r o k e L e n g t h )130 {131 d i s t a n c e += n o r m a l S t r o k e L e n g t h ;132 v a r r a t i o = ( d i s t a n c e − p r e v i o u s D i s t a n c e S t a r t ) /

s t r o k e L e n g t h ;133 v a r newPoin t = new P o i n t ( ( e n d P o i n t . x − s t a r t P o i n t . x ) ∗

r a t i o + s t a r t P o i n t . x ,134 ( e n d P o i n t . y − s t a r t P o i n t . y )

∗ r a t i o + s t a r t P o i n t . y) ;

135 newPo in t s . push ( newPoin t ) ;136137 }138 e l s e139 {140 i f ( p o i n t I d x == t h i s . s t r o k e s [ i ] . l e n g t h )141 {142 break ;143 }144 s t a r t P o i n t = e n d P o i n t ;145 e n d P o i n t = t h i s . s t r o k e s [ i ] [ p o i n t I d x ] ;146 p r e v i o u s D i s t a n c e S t a r t = p r e v i o u s D i s t a n c e E n d ;147 s t r o k e L e n g t h = e n d P o i n t . s u b t r a c t ( s t a r t P o i n t ) . g e t L e n g t h ( ) ;148 p r e v i o u s D i s t a n c e E n d += s t r o k e L e n g t h ;149 p o i n t I d x ++;150 }

19

151 }152153 / / add f i n a l p o i n t154 i f ( newPo in t s . l e n g t h < t h i s . numNormalPoints )155 {156 newPo in t s . push ( e n d P o i n t ) ;157 }158159 t h i s . s t r o k e s [ i ] = newPo in t s ;160 }161 }162163 / / c e n t e r on average c e n t e r p o i n t164 t h i s . n o r m a l i z e T o A v e r a g e C e n t e r = f u n c t i o n ( )165 {166 f o r ( v a r i = 0 ; i < t h i s . s t r o k e s . l e n g t h ; i ++)167 {168 f o r ( v a r j = 0 ; j < t h i s . s t r o k e s [ i ] . l e n g t h ; j ++)169 {170 v a r p o i n t = t h i s . s t r o k e s [ i ] [ j ] ;171 p o i n t . x −= t h i s . g e t A v e r a g e C e n t e r ( ) . x ;172 p o i n t . y −= t h i s . g e t A v e r a g e C e n t e r ( ) . y ;173 }174 }175 }176177 t h i s . n o r m a l i z e T o F i x e d P o i n t = f u n c t i o n ( c e n t e r P o i n t , r e c a l c u l a t e C e n t r o i d ,

o f f s e t P o i n t )178 {179 i f ( o f f s e t P o i n t == u n d e f i n e d )180 {181 o f f s e t P o i n t = new P o i n t ( 0 , 0 ) ;182 }183 i f ( r e c a l c u l a t e C e n t r o i d == u n d e f i n e d )184 {185 r e c a l c u l a t e C e n t r o i d = f a l s e ;186 }187 v a r a v e r a g e C e n t e r = t h i s . g e t A v e r a g e C e n t e r ( r e c a l c u l a t e C e n t r o i d ) ;188 f o r ( v a r i = 0 ; i < t h i s . s t r o k e s . l e n g t h ; i ++)189 {190 f o r ( v a r j = 0 ; j < t h i s . s t r o k e s [ i ] . l e n g t h ; j ++)191 {192 v a r p o i n t = t h i s . s t r o k e s [ i ] [ j ] ;193 / / o n l y u s e r v e r t i c a l o f f s e t f o r s t a f f margin ?194 p o i n t . x = o f f s e t P o i n t . x + p o i n t . x + ( c e n t e r P o i n t . x −

a v e r a g e C e n t e r . x ) ;195 p o i n t . y = o f f s e t P o i n t . y + p o i n t . y + ( c e n t e r P o i n t . y −

a v e r a g e C e n t e r . y ) ;196 }197 }198 }199200 / / Someth ing i s buggy abou t t h i s201 t h i s . s e t T o p L e f t T o Z e r o = f u n c t i o n ( )

20

202 {203 v a r o f f s e t P o i n t = t h i s . t o p L e f t ;204 v a r a v e r a g e C e n t e r = t h i s . g e t A v e r a g e C e n t e r ( ) ;205 f o r ( v a r i = 0 ; i < t h i s . s t r o k e s . l e n g t h ; i ++)206 {207 f o r ( v a r j = 0 ; j < t h i s . s t r o k e s [ i ] . l e n g t h ; j ++)208 {209 v a r p o i n t = t h i s . s t r o k e s [ i ] [ j ] ;210 p o i n t . x −= o f f s e t P o i n t . x211 p o i n t . y −= o f f s e t P o i n t . y ;212 }213 }214 }215216217 t h i s . g e t A v e r a g e C e n t e r = f u n c t i o n ( r e c a l c u l a t e )218 {219 i f ( ! r e c a l c u l a t e && a v e r a g e C e n t e r != n u l l )220 {221 re turn a v e r a g e C e n t e r ;222 }223224 v a r c e n t e r X = 0 ;225 v a r c e n t e r Y = 0 ;226 i f ( t h i s . s t r o k e s == u n d e f i n e d | | t h i s . s t r o k e s . l e n g t h <= 0 | | t h i s .

s t r o k e s [ 0 ] == u n d e f i n e d )227 {228 re turn new P o i n t ( 0 , 0 ) ;229 }230231 f o r ( v a r i = 0 ; i < t h i s . s t r o k e s [ 0 ] . l e n g t h ; i ++)232 {233 v a r p o i n t = t h i s . s t r o k e s [ 0 ] [ i ] ;234 c e n t e r X += p o i n t . x ;235 c e n t e r Y += p o i n t . y ;236 }237238 c e n t e r X /= t h i s . s t r o k e s [ 0 ] . l e n g t h ;239 c e n t e r Y /= t h i s . s t r o k e s [ 0 ] . l e n g t h ;240241 a v e r a g e C e n t e r = new P o i n t ( cen te rX , c e n t e r Y ) ;242 / / g l o b a l f o r s o r t f u n c t i o n243 window . a v e r a g e C e n t e r = a v e r a g e C e n t e r ;244 re turn ( a v e r a g e C e n t e r ) ;245 }246247 t h i s . ge tBoundingBox = f u n c t i o n ( )248 {249 i f ( t h i s . s t r o k e s [ 0 ] . l e n g t h < 1)250 {251 re turn f a l s e ;252 }253 v a r f i r s t P o i n t = t h i s . s t r o k e s [ 0 ] [ 0 ] ;254 v a r minX = f i r s t P o i n t . x ;

21

255 v a r minY = f i r s t P o i n t . y ;256 v a r maxX = f i r s t P o i n t . x ;257 v a r maxY = f i r s t P o i n t . y ;258 f o r ( v a r i = 0 ; i < t h i s . s t r o k e s . l e n g t h ; i ++)259 {260 f o r ( v a r j = 0 ; j < t h i s . s t r o k e s [ i ] . l e n g t h ; j ++)261 {262 v a r p o i n t = t h i s . s t r o k e s [ i ] [ j ] ;263 i f ( p o i n t . x < minX )264 {265 minX = p o i n t . x ;266 }267 i f ( p o i n t . y < minY )268 {269 minY = p o i n t . y ;270 }271 i f ( p o i n t . x > maxX)272 {273 maxX = p o i n t . x ;274 }275 i f ( p o i n t . y > maxY)276 {277 maxY = p o i n t . y ;278 }279 }280 }281282 / / a c c o u n t f o r f u z z283 v a r margin = 1 0 ;284 minX −= margin ;285 minY −= margin ;286 maxX += margin ;287 maxY += margin ;288289 v a r wid th = maxX − minX ;290 v a r h e i g h t = maxY − minY ;291 t h i s . w id th = wid th ;292 t h i s . h e i g h t = h e i g h t ;293 t h i s . t o p L e f t = new P o i n t ( minX , minY ) ;294 t h i s . b o t t o m R i g h t = new P o i n t ( maxX , maxY) ;295 }296297 / / match t h i s g e s t u r e ’ s s c a l e t o a n o t h e r g e s t u r e298 t h i s . m a t c h S c a l e = f u n c t i o n ( m a t c h G e s t u r e )299 {300 / / w i d t h301 v a r sc a l e X = m a t c h G e s t u r e . ge tWid th ( ) / t h i s . ge tWid th ( ) ;302 / / h e i g h t303 v a r sc a l e Y = m a t c h G e s t u r e . g e t H e i g h t ( ) / t h i s . g e t H e i g h t ( ) ;304305 / / a lways l e a v e t h e s e o r d e r e d x : y306 v a r o l d A s p e c t R a t i o = t h i s . ge tWid th ( ) / t h i s . g e t H e i g h t ( ) ;307 v a r newAspec tRa t io = m a t c h G e s t u r e . ge tWid th ( ) / m a t c h G e s t u r e . g e t H e i g h t

( ) ;

22

308 v a r a s p e c t R a t i o D e l t a = Math . abs ( newAspec tRa t io − o l d A s p e c t R a t i o ) ;309310 i f ( s ca l e X > MAX SCALE X)311 {312 sc a l e X = MAX SCALE X ;313 }314 i f ( s ca l e X < MIN SCALE X )315 {316 sc a l e X = MIN SCALE X ;317 }318319 i f ( s ca l e Y > MAX SCALE Y)320 {321 sc a l e Y = MAX SCALE Y ;322 }323 i f ( s ca l e Y < MIN SCALE Y )324 {325 sc a l e Y = MIN SCALE Y ;326 }327328329 f o r ( v a r i = 0 ; i < t h i s . s t r o k e s . l e n g t h ; i ++)330 {331 P o i n t . s c a l e P o i n t s 2 D ( t h i s . s t r o k e s [ i ] , sca leX , sc a l e Y ) ;332 }333334 }335336 / / p r i v e l e g e d337 t h i s . n o r m a l i z e S c a l e = f u n c t i o n ( )338 {339 f o r ( v a r i = 0 ; i < t h i s . s t r o k e s . l e n g t h ; i ++)340 {341 i f ( t h i s . s t r o k e s [ i ] . l e n g t h <= 0)342 {343 c o n t in u e ;344 }345 v a r f i r s t P o i n t = t h i s . s t r o k e s [ i ] [ 0 ] ;346 v a r minX = f i r s t P o i n t . x ;347 v a r minY = f i r s t P o i n t . y ;348 v a r maxX = f i r s t P o i n t . x ;349 v a r maxY = f i r s t P o i n t . y ;350 f o r ( v a r j = 0 ; j < t h i s . s t r o k e s [ i ] . l e n g t h ; j ++)351 {352 v a r p o i n t = t h i s . s t r o k e s [ i ] [ j ] ;353 i f ( p o i n t . x < minX )354 {355 minX = p o i n t . x ;356 }357 i f ( p o i n t . y < minY )358 {359 minY = p o i n t . y ;360 }361 i f ( p o i n t . x > maxX)

23

362 {363 maxX = p o i n t . x ;364 }365 i f ( p o i n t . y > maxY)366 {367 minY = p o i n t . y ;368 }369 }370371 v a r wid th = maxX − minX ;372 v a r h e i g h t = maxY − minY ;373 t h i s . w id th = wid th ;374 t h i s . h e i g h t = h e i g h t ;375 v a r s c a l e = ( wid th > h e i g h t ) ? wid th : h e i g h t ;376377 i f ( s c a l e <= 0)378 {379 re turn ;380 }381382 s c a l e /= 1 ;383384 P o i n t . s c a l e P o i n t s ( t h i s . s t r o k e s [ i ] , s c a l e ) ;385 }386 }387388 t h i s . s c a l e = f u n c t i o n ( s c a l e F a c t o r )389 {390391 f o r ( v a r i = 0 ; i < t h i s . s t r o k e s . l e n g t h ; i ++)392 {393 f o r ( v a r j = 0 ; j < t h i s . s t r o k e s [ i ] . l e n g t h ; j ++)394 {395 v a r p o i n t = t h i s . s t r o k e s [ i ] [ j ] ;396 p o i n t . x ∗= s c a l e F a c t o r ;397 p o i n t . y ∗= s c a l e F a c t o r ;398 }399 }400 }401402 t h i s . ge tNumPoin ts = f u n c t i o n ( )403 {404 re turn t h i s . s t r o k e s [ 0 ] . l e n g t h ;405 }406407 t h i s . s t a r t G e s t u r e = f u n c t i o n ( x , y )408 {409 t h i s . a d d P o i n t ( x , y ) ;410 }411412 t h i s . g e t L e n g t h = f u n c t i o n ( )413 {414 i f ( l e n g t h == −1 | | s h a p e N e e d s U p d a t i n g )415 {

24

416 l e n g t h = 0 ;417 v a r l a s t P o i n t ;418 f o r ( v a r i = 0 ; i < t h i s . s t r o k e s [ 0 ] . l e n g t h ; i ++)419 {420 v a r p o i n t = t h i s . s t r o k e s [ 0 ] [ i ] ;421 i f ( l a s t P o i n t != n u l l )422 {423 l e n g t h += P o i n t . d i s t a n c e ( l a s t P o i n t , p o i n t ) ;424 }425 l a s t P o i n t = p o i n t ;426 }427 }428 re turn l e n g t h ;429 }430431 t h i s . c r e a t e F r o m J s o n = f u n c t i o n ( o b j )432 {433 t h i s . symbol = o b j . symbol ;434 i f ( ” s t a f f S i z e ” i n o b j )435 {436 t h i s . s t a f f S i z e = o b j . s t a f f S i z e ;437 }438439 t h i s . s t r o k e s = [ ] ;440 f o r ( v a r i = 0 ; i < o b j . s t r o k e s . l e n g t h ; i ++)441 {442 t h i s . s t r o k e s [ i ] = [ ] ;443 f o r ( v a r j = 0 ; j < o b j . s t r o k e s [ i ] . l e n g t h ; j ++)444 {445 v a r p o i n t = o b j . s t r o k e s [ i ] [ j ] ;446 t h i s . s t r o k e s [ i ] . push ( new P o i n t ( p o i n t . x , p o i n t . y ) ) ;447 }448 }449 }450451 t h i s . c o n t i n u e G e s t u r e = f u n c t i o n ( x , y )452 {453 t h i s . a d d P o i n t ( x , y ) ;454 }455456 t h i s . newStroke = f u n c t i o n ( )457 {458 i f ( t h i s . s t r o k e s . l e n g t h > G e s t u r e . MAX STROKES)459 {460 re turn f a l s e ;461 }462 t h i s . s t r o k e s . push ( new Array ( ) ) ;463 t h i s . s t r o k e I d x ++;464 }465466 t h i s . p o p S t r o k e = f u n c t i o n ( )467 {468 i f ( t h i s . s t r o k e I d x <= 0)469 {

25

470 re turn n u l l ;471 }472 t h i s . s t r o k e I d x −−;473 re turn t h i s . s t r o k e s . pop ( ) ;474 }475476477 t h i s . n o r m a l i z e = f u n c t i o n ( )478 {479 t h i s . n o r m a l i z e S h a p e ( ) ;480 }481482 t h i s . g e t P o i n t s = f u n c t i o n ( )483 {484 re turn t h i s . s t r o k e s [ 0 ] ;485 }486487 t h i s . g e t A l l P o i n t s = f u n c t i o n ( )488 {489 re turn t h i s . s t r o k e s ;490 }491492 t h i s . t o S t r i n g = f u n c t i o n ( )493 {494 v a r s t r i n g = ” g e s t u r e wi th ” + t h i s . s t r o k e s . l e n g t h + ” p o i n t s \n : ” ;495 f o r ( v a r i = 0 ; i < t h i s . s t r o k e s . l e n g t h ; i ++)496 {497 s t r i n g += t h i s . s t r o k e s [ i ] + ” , ” ;498 }499 re turn s t r i n g ;500 }501502 / / un imp lemen ted503 t h i s . g e t J s o n = f u n c t i o n ( )504 {505 v a r j s o n = new S t r i n g ( ) ;506 v a r p o i n t s A r y = [ ] ;507 f o r ( v a r i = 0 ; i < t h i s . s t r o k e s . l e n g t h ; i ++)508 {509 v a r p o i n t = t h i s . s t r o k e s [ i ] ;510 p o i n t s A r y . push ({ ” x ” : p o i n t . x , ” y ” : p o i n t . y } ) ;511 }512 re turn J son . encode ( p o i n t s A r y ) ;513 }514515 / / need t h i s , does avaerage c e n t e r make a d i f f e r e n c e over ( 0 , 0 ) ?516 t h i s . p o i n t A n g l e D i f f e r e n c e = f u n c t i o n ( p o i n t 1 , p o i n t 2 )517 {518 v a r a n g l e 1 = Math . a t a n 2 ( t h i s . g e t A v e r a g e C e n t e r ( ) . y − p o i n t 1 . y , t h i s .

g e t A v e r a g e C e n t e r ( ) . x − p o i n t 1 . x ) ;519 v a r a n g l e 2 = Math . a t a n 2 ( t h i s . g e t A v e r a g e C e n t e r ( ) . y − p o i n t 2 . y , t h i s .

g e t A v e r a g e C e n t e r ( ) . x − p o i n t 2 . x ) ;520 re turn Math . abs ( a n g l e 2 − a n g l e 1 ) ;521 }

26

522523 t h i s . s o r t A l l P o i n t s B y A n g l e F r o m C e n t r o i d = f u n c t i o n ( p o i n t 1 , p o i n t 2 )524 {525 v a r a n g l e 1 = Math . a t a n 2 ( window . a v e r a g e C e n t e r . y − p o i n t 1 . y , window .

a v e r a g e C e n t e r . x − p o i n t 1 . x ) ;526 v a r a n g l e 2 = Math . a t a n 2 ( window . a v e r a g e C e n t e r . y − p o i n t 2 . y , window .

a v e r a g e C e n t e r . x − p o i n t 2 . x ) ;527528 i f ( a n g l e 1 > a n g l e 2 )529 {530 re turn 1 ;531 }532 e l s e i f ( a n g l e 1 < a n g l e 2 )533 {534 re turn −1;535 }536537 re turn 0 ;538 }539 / / c r e a t e an a r r a y o f a l l p o i n t s i n a l l g e s t u r e s540 t h i s . b a g O f P o i n t s = f u n c t i o n ( )541 {542 v a r b a g O f P o i n t s = [ ] ;543 f o r ( v a r i = 0 ; i < t h i s . s t r o k e s . l e n g t h ; i ++)544 {545 b a g O f P o i n t s = b a g O f P o i n t s . c o n c a t ( P o i n t . c l o n e P o i n t s ( t h i s . s t r o k e s [ i

] ) ) ;546 }547548 re turn b a g O f P o i n t s ;549 }550551552 / / u s e f u l f o r v i s u a l debugg ing553 t h i s . drawGestureOnNewCanvas = f u n c t i o n ( p a r e n t E l e m e n t I d , t e x t )554 {555 / / c r e a t e a new canvas556 v a r newCanvas = document . c r e a t e E l e m e n t ( ” c an va s ” ) ;557 / / s e t d i m e n s i o n s o f new canvas558559 t h i s . ge tBoundingBox ( ) ;560561 newCanvas . s e t A t t r i b u t e ( ” wid th ” , p a r s e I n t ( t h i s . w id th ) ∗ 4 + 100) ;562 newCanvas . s e t A t t r i b u t e ( ” h e i g h t ” , p a r s e I n t ( t h i s . h e i g h t ) ∗ 4 + 100) ;563564 / / bo rd er around canvas565 newCanvas . s e t A t t r i b u t e ( ” s t y l e ” , ” b o r d e r : 1px s o l i d #666 ; ” )566567 v a r c o n t e x t = newCanvas . g e t C o n t e x t ( ’ 2d ’ ) ;568 c o n t e x t . f i l l S t y l e = ” b l a c k ” ;569 c o n t e x t . f i l l T e x t ( t e x t , 10 , 10) ;570 c o n t e x t . l i n e W i d t h = 5 ;571 / / draw t h e g e s t u r e t o i t572 v a r m a r g i n P o i n t = t h i s . g e t B o t t o m R i g h t ( ) . c l o n e ( ) ;

27

573 G e s t u r e . drawOnCanvas ( newCanvas , t h i s , nul l , m a r g i n P o i n t ) ;574575 / / append t h e new canvas t o t h e page576 document . ge tE lemen tById ( p a r e n t E l e m e n t I d ) . appendCh i ld ( newCanvas ) ;577 re turn newCanvas ;578579 }580581 t h i s . c l o n e = f u n c t i o n ( )582 {583 v a r c lonedObj = new G e s t u r e ( ) ;584585 c lonedObj . symbol = t h i s . symbol ;586 c lonedObj . numNormalPoints = t h i s . numNormalPoints ;587588 / / deep copy o f p o i n t s589 c lonedObj . s t r o k e s = t h i s . c l o n e S t r o k e s ( ) ;590 c lonedObj . s t a r t i n g P o i n t = t h i s . s t a r t i n g P o i n t ;591 c lonedObj . t o p L e f t = t h i s . t o p L e f t ;592 c lonedObj . b o t t o m R i g h t = t h i s . b o t t o m R i g h t ;593 c lonedObj . h e i g h t = t h i s . h e i g h t ;594 c lonedObj . w id th = t h i s . w id th ;595 c lonedObj . s t r o k e I d x = t h i s . s t r o k e I d x ;596 c lonedObj . b a g O f P o i n t s S o r t e d = t h i s . b a g O f P o i n t s S o r t e d ;597598 c lonedObj . g e t A v e r a g e C e n t e r ( ) ;599600 re turn c lonedObj ;601 }602603 t h i s . c l o n e S t r o k e s = f u n c t i o n ( s t a r t I d x , endIdx )604 {605 i f ( s t a r t I d x == u n d e f i n e d | | s t a r t I d x < 0)606 {607 s t a r t I d x = 0 ;608 }609 i f ( endIdx == u n d e f i n e d | | endIdx > t h i s . s t r o k e s . l e n g t h )610 {611 endIdx = t h i s . s t r o k e s . l e n g t h ;612 }613 v a r c l o n e d S t r o k e s = [ ] ;614 f o r ( v a r i = s t a r t I d x ; i < endIdx ; i ++)615 {616 i f ( t h i s . s t r o k e s [ i ] . l e n g t h > 0)617 {618 c l o n e d S t r o k e s . push ( P o i n t . c l o n e P o i n t s ( t h i s . s t r o k e s [ i ] ) ) ;619 }620 }621622 re turn c l o n e d S t r o k e s ;623 }624625 }626

28

627 G e s t u r e . p r o t o t y p e . e n d G e s t u r e = f u n c t i o n ( )628 {629 / / r e t u r n f a l s e i f we don ’ t have enough p o i n t s t o make a g e s t u r e630 re turn t h i s . c h e c k G e s t u r e ( ) ;631 }632633 G e s t u r e . p r o t o t y p e . c h e c k G e s t u r e = f u n c t i o n ( )634 {635 i f ( t h i s . g e t P o i n t s ( ) . l e n g t h < MIN NUM POINTS )636 {637 re turn f a l s e ;638 }639 re turn true ;640 }641642 G e s t u r e . drawOnCanvas = f u n c t i o n ( canvas , g e s t u r e , s t r o k e S t y l e , o f f s e t P o i n t )643 {644 v a r p o i n t s = g e s t u r e . g e t A l l P o i n t s ( ) ;645 v a r c o n t e x t = ca nv a s . g e t C o n t e x t ( ’ 2d ’ ) ;646647 c o n t e x t . s t r o k e S t y l e = s t r o k e S t y l e ;648 c o n t e x t . l i n e W i d t h = 5 ;649650 / / check t o s e e t h a t t h e r e are p o i n t s651 i f ( p o i n t s . l e n g t h < 1 | | p o i n t s [ 0 ] . l e n g t h < 1)652 {653 re turn ;654 }655 f o r ( v a r i = 0 ; i < p o i n t s . l e n g t h ; i ++)656 {657 c o n t e x t . b e g i n P a t h ( ) ;658 f o r ( v a r j = 0 ; j < p o i n t s [ i ] . l e n g t h ; j ++)659 {660 v a r p o i n t = p o i n t s [ i ] [ j ] ;661 i f ( o f f s e t P o i n t )662 {663 p o i n t . add ( o f f s e t P o i n t ) ;664 }665 i f ( j == 0)666 {667 c o n t e x t . moveTo ( p o i n t . x , p o i n t . y ) ;668 }669 e l s e670 {671 c o n t e x t . l i n e T o ( p o i n t . x , p o i n t . y ) ;672 }673 }674 c o n t e x t . s t r o k e ( ) ;675 }676 c o n t e x t . l i n e W i d t h = 1 ;677 }678679 / / b i tmap compar i son680 G e s t u r e . bi tmapRank = f u n c t i o n ( g e s t u r e 1 , g e s t u r e 2 )

29

681 {682 v a r wid th = 300 ;683 v a r h e i g h t = 340 ;684685 v a r canvas1 = document . ge tE lemen tById ( ” canvas1 ” ) ;686 U t i l s . c l e a r C a n v a s ( canvas1 ) ;687 G e s t u r e . drawAndScaleToCanvas ( canvas1 , g e s t u r e 1 ) ;688689 v a r canvas2 = document . ge tE lemen tById ( ” canvas2 ” ) ;690 U t i l s . c l e a r C a n v a s ( canvas2 ) ;691 G e s t u r e . drawAndScaleToCanvas ( canvas2 , g e s t u r e 2 ) ;692693 / / Get t h e C a n v a s P i x e l A r r a y from t h e g i v e n c o o r d i n a t e s and d i m e n s i o n s .694 v a r imgData1 = canvas1 . g e t C o n t e x t ( ’ 2d ’ ) . ge t ImageDa ta ( 0 , 0 , width , h e i g h t ) ;695 v a r p i x e l s 1 = imgData1 . d a t a ;696 v a r imgData2 = canvas2 . g e t C o n t e x t ( ’ 2d ’ ) . ge t ImageDa ta ( 0 , 0 , width , h e i g h t ) ;697 v a r p i x e l s 2 = imgData2 . d a t a ;698699 v a r s c o r e = 0 ;700 / / Loop over each p i x e l701702 f o r ( v a r i = 3 ; i < p i x e l s 1 . l e n g t h ; i += 4)703 {704 s c o r e += Math . abs ( p i x e l s 1 [ i ] − p i x e l s 2 [ i ] ) ;705 }706707 re turn s c o r e ;708 }709710 / / r e t u r n s b e s t ( h i g h e s t ) s c o r e f o r a symbol711 G e s t u r e . p o i n t D i s t a n c e R a n k = f u n c t i o n ( g e s t u r e 1 , g e s t u r e 2 , canvas1 , canvas2 )712 {713 v a r b a g O f P o i n t s 1 = g e s t u r e 1 . b a g O f P o i n t s ( ) ;714 v a r b a g O f P o i n t s 2 = g e s t u r e 2 . b a g O f P o i n t s ( ) ;715716 i f (DEBUG LEVEL > 2)717 {718 c o n s o l e . l o g ( ” g e s t u r e 1 , g e s t u r e 2 ” , g e s t u r e 1 , g e s t u r e 2 ) ;719 G e s t u r e . v i s u a l D i s t a n c e N e a r e s t ( g e s t u r e 1 , g e s t u r e 2 , bagOfPo in t s1 ,

b a g O f P o i n t s 2 ) ;720 }721722 v a r t o t a l D i s t a n c e = 0 ;723 / / 1 −> 2724 f o r ( v a r i = 0 ; i < b a g O f P o i n t s 1 . l e n g t h ; i ++)725 {726 t o t a l D i s t a n c e += G e s t u r e . g e t N e a r e s t D i s t a n c e ( b a g O f P o i n t s 1 [ i ] ,

b a g O f P o i n t s 2 ) ;727 }728729 / / 2 −> 1730 f o r ( i = 0 ; i < b a g O f P o i n t s 2 . l e n g t h ; i ++)731 {

30

732 t o t a l D i s t a n c e += G e s t u r e . g e t N e a r e s t D i s t a n c e ( b a g O f P o i n t s 2 [ i ] ,b a g O f P o i n t s 1 ) ;

733 }734735 v a r s c o r e = 1 / ( t o t a l D i s t a n c e / ( b a g O f P o i n t s 1 . l e n g t h + b a g O f P o i n t s 2 .

l e n g t h ) ) ;736 re turn s c o r e ;737738 }739740 G e s t u r e . v i s u a l D i s t a n c e = f u n c t i o n ( g e s t u r e 1 , g e s t u r e 2 , bagOfPo in t s1 ,

b a g O f P o i n t s 2 )741 {742 v a r canvas1 = g e s t u r e 1 . drawGestureOnNewCanvas ( MAIN CONTAINER ID , g e s t u r e 1 .

symbol ) ;743 v a r c o n t e x t 1 = canvas1 . g e t C o n t e x t ( ” 2d ” ) ;744 v a r c o l o r 1 = U t i l s . r a n d C o l o r ( ) ;745 c o n t e x t 1 . f i l l S t y l e = c o l o r 1 ;746 c o n t e x t 1 . s t r o k e S t y l e = c o l o r 1 ;747 c o n t e x t 1 . l i n e W i d t h = 3 ;748749 f o r ( i = 0 ; i < b a g O f P o i n t s 1 . l e n g t h ; i ++)750 {751 c o n t e x t 1 . f i l l T e x t ( ” x ” , b a g O f P o i n t s 1 [ i ] . x , b a g O f P o i n t s 1 [ i ] . y ) ;752 c o n t e x t 1 . b e g i n P a t h ( ) ;753 c o n t e x t 1 . moveTo ( b a g O f P o i n t s 1 [ i ] . x , b a g O f P o i n t s 1 [ i ] . y ) ;754 i f ( b a g O f P o i n t s 2 [ i ] )755 {756 c o n t e x t 1 . l i n e T o ( b a g O f P o i n t s 2 [ i ] . x , b a g O f P o i n t s 2 [ i ] . y ) ;757 }758 c o n t e x t 1 . c l o s e P a t h ( ) ;759 c o n t e x t 1 . s t r o k e ( ) ;760 }761762 v a r c o l o r 2 = U t i l s . r a n d C o l o r ( ) ;763 c o n t e x t 1 . f i l l S t y l e = c o l o r 2 ;764 c o n t e x t 1 . s t r o k e S t y l e = c o l o r 2 ;765 G e s t u r e . drawOnCanvas ( canvas1 , g e s t u r e 2 ) ;766767 / / 2 −> 1768 f o r ( i = 0 ; i < b a g O f P o i n t s 2 . l e n g t h ; i ++)769 {770 c o n t e x t 1 . f i l l T e x t ( ” x ” , b a g O f P o i n t s 2 [ i ] . x , b a g O f P o i n t s 2 [ i ] . y ) ;771 c o n t e x t 1 . b e g i n P a t h ( ) ;772 c o n t e x t 1 . moveTo ( b a g O f P o i n t s 2 [ i ] . x , b a g O f P o i n t s 2 [ i ] . y ) ;773 c o n t e x t 1 . c l o s e P a t h ( ) ;774 c o n t e x t 1 . s t r o k e ( ) ;775 }776777 }778779780 G e s t u r e . v i s u a l D i s t a n c e N e a r e s t = f u n c t i o n ( g e s t u r e 1 , g e s t u r e 2 , bagOfPo in t s1 ,

b a g O f P o i n t s 2 )

31

781 {782 / / 1 −> 2783 v a r canvas1 = g e s t u r e 1 . drawGestureOnNewCanvas ( MAIN CONTAINER ID , g e s t u r e 1 .

symbol ) ;784 v a r c o n t e x t 1 = canvas1 . g e t C o n t e x t ( ” 2d ” ) ;785 v a r c o l o r 1 = U t i l s . r a n d C o l o r ( ) ;786 c o n t e x t 1 . f i l l S t y l e = c o l o r 1 ;787 c o n t e x t 1 . s t r o k e S t y l e = c o l o r 1 ;788 c o n t e x t 1 . l i n e W i d t h = 3 ;789790 / / 1 −> 2791 f o r ( i = 0 ; i < b a g O f P o i n t s 1 . l e n g t h ; i ++)792 {793 c o n t e x t 1 . f i l l T e x t ( ” x ” , b a g O f P o i n t s 1 [ i ] . x , b a g O f P o i n t s 1 [ i ] . y ) ;794 c o n t e x t 1 . b e g i n P a t h ( ) ;795 c o n t e x t 1 . moveTo ( b a g O f P o i n t s 1 [ i ] . x , b a g O f P o i n t s 1 [ i ] . y ) ;796 i f ( b a g O f P o i n t s 2 [ i ] )797 {798 v a r t o P o i n t = P o i n t . f i n d N e a r e s t P o i n t ( b a g O f P o i n t s 1 [ i ] , b a g O f P o i n t s 2

) ;799 c o n t e x t 1 . l i n e T o ( t o P o i n t . x , t o P o i n t . y ) ;800 }801 c o n t e x t 1 . c l o s e P a t h ( ) ;802 c o n t e x t 1 . s t r o k e ( ) ;803 }804805 v a r c o l o r 2 = U t i l s . r a n d C o l o r ( ) ;806 c o n t e x t 1 . f i l l S t y l e = c o l o r 2 ;807 c o n t e x t 1 . s t r o k e S t y l e = c o l o r 2 ;808 G e s t u r e . drawOnCanvas ( canvas1 , g e s t u r e 2 ) ;809810 / / 2 −> 1811 f o r ( i = 0 ; i < b a g O f P o i n t s 2 . l e n g t h ; i ++)812 {813 c o n t e x t 1 . f i l l T e x t ( ” x ” , b a g O f P o i n t s 2 [ i ] . x , b a g O f P o i n t s 2 [ i ] . y ) ;814 c o n t e x t 1 . b e g i n P a t h ( ) ;815 c o n t e x t 1 . moveTo ( b a g O f P o i n t s 2 [ i ] . x , b a g O f P o i n t s 2 [ i ] . y ) ;816 v a r t o P o i n t = P o i n t . f i n d N e a r e s t P o i n t ( b a g O f P o i n t s 2 [ i ] , b a g O f P o i n t s 1 ) ;817 c o n t e x t 1 . l i n e T o ( t o P o i n t . x , t o P o i n t . y ) ;818 c o n t e x t 1 . c l o s e P a t h ( ) ;819 c o n t e x t 1 . s t r o k e ( ) ;820 }821822 }823824825826 G e s t u r e . d o t P r o d u c t = f u n c t i o n ( p o i n t s 1 , p o i n t s 2 )827 {828 i f ( p o i n t s 1 . l e n g t h != p o i n t s 2 . l e n g t h )829 {830 throw new E r r o r ( ” l e n g t h mismatch w h i l e t r y i n g t o c a l c u l a t e d o t p r o d u c t

” + p o i n t s 1 . l e n g t h + ” ” + p o i n t s 2 . l e n g t h ) ;831 }

32

832 v a r d o t P r o d u c t = 0 ;833834 f o r ( v a r i = 0 ; i < p o i n t s 1 . l e n g t h ; i ++)835 {836 v a r p o i n t 1 = p o i n t s 1 [ i ] ;837 v a r p o i n t 2 = p o i n t s 2 [ i ] ;838839 d o t P r o d u c t += p o i n t 1 . x ∗ p o i n t 2 . x + p o i n t 1 . y ∗ p o i n t 2 . y ;840 }841 re turn d o t P r o d u c t ;842 }843844 G e s t u r e . drawAndScaleToCanvas = f u n c t i o n ( canvas , g e s t u r e )845 {846 g e s t u r e . getBoundingBox ( ) ;847 / / c l e a r canvas848 U t i l s . c l e a r C a n v a s ( ca n va s ) ;849 G e s t u r e . drawOnCanvas ( canvas , g e s t u r e ) ;850 / / c rop and s c a l e851 v a r c o n t e x t = ca nv a s . g e t C o n t e x t ( ’ 2d ’ ) ;852 v a r b o r d e r = 8 ;853 v a r imageData = c o n t e x t . ge t ImageDa ta ( g e s t u r e . t o p L e f t . x − borde r ,854 g e s t u r e . t o p L e f t . y − borde r ,855 g e s t u r e . wid th + borde r ,856 g e s t u r e . h e i g h t + b o r d e r ) ;857 v a r tempCanvas = document . c r e a t e E l e m e n t ( ” c an va s ” ) ;858 tempCanvas . s e t A t t r i b u t e ( ” i d ” , new Date ( ) . ge tTime ( ) ) ;859 tempCanvas . s e t A t t r i b u t e ( ” wid th ” , imageData . wid th ) ;860 tempCanvas . s e t A t t r i b u t e ( ” h e i g h t ” , imageData . h e i g h t ) ;861 tempCanvas . g e t C o n t e x t ( ” 2d ” ) . pu t ImageData ( imageData , 0 , 0 ) ;862 U t i l s . c l e a r C a n v a s ( ca n va s ) ;863 c o n t e x t . drawImage ( tempCanvas , 0 , 0 , c a n va s . width , c an va s . h e i g h t ) ;864 }865866867 G e s t u r e . s o r t P o i n t s B y X = f u n c t i o n ( obj1 , ob j2 )868 {869 i f ( ob j1 . x > ob j2 . x )870 {871 re turn 1 ;872 }873 e l s e i f ( ob j1 . x < ob j2 . x )874 {875 re turn −1;876 }877878 re turn 0 ;879 }880881 G e s t u r e . s o r t P o i n t s B y Y = f u n c t i o n ( obj1 , ob j2 )882 {883 i f ( ob j1 . y > ob j2 . y )884 {885 re turn 1 ;

33

886 }887 e l s e i f ( ob j1 . y < ob j2 . y )888 {889 re turn −1;890 }891892 re turn 0 ;893 }894895 G e s t u r e . g e t N e a r e s t D i s t a n c e = f u n c t i o n ( p o i n t , p o i n t s )896 {897 re turn P o i n t . d i s t a n c e ( P o i n t . f i n d N e a r e s t P o i n t ( p o i n t , p o i n t s ) , p o i n t ) ;898 }899900 / / Maximum s t r o k e s a l l o w e d i n a s i n g l e symbol901 G e s t u r e . MAX STROKES PER SYMBOL = 4 ;902 / / Maximum s t r o k e s a l l o w e d903 G e s t u r e . MAX STROKES = 128 ;

../Feature.js1 /∗2 ∗ s m a l l c l a s s t o r e p r e s e n t a c l a s s i f i c a t i o n f e a t u r e3 ∗ /4 f u n c t i o n F e a t u r e ( type , s c o r e , we igh t )5 {6 t h i s . t y p e = t y p e ;7 t h i s . s c o r e = s c o r e ;8 t h i s . w e i gh t = we i gh t ;9

10 t h i s . g e t W e i g h t e d S c o r e = f u n c t i o n ( )11 {12 re turn t h i s . s c o r e ∗ t h i s . w e i gh t ;13 }14 }1516 F e a t u r e . POINT DISTANCE TYPE = ” p o i n t D i s t a n c e T y p e ” ;17 F e a t u r e . POINT DISTANCE WEIGHT = 0 . 8 ;1819 F e a t u r e . ANGLE DIFFERENCE TYPE = ” a n g l e D i f f e r e n c e T y p e ” ;20 F e a t u r e . ANGLE DIFFERENCE WEIGHT = 0 . 1 ;2122 / / unused23 F e a t u r e . LANGUAGE BIGRAM TYPE = ” languageBig ram ” ;24 F e a t u r e . LANGUAGE BIGRAM WEIGHT = 0 . 0 5 ;

../Match.js1 /∗2 ∗ a match a c t s as a s i m p l e c l a s s i f i c a t i o n b r o k e r3 ∗ /4 f u n c t i o n Match ( g e s t u r e )5 {6 t h i s . g e s t u r e = g e s t u r e ;

34

7 t h i s . f e a t u r e s = [ ] ;89 / / r e t u r n s a u n i f i e d s c o r e

10 t h i s . g e t S c o r e = f u n c t i o n ( )11 {12 / / w e i g h t and sum up a l l s c o r e s13 v a r t o t a l S c o r e = 0 ;14 f o r ( v a r i = 0 ; i < t h i s . f e a t u r e s . l e n g t h ; i ++)15 {16 t o t a l S c o r e += t h i s . f e a t u r e s [ i ] . g e t W e i g h t e d S c o r e ( ) ;17 }18 i f (DEBUG LEVEL > 2)19 {20 c o n s o l e . l o g ( ” t o t a l S c o r e ” , t o t a l S c o r e , ” f e a t u r e s l e n g t h ” , t h i s .

f e a t u r e s . l e n g t h ) ;21 }22 re turn t o t a l S c o r e ;23 }2425 v a r s e l f = t h i s ;2627 t h i s . c l o n e = f u n c t i o n ( )28 {29 re turn new Match ( s e l f . g e s t u r e . c l o n e ( ) , s e l f . s c o r e ) ;30 }3132 t h i s . g e t F e a t u r e B y T y p e = f u n c t i o n ( f e a t u r e T y p e )33 {34 f o r ( v a r i = 0 ; i < t h i s . f e a t u r e s . l e n g t h ; i ++)35 {36 i f ( t h i s . f e a t u r e s [ i ] . t y p e == f e a t u r e T y p e )37 {38 re turn t h i s . f e a t u r e s [ i ] ;39 }40 }41 }42 }4344 Match . c l o n e M a t c h e s = f u n c t i o n ( ma tchesAr ray )45 {46 v a r ma = [ ] ;47 f o r ( v a r i = 0 ; i < matchesAr ray . l e n g t h ; i ++)48 {49 ma . push ( ma tchesAr ray [ i ] . c l o n e ( ) ) ;50 }51 re turn ma ;52 }5354 Match . s o r t D e s c e n d i n g = f u n c t i o n ( a , b )55 {56 i f (DEBUG LEVEL > 3)57 {58 c o n s o l e . l o g ( ” s o r t D e s c e n d i n g ” , b . g e t S c o r e ( ) , a . g e t S c o r e ( ) ) ;59 }

35

60 re turn ( b . g e t S c o r e ( ) − a . g e t S c o r e ( ) ) ;61 }

../GestureClassifier.js1 f u n c t i o n G e s t u r e C l a s s i f i e r ( g e s t u r e L o a d e d C a l l b a c k , s t a f f S i z e , s t a f f O f f s e t P o i n t )2 {3 v a r s e l f = t h i s ;4 i f (DEBUG LEVEL > 0)5 {6 v a r GESTURE DATA FILENAME = ” g e s t u r e s d e b u g . j s o n ” ;7 }8 e l s e9 {

10 v a r GESTURE DATA FILENAME = ” g e s t u r e s . j s o n ” ;11 }1213 v a r NORMALIZED STAFF SIZE = 128 ;14 v a r f i x e d P o i n t = new P o i n t ( 1 5 0 , 170) ;15 v a r t r a i n e d G e s t u r e s = [ ] ;16 / / read g e s t u r e s from j s o n f i l e17 v a r j s o n = new J son ( ) ;18 j s o n . l o a d J s o n (GESTURE DATA FILENAME) ;1920 j s o n . l o a d e d C a l l b a c k = h a n d l e L o o d e d C a l l b a c k ;2122 / / canvas f o r t h e a c t u a l drawing o f n o t a t i o n23 v a r g e s t u r e L o a d e d C a l l b a c k = g e s t u r e L o a d e d C a l l b a c k ;2425 canvasDraw = n u l l ;26 t h i s . s t a f f O f f s e t P o i n t = s t a f f O f f s e t P o i n t ;2728 / / l anguage model29 t h i s . l a n g u a g e = new Language ( ) ;303132 f u n c t i o n h a n d l e L o o d e d C a l l b a c k ( )33 {34 v a r r a w G e s t u r e s = j s o n . d a t a ;35 f o r ( v a r i = 0 ; i < r a w G e s t u r e s . l e n g t h ; i ++)36 {37 rg = r a w G e s t u r e s [ i ] ;38 v a r g = new G e s t u r e ( ) ;39 g . c r e a t e F r o m J s o n ( rg ) ;40 t r a i n e d G e s t u r e s . push ( g ) ;41 }4243 / / n o r m a l i z e t r a i n e d g e s t u r e s t o f i x e d s i z e44 f o r ( v a r i = 0 ; i < t r a i n e d G e s t u r e s . l e n g t h ; i ++)45 {4647 i f ( ” s t a f f S i z e ” i n t r a i n e d G e s t u r e s [ i ] && t r a i n e d G e s t u r e s [ i ] .

s t a f f S i z e != NORMALIZED STAFF SIZE )48 {

36

49 t r a i n e d G e s t u r e s [ i ] . s c a l e ( NORMALIZED STAFF SIZE /t r a i n e d G e s t u r e s [ i ] . s t a f f S i z e ) ;

50 }51 t r a i n e d G e s t u r e s [ i ] . n o r m a l i z e T o F i x e d P o i n t ( f i x e d P o i n t ) ;52 t r a i n e d G e s t u r e s [ i ] . n o r m a l i z e ( ) ;5354 }5556 canvasDraw = new CanvasDraw ( f a l s e , s t a f f S i z e , s t a f f O f f s e t P o i n t ) ;5758 i f ( g e s t u r e L o a d e d C a l l b a c k )59 {60 g e s t u r e L o a d e d C a l l b a c k ( canvasDraw ) ;61 }62 }6364 t h i s . getCanvasDraw = f u n c t i o n ( )65 {66 re turn canvasDraw ;67 }6869 / / g e s t u r e S t a f f S i z e i s t h e s t a f f s i z e , i n p o i n t s70 t h i s . match = f u n c t i o n ( drawnGes ture , g e s t u r e S t a f f S i z e , p r e v i o u s M a t c h )71 {72 v a r canvas1 = document . ge tE lemen tById ( ” canvas1 ” ) ;73 v a r canvas2 = document . ge tE lemen tById ( ” canvas2 ” ) ;74 / / s c a l e drawn g e s t u r e t o match s c a l e o f t r a i n i n g t e m p l a t e s75 v a r m a t c h L i s t = [ ] ;76 f o r ( v a r i = 0 ; i < t r a i n e d G e s t u r e s . l e n g t h ; i ++)77 {78 i f ( t r a i n e d G e s t u r e s [ i ] . s t r o k e s . l e n g t h <= 0)79 {80 c o n t in u e ;81 }82 v a r t r a i n e d G e s t u r e = t r a i n e d G e s t u r e s [ i ] ;838485 / / match drawn g e s t u r e s c a l e t o t r a i n e d g e s t u r e s c a l e86 / / deep copy , so we can r e s c a l e each t i m e87 v a r d r a w n G e s t u r e S c a l e d = drawnGes tu re . c l o n e ( ) ;88 d r a w n G e s t u r e S c a l e d . n o r m a l i z e ( ) ;89 i f ( g e s t u r e S t a f f S i z e != NORMALIZED STAFF SIZE )90 {91 v a r s c a l e F a c t o r = NORMALIZED STAFF SIZE / g e s t u r e S t a f f S i z e ;92 d r a w n G e s t u r e S c a l e d . s c a l e ( s c a l e F a c t o r ) ;93 i f (DEBUG LEVEL > 1)94 {95 c o n s o l e . l o g ( g e s t u r e S t a f f S i z e , NORMALIZED STAFF SIZE , ”

s c a l e F a c t o r ” , s c a l e F a c t o r ) ;96 }97 }9899

100 d r a w n G e s t u r e S c a l e d . n o r m a l i z e T o F i x e d P o i n t ( f i x e d P o i n t , t rue ) ;

37

101102 v a r match = new Match ( t r a i n e d G e s t u r e ) ;103104 v a r f e a t u r e = new F e a t u r e ( F e a t u r e . POINT DISTANCE TYPE ,105 G e s t u r e . p o i n t D i s t a n c e R a n k ( t r a i n e d G e s t u r e

, d r a w n G e s t u r e S c a l e d ) ,106 F e a t u r e . POINT DISTANCE WEIGHT ) ;107 match . f e a t u r e s . push ( f e a t u r e ) ;108109 v a r b a g O f P o i n t s 1 = t r a i n e d G e s t u r e . b a g O f P o i n t s ( ) ;110111 v a r b a g O f P o i n t s 2 = d r a w n G e s t u r e S c a l e d . b a g O f P o i n t s ( ) ;112113 / / i n v e r t , so h igh number i s a good s c o r e ( c l o s e r a n g l e s )114 / / and f u d g e a l i t t l e so number i s s m a l l e r115 v a r p o i n t A n g l e S c o r e = (1 / P o i n t . a n g l e D i f f e r e n c e s ( bagOfPo in t s1 ,

b a g O f P o i n t s 2 ) ) / 1000 ;116117118 v a r f e a t u r e = new F e a t u r e ( F e a t u r e . ANGLE DIFFERENCE TYPE ,119 p o i n t A n g l e S c o r e ,120 F e a t u r e . ANGLE DIFFERENCE WEIGHT) ;121 match . f e a t u r e s . push ( f e a t u r e ) ;122123124 / / l anguage model , bigram from p r e v i o u s symbol t o t h i s symbol125 i f ( p r e v i o u s M a t c h )126 {127 v a r f e a t u r e = new F e a t u r e ( F e a t u r e . LANGUAGE BIGRAM TYPE,128 s e l f . l a n g u a g e . b i g r a m V e c t o r .

getBigramFromTableBySymbolNames (p r e v i o u s M a t c h . g e s t u r e . symbol ,t r a i n e d G e s t u r e . symbol ) .g e t P r o b a b i l i t y ( ) ,

129 F e a t u r e . LANGUAGE BIGRAM WEIGHT) ;130 match . f e a t u r e s . push ( f e a t u r e ) ;131 }132133 i f (DEBUG LEVEL > 1)134 {135 v a r newCanvas = d r a w n G e s t u r e S c a l e d . drawGestureOnNewCanvas (

MAIN CONTAINER ID ) ;136137 }138 m a t c h L i s t . push ( match ) ;139 }140141 / / d e s c e n d i n g142 m a t c h L i s t . s o r t ( Match . s o r t D e s c e n d i n g ) ;143144 re turn m a t c h L i s t ;145 }146147 t h i s . s e l f M a t c h = f u n c t i o n ( )

38

148 {149 v a r i n p u t G e s t u r e s = j s o n . d a t a ;150151 f o r ( v a r i = 0 ; i < i n p u t G e s t u r e s . l e n g t h ; i ++)152 {153 v a r g = new G e s t u r e ( ) ;154 g . c r e a t e F r o m J s o n ( i n p u t G e s t u r e s [ i ] ) ;155 i f ( g . s t a f f S i z e != NORMALIZED STAFF SIZE )156 {157 v a r s c a l e F a c t o r = NORMALIZED STAFF SIZE / g . s t a f f S i z e ;158 g . s c a l e ( s c a l e F a c t o r ) ;159 }160 g . n o r m a l i z e T o F i x e d P o i n t ( f i x e d P o i n t ) ;161 g . n o r m a l i z e ( ) ;162163 i f ( t r a i n e d G e s t u r e s [ i ] . s t r o k e s . l e n g t h <= 0)164 {165 c o n t in u e ;166 }167 v a r t r a i n e d G e s t u r e = t r a i n e d G e s t u r e s [ i ] ;168 v a r newCanvas = t r a i n e d G e s t u r e . drawGestureOnNewCanvas (

MAIN CONTAINER ID ) ;169 G e s t u r e . drawOnCanvas ( newCanvas , g , ” rgba ( 1 0 0 , 0 , 0 , 1 . 0 ) ” ) ;170 }171 }172173 t h i s . dynamicMatch = f u n c t i o n ( drawnGes ture , g e s t u r e S t a f f S i z e )174 {175 v a r numSegements = drawnGes tu re . s t r o k e s . l e n g t h − 1 ;176 v a r numStrokes = drawnGes tu re . s t r o k e s . l e n g t h ;177 v a r s c o r e s = [ ] ;178 v a r p = [ ] ;179 v a r q = [ ] ;180 v a r names = [ ] ;181 v a r maxSt rokes = Math . min ( G e s t u r e . MAX STROKES, numStrokes ) ;182183 v a r bes tSymbo l s = [ ] ;184185 / / s c a l e drawn g e s t u r e t o match s c a l e o f t r a i n i n g t e m p l a t e s186 i f ( g e s t u r e S t a f f S i z e != NORMALIZED STAFF SIZE )187 {188 v a r s c a l e F a c t o r = NORMALIZED STAFF SIZE / g e s t u r e S t a f f S i z e ;189 drawnGes tu re . s c a l e ( s c a l e F a c t o r ) ;190 }191 drawnGes tu re . n o r m a l i z e T o F i x e d P o i n t ( f i x e d P o i n t , f a l s e ) ;192 drawnGes tu re . n o r m a l i z e ( ) ;193194 v a r h i s t o r i c a l S c o r e s = [ ] ;195 v a r c o u n t s = [ ] ;196 v a r bes tSymbo l s = [ ] ;197 v a r b e s t G e s t u r e ;198 v a r b e s t S c o r e = 0 ;199 f o r ( v a r i = 0 ; i < numStrokes ; i ++)200 {

39

201 h i s t o r i c a l S c o r e s [ i ] = 0 ;202 c o u n t s [ i ] = 0 ;203 }204 f o r ( v a r i = 0 ; i < numStrokes ; i ++)205 {206 h i s t o r i c a l S c o r e s [ i ] = 0 ;207208 / / number o f s t r o k e s t o l o o k back209 v a r maxSt rokes = Math . min ( G e s t u r e . MAX STROKES PER SYMBOL, i ) ;210 f o r ( v a r j = 0 ; j < maxSt rokes ; j ++)211 {212 d e b u g S t r i n g = ” i : ”+ i + ” j : ”+ j + ” ” + ( i − j ) ;213 v a r chunk = new G e s t u r e ( ) ;214 chunk . s t r o k e s = drawnGes tu re . c l o n e S t r o k e s ( i − j − 1 , i ) ;215 d e b u g S t r i n g += ” drawnGes tu re . s t r o k e s . l e n g t h ” + drawnGes tu re .

s t r o k e s . l e n g t h + ” ” + ( i − j − 1) + ” ” + i ;216 chunk . n o r m a l i z e T o F i x e d P o i n t ( f i x e d P o i n t ) ;217 chunk . n o r m a l i z e ( ) ;218 b e s t S c o r e = 0 ;219 b e s t G e s t u r e = new G e s t u r e ( ) ;220 / / a l l g e s t u r e t e m p l a t e s221 f o r ( v a r k = 0 ; k < t r a i n e d G e s t u r e s . l e n g t h ; k ++)222 {223 v a r t r a i n e d G e s t u r e = t r a i n e d G e s t u r e s [ k ] ;224 v a r s c o r e = G e s t u r e . p o i n t D i s t a n c e R a n k ( t r a i n e d G e s t u r e ,

chunk ) ;225 i f (DEBUG LEVEL > 1)226 {227 t r a i n e d G e s t u r e . drawGestureOnNewCanvas (

MAIN CONTAINER ID , d e b u g S t r i n g ) ;228 chunk . drawGestureOnNewCanvas ( MAIN CONTAINER ID ,

d e b u g S t r i n g ) ;229 }230 i f ( s c o r e > b e s t S c o r e )231 {232 b e s t S c o r e = s c o r e ;233 b e s t G e s t u r e = t r a i n e d G e s t u r e ;234 }235 }236237 d e b u g S t r i n g += ” ” + b e s t G e s t u r e . symbol ;238 }239 v a r h i s t o r i c a l S c o r e = Math . pow ( ( Math . pow ( h i s t o r i c a l S c o r e s [ i − j ] ,

c o u n t s [ i − j ] ) ∗ b e s t S c o r e ) ,240 1 . 0 / ( c o u n t s [ i − j ] + 1 ) ) ;241 i f ( h i s t o r i c a l S c o r e > h i s t o r i c a l S c o r e s [ i ] )242 {243 h i s t o r i c a l S c o r e s [ i ] = h i s t o r i c a l S c o r e ;244 c o u n t s [ i ] = c o u n t s [ i − j ] + 1 . 0 ;245 bes tSymbo l s [ i ] = j ;246 }247 }248 f o r ( v a r zz = 0 ; zz < bes tSymbo l s . l e n g t h ; zz ++)249 {

40

250 v a r symbol Idx = bes tSymbo l s [ zz ] ;251 }252253 re turn ;254255 v a r b = [ ] ;256 v a r c = [ ] ;257 v a r bestM = [ ] ;258 f o r ( v a r n = 0 ; n < numStrokes − 1 ; n ++)259 {260 b [ n ] = 0 ;261 v a r b e s t S c o r e = 0 ;262 v a r bestM ;263 v a r b e s t L ;264 v a r bestName ;265 v a r maxSt rokes = Math . min ( G e s t u r e . MAX STROKES, numStrokes ) ;266 f o r ( v a r m = 1 ; m < maxSt rokes ; m ++)267 {268 v a r chunk = new G e s t u r e ( ) ;269270 i f ( n − m + 1 < 0)271 {272 c o n t in u e ;273 }274 i f ( d r awnGes tu re . s t r o k e s <= 0)275 {276 c o n t in u e ;277 }278279 chunk . s t r o k e s = drawnGes tu re . s t r o k e s . s l i c e ( n − m + 1 , n ) ;280 chunk . n o r m a l i z e T o F i x e d P o i n t ( f i x e d P o i n t , t rue ) ;281 chunk . n o r m a l i z e ( ) ;282283 i f ( chunk . s t r o k e s . l e n g t h <= 0)284 {285 c o n t in u e ;286 }287 / / a l l models288 f o r ( v a r j = 0 ; j < t r a i n e d G e s t u r e s . l e n g t h ; j ++)289 {290 i f ( t r a i n e d G e s t u r e s [ j ] . s t r o k e s . l e n g t h <= 0)291 {292 c o n t in u e ;293 }294 v a r t r a i n e d G e s t u r e = t r a i n e d G e s t u r e s [ j ] ;295296 i f (DEBUG LEVEL > 0)297 {298 c o n s o l e . l o g ( ” t r a i n e d G e s t u r e ” , t r a i n e d G e s t u r e , ” chunk ” ,

chunk ) ;299 }300 v a r x = G e s t u r e . p o i n t D i s t a n c e R a n k ( t r a i n e d G e s t u r e , chunk ) ;301 v a r l = t r a i n e d G e s t u r e ;302 i f ( x > b e s t S c o r e )

41

303 {304 b e s t S c o r e = x ;305 b e s t L = l ;306 bestName = t r a i n e d G e s t u r e . symbol ;307 }308 }309 v a r h i s t o r i c a l S c o r e = Math . pow ( Math . pow ( b [ n − m] , c [ n − m] ) ∗

b e s t S c o r e , 1 . 0 / ( c [ n − m] + 1 . 0 ) ) ;310 i f ( h i s t o r i c a l S c o r e > b [ n ] )311 {312 b [ n ] = h i s t o r i c a l S c o r e ;313 c [ n ] = c [ n − m] + 1 . 0 ;314 bestM [ n ] = m;315 }316 }317 v a r d e b u g S t r i n g = ” n= ” + n + ” s c o r e = ” + b e s t S c o r e +” symbol= ”

+ bestName ;318 }319320321 }322323324 / / s e g m e n t a t i o n s t e p . . .325 / / d e t e r m i n e i f a c o l l e c t i o n o f s t r o k e s form a symbol326 t h i s . dynamicMatchHul l = f u n c t i o n ( drawnGes ture , canvas1 , canvas2 ,

g e s t u r e S t a f f S i z e , s t a f f , c o n t e x t , p e n c i l )327 {328 v a r numSegements = drawnGes tu re . s t r o k e s . l e n g t h − 1 ;329 v a r s t r o k e P o l y g o n s = [ ] ;330 v a r s t r o k e G e s t u r e s = [ ] ;331 v a r s t r o k e s = [ ] ;332333 / / 1 . c o n s t r u c t an a r r a y o f po lygons , one f o r each s t r o k e334 f o r ( v a r i = 0 ; i < numSegements ; i ++)335 {336 / / d e t e r m i n e convex h u l l o f each s t r o k e . I f h u l l o v e r l a p s w i t h

p r e v i o u s s t r o k e , group i t w i l l t h a t one .337 v a r s t r o k e P o l y g o n = new Polygon ( ) ;338 / / deep copy339 v a r s t r o k e P o i n t s = drawnGes tu re . s t r o k e s [ i ] . s l i c e ( 0 ) ;340 s t r o k e P o l y g o n . p o i n t s = s t r o k e P o i n t s ;341 v a r d e b u g S t r i n g = ” ” ;342 s t r o k e P o l y g o n . s o r t P o i n t s ( ) ;343344 / / g e t s i m p l e convex po lygon o f s t r o k e345 s t r o k e P o l y g o n . c h a i n H u l l ( ) ;346 v a r s t r o k e G e s t u r e = new G e s t u r e ( ) ;347348 / / deep copy o f u n a d u l t e r a t e d p o i n t s349 s t r o k e G e s t u r e . s t r o k e s [ 0 ] = P o i n t . c l o n e P o i n t s ( d rawnGes tu re . s t r o k e s [

i ] ) ;350351 s t r o k e P o l y g o n s . push ( s t r o k e P o l y g o n ) ;

42

352 s t r o k e G e s t u r e s . push ( s t r o k e G e s t u r e ) ;353 i f (DEBUG LEVEL > 2)354 {355 v a r newCanvas = s t r o k e G e s t u r e . drawGestureOnNewCanvas (

MAIN CONTAINER ID ) ;356 }357 }358359360 / / 2 . l oop t h r o u g h a l l p o l y g o n s and f i n d o v e r l a p p i n g p o l y g o n s361 / / 3 . group a l l o v e r l a p p i n g p o l y g o n s as s t r o k e s o f a s i n g l e g e s t u r e362 f o r ( v a r i = 0 ; i < s t r o k e P o l y g o n s . l e n g t h ; i ++)363 {364 v a r s t r o k e P o l y g o n 2 = s t r o k e P o l y g o n s [ i ] ;365 v a r s t r o k e G e s t u r e 2 = s t r o k e G e s t u r e s [ i ] ;366367 / / d e t e r m i n e i f t h i s s t r o k e po lygon o v e r l a p s any p r e v i o u s s t r o k e

po lygon368 v a r haveOver l ap = f a l s e ;369 f o r ( v a r j = 0 ; j < i ; j ++)370 {371 v a r s t r o k e P o l y g o n 1 = s t r o k e P o l y g o n s [ j ] ;372 v a r s t r o k e G e s t u r e 1 = s t r o k e G e s t u r e s [ j ] ;373 v a r p i = new P o l y g o n I n t e r s e c t ( ) ;374 / / i f t h e r e ’ s any i n t e r s e c t i o n , group t o g e t h e r375376 / / deep copy p o i n t s t o l e a v e o r i g i n a l s u n s c a l e d377 v a r p o i n t s 1 = s t r o k e P o l y g o n 1 . p o i n t s . s l i c e ( 0 ) ;378 v a r p o i n t s 2 = s t r o k e P o l y g o n 2 . p o i n t s . s l i c e ( 0 ) ;379380 / / s c a l e up a l i t t l e t o d e c r e a s e gap / o v e r l a p t o l e r a n c e381 v a r s c a l e F a c t o r = 1 . 0 0 5 ;382 P o i n t . s c a l e P o i n t s ( p o i n t s 1 , s c a l e F a c t o r ) ;383 P o i n t . s c a l e P o i n t s ( p o i n t s 2 , s c a l e F a c t o r ) ;384385 i f ( p i . i n t e r s e c t i o n ( p o i n t s 1 , p o i n t s 2 ) )386 {387 / / append p o i n t s from s t r o k e P o l y g o n 2 as a new s t r o k e o f

g e s t u r e 1388 s t r o k e G e s t u r e 1 . s t r o k e s . push ( s t r o k e G e s t u r e 2 . s t r o k e s [ 0 ] ) ;389 / / append p o i n t s from s t r o k e P o l y g o n 2 t o s t r o k e P o l y g o n 1390 s t r o k e P o l y g o n 1 . p o i n t s = s t r o k e P o l y g o n 1 . p o i n t s . c o n c a t (

s t r o k e P o l y g o n 2 . p o i n t s ) ;391392 / / append s t r o k e P o l y g o n 2 p o i n t s t o g e s t u r e393 / / remove s t r o k e G e s t u r e 2 from t h e s t a c k394 s t r o k e G e s t u r e s . s p l i c e ( i , 1 ) ;395 / / . . . and remove s t r o k e P o l y g o n 2 from t h e s t a c k396 s t r o k e P o l y g o n s . s p l i c e ( i , 1 ) ;397398 i −= 2 ;399 }400 }401 }

43

402403 v a r p r e v i o u s M a t c h = n u l l ;404 f o r ( v a r i = 0 ; i < s t r o k e G e s t u r e s . l e n g t h ; i ++)405 {406 v a r s t r o k e G e s t u r e = s t r o k e G e s t u r e s [ i ] ;407 / / append segmented , b u t o t h e r w i s e u n m o d i f i e d s t r o k e s t o I n k o b j e c t

, m a i n l y u s e f u l f o r UI s t u f f408409 / / c l o n e g e s t u r e410 v a r i n k S t r o k e G e s t u r e = s t r o k e G e s t u r e . c l o n e ( ) ;411412 i f (DEBUG LEVEL > 0)413 {414 c o n s o l e . l o g ( ” g e s t u r e S t a f f S i z e ” , g e s t u r e S t a f f S i z e ) ;415 c o n s o l e . l o g ( ” s t r o k e G e s t u r e ” , s t r o k e G e s t u r e ) ;416 }417 v a r c e n t r o i d = s t r o k e G e s t u r e . g e t A v e r a g e C e n t e r ( ) ;418 v a r t o p L e f t = s t r o k e G e s t u r e . g e t T o p L e f t ( ) ;419 v a r t e x t A l i g n = new P o i n t ( t o p L e f t . x , s t a f f . snapToLineY ( c e n t r o i d . y )

) ;420 / / t e m p l a t e match421 v a r m a t c h L i s t = t h i s . match ( s t r o k e G e s t u r e , g e s t u r e S t a f f S i z e ,

p r e v i o u s M a t c h ) ;422423 i n k S t r o k e G e s t u r e . matches = i n k S t r o k e G e s t u r e . matches . c o n c a t (

m a t c h L i s t ) ;424 p e n c i l . i n k . g e s t u r e s . push ( i n k S t r o k e G e s t u r e ) ;425426 v a r bes tSymbol = m a t c h L i s t [ 0 ] . g e s t u r e . symbol ;427 v a r b e s t G e s t u r e = m a t c h L i s t [ 0 ] . g e s t u r e ;428429 d e b u g S t r i n g = i + bes tSymbol ;430 v a r symbol = new Symbol ( bes tSymbol ) ;431 symbol . p o s i t i o n = t e x t A l i g n ;432 s t a f f . symbols . push ( symbol ) ;433 p e n c i l . r edrawCanvas ( ) ;434435 p r e v i o u s M a t c h = m a t c h L i s t [ 0 ] ;436 }437438 re turn ;439 }440441442443 t h i s . dynamicMatchBru teForce = f u n c t i o n ( drawnGes ture , canvas1 , canvas2 ,

g e s t u r e S t a f f S i z e , s t a f f , c o n t e x t , p e n c i l )444 {445 v a r numSegements = drawnGes tu re . s t r o k e s . l e n g t h − 1 ;446 v a r s t r o k e P o l y g o n s = [ ] ;447 v a r s t r o k e G e s t u r e s = [ ] ;448 v a r s t r o k e s = [ ] ;449450 v a r x = 0 ;

44

451 / / b r u t e f o r c e452 / / 1 . c o n s t r u c t an a r r a y o f po lygons , one f o r each and e v e r y

c o m b i n a t i o n o f s t r o k e s453 v a r numStrokes = drawnGes tu re . s t r o k e s . l e n g t h ;454 v a r h i s t o r i c a l S c o r e s = [ ] ;455 v a r c o u n t s = [ ] ;456 v a r bes tSymbo l s = [ ] ;457 v a r b e s t G e s t u r e ;458 v a r b e s t S c o r e = 0 ;459460 / / s c a l e drawn g e s t u r e t o n o r m a l i z e d s c a l e461 i f ( ” s t a f f S i z e ” i n d rawnGes tu re && drawnGes tu re . s t a f f S i z e !=

NORMALIZED STAFF SIZE )462 {463 drawnGes tu re . s c a l e ( NORMALIZED STAFF SIZE / d rawnGes tu re . s t a f f S i z e )

;464 }465466 f o r ( v a r i = 0 ; i < numStrokes ; i ++)467 {468 h i s t o r i c a l S c o r e s [ i ] = 0 ;469 c o u n t s [ i ] = 0 ;470 }471 f o r ( v a r i = 0 ; i < numStrokes ; i ++)472 {473 h i s t o r i c a l S c o r e s [ i ] = 0 ;474475 / / number o f s t r o k e s t o l o o k back476 v a r maxSt rokes = Math . min ( G e s t u r e . MAX STROKES PER SYMBOL, i ) ;477 f o r ( v a r j = 0 ; j < maxSt rokes ; j ++)478 {479 d e b u g S t r i n g = ” i : ”+ i + ” j : ”+ j + ” ” + ( i − j ) ;480 v a r chunk = new G e s t u r e ( ) ;481 chunk . s t a f f S i z e482 chunk . s t r o k e s = drawnGes tu re . c l o n e S t r o k e s ( i − j − 1 , i ) ;483 v a r c e n t r o i d = chunk . g e t A v e r a g e C e n t e r ( t rue ) ;484 d e b u g S t r i n g += ” drawnGes tu re . s t r o k e s . l e n g t h ” + drawnGes tu re .

s t r o k e s . l e n g t h + ” ” + ( i − j − 1) + ” ” + i ;485 chunk . n o r m a l i z e T o F i x e d P o i n t ( f i x e d P o i n t , t rue ) ;486 chunk . n o r m a l i z e ( ) ;487 b e s t S c o r e = 0 ;488 b e s t G e s t u r e = new G e s t u r e ( ) ;489 / / a l l g e s t u r e t e m p l a t e s490 f o r ( v a r k = 0 ; k < t r a i n e d G e s t u r e s . l e n g t h ; k ++)491 {492 v a r t r a i n e d G e s t u r e = t r a i n e d G e s t u r e s [ k ] ;493 v a r s c o r e = G e s t u r e . p o i n t D i s t a n c e R a n k ( t r a i n e d G e s t u r e ,

chunk ) ;494 i f (DEBUG LEVEL > 1)495 {496 v a r newCanvas = t r a i n e d G e s t u r e . drawGestureOnNewCanvas (

MAIN CONTAINER ID , d e b u g S t r i n g ) ;497 G e s t u r e . drawOnCanvas ( newCanvas , chunk , ” rgba ( 1 0 0 , 0 , 0 ,

1 . 0 ) ” ) ;

45

498 }499 i f ( s c o r e > b e s t S c o r e )500 {501 b e s t S c o r e = s c o r e ;502 b e s t G e s t u r e = t r a i n e d G e s t u r e ;503 }504 }505506 d e b u g S t r i n g += ” ” + b e s t G e s t u r e . symbol ;507 }508 v a r h i s t o r i c a l S c o r e = Math . pow ( ( Math . pow ( h i s t o r i c a l S c o r e s [ i − j ] ,

c o u n t s [ i − j ] ) ∗ b e s t S c o r e ) , 1 . 0 / ( c o u n t s [ i − j ] + 1 ) ) ;509 i f ( h i s t o r i c a l S c o r e > h i s t o r i c a l S c o r e s [ i ] )510 {511 h i s t o r i c a l S c o r e s [ i ] = h i s t o r i c a l S c o r e ;512 c o u n t s [ i ] = c o u n t s [ i − j ] + 1 . 0 ;513 bes tSymbo l s [ i ] = t r a i n e d G e s t u r e s [ j ] . symbol ;514 }515 }516517 c o n s o l e . l o g ( bes tSymbols , coun t s , h i s t o r i c a l S c o r e s ) ;518 re turn ;519 }520521522 t h i s . r e t r a i n G e s t u r e = f u n c t i o n ( replacementName , r e p l a c e m e n t G e s t u r e )523 {524 / / a l e r t (” r e t r a i n G e s t u r e ” , replacementName , r e p l a c e m e n t G e s t u r e ) ;525 f o r ( v a r i = 0 ; i < t r a i n e d G e s t u r e s . l e n g t h ; i ++)526 {527 i f ( t r a i n e d G e s t u r e s [ i ] . symbol == replacementName )528 {529 t r a i n e d G e s t u r e s [ i ] . s t a f f S i z e = r e p l a c e m e n t G e s t u r e . s t a f f S i z e ;530 t r a i n e d G e s t u r e s [ i ] . s t r o k e s = r e p l a c e m e n t G e s t u r e . s t r o k e s ;531532 / / n o r m a l i z e533 i f ( ” s t a f f S i z e ” i n t r a i n e d G e s t u r e s [ i ] && t r a i n e d G e s t u r e s [ i ] .

s t a f f S i z e != NORMALIZED STAFF SIZE )534 {535 t r a i n e d G e s t u r e s [ i ] . s c a l e ( NORMALIZED STAFF SIZE /

t r a i n e d G e s t u r e s [ i ] . s t a f f S i z e ) ;536 }537 t r a i n e d G e s t u r e s [ i ] . n o r m a l i z e T o F i x e d P o i n t ( f i x e d P o i n t , f a l s e ) ;538 t r a i n e d G e s t u r e s [ i ] . n o r m a l i z e ( ) ;539 }540 }541 }542543 t h i s . s c a l e T e s t = f u n c t i o n ( drawnGes ture , g e s t u r e S t a f f S i z e )544 {545 v a r s c a l e T e s t G e s t u r e ;546 f o r ( v a r i = 0 ; i < t r a i n e d G e s t u r e s . l e n g t h ; i ++)547 {548 i f ( t r a i n e d G e s t u r e s [ i ] . symbol == ” s c a l e t e s t ” )

46

549 {550 s c a l e T e s t G e s t u r e = t r a i n e d G e s t u r e s [ i ] ;551 break ;552 }553 }554555 i f ( g e s t u r e S t a f f S i z e != NORMALIZED STAFF SIZE )556 {557 v a r s c a l e F a c t o r = NORMALIZED STAFF SIZE / g e s t u r e S t a f f S i z e ;558 drawnGes tu re . s c a l e ( s c a l e F a c t o r ) ;559 c o n s o l e . l o g ( g e s t u r e S t a f f S i z e , NORMALIZED STAFF SIZE , ” s c a l e F a c t o r ”

, s c a l e F a c t o r ) ;560 }561 / / o f f s e t by s t a f f margin562 drawnGes tu re . n o r m a l i z e T o F i x e d P o i n t ( f i x e d P o i n t ) ;563 drawnGes tu re . n o r m a l i z e ( ) ;564565 v a r newCanvas = s c a l e T e s t G e s t u r e . drawGestureOnNewCanvas (

MAIN CONTAINER ID ) ;566 G e s t u r e . drawOnCanvas ( newCanvas , d rawnGes ture , ” rgba ( 1 0 0 , 0 , 0 , 1 . 0 ) ” ) ;567568 }569570 }

../SymbolOptions.js1 /∗2 ∗ r e p r e s e n t s and r e n d e r s a user−s e l e c t a b l e o r d e r e d l i s t o f symbol

c l a s s i f i c a t i o n c o r r e c t i o n s3 ∗ /4 f u n c t i o n SymbolOpt ions ( g e s t u r e , canvas , c u r r e n t S y m b o l I n d e x , m a i n S t a f f , p e n c i l )5 {6 c o n s t DEFAULT LENGTH = 1 2 ;7 c o n s t DEFAULT ITEM HEIGHT = 3 0 ;8 c o n s t DEFAULT SPACING X = 1 0 ;9 c o n s t DEFAULT SPACING Y = 2 0 ;

10 c o n s t HIGHLIGHTED INK COLOR = ” rgba ( 1 0 0 , 0 , 0 , 1 . 0 ) ” ;11 c o n s t DEFAULT INK COLOR = ” rgba ( 0 , 0 , 0 , 1 . 0 ) ” ;1213 t h i s . l e n g t h = DEFAULT LENGTH ;14 t h i s . g e s t u r e = g e s t u r e ;15 v a r s e l f = t h i s ;16 v a r c a n v a s = ca n va s ;17 t h i s . d i s a b l e A l l E v e n t s ;18 t h i s . t a r g e t A r e a s = [ ] ;19 t h i s . s e l e c t e d S y m b o l I n d e x = −1;20 t h i s . c u r r e n t S y m b o l I n d e x = c u r r e n t S y m b o l I n d e x ;21 t h i s . m a i n S t a f f = m a i n S t a f f ;22 t h i s . p e n c i l = p e n c i l ;2324 t h i s . i n i t = f u n c t i o n ( )25 {26 c a n v a s . a d d E v e n t L i s t e n e r ( ” mousemove ” , symbolOpt ionsEven tCanvas , f a l s e )

47

;27 c a n v a s . a d d E v e n t L i s t e n e r ( ” mousedown ” , symbolOpt ionsEven tCanvas , f a l s e )

;28 c a n v a s . a d d E v e n t L i s t e n e r ( ” mouseout ” , symbolOpt ionsEven tCanvas , f a l s e ) ;29 c a n v a s . a d d E v e n t L i s t e n e r ( ” mouseup ” , symbolOpt ionsEven tCanvas , f a l s e ) ;30 }31 t h i s . r e n d e r = f u n c t i o n ( )32 {33 v a r m a t c h L i s t = Match . c l o n e M a t c h e s ( s e l f . g e s t u r e . matches ) ;3435 v a r c t x = c a n v a s . g e t C o n t e x t ( ” 2d ” ) ;36 v a r o f f s e t X = DEFAULT SPACING X ;37 v a r o f f s e t Y = DEFAULT SPACING Y ;3839 U t i l s . c l e a r C a n v a s ( c a n v a s ) ;40 v a r s t a f f = new S t a f f ( ) ;41 / / i t e r a t e t h r o u g h o p t i o n s42 v a r t a r g e t A r e a = n u l l ;43 f o r ( v a r i = 0 ; i < s e l f . l e n g t h ; i ++)44 {45 v a r o f f s e t P o i n t = new P o i n t ( o f f s e t X , o f f s e t Y ) ;46 h i g h l i g h t S y m b o l I n d e x = 2 ;47 t a r g e t A r e a = new Symbol ( m a t c h L i s t [ i ] . g e s t u r e . symbol ) .

getBoundingBox ( c tx , s t a f f ) ;48 t a r g e t A r e a . moveTo ( new P o i n t ( o f f s e t X , 0 ) ) ;49 i f ( s e l f . s e l e c t e d S y m b o l I n d e x == i )50 {51 s t a f f . drawSymbol ( c tx , o f f s e t P o i n t , m a t c h L i s t [ i ] . g e s t u r e . symbol

, HIGHLIGHTED INK COLOR ) ;52 Polygon . drawOnCanvas ( canvas , t a r g e t A r e a . g e t P o l y g o n ( ) ,

HIGHLIGHTED INK COLOR ) ;53 }54 e l s e55 {56 s t a f f . drawSymbol ( c tx , o f f s e t P o i n t , m a t c h L i s t [ i ] . g e s t u r e . symbol

, DEFAULT INK COLOR) ;57 }58 o f f s e t X += t a r g e t A r e a . ge tWid th ( ) + DEFAULT SPACING X ;59 s e l f . t a r g e t A r e a s . push ( t a r g e t A r e a ) ;60 }61 }6263 f u n c t i o n symbolOpt ionsEven tCanvas ( e v e n t )64 {65 i f ( s e l f . d i s a b l e A l l E v e n t s )66 {67 re turn ;68 }69 U t i l s . p r o c e s s E v e n t ( e v e n t ) ;70 / / C a l l t h e e v e n t h a n d l e r71 v a r func = s e l f [ e v e n t . t y p e ] ;72 i f ( f unc )73 {74 func ( e v e n t ) ;

48

75 }76 }7778 t h i s . mousemove = f u n c t i o n ( e v e n t )79 {80 i f (DEBUG LEVEL > 2)81 {82 c o n s o l e . l o g ( ” mousemove ” ) ;83 }84 v a r mouseMovePoint = new P o i n t ( e v e n t . x , e v e n t . y ) ;85 s e l f . h i g h l i g h t S y m b o l ( mouseMovePoint ) ;86 }8788 t h i s . mousedown = f u n c t i o n ( e v e n t )89 {90 v a r mouseDownPoint = new P o i n t ( e v e n t . x , e v e n t . y ) ;91 c a n v a s . s t y l e . v i s i b i l i t y = ” h i dd en ” ;92 s e l f . d i s a b l e A l l E v e n t s = t rue ;93 s e l f . s e l e c t S y m b o l ( ) ;94 }95 t h i s . mouseup = f u n c t i o n ( e v e n t )96 {97 c a n v a s . s t y l e . v i s i b i l i t y = ” h i dd en ” ;98 s e l f . d i s a b l e A l l E v e n t s = t rue ;99 s e l f . s e l e c t S y m b o l ( ) ;

100 }101 t h i s . mouseout = f u n c t i o n ( e v e n t )102 {103 c a n v a s . s t y l e . v i s i b i l i t y = ” h i dd en ” ;104 s e l f . d i s a b l e A l l E v e n t s = f a l s e ;105 }106107 t h i s . h i g h l i g h t S y m b o l = f u n c t i o n ( p o i n t )108 {109 f o r ( v a r i = 0 ; i < s e l f . t a r g e t A r e a s . l e n g t h ; i ++)110 {111 v a r t a r g e t A r e a = s e l f . t a r g e t A r e a s [ i ] ;112 i f ( t a r g e t A r e a . c o n t a i n s ( p o i n t ) )113 {114 / / h i g h l i g h t t a r g e t symbol115 s e l f . s e l e c t e d S y m b o l I n d e x = i ;116 s e l f . r e n d e r ( ) ;117 re turn ;118 }119 }120 }121 t h i s . s e l e c t S y m b o l = f u n c t i o n ( )122 {123 i f ( s e l f . s e l e c t e d S y m b o l I n d e x > 0)124 {125 i f (DEBUG LEVEL > 2)126 {127 c o n s o l e . l o g ( ” s e l f . s e l e c t e d S y m b o l I n d e x ” , s e l f .

s e l e c t e d S y m b o l I n d e x ) ;

49

128 }129 / / g i v e t h i s symbol a s c o r e o f b e s t s c o r e + 1130 v a r p o i n t D i s t a n c e F e a t u r e = s e l f . g e s t u r e . matches [ s e l f .

s e l e c t e d S y m b o l I n d e x ] . g e t F e a t u r e B y T y p e ( F e a t u r e .POINT DISTANCE TYPE ) ;

131 p o i n t D i s t a n c e F e a t u r e . s c o r e += 1 . 0 ;132133134 / / . . . and re−s o r t symbol l i s t135 s e l f . g e s t u r e . matches . s o r t ( Match . s o r t D e s c e n d i n g ) ;136137 / / r e p l a c e . . .138 v a r r ep l acemen tSymbo l = s e l f . m a i n S t a f f . symbols [ s e l f .

c u r r e n t S y m b o l I n d e x ] . c l o n e ( ) ;139 rep l acemen tSymbo l . name = s e l f . g e s t u r e . matches [ 0 ] . g e s t u r e . symbol ;140 s e l f . m a i n S t a f f . symbols . s p l i c e ( s e l f . c u r r e n t S y m b o l I n d e x , 1 ,

r ep l acemen tSymbo l ) ;141 s e l f . p e n c i l . r edrawCanvas ( ) ;142143 / / c rude i m p l e m e n t a t i o n o f a u t o l e a r n i n g144 i f ( useAutoLearn ( ) )145 {146 i f (DEBUG LEVEL > 2)147 {148 c o n s o l e . l o g ( s e l f . m a i n S t a f f . symbols . l e n g t h + ” ” + s e l f .

c u r r e n t S y m b o l I n d e x + rep lacemen tSymbo l . name ) ;149 }150 g e s t u r e C l a s s i f i e r . r e t r a i n G e s t u r e ( r ep l acemen tSymbo l . name , t h i s .

p e n c i l . i n k . g e s t u r e s [ s e l f . c u r r e n t S y m b o l I n d e x ] . c l o n e ( ) ) ;151 }152 }153 }154 t h i s . i n i t ( ) ;155 }

10.2 Language Model

../common/Language.js1 /∗2 ∗ Language model3 ∗ /4 f u n c t i o n Language ( )5 {6 / / h a r d w i r e a rough s e t o f b igrams7 t h i s . b i g r a m V e c t o r = new BigramVector ( ) ;8 bv = t h i s . b i g r a m V e c t o r ;9 bv . push ( new Bigram ( ” c l e f ” , ” c l e f ” , 0 . 0 ) ) ;

10 bv . push ( new Bigram ( ” c l e f ” , ” r e s t ” , 1 . 0 ) ) ;11 bv . push ( new Bigram ( ” c l e f ” , ” n o t e ” , 1 . 0 ) ) ;12 bv . push ( new Bigram ( ” c l e f ” , ” a c c i d e n t a l ” , 1 . 0 ) ) ;13 bv . push ( new Bigram ( ” c l e f ” , ” l i n e ” , 0 . 5 ) ) ;

50

14 bv . push ( new Bigram ( ” c l e f ” , ” a u g m e n t a t i o n ” , 0 . 0 ) ) ;15 bv . push ( new Bigram ( ” c l e f ” , ” t i m e s i g n a t u r e ” , 1 . 0 ) ) ;1617 bv . push ( new Bigram ( ” r e s t ” , ” c l e f ” , 0 . 1 ) ) ;18 bv . push ( new Bigram ( ” r e s t ” , ” r e s t ” , 1 . 0 ) ) ;19 bv . push ( new Bigram ( ” r e s t ” , ” n o t e ” , 1 . 0 ) ) ;20 bv . push ( new Bigram ( ” r e s t ” , ” a c c i d e n t a l ” , 1 . 0 ) ) ;21 bv . push ( new Bigram ( ” r e s t ” , ” l i n e ” , 1 . 0 ) ) ;22 bv . push ( new Bigram ( ” r e s t ” , ” a u g m e n t a t i o n ” , 1 . 0 ) ) ;23 bv . push ( new Bigram ( ” r e s t ” , ” t i m e s i g n a t u r e ” , . 0 1 ) ) ;2425 bv . push ( new Bigram ( ” n o t e ” , ” c l e f ” , 0 . 0 1 ) ) ;26 bv . push ( new Bigram ( ” n o t e ” , ” r e s t ” , 1 . 0 ) ) ;27 bv . push ( new Bigram ( ” n o t e ” , ” n o t e ” , 1 . 0 ) ) ;28 bv . push ( new Bigram ( ” n o t e ” , ” a c c i d e n t a l ” , 1 . 0 ) ) ;29 bv . push ( new Bigram ( ” n o t e ” , ” l i n e ” , 1 . 0 ) ) ;30 bv . push ( new Bigram ( ” n o t e ” , ” a u g m e n t a t i o n ” , 1 . 0 ) ) ;31 bv . push ( new Bigram ( ” n o t e ” , ” t i m e s i g n a t u r e ” , 0 . 0 ) ) ;3233 bv . push ( new Bigram ( ” a c c i d e n t a l ” , ” c l e f ” , 0 . 0 1 ) ) ;34 bv . push ( new Bigram ( ” a c c i d e n t a l ” , ” r e s t ” , 1 . 0 ) ) ;35 bv . push ( new Bigram ( ” a c c i d e n t a l ” , ” n o t e ” , 1 . 0 ) ) ;36 bv . push ( new Bigram ( ” a c c i d e n t a l ” , ” a c c i d e n t a l ” , 1 . 0 ) ) ;37 bv . push ( new Bigram ( ” a c c i d e n t a l ” , ” l i n e ” , 1 . 0 ) ) ;38 bv . push ( new Bigram ( ” a c c i d e n t a l ” , ” a u g m e n t a t i o n ” , 1 . 0 ) ) ;39 bv . push ( new Bigram ( ” a c c i d e n t a l ” , ” t i m e s i g n a t u r e ” , 0 . 0 ) ) ;4041 bv . push ( new Bigram ( ” t i m e s i g n a t u r e ” , ” c l e f ” , 1 . 0 ) ) ;42 bv . push ( new Bigram ( ” t i m e s i g n a t u r e ” , ” r e s t ” , 1 . 0 ) ) ;43 bv . push ( new Bigram ( ” t i m e s i g n a t u r e ” , ” n o t e ” , 1 . 0 ) ) ;44 bv . push ( new Bigram ( ” t i m e s i g n a t u r e ” , ” a c c i d e n t a l ” , 1 . 0 ) ) ;45 bv . push ( new Bigram ( ” t i m e s i g n a t u r e ” , ” l i n e ” , 1 . 0 ) ) ;46 bv . push ( new Bigram ( ” t i m e s i g n a t u r e ” , ” a u g m e n t a t i o n ” , 1 . 0 ) ) ;47 bv . push ( new Bigram ( ” t i m e s i g n a t u r e ” , ” t i m e s i g n a t u r e ” , 1 . 0 ) ) ;4849 bv . push ( new Bigram ( ” l i n e ” , ” c l e f ” , 1 . 0 ) ) ;50 bv . push ( new Bigram ( ” l i n e ” , ” r e s t ” , 1 . 0 ) ) ;51 bv . push ( new Bigram ( ” l i n e ” , ” n o t e ” , 1 . 0 ) ) ;52 bv . push ( new Bigram ( ” l i n e ” , ” a c c i d e n t a l ” , 1 . 0 ) ) ;53 bv . push ( new Bigram ( ” l i n e ” , ” l i n e ” , 0 . 0 ) ) ;54 bv . push ( new Bigram ( ” l i n e ” , ” a u g m e n t a t i o n ” , 0 . 0 ) ) ;55 bv . push ( new Bigram ( ” l i n e ” , ” t i m e s i g n a t u r e ” , 1 . 0 ) ) ;5657 bv . push ( new Bigram ( ” a u g m e n t a t i o n ” , ” c l e f ” , 0 . 5 ) ) ;58 bv . push ( new Bigram ( ” a u g m e n t a t i o n ” , ” r e s t ” , 1 . 0 ) ) ;59 bv . push ( new Bigram ( ” a u g m e n t a t i o n ” , ” n o t e ” , 1 . 0 ) ) ;60 bv . push ( new Bigram ( ” a u g m e n t a t i o n ” , ” a c c i d e n t a l ” , 1 . 0 ) ) ;61 bv . push ( new Bigram ( ” a u g m e n t a t i o n ” , ” l i n e ” , 1 . 0 ) ) ;62 bv . push ( new Bigram ( ” a u g m e n t a t i o n ” , ” a u g m e n t a t i o n ” , 0 . 6 ) ) ;63 bv . push ( new Bigram ( ” a u g m e n t a t i o n ” , ” t i m e s i g n a t u r e ” , 0 . 0 ) ) ;6465 }

51

../common/Ngram.js1 f u n c t i o n Ngram ( )2 {3 / / r e g u l a r e x p r e s s i o n s4 t h i s . from = [ ] ;5 / / r e g u l a r e x p r e s s i o n s6 t h i s . t o = [ ] ;78 t h i s . p r o b a b i l i t i e s = [ ] ;9 }

../common/Bigram.js1 f u n c t i o n Bigram ( from , to , p r o b a b i l i t y )2 {3 v a r ngram = new Ngram ( ) ;4 ngram . from = [ from ] ;5 ngram . t o = [ t o ] ;6 ngram . p r o b a b i l i t i e s = [ p r o b a b i l i t y ] ;78 t h i s . getFrom = f u n c t i o n ( )9 {

10 re turn ngram . from [ 0 ] ;11 }12 t h i s . ge tTo = f u n c t i o n ( )13 {14 re turn ngram . t o [ 0 ] ;15 }16 t h i s . g e t P r o b a b i l i t y = f u n c t i o n ( )17 {18 re turn ngram . p r o b a b i l i t i e s [ 0 ] ;19 }20 }2122 f u n c t i o n BigramVector ( )23 {24 t h i s . b ig rams = [ ] ;25 t h i s . b i g r a m s T a b l e = {} ;26 t h i s . f roms = {} ;27 t h i s . t o s = {} ;28 t h i s . push = f u n c t i o n ( b igram )29 {30 t h i s . b ig rams . push ( bigram ) ;31 / / add second d i m e n s i o n o b j e c t32 i f ( ! ( b igram . getFrom ( ) i n t h i s . b i g r a m s T a b l e ) )33 {34 t h i s . b i g r a m s T a b l e [ b igram . getFrom ( ) ] = {} ;35 }3637 i f ( b igram . getFrom ( ) i n t h i s . f roms )38 {39 t h i s . f roms [ bigram . getFrom ( ) ] ++;40 }41 e l s e

52

42 {43 t h i s . f roms [ bigram . getFrom ( ) ] = 1 ;44 }4546 i f ( b igram . ge tTo ( ) i n t h i s . f roms )47 {48 t h i s . t o s [ b igram . ge tTo ( ) ] ++;49 }50 e l s e51 {52 t h i s . t o s [ b igram . ge tTo ( ) ] = 1 ;53 }5455 t h i s . b i g r a m s T a b l e [ b igram . getFrom ( ) ] [ b igram . ge tTo ( ) ] = bigram ;56 }5758 t h i s . ge tBigramFromTable = f u n c t i o n ( from , t o )59 {60 re turn t h i s . b i g r a m s T a b l e [ from ] [ t o ] ;61 }6263 t h i s . getBigramFromTableBySymbolNames = f u n c t i o n ( fromSymbolName ,

toSymbolName )64 {65 v a r from = ” ” ;66 v a r t o = ” ” ;6768 i f (DEBUG LEVEL > 1)69 {70 c o n s o l e . l o g ( ” fromSymbolName , toSymbolName ” , fromSymbolName ,

toSymbolName ) ;71 }72 / / check f o r s t o p symbo l s73 i f ( Bigram . stopSymbolNames . indexOf ( fromSymbolName ) >= 0 | | Bigram .

stopSymbolNames . indexOf ( toSymbolName ) >= 0)74 {75 re turn new Bigram ( ” ” , ” ” , 0 ) ;76 }7778 / / l o ok up ” from” symbol , f u z z y , k i n d o f by n o t a t i o n c l a s s name79 f o r ( v a r fromKey i n t h i s . f roms )80 {81 i f ( fromSymbolName . match ( fromKey ) )82 {83 from = fromKey ;84 }85 }86 / / l o ok up ” t o ” symbol , f u z z y , k i n d o f by n o t a t i o n c l a s s name87 f o r ( v a r toKey i n t h i s . f roms )88 {89 i f ( toSymbolName . match ( toKey ) )90 {91 t o = toKey ;92 }

53

93 }94 re turn t h i s . ge tBigramFromTable ( from , t o ) ;95 }96 }9798 Bigram . stopSymbolNames = [ ” s c a l e t e s t ” ] ;

10.3 Drawing

../Ink.js1 /∗2 ∗ i n k r e p r e s e n t s and s e r i a l i z e s user−drawn s t r o k e s3 ∗ /4 f u n c t i o n Ink ( )5 {6 / / an a r r a y o f s t r o k e s ; each s t r o k e i s an a r r a y o f p o i n t s , pen down t o pen

up7 t h i s . s t r o k e s = [ ] ;89 / / as s t r o k e s are r e c o g n i z e d , t h e y are grouped by t h e r e c o g n i t i o n e n g i n e

and10 / / pushed on to t h e g e s t u r e s s t a c k ; each G e s t u r e o b j e c t has an a r r a y o f

s t r o k e s11 t h i s . g e s t u r e s = [ ] ;1213 v a r s e l f = t h i s ;1415 t h i s . s t a f f ;1617 / / remove g e s t u r e and a s s o c i a t e d o r i g i n a l i n k s t r o k e s18 t h i s . r emoveGes tu re = f u n c t i o n ( g e s t u r e I n d e x )19 {20 s e l f . g e s t u r e s . s p l i c e ( g e s t u r e I n d e x , 1 ) ;21 }2223 t h i s . s e r i a l i z e S t r o k e s = f u n c t i o n ( )24 {25 i f ( t h i s . s t r o k e s . l e n g t h > 0)26 {27 / / s p l i c e t o p r e v e n t d a n g l i n g e x t r a s t r o k e i n s e r i a l i z a t i o n28 re turn P o i n t . s e r i a l i z e P o i n t s N e w ( t h i s . s t r o k e s . s l i c e ( 0 , t h i s . s t r o k e s

. l e n g t h − 1) ) ;29 }30 }3132 t h i s . s e r i a l i z e G e s t u r e S t r o k e s = f u n c t i o n ( )33 {34 v a r a l l S t r o k e s = [ ] ;3536 f o r ( v a r i = 0 ; i < t h i s . g e s t u r e s . l e n g t h ; i ++)37 {

54

38 v a r g e s t u r e = t h i s . g e s t u r e s [ i ] ;39 f o r ( v a r j = 0 ; j < g e s t u r e . s t r o k e s . l e n g t h ; j ++)40 {41 v a r s t r o k e = g e s t u r e . s t r o k e s [ j ] ;42 i f ( s t r o k e . l e n g t h > 0)43 {44 a l l S t r o k e s . push ( s t r o k e ) ;45 }46 }47 }4849 i f ( a l l S t r o k e s . l e n g t h > 0)50 {51 / / s p l i c e t o p r e v e n t d a n g l i n g e x t r a s t r o k e i n s e r i a l i z a t i o n52 re turn P o i n t . s e r i a l i z e P o i n t s N e w ( a l l S t r o k e s ) ;53 }54 }5556 t h i s . s o r t S t r o k e s B y L e a d i n g E d g e = f u n c t i o n ( )57 {58 i f (DEBUG LEVEL > 0)59 {60 c o n s o l e . l o g ( ” t h i s . s t r o k e s ” , t h i s . s t r o k e s ) ;61 }62 v a r l e a s t X s = [ ] ;63 / / f i n d l e a d i n g edge64 f o r ( v a r i = 0 ; i < t h i s . s t r o k e s . l e n g t h ; i ++)65 {66 l e a s t X s [ i ] = { i n d e x : i , x : Number .MAX VALUE} ;67 f o r ( v a r j = 0 ; j < t h i s . s t r o k e s [ i ] . l e n g t h ; j ++)68 {69 v a r p o i n t = t h i s . s t r o k e s [ i ] [ j ] ;70 i f ( p o i n t . x < l e a s t X s [ i ] . x )71 {72 l e a s t X s [ i ] . x = p o i n t . x ;73 }74 }75 }76 i f (DEBUG LEVEL > 0)77 {78 c o n s o l e . l o g ( ” l e a s t X s ” , l e a s t X s ) ;79 }80 l e a s t X s . s o r t ( Ink . sor tByXAcending ) ;818283 / / c r e a t e a new s t r o k e s a r r a y i n o r d e r o f l e a s t X s ( l e a d i n g edges )84 v a r newStrokesAry = [ ] ;85 f o r ( v a r i = 0 ; i < l e a s t X s . l e n g t h ; i ++)86 {87 newStrokesAry . push ( t h i s . s t r o k e s [ l e a s t X s [ i ] . i n d e x ] ) ;88 }8990 t h i s . s t r o k e s = newStrokesAry ;91 i f (DEBUG LEVEL > 0)

55

92 {93 c o n s o l e . l o g ( ” l e a s t X s ” , l e a s t X s ) ;94 c o n s o l e . l o g ( ” t h i s . s t r o k e s ” , t h i s . s t r o k e s ) ;95 }96 }9798 t h i s . s e r i a l i z e = f u n c t i o n ( )99 {

100 v a r g e s t u r e S t r o k e s = t h i s . s e r i a l i z e G e s t u r e S t r o k e s ( ) ;101 i f ( g e s t u r e S t r o k e s )102 {103 re turn { t y p e : ” i n k ” , s t a f f S i z e : t h i s . s t a f f . g e t S i z e ( ) , s t r o k e s :

g e s t u r e S t r o k e s } ;104 }105 }106107 t h i s . c l e a r A l l = f u n c t i o n ( )108 {109 t h i s . s t r o k e s = [ ] ;110 t h i s . g e s t u r e s = [ ] ;111 }112 }113114 Ink . sor tByXAcending = f u n c t i o n ( obj1 , ob j2 )115 {116 re turn ( ob j1 . x − ob j2 . x ) ;117 }

../Pencil.js1 /∗2 ∗ P e n c i l i s t h e main drawing u t i l i t y3 ∗ /45 f u n c t i o n P e n c i l ( t r a i n i n g C a l l b a c k , c o n t e x t , s t a f f )6 {7 c o n s t COUNTDOWN INTERVAL = 1 . 7 ; / / s e c o n d s8 c o n s t TOUCH AND HOLD INTERVAL = 1 . 0 ;9 c o n s t STAFF EXTENSION WIDTH = 120 ;

10 c o n s t STAFF EXTENSION TOLERANCE = 6 0 ;11 c o n s t DEFAULT BACKGROUND LAYER ALPHA = 0 . 5 ;12 c o n s t DRAG THRESHOLD = 5 ;13 c o n s t TOUCH AND HOLD TOLERANCE = 4 ;1415 c o n s t DEFAULT INK COLOR RGBA = [ 0 , 0 , 0 , 0 . 5 ] ;16 t h i s . inKColor = ” ” ;17 v a r s e l f = t h i s ;18 v a r s t a f f I n i t i a l i z e d = f a l s e ;19 v a r showInk = t rue ;20 v a r showSymbols = t rue ;21 t h i s . s t a r t e d = f a l s e ;22 t h i s . d rawing = f a l s e ;23 t h i s . d r a g g i n g = f a l s e ;24 t h i s . g e s t u r e = new G e s t u r e ( ) ;

56

25 t h i s . a c t i v e G e s t u r e T i m e o u t = n u l l ;26 t h i s . t r a i n i n g C a l l b a c k = t r a i n i n g C a l l b a c k ;27 t h i s . s t a f f = s t a f f ;28 t h i s . i n k = new Ink ( ) ;29 t h i s . i n k . s t a f f = s t a f f ;30 t h i s . a u t o E x t e n d = t rue ;31 t h i s . c l i c k e d S y m b o l I n d e x = −1;32 t h i s . c l i c k P o s i t i o n O f f s e t = new P o i n t ( ) ;33 t h i s . touchAndHoldTimeout = n u l l ;34 t h i s . t ouchAndHoldAct ive = f a l s e ;35 t h i s . symbolOpt ionsCanvas = n u l l ;3637 / / f i n g e r / mouse down38 t h i s . t o u c h s t a r t = f u n c t i o n ( e v e n t )39 {40 i f ( ! s t a f f I n i t i a l i z e d )41 {42 s e l f . s e t I n k C o l o r (DEFAULT INK COLOR RGBA [ 0 ] , DEFAULT INK COLOR RGBA

[ 1 ] ,43 DEFAULT INK COLOR RGBA [ 2 ] , DEFAULT INK COLOR RGBA

[ 3 ] ) ;44 s t a f f . s t a r t L a y o u t ( c o n t e x t ) ;45 s t a f f I n i t i a l i z e d = t rue ;46 }47 c o n t e x t . b e g i n P a t h ( ) ;48 c o n t e x t . moveTo ( e v e n t . x , e v e n t . y ) ;49 s e l f . g e s t u r e . s t a r t G e s t u r e ( e v e n t . x − s t a f f . ma r g inLe f t , e v e n t . y −

s t a f f . marginTop ) ;50 s e l f . g e s t u r e . s t a f f S i z e = S t a f f . STAFF SIZES [ s e l f . s t a f f . s t a f f S i z e I n d e x ] ;51 s e l f . s t a r t e d = t rue ;5253 / / keep t r a c k o f whe ther or n o t u s e r i s s t i l l drawing by r e s e t t i n g

t i m e o u t w i t h54 / / e v e r y new s t r o k e55 i f ( s e l f . a c t i v e G e s t u r e T i m e o u t != n u l l )56 {57 c l e a r T i m e o u t ( s e l f . a c t i v e G e s t u r e T i m e o u t ) ;58 }5960 / / c l e a r t o u c h and ho ld t i m e r61 i f ( s e l f . touchAndHoldTimeout != n u l l )62 {63 c l e a r T i m e o u t ( s e l f . touchAndHoldTimeout ) ;64 }6566 s e l f . mouseDownPoint = new P o i n t ( e v e n t . x , e v e n t . y ) ;6768 s e l f . c l i c k e d S y m b o l I n d e x = s e l f . ge tSymbo l IndexFromPoin t ( s e l f .

mouseDownPoint . c l o n e ( ) ) ;6970 i f (DEBUG LEVEL > 2)71 {72 c o n s o l e . l o g ( s e l f . c l i c k e d S y m b o l I n d e x ) ;73 }

57

7475 i f ( s e l f . c l i c k e d S y m b o l I n d e x >= 0)76 {77 s e l f . c l i c k P o s i t i o n O f f s e t = s t a f f . symbols [ s e l f . c l i c k e d S y m b o l I n d e x ] .

p o s i t i o n . c l o n e ( ) . add ( s e l f . c l i c k e d S y m b o l I n d e x ) ;78 i f (DEBUG LEVEL > 2)79 {80 c o n s o l e . l o g ( s e l f . c l i c k P o s i t i o n O f f s e t . t o S t r i n g ) ;81 }82 s e l f . touchAndHoldTimeout = s e t T i m e o u t ( s e l f .

handleTouchAndHoldOnSymbol , TOUCH AND HOLD INTERVAL ∗ 1000) ;83 }8485 i f (DEBUG LEVEL > 2)86 {87 c o n s o l e . l o g ( ” s e l f . mouseDownPoint ” , s e l f . mouseDownPoint ) ;88 }8990 s e l f . mouseIsDown = t rue ;91 }9293 / / a l i a s e v e n t h a n d l e r r e f e r e n c e f o r non−m o b i l e S a f a r i b ro w s e r s94 t h i s . mousedown = t h i s . t o u c h s t a r t ;9596 / / f i n g e r / mouse move97 t h i s . touchmove = f u n c t i o n ( e v e n t )98 {99 s e l f . mouseMovePoint = new P o i n t ( e v e n t . x , e v e n t . y ) ;

100101 i f ( s e l f . touchAndHoldAct ive )102 {103 re turn ;104 }105106 i f ( s e l f . s t a r t e d )107 {108 v a r mouseDownToMouseMoveDistance = P o i n t . d i s t a n c e ( s e l f .

mouseDownPoint , s e l f . mouseMovePoint ) ;109 i f ( mouseDownToMouseMoveDistance > TOUCH AND HOLD TOLERANCE)110 {111 c l e a r T i m e o u t ( s e l f . touchAndHoldTimeout ) ;112 }113 / / drag g e s t u r e114 i f ( s e l f . c l i c k e d S y m b o l I n d e x >= 0)115 {116 i f (DEBUG LEVEL > 2)117 {118 c o n s o l e . l o g ( s t a f f . symbols [ s e l f . c l i c k e d S y m b o l I n d e x ] .

p o s i t i o n . t o S t r i n g ( ) ) ;119 }120121 / / change symbol p o s i t i o n122 v a r p o s i t i o n = s t a f f . symbols [ s e l f . c l i c k e d S y m b o l I n d e x ] . p o s i t i o n

;

58

123 p o s i t i o n . x = s e l f . mouseMovePoint . x − s e l f . c l i c k P o s i t i o n O f f s e t .x ;

124 p o s i t i o n . y = s t a f f . snapToLineY ( s e l f . mouseMovePoint . y − s e l f .c l i c k P o s i t i o n O f f s e t . y − s t a f f . marginTop )

125126 / / change i n k p o s i t i o n , o n l y move h o r i z o n t a l l y127 v a r i n k P o s i t i o n = s e l f . i n k . g e s t u r e s [ s e l f . c l i c k e d S y m b o l I n d e x ] .

g e t A v e r a g e C e n t e r ( t rue ) ;128 i n k P o s i t i o n . x = s e l f . mouseMovePoint . x ;129130 s e l f . i n k . g e s t u r e s [ s e l f . c l i c k e d S y m b o l I n d e x ] .

n o r m a l i z e T o F i x e d P o i n t ( i n k P o s i t i o n , t rue ) ;131 s e l f . d r a g g i n g = t rue ;132 s e l f . r edrawCanvas ( ) ;133 }134 e l s e / / no d r a g g i n g135 {136 c o n t e x t . l i n e T o ( e v e n t . x , e v e n t . y ) ;137 c o n t e x t . s t r o k e ( ) ;138 i f ( mouseDownToMouseMoveDistance > DRAG THRESHOLD)139 {140 s e l f . d rawing = t rue ;141 / / ( 0 , 0 ) i s t o p l e f t c o r n e r o f s t a f f , so s u b s t r a c t marg ins142 s e l f . g e s t u r e . c o n t i n u e G e s t u r e ( e v e n t . x − s t a f f . ma r g inLe f t ,

e v e n t . y − s t a f f . marginTop ) ;143 }144 }145 }146 e l s e / / p e n c i l i s n o t down147 {148 / / i f mouse i s w i t h i n r i g h t margin , e x t e n d s t a f f149 i f ( s e l f . a u t o E x t e n d && e v e n t . x > c o n t e x t . c a nv a s . wid th − (

STAFF EXTENSION TOLERANCE) )150 {151 s e l f . ex t endCanvas ( STAFF EXTENSION WIDTH ) ;152 }153 }154155 / / check f o r o u t o f bounds , and end g e s t u r e156 i f ( s e l f . mouseMovePoint . x <= 10 | | s e l f . mouseMovePoint . y <= 10)157 {158 s e l f . t o u c h e n d ( e v e n t ) ;159 }160 }161 / / a l i a s e v e n t h a n d l e r r e f e r e n c e f o r non−m o b i l e S a f a r i b ro w s e r s162 t h i s . mousemove = t h i s . touchmove ;163164 / / f i n g e r / mouse up165 t h i s . t o u c h e n d = f u n c t i o n ( e v e n t )166 {167 s e l f . mouseUpPoint = new P o i n t ( e v e n t . x , e v e n t . y ) ;168 s e l f . mouseIsDown = f a l s e ;169 s e l f . s t a r t e d = f a l s e ;170

59

171172 / / add e r a s e g e s t u r e ?173174 i f ( s e l f . touchAndHoldAct ive )175 {176 s e l f . g e s t u r e = new G e s t u r e ( ) ;177 s e l f . h ideSymbo lOp t ions ( ) ;178 s e l f . touchAndHoldAct ive = f a l s e ;179 re turn ;180 }181182 c l e a r T i m e o u t ( s e l f . touchAndHoldTimeout ) ;183184185 / / c l i c k , no drag , d e l e t e g e s t u r e186 i f ( ! s e l f . d rawing && ! s e l f . d r a g g i n g )187 {188 i f ( s e l f . c l i c k e d S y m b o l I n d e x >= 0)189 {190 s t a f f . symbols . s p l i c e ( s e l f . c l i c k e d S y m b o l I n d e x , 1 ) ;191 s e l f . i n k . r emoveGes tu re ( s e l f . c l i c k e d S y m b o l I n d e x ) ;192 s e l f . r edrawCanvas ( ) ;193 / / r e s e t194 s e l f . c l i c k e d S y m b o l I n d e x = −1;195 }196 / / c l e a r o u t g e s t u r e . . .197 s e l f . g e s t u r e = new G e s t u r e ( ) ;198 }199 e l s e i f ( s e l f . d r a g g i n g ) / / d r a g g i n g an e x i s t i n g symbol200 {201 / / c l e a r o u t g e s t u r e . . .202 s e l f . g e s t u r e = new G e s t u r e ( ) ;203 s e l f . d r a g g i n g = f a l s e ;204 / / r e s e t205 s e l f . c l i c k e d S y m b o l I n d e x = −1;206 }207 e l s e / / g e s t u r e r e c o g n i t i o n208 {209 / / k i c k o f f t i m e r f o r g e s t u r e r e c o g n i t i o n210 s e l f . a c t i v e G e s t u r e T i m e o u t = s e t T i m e o u t ( s e l f . endGes tu re ,

COUNTDOWN INTERVAL ∗ 1000) ;211 / / add a new s t r o k e212 s e l f . d rawing = f a l s e ;213 s e l f . g e s t u r e . newStroke ( ) ;214 s e l f . d r a g g i n g = f a l s e ;215216 }217218 }219 / / a l i a s e v e n t h a n d l e r r e f e r e n c e f o r non−m o b i l e S a f a r i b ro w s e r s220 t h i s . mouseup = t h i s . t o u c h e n d ;221222 t h i s . handleTouchAndHoldOnSymbol = f u n c t i o n ( )223 {

60

224 v a r soCanvas = document . ge tE lemen tById ( ” symbolOpt ions ” ) ;225 U t i l s . c l e a r C a n v a s ( soCanvas ) ;226 s e l f . touchAndHoldAct ive = t rue ;227 i f (DEBUG LEVEL > 2)228 {229 c o n s o l e . l o g ( s e l f . i n k . g e s t u r e s [ s e l f . c l i c k e d S y m b o l I n d e x ] . matches ) ;230 }231 v a r c u r r e n t S y m b o l I n d e x = 0 ;232 v a r so = new SymbolOpt ions ( s e l f . i n k . g e s t u r e s [ s e l f . c l i c k e d S y m b o l I n d e x ] ,

soCanvas , s e l f . c l i c k e d S y m b o l I n d e x , s t a f f , s e l f ) ;233 i f (DEBUG LEVEL > 2)234 {235 c o n s o l e . l o g ( ” r e n d e r i n g o p t i o n s ” + c u r r e n t S y m b o l I n d e x ) ;236 }237238 / / c u r r e n t S y m b o l I n d e x argument unused , un imp lemen ted239 so . r e n d e r ( c u r r e n t S y m b o l I n d e x ) ;240 soCanvas . s t y l e . t o p = s e l f . mouseDownPoint . y + ” px ” ;241 soCanvas . s t y l e . l e f t = s e l f . mouseDownPoint . x + ” px ” ;242 soCanvas . s t y l e . v i s i b i l i t y = ” v i s i b l e ” ;243 s e l f . symbolOpt ionsCanvas = soCanvas ;244245 i f (DEBUG LEVEL > 2)246 {247 c o n s o l e . l o g ( ” t o u c h and ho ld ” ) ;248 }249 }250 t h i s . h ideSymbo lOp t ions = f u n c t i o n ( )251 {252253 s e l f . symbolOpt ionsCanvas . s t y l e . v i s i b i l i t y = ” h i dd en ” ;254 }255256 / / r e g u l a r mode , n o t t r a i n i n g257 i f ( ! s e l f . t r a i n i n g C a l l b a c k )258 {259 t h i s . e n d G e s t u r e = f u n c t i o n ( e v e n t )260 {261 / / a l e r t ( s e l f . a c t i v e G e s t u r e T i m e o u t ) ;262 i f ( s e l f . a c t i v e G e s t u r e T i m e o u t != n u l l )263 {264 i f ( s e l f . g e s t u r e . e n d G e s t u r e ( ) )265 {266 / / append g e s t u r e t o r u n n i n g i n k267 f o r ( v a r i = 0 ; i < s e l f . g e s t u r e . s t r o k e s . l e n g t h ; i ++)268 {269 s e l f . i n k . s t r o k e s . push ( P o i n t . c l o n e P o i n t s ( s e l f . g e s t u r e .

s t r o k e s [ i ] . s l i c e ( 0 ) ) ) ;270 }271272 / / c l o n e p e n c i l g e s t u r e273274 / / u se c e n t r o i d275 v a r d r a w n R e g i s t r a t i o n P o i n t = s e l f . g e s t u r e . g e t A v e r a g e C e n t e r

61

( ) ;276277 v a r canvas1 = document . ge tE lemen tById ( ” canvas1 ” ) ;278 v a r canvas2 = document . ge tE lemen tById ( ” canvas2 ” ) ;279 i f ( useSca leTes tMode ( ) ) / / s c a l e t e s t mode280 {281 g e s t u r e C l a s s i f i e r . s c a l e T e s t ( s e l f . g e s t u r e , s t a f f .

g e t S i z e ( ) ) ;282 }283 e l s e / / normal mode284 {285 sw i t ch ( CLASSIFICATION TYPE )286 {287 case CLASSIFICATION TYPE HULL :288 g e s t u r e C l a s s i f i e r . dynamicMatchHul l ( s e l f . g e s t u r e

, canvas1 , canvas2 , s t a f f . g e t S i z e ( ) , s t a f f ,c o n t e x t , s e l f ) ;

289 break ;290 case CLASSIFICATION TYPE DYNAMIC 1 :291 g e s t u r e C l a s s i f i e r . dynamicMatchBru teForce ( s e l f .

g e s t u r e , canvas1 , canvas2 , s t a f f . g e t S i z e ( ), s t a f f , c o n t e x t , s e l f ) ;

292 break ;293 case CLASSIFICATION TYPE DYNAMIC 2 :294 g e s t u r e C l a s s i f i e r . dynamicMatch ( s e l f . g e s t u r e ,

canvas1 , canvas2 , s t a f f . g e t S i z e ( ) ) ;295 break ;296 }297 }298299 / / c l e a r o u t g e s t u r e . . .300 s e l f . g e s t u r e = new G e s t u r e ( ) ;301 }302 }303 }304 }305 e l s e306 { / / t r a i n i n g mode307 t h i s . e n d G e s t u r e = f u n c t i o n ( e v e n t )308 {309 i f ( s e l f . a c t i v e G e s t u r e T i m e o u t != n u l l )310 {311 i f ( s e l f . g e s t u r e . e n d G e s t u r e ( ) )312 {313 s e l f . t r a i n i n g C a l l b a c k ( P o i n t . s e r i a l i z e P o i n t s ( s e l f . g e s t u r e .

g e t A l l P o i n t s ( ) ) ) ;314 }315 }316 }317 }318319 t h i s . ex t endCanvas = f u n c t i o n ( wid th )320 {321 c o n t e x t . c a nv a s . wid th += wid th ;

62

322 s e l f . r edrawCanvas ( ) ;323 }324325 t h i s . r edrawCanvas = f u n c t i o n ( s c a l e I n d e x D e l t a )326 {327 v a r s c a l e F a c t o r = 1 . 0 ;328 i f ( s c a l e I n d e x D e l t a )329 {330 s c a l e F a c t o r = s t a f f . a d j u s t S c a l e ( s c a l e I n d e x D e l t a ) ;331 }332 v a r ca nv a s = c o n t e x t . c a n va s ;333 / / c l e a r canvas334 U t i l s . c l e a r C a n v a s ( ca n va s ) ;335 / / s c a l e canvas336 ca nv a s . wid th ∗= s c a l e F a c t o r ;337 ca nv a s . h e i g h t = s t a f f . h e i g h t I n P i x e l s ( ) + s t a f f . marginTop + s t a f f .

marginBot tom ;338339 s t a f f . r e n d e r ( c o n t e x t , ! showSymbols ) ;340 s c a l e I n k ( s c a l e F a c t o r ) ;341 i f ( showInk )342 {343 / / var a lpha = DEFAULT BACKGROUND LAYER ALPHA ;344 s t a f f . s t a r t L a y o u t ( c o n t e x t , s e l f . g e t I n k C o l o r ( ) ) ;345 drawInk ( ) ;346 s t a f f . endLayout ( c o n t e x t ) ;347 }348 }349350 t h i s . t ogg leShowInk = f u n c t i o n ( )351 {352 showInk = ! showInk ;353 s e l f . r edrawCanvas ( ) ;354 }355 t h i s . toggleShowSymbols = f u n c t i o n ( )356 {357 showSymbols = ! showSymbols ;358 s e l f . r edrawCanvas ( ) ;359 }360361 t h i s . s e t I n k C o l o r = f u n c t i o n ( r , g , b , a )362 {363 s e l f . i n k C o l o r = ” rgba ( ” + r + ” , ” + g + ” , ” + b + ” , ” + a + ” ) ” ;364 s e l f . r edrawCanvas ( ) ;365 }366367 t h i s . g e t I n k C o l o r = f u n c t i o n ( )368 {369 re turn s e l f . i n k C o l o r ;370 }371372 t h i s . r e s i z e T o N e a r e s t S t a f f S i z e = f u n c t i o n ( s t a f f S i z e )373 {374 v a r n e a r e s t I n d e x = s t a f f . g e t N e a r e s t S i z e I n d e x ( s t a f f S i z e ) ;

63

375 v a r s c a l e I n d e x D e l t a = n e a r e s t I n d e x − s t a f f . s t a f f S i z e I n d e x ;376 s e l f . r edrawCanvas ( s c a l e I n d e x D e l t a ) ;377 }378379 t h i s . ge tSymbol IndexFromPoin t = f u n c t i o n ( p o i n t )380 {381 / / c o n s t r u c t a convex po lygon from g e s t u r e i n k and symbol382 f o r ( v a r i = 0 ; i < s t a f f . symbols . l e n g t h ; i ++)383 {384 v a r t a r g e t P o l y g o n = new Polygon ( ) ;385386 / / s t a r t w i t h symbol bounding box387 t a r g e t P o l y g o n . p o i n t s = s t a f f . symbols [ i ] . ge tBoundingBox ( c o n t e x t ,

s t a f f ) . g e t P o i n t s ( ) ;388389 / / c o n c a t e n a t e a l l i n k p o i n t s f o r t h i s g e s t u r e390 t a r g e t P o l y g o n . p o i n t s = t a r g e t P o l y g o n . p o i n t s . c o n c a t ( s e l f . i n k .

g e s t u r e s [ i ] . b a g O f P o i n t s ( ) ) ;391392 / / g e t convex h u l l o f a l l p o i n t s393 t a r g e t P o l y g o n . s o r t P o i n t s ( ) ;394 t a r g e t P o l y g o n . c h a i n H u l l ( ) ;395396 / / d e t e r m i n e i f p o i n t i s i n s i d e po lygon397 i f ( t a r g e t P o l y g o n . p o i n t I n P o l y g o n ( p o i n t ) == Polygon . INSIDE POLYGON )398 {399 re turn i ;400 }401 }402403 re turn −1;404 }405406 t h i s . c l e a r A l l = f u n c t i o n ( )407 {408 s e l f . g e s t u r e = new G e s t u r e ( ) ;409 s e l f . i n k . c l e a r A l l ( ) ;410 s e l f . s t a f f . c l e a r A l l ( ) ;411 s e l f . r edrawCanvas ( ) ;412 }413414 f u n c t i o n s c a l e I n k ( s c a l e F a c t o r )415 {416 i f ( ! s c a l e F a c t o r )417 {418 re turn ;419 }420 f o r ( v a r i = 0 ; i < s e l f . i n k . s t r o k e s . l e n g t h ; i ++)421 {422 / / s t a f f . marginTop423 P o i n t . s c a l e P o i n t s ( s e l f . i n k . s t r o k e s [ i ] , s c a l e F a c t o r ) ;424 }425426 / / s c a l e g e s t u r e s , and t h e i r s t r o k e s

64

427 f o r ( v a r i = 0 ; i < s e l f . i n k . g e s t u r e s . l e n g t h ; i ++)428 {429 s e l f . i n k . g e s t u r e s [ i ] . s c a l e ( s c a l e F a c t o r ) ;430 }431 }432433 / / redraw e x i s t i n g i n k434 t h i s . d r awInkFromSt rokes = f u n c t i o n ( s t r o k e s , s t a f f S i z e , m a r g i n O f f s e t )435 {436 v a r s t r o k e P o i n t s = [ ] ;437 f o r ( v a r i = 0 ; i < s t r o k e s . l e n g t h ; i ++)438 {439 s t r o k e P o i n t s [ i ] = [ ] ;440 f o r ( v a r j = 0 ; j < s t r o k e s [ i ] . l e n g t h ; j ++)441 {442 v a r p o i n t = new P o i n t ( s t r o k e s [ i ] [ j ] . x , s t r o k e s [ i ] [ j ] . y ) ;443 p o i n t . x −= m a r g i n O f f s e t . x ;444 p o i n t . y −= m a r g i n O f f s e t . y ;445 s t r o k e P o i n t s [ i ] [ j ] = p o i n t ;446 i f ( s t a f f S i z e != t h i s . s t a f f . g e t S i z e ( ) )447 {448 p o i n t . s c a l e ( t h i s . s t a f f . g e t S i z e ( ) / s t a f f S i z e ) ;449 }450 i f ( j == 0)451 {452 c o n t e x t . moveTo ( p o i n t . x , p o i n t . y ) ;453 / / c o n s o l e . l o g (”1 s t p o i n t i n k from i n k ” , p o i n t ) ;454 }455 e l s e456 {457 c o n t e x t . l i n e T o ( p o i n t . x , p o i n t . y ) ;458 }459 }460 }461 c o n t e x t . s t r o k e ( ) ;462 re turn s t r o k e P o i n t s ;463 }464465 /∗ r e p l a y i n k ∗ /466 t h i s . r e p l a y I n k = f u n c t i o n ( inkObj )467 {468 v a r s t r o k e s = inkObj . s t r o k e s ;469 v a r s t a f f S i z e = inkObj . s t a f f S i z e ;470 s e l f . g e s t u r e = new G e s t u r e ( ) ;471472 v a r m a r g i n P o i n t = new P o i n t ( 0 , 0 ) ;473 i f ( ! ( ” v e r s i o n ” i n inkObj ) | | i nkObj . v e r s i o n < CURRENT INK VERSION )474 {475 / / o l d v e r s i o n s o f t e s t i n k c o n t a i n margin , so o f f s e t a l l p o i n t s by

t h a t476 m a r g i n P o i n t = new P o i n t ( 1 0 , 92) ;477 }478 v a r s t r o k e P o i n t s = t h i s . d r awInkFromSt rokes ( s t r o k e s , s t a f f S i z e ,

m a r g i n P o i n t ) ;

65

479480 f o r ( v a r i = 0 ; i < s t r o k e P o i n t s . l e n g t h ; i ++)481 {482 f o r ( v a r j = 0 ; j < s t r o k e P o i n t s [ i ] . l e n g t h ; j ++)483 {484 s e l f . g e s t u r e . c o n t i n u e G e s t u r e ( s t r o k e P o i n t s [ i ] [ j ] . x ,

s t r o k e P o i n t s [ i ] [ j ] . y ) ;485 }486 s e l f . g e s t u r e . newStroke ( ) ;487 s e l f . i n k . s t r o k e s . push ( P o i n t . c l o n e P o i n t s ( s t r o k e P o i n t s [ i ] . s l i c e ( 0 ) ) )

;488 }489 v a r canvas1 = document . ge tE lemen tById ( ” canvas1 ” ) ;490 v a r canvas2 = document . ge tE lemen tById ( ” canvas2 ” ) ;491 g e s t u r e C l a s s i f i e r . dynamicMatchHul l ( s e l f . g e s t u r e , canvas1 , canvas2 ,

s t a f f . g e t S i z e ( ) , s t a f f , c o n t e x t , s e l f ) ;492 }493494 / / draw from segmented g e s t u r e s i n s t e a d o f o r i g i n a l i n k495 f u n c t i o n drawInk ( )496 {497 f o r ( v a r i = 0 ; i < s e l f . i n k . g e s t u r e s . l e n g t h ; i ++)498 {499 v a r s t r o k e s = s e l f . i n k . g e s t u r e s [ i ] . s t r o k e s ;500 f o r ( v a r j = 0 ; j < s t r o k e s . l e n g t h ; j ++)501 {502 v a r s t r o k e = s t r o k e s [ j ] ;503 f o r ( v a r k = 0 ; k < s t r o k e . l e n g t h ; k ++)504 {505 v a r p o i n t = new P o i n t ( s t r o k e [ k ] . x + s t a f f . ma r g inLe f t ,

s t r o k e [ k ] . y + s t a f f . marginTop ) ;506507 i f ( k == 0)508 {509 c o n t e x t . moveTo ( p o i n t . x , p o i n t . y ) ;510 / / c o n s o l e . l o g (”1 s t p o i n t i n k ” , p o i n t ) ;511 }512 e l s e513 {514 c o n t e x t . l i n e T o ( p o i n t . x , p o i n t . y ) ;515 }516 }517 }518 }519 c o n t e x t . s t r o k e ( ) ;520 }521522 }

../CanvasDraw.js1 f u n c t i o n CanvasDraw ( t r a i n i n g C a l l b a c k , s t a f f S i z e , s t a f f O f f s e t P o i n t )2 {3 v a r canvas , c o n t e x t , p e n c i l ;

66

4 v a r s t a f f = n u l l ;5 t h i s . t r a i n i n g C a l l b a c k = t r a i n i n g C a l l b a c k ;67 t h i s . d i s a b l e A l l E v e n t s = f a l s e ;89 v a r canvasDraw = t h i s ;

10 v a r s e l f = t h i s ;1112 t h i s . g e t C o n t e x t = f u n c t i o n ( )13 {14 re turn c o n t e x t ;15 }16 t h i s . g e tCanvas = f u n c t i o n ( )17 {18 re turn c a n v a s ;19 }2021 t h i s . g e t P e n c i l = f u n c t i o n ( )22 {23 re turn p e n c i l ;24 }2526 t h i s . g e t S t a f f = f u n c t i o n ( )27 {28 re turn s t a f f ;29 }3031 f u n c t i o n i n i t i a l i z e ( )32 {33 / / Find t h e canvas e l e m e n t .34 c a n v a s = document . ge tE lemen tById ( ” canvasView ” ) ;3536 i f (USE CANVAS SVG)37 {38 v a r canvasSVG = new CanvasSVG . D e f e r r e d ( ) ;39 c a n v a s = canvasSVGIn i t ( ) ;40 canvasSVG . wrapCanvas ( c a n v a s ) ;41 }4243 c o n t e x t = c a n v a s . g e t C o n t e x t ( ” 2d ” ) ;4445 R a s t r a l . s e t C o n t e x t D e f a u l t s ( c o n t e x t ) ;4647 s t a f f = new S t a f f ( s t a f f O f f s e t P o i n t ) ;48 i f ( ! s t a f f S i z e )49 {50 s t a f f S i z e = S t a f f . DEFAULT STAFF SIZE ;51 }52 s t a f f . s e t S i z e ( s t a f f S i z e ) ;53 s t a f f . r e n d e r ( c o n t e x t ) ;54 t h i s . t r a i n i n g C a l l b a c k = t r a i n i n g C a l l b a c k ;5556 p e n c i l = new P e n c i l ( t h i s . t r a i n i n g C a l l b a c k , c o n t e x t , s t a f f ) ;57

67

58 / / i p ho ne59 i f ( i s I p h o n e )60 {61 document . body . a d d E v e n t L i s t e n e r ( ” touchmove ” , f u n c t i o n ( e ) {62 e . p r e v e n t D e f a u l t ( ) ;63 } ) ;64 e v e n t . p r e v e n t D e f a u l t ( ) ;6566 c a n v a s . a d d E v e n t L i s t e n e r ( ” t o u c h s t a r t ” , even tCanvas , f a l s e ) ;67 c a n v a s . a d d E v e n t L i s t e n e r ( ” touchmove ” , even tCanvas , f a l s e ) ;68 c a n v a s . a d d E v e n t L i s t e n e r ( ” t o u c h e n d ” , even tCanvas , f a l s e ) ;69 }70 e l s e71 {72 c a n v a s . a d d E v e n t L i s t e n e r ( ” mousedown ” , even tCanvas , f a l s e ) ;73 c a n v a s . a d d E v e n t L i s t e n e r ( ” mousemove ” , even tCanvas , f a l s e ) ;74 c a n v a s . a d d E v e n t L i s t e n e r ( ” mouseup ” , even tCanvas , f a l s e ) ;75 }76 }7778 t h i s . d rawNota t ionSymbol = f u n c t i o n ( symbolName , t o p L e f t P o i n t )79 {80 s t a f f . drawSymbol ( c o n t e x t , t o p L e f t P o i n t , symbolName ) ;81 }8283 f u n c t i o n drawBoundingBox ( t o p L e f t P o i n t , b o t t o m R i g h t P o i n t )84 {85 c o n t e x t . s t r o k e R e c t ( t o p L e f t P o i n t . x , t o p L e f t P o i n t . y , b o t t o m R i g h t P o i n t . x

− t o p L e f t P o i n t . x , b o t t o m R i g h t P o i n t . y − t o p L e f t P o i n t . y ) ;86 }8788 / / s e t s c a l e , m a i n t a i n i n g a s p e c t r a t i o 1 . 0 i s normal s i z e , 100%89 t h i s . s e t S c a l e = f u n c t i o n ( s c a l e )90 {91 c o n t e x t . s c a l e ( s c a l e , s c a l e ) ;92 }9394 f u n c t i o n even tCanvas ( e v e n t )95 {96 i f ( s e l f . d i s a b l e A l l E v e n t s )97 {98 re turn ;99 }

100 U t i l s . p r o c e s s E v e n t ( e v e n t ) ;101102 / / C a l l t h e e v e n t h a n d l e r103 v a r func = p e n c i l [ e v e n t . t y p e ] ;104 i f ( f unc )105 {106 func ( e v e n t ) ;107 }108 }109110 f u n c t i o n canvasSVGIn i t ( )

68

111 {112 v a r c e l = document . c r ea t eE le men tNS ( ns , ” c an va s ” ) ;113 c e l . s e t A t t r i b u t e N S ( nul l , ’ w id th ’ , c a n v a s . wid th ) ;114 c e l . s e t A t t r i b u t e N S ( nul l , ’ h e i g h t ’ , c a n v a s . h e i g h t ) ;115 c e l . s e t A t t r i b u t e N S ( nul l , ’ s t y l e ’ , c a n v a s . g e t A t t r i b u t e N S ( nul l , ’ s t y l e ’

) ) ;116 c a n v a s . pa ren tNode . r e p l a c e C h i l d ( c e l , c a n v a s ) ;117 c e l . s e t A t t r i b u t e N S ( nul l , ’ i d ’ , ” ca nv a s ” ) ;118 re turn c e l ;119 }120121 i n i t i a l i z e ( ) ;122123124 }

10.4 Geometry

../common/Point.js1 /∗ a p o i n t i n E u c l i d e a n space ∗ /2 f u n c t i o n P o i n t ( x , y )3 {4 t h i s . l e n g t h = 0 ;5 t h i s . x = x | | 0 ;6 t h i s . y = y | | 0 ;7 v a r s e l f = t h i s ;89 t h i s . s u b t r a c t = f u n c t i o n ( p o in tB )

10 {11 re turn ( new P o i n t ( t h i s . x − po in tB . x , t h i s . y − po in tB . y ) ) ;12 }13 t h i s . add = f u n c t i o n ( p o in tB )14 {15 re turn ( new P o i n t ( t h i s . x + p o in tB . x , t h i s . y + p o in tB . y ) ) ;16 }17 t h i s . t o S t r i n g = f u n c t i o n ( )18 {19 re turn ( ” l e n g t h : ” + t h i s . l e n g t h + ” x : ” + t h i s . x + ” y : ” + t h i s . y ) ;20 }2122 t h i s . t o J s o n = f u n c t i o n ( )23 {24 re turn ( ’ {” x ” : ’ + t h i s . x + ’ , ” y ” : ’ + t h i s . y + ’} ’ ) ;25 }2627 t h i s . t o S i m p l e O b j e c t = f u n c t i o n ( )28 {29 re turn {x : t h i s . x , y : t h i s . y } ;30 }3132 t h i s . g e t L e n g t h = f u n c t i o n ( )

69

33 {34 re turn Math . s q r t ( t h i s . x ∗ t h i s . x + t h i s . y ∗ t h i s . y ) ;35 }36 t h i s . s c a l e = f u n c t i o n ( s c a l e F a c t o r )37 {38 t h i s . x ∗= s c a l e F a c t o r ;39 t h i s . y ∗= s c a l e F a c t o r ;40 }41 t h i s . s ca l e2D = f u n c t i o n ( s c a l e F a c t o r X , s c a l e F a c t o r Y )42 {43 t h i s . x ∗= s c a l e F a c t o r X ;44 t h i s . y ∗= s c a l e F a c t o r Y ;45 }46 t h i s . c l o n e = f u n c t i o n ( )47 {48 v a r p = new P o i n t ( s e l f . x , s e l f . y ) ;49 p . l e n g t h = s e l f . l e n g t h ;50 re turn p ;51 }5253 t h i s . s e r i a l i z e = f u n c t i o n ( )54 {55 v a r o b j = {} ;56 o b j . x = t h i s . x ;57 o b j . y = t h i s . y ;58 }59 }6061 / / s t a t i c , p u b l i c62 P o i n t . d i s t a n c e = f u n c t i o n ( p1 , p2 )63 {64 v a r dx , dy ;65 v a r dx = p2 . x − p1 . x ;66 v a r dy = p2 . y − p1 . y ;67 re turn Math . s q r t ( dx ∗ dx + dy ∗ dy ) ;68 }6970 / / d e t e r m i n e i f p o i n t i s l e f t o f a g i v e n l i n e71 P o i n t . i s L e f t = f u n c t i o n ( p0 , p1 , p2 )72 {73 re turn ( p1 . x − p0 . x ) ∗ ( p2 . y − p0 . y ) − ( p2 . x − p0 . x ) ∗ ( p1 . y − p0 . y ) ;74 }7576 P o i n t . c r o s s P r o d u c t = f u n c t i o n ( p1 , p2 )77 {78 re turn p o i n t 1 . x ∗ p o i n t 2 . y − p o i n t 1 . y ∗ p o i n t 2 . x ;79 }8081 P o i n t . d o t P r o d u c t = f u n c t i o n ( p1 , p2 )82 {83 re turn p o i n t 1 . x ∗ p o i n t 2 . x + p o i n t 1 . y ∗ p o i n t 2 . y ;84 }8586 P o i n t . s c a l e P o i n t s = f u n c t i o n ( p o i n t s , s c a l e F a c t o r , y O f f s e t )

70

87 {88 f o r ( v a r i = 0 ; i < p o i n t s . l e n g t h ; i ++)89 {90 v a r p o i n t = p o i n t s [ i ] ;91 i f ( y O f f s e t )92 {93 p o i n t . y −= y O f f s e t ;94 }95 p o i n t . s c a l e ( s c a l e F a c t o r ) ;96 i f ( y O f f s e t )97 {98 p o i n t . y += y O f f s e t ;99 }

100 }101 }102103 P o i n t . s c a l e P o i n t s 2 D = f u n c t i o n ( p o i n t s , s c a l e F a c t o r X , s c a l e F a c t o r Y )104 {105 f o r ( v a r i = 0 ; i < p o i n t s . l e n g t h ; i ++)106 {107 v a r p o i n t = p o i n t s [ i ] ;108 p o i n t . s c a l e ( s c a l e F a c t o r X , s c a l e F a c t o r Y ) ;109 }110 }111112 P o i n t . c l o n e P o i n t s = f u n c t i o n ( p o i n t s )113 {114 v a r c P o i n t s = [ ] ;115 f o r ( v a r i = 0 ; i < p o i n t s . l e n g t h ; i ++)116 {117 c P o i n t s . push ( p o i n t s [ i ] . c l o n e ( ) ) ;118 }119 re turn c P o i n t s ;120 }121122123 P o i n t . s e r i a l i z e P o i n t s = f u n c t i o n ( p o i n t s )124 {125 p o i n t S t r = ’ [ ’ ;126 f o r ( v a r i = 0 ; i < p o i n t s . l e n g t h ; i ++)127 {128 i f ( p o i n t s [ i ] . l e n g t h > 0)129 {130 p o i n t S t r += ’ [ ’ ;131 f o r ( v a r j = 0 ; j < p o i n t s [ i ] . l e n g t h ; j ++)132 {133 v a r p o i n t = p o i n t s [ i ] [ j ] ;134 p o i n t S t r += p o i n t . t o J s o n ( ) ;135 i f ( j < p o i n t s [ i ] . l e n g t h − 1)136 {137 p o i n t S t r += ” , ” ;138 }139 }140 p o i n t S t r += ’ ]\ n ’ ;

71

141 i f ( i < p o i n t s . l e n g t h − 1)142 {143 p o i n t S t r += ” , ” ;144 }145 }146 }147 p o i n t S t r += ’ ] ’ ;148 re turn p o i n t S t r ;149 }150151 P o i n t . s e r i a l i z e P o i n t s N e w = f u n c t i o n ( p o i n t s )152 {153 v a r p o i n t s A r y = [ ]154 f o r ( v a r i = 0 ; i < p o i n t s . l e n g t h ; i ++)155 {156 p o i n t s A r y [ i ] = [ ] ;157 f o r ( v a r j = 0 ; j < p o i n t s [ i ] . l e n g t h ; j ++)158 {159 p o i n t s A r y [ i ] [ j ] = p o i n t s [ i ] [ j ] . t o S i m p l e O b j e c t ( ) ;160 }161 }162 re turn p o i n t s A r y ;163 }164165 / / unused166 P o i n t . c l o n e P o i n t s 2 D = f u n c t i o n ( p o i n t s )167 {168 v a r p o i n t s A r y = [ ]169 f o r ( v a r i = 0 ; i < p o i n t s . l e n g t h ; i ++)170 {171 p o i n t s A r y [ i ] = [ ] ;172 f o r ( v a r j = 0 ; j < p o i n t s [ i ] . l e n g t h ; j ++)173 {174 p o i n t s A r y [ i ] [ j ] . push ( p o i n t s [ i ] [ j ] . c l o n e ( ) ) ;175 }176 }177 re turn p o i n t s A r y ;178 }179180 P o i n t . a n g l e D i f f e r e n c e = f u n c t i o n ( p o i n t 1 , p o i n t 2 )181 {182 v a r a n g l e 1 = Math . a t a n 2 ( p o i n t 1 . y , p o i n t 1 . x ) ;183 v a r a n g l e 2 = Math . a t a n 2 ( p o i n t 2 . y , p o i n t 2 . x ) ;184 re turn Math . abs ( a n g l e 2 − a n g l e 1 ) ;185 }186187188 / / r e t u r n s mean o f a l l a n g l e d i f f e r e n c e i n 2 v e c t o r s o f p o i n t s189 P o i n t . a n g l e D i f f e r e n c e s = f u n c t i o n ( p o i n t s 1 , p o i n t s 2 )190 {191 v a r numPoin ts = p o i n t s 1 . l e n g t h ;192193 i f ( p o i n t s 2 . l e n g t h != numPoin ts )194 {

72

195 numPoin ts = Math . min ( p o i n t s 1 . l e n g t h , p o i n t s 2 . l e n g t h ) ;196 }197198 v a r t o t a l D i f f e r e n c e s = 0 ;199 f o r ( v a r i = 0 ; i < numPoin ts − 1 ; i ++)200 {201 t o t a l D i f f e r e n c e s += Math . abs ( P o i n t . a n g l e D i f f e r e n c e ( p o i n t s 1 [ i ] ,

p o i n t s 1 [ i + 1 ] )202 − P o i n t . a n g l e D i f f e r e n c e ( p o i n t s 2 [ i ] ,

p o i n t s 2 [ i + 1 ] ) ) ;203 }204205 re turn t o t a l D i f f e r e n c e s / numPoin ts ;206 }207208 P o i n t . f i n d N e a r e s t P o i n t = f u n c t i o n ( p o i n t , p o i n t s )209 {210 v a r n e a r e s t I n d e x = 0 ;211 v a r n e a r e s t P o i n t D i s t a n c e = Number .MAX VALUE;212 f o r ( v a r i = 0 ; i < p o i n t s . l e n g t h ; i ++)213 {214 v a r d i s t a n c e = P o i n t . d i s t a n c e ( p o i n t , p o i n t s [ i ] ) ;215 i f ( d i s t a n c e < n e a r e s t P o i n t D i s t a n c e )216 {217 n e a r e s t P o i n t D i s t a n c e = d i s t a n c e ;218 n e a r e s t I n d e x = i ;219 }220 }221222 re turn p o i n t s [ n e a r e s t I n d e x ] ;223 }

../common/Line.js1 f u n c t i o n Line ( p1 , p2 )2 {3 t h i s . p1 = p1 ;4 t h i s . p2 = p2 ;5 SLOPE MATCH TOLERANCE = 0 . 2 ;67 t h i s . g e t S l o p e = f u n c t i o n ( )8 {9 re turn ( p1 . y − p2 . y ) / ( p1 . x − p2 . x ) ;

10 }1112 t h i s . p o i n t I s O n L i n e = f u n c t i o n ( p o i n t )13 {14 v a r s l o p e 1 = t h i s . g e t S l o p e ( ) ;15 v a r s l o p e 2 = new Line ( p1 , p o i n t ) . g e t S l o p e ( ) ;16 v a r minX = Math . min ( p1 . x , p2 . x ) ;17 v a r minY = Math . min ( p1 . y , p2 . y ) ;18 v a r maxX = Math . max ( p1 . x , p2 . x ) ;19 v a r maxY = Math . max ( p1 . y , p2 . y ) ;20

73

21 v a r i sBe tween = ( p o i n t . x >= minX && p o i n t . x <= maxX &&22 p o i n t . y >= minY && p o i n t . y <= maxY) ;23 re turn i sBe tween &&24 s l o p e 1 + SLOPE MATCH TOLERANCE >= s l o p e 2 &&25 s l o p e 1 − SLOPE MATCH TOLERANCE <= s l o p e 2 ;26 }2728 t h i s . t o S t r i n g = f u n c t i o n ( )29 {30 re turn ” l i n e from ” + p1 . t o S t r i n g ( ) + ” t o ” + p2 . t o S t r i n g ( ) ;31 }3233 }

../common/Rectangle.js1 f u n c t i o n R e c t a n g l e ( t o p L e f t , t o p R i g h t , bo t tomRigh t , b o t t o m L e f t )2 {3 t h i s . t o p L e f t = t o p L e f t ;4 t h i s . t o p R i g h t = t o p R i g h t ;5 t h i s . b o t t o m R i g h t = b o t t o m R i g h t ;6 t h i s . b o t t o m L e f t = b o t t o m L e f t ;7 v a r s e l f = t h i s ;89

10 t h i s . ge tWid th = f u n c t i o n ( )11 {12 re turn t h i s . t o p R i g h t . x − t h i s . t o p L e f t . x ;13 }1415 t h i s . g e t H e i g h t = f u n c t i o n ( )16 {17 re turn t h i s . b o t t o m L e f t . y − t h i s . t o p L e f t . y ;18 }1920 t h i s . g e t P o i n t s = f u n c t i o n ( )21 {22 re turn [ t h i s . t o p L e f t , t h i s . t o p R i g h t , t h i s . bo t tomRigh t , t h i s . b o t t o m L e f t

] ;23 }2425 t h i s . moveTo = f u n c t i o n ( p o i n t )26 {27 t h i s . t o p L e f t = t h i s . t o p L e f t . add ( p o i n t ) ;28 t h i s . t o p R i g h t = t h i s . t o p R i g h t . add ( p o i n t ) ;29 t h i s . b o t t o m R i g h t = t h i s . b o t t o m R i g h t . add ( p o i n t ) ;30 t h i s . b o t t o m L e f t = t h i s . b o t t o m L e f t . add ( p o i n t ) ;31 }3233 t h i s . g e t P o l y g o n = f u n c t i o n ( )34 {35 v a r p = new Polygon ( ) ;36 p . p o i n t s = s e l f . g e t P o i n t s ( ) ;37 / / c l o s e r e c t a n g l e

74

38 p . p o i n t s . push ( t h i s . t o p L e f t ) ;39 re turn p ;40 }4142 t h i s . c o n t a i n s = f u n c t i o n ( p o i n t )43 {44 i f ( p o i n t . x >= t h i s . t o p L e f t . x && p o i n t . x <= t h i s . t o p R i g h t . x45 && p o i n t . y >= t h i s . t o p L e f t . y && p o i n t . y <= t h i s . b o t t o m L e f t . y )46 {47 re turn true ;48 }49 re turn f a l s e ;50 }51 }

../common/Polygon.js1 f u n c t i o n Polygon ( )2 {3 /∗ s t a t i c ∗ /4 DEFAULT NUM POINTS = 5 2 ;5 MIN NUM POINTS = 4 ;6 MAX NUM POINTS = 4096 ;78 /∗ p u b l i c ∗ /9 t h i s . symbol = ” ” ;

10 t h i s . numNormalPoints = DEFAULT NUM POINTS ;11 t h i s . p o i n t s = [ ] ;1213 t h i s . s t a r t i n g P o i n t = new P o i n t ( ) ;14 t h i s . t o p L e f t = new P o i n t ( ) ;15 t h i s . b o t t o m R i g h t = new P o i n t ( ) ;16 t h i s . h e i g h t = 0 ;17 t h i s . w id th = 0 ;18 t h i s . c l o s e d = f a l s e ;19 t h i s . s egmen t Idx = 0 ;2021 /∗ p r i v a t e ∗ /22 v a r o f f s e t X = 0 ;23 v a r o f f s e t Y = 0 ;24 v a r s h a p e N e e d s U p d a t i n g = f a l s e ;25 v a r l i n e T h i c k n e s s = 7 ;26 v a r l i n e C o l o r = 0 x000000 ;27 v a r shapeMarg inTop = 1 0 ;28 v a r s h a p e M a r g i n L e f t = 1 0 ;29 v a r l e n g t h = −1;30 v a r a v e r a g e C e n t e r ;313233 t h i s . a d d P o i n t = f u n c t i o n ( x , y )34 {35 t h i s . p o i n t s . push ( new P o i n t ( x , y ) ) ;36 s h a p e N e e d s U p d a t i n g = t rue ;37 }

75

3839 t h i s . s t r o k e L e n g t h = f u n c t i o n ( )40 {41 v a r l e n g t h = 0 ;42 f o r ( v a r i = 1 ; i < t h i s . p o i n t s . l e n g t h ; i ++)43 {44 l e n g t h += P o i n t . d i s t a n c e ( t h i s . p o i n t s [ i −1] , t h i s . p o i n t s [ i ] ) ;45 }46 re turn l e n g t h ;47 }4849 t h i s . n o r m a l i z e S h a p e = f u n c t i o n ( )50 {51 v a r newPo in t s = [ ] ;5253 v a r normalSegmentLength = t h i s . s t r o k e L e n g t h ( ) / ( t h i s . numNormalPoints

− 1) ;54 newPo in t s . push ( t h i s . p o i n t s [ 0 ] ) ;55 v a r s t a r t P o i n t = t h i s . p o i n t s [ 0 ] ;56 v a r e n d P o i n t = t h i s . p o i n t s [ 0 ] ;5758 v a r p r e v i o u s D i s t a n c e E n d = 0 ;59 v a r p r e v i o u s D i s t a n c e S t a r t = 0 ;60 v a r d i s t a n c e = 0 ;61 v a r segmentLeng th = 0 ;62 v a r p o i n t I d x = 1 ;63 v a r i = 0 ;64 whi le ( i <= MAX NUM POINTS)65 {66 i ++;67 v a r e x c e s s = p r e v i o u s D i s t a n c e E n d − d i s t a n c e ;68 i f ( e x c e s s >= normalSegmentLength )69 {70 d i s t a n c e += normalSegmentLength ;71 v a r r a t i o = ( d i s t a n c e − p r e v i o u s D i s t a n c e S t a r t ) / segmentLeng th

;72 v a r newPoin t = new P o i n t ( ( e n d P o i n t . x − s t a r t P o i n t . x ) ∗ r a t i o +

s t a r t P o i n t . x ,73 ( e n d P o i n t . y − s t a r t P o i n t . y ) ∗ r a t i o +

s t a r t P o i n t . y ) ;74 newPo in t s . push ( newPoin t ) ;7576 }77 e l s e78 {79 i f ( p o i n t I d x == t h i s . p o i n t s . l e n g t h )80 {81 break ;82 }83 s t a r t P o i n t = e n d P o i n t ;84 e n d P o i n t = t h i s . p o i n t s [ p o i n t I d x ] ;85 p r e v i o u s D i s t a n c e S t a r t = p r e v i o u s D i s t a n c e E n d ;86 segmentLeng th = e n d P o i n t . s u b t r a c t ( s t a r t P o i n t ) . g e t L e n g t h ( ) ;87 p r e v i o u s D i s t a n c e E n d += segmentLeng th ;

76

88 p o i n t I d x ++;89 }90 }9192 / / add f i n a l p o i n t93 i f ( newPo in t s . l e n g t h < t h i s . numNormalPoints )94 {95 newPo in t s . push ( e n d P o i n t ) ;96 }979899 t h i s . p o i n t s = newPo in t s ;

100101 }102103 / / c e n t e r on average c e n t e r p o i n t104 t h i s . n o r m a l i z e T o A v e r a g e C e n t e r = f u n c t i o n ( )105 {106 f o r ( v a r i = 0 ; i < t h i s . p o i n t s . l e n g t h ; i ++)107 {108 v a r p o i n t = t h i s . p o i n t s [ i ] ;109 p o i n t . x −= t h i s . g e t A v e r a g e C e n t e r ( ) . x ;110 p o i n t . y −= t h i s . g e t A v e r a g e C e n t e r ( ) . y ;111 }112113 }114115 t h i s . g e t A v e r a g e C e n t e r = f u n c t i o n ( )116 {117 i f ( a v e r a g e C e n t e r != n u l l )118 {119 re turn a v e r a g e C e n t e r ;120 }121122 v a r c e n t e r X = 0 ;123 v a r c e n t e r Y = 0 ;124 f o r ( v a r i = 0 ; i < t h i s . p o i n t s . l e n g t h ; i ++)125 {126 v a r p o i n t = t h i s . p o i n t s [ i ] ;127 c e n t e r X += p o i n t . x ;128 c e n t e r Y += p o i n t . y ;129 }130131 c e n t e r X /= t h i s . p o i n t s . l e n g t h ;132 c e n t e r Y /= t h i s . p o i n t s . l e n g t h ;133134 re turn new P o i n t ( cen te rX , c e n t e r Y ) ;135 }136137 t h i s . ge tBoundingBox = f u n c t i o n ( )138 {139 v a r f i r s t P o i n t = t h i s . p o i n t s [ 0 ] ;140 v a r minX = f i r s t P o i n t . x ;141 v a r minY = f i r s t P o i n t . y ;

77

142 v a r maxX = f i r s t P o i n t . x ;143 v a r maxY = f i r s t P o i n t . y ;144 f o r ( v a r i = 0 ; i < t h i s . p o i n t s . l e n g t h ; i ++)145 {146 v a r p o i n t = t h i s . p o i n t s [ i ] ;147 i f ( p o i n t . x < minX )148 {149 minX = p o i n t . x ;150 }151 i f ( p o i n t . y < minY )152 {153 minY = p o i n t . y ;154 }155 i f ( p o i n t . x > maxX)156 {157 maxX = p o i n t . x ;158 }159 i f ( p o i n t . y > maxY)160 {161 maxY = p o i n t . y ;162 }163 }164165 v a r wid th = maxX − minX ;166 v a r h e i g h t = maxY − minY ;167 t h i s . w id th = wid th ;168 t h i s . h e i g h t = h e i g h t ;169 t h i s . t o p L e f t = new P o i n t ( minX , minY ) ;170 t h i s . b o t t o m R i g h t = new P o i n t ( maxX , maxY) ;171172 }173174 / / p r i v e l e g e d175 t h i s . n o r m a l i z e S c a l e = f u n c t i o n ( )176 {177 v a r f i r s t P o i n t = t h i s . p o i n t s [ 0 ] ;178 v a r minX = f i r s t P o i n t . x ;179 v a r minY = f i r s t P o i n t . y ;180 v a r maxX = f i r s t P o i n t . x ;181 v a r maxY = f i r s t P o i n t . y ;182 f o r ( v a r i = 0 ; i < t h i s . p o i n t s . l e n g t h ; i ++)183 {184 v a r p o i n t = t h i s . p o i n t s [ i ] ;185 i f ( p o i n t . x < minX )186 {187 minX = p o i n t . x ;188 }189 i f ( p o i n t . y < minY )190 {191 minY = p o i n t . y ;192 }193 i f ( p o i n t . x > maxX)194 {195 maxX = p o i n t . x ;

78

196 }197 i f ( p o i n t . y > maxY)198 {199 minY = p o i n t . y ;200 }201 }202203 v a r wid th = maxX − minX ;204 v a r h e i g h t = maxY − minY ;205 t h i s . w id th = wid th ;206 t h i s . h e i g h t = h e i g h t ;207 v a r s c a l e = ( wid th > h e i g h t ) ? wid th : h e i g h t ;208209 i f ( s c a l e <= 0)210 {211 re turn ;212 }213214 s c a l e /= 1 ;215216 f o r ( v a r i = 0 ; i < t h i s . p o i n t s . l e n g t h ; i ++)217 {218 v a r p o i n t = t h i s . p o i n t s [ i ] ;219 p o i n t . x ∗= s c a l e ;220 p o i n t . y ∗= s c a l e ;221 }222 }223224 t h i s . s c a l e = f u n c t i o n ( s c a l e F a c t o r )225 {226 f o r ( v a r i = 0 ; i < t h i s . p o i n t s . l e n g t h ; i ++)227 {228 v a r p o i n t = t h i s . p o i n t s [ i ] ;229 p o i n t . s c a l e ( s c a l e F a c t o r ) ;230 }231 }232233234 t h i s . ge tNumPoin ts = f u n c t i o n ( )235 {236 re turn t h i s . p o i n t s . l e n g t h ;237 }238239 t h i s . s t a r t P o l y g o n = f u n c t i o n ( x , y )240 {241 t h i s . a d d P o i n t ( x , y ) ;242 }243244 t h i s . g e t L e n g t h = f u n c t i o n ( )245 {246 i f ( l e n g t h == −1 | | s h a p e N e e d s U p d a t i n g )247 {248 l e n g t h = 0 ;249 v a r l a s t P o i n t ;

79

250 f o r ( v a r i = 0 ; i < t h i s . p o i n t s . l e n g t h ; i ++)251 {252 v a r p o i n t = t h i s . p o i n t s [ i ] ;253 i f ( l a s t P o i n t != n u l l )254 {255 l e n g t h += P o i n t . d i s t a n c e ( l a s t P o i n t , p o i n t ) ;256 }257 l a s t P o i n t = p o i n t ;258 }259 }260 re turn l e n g t h ;261 }262263 t h i s . c r e a t e F r o m J s o n = f u n c t i o n ( o b j )264 {265 t h i s . symbol = o b j . symbol ;266 / / a l e r t ( o b j . symbol ) ;267 t h i s . p o i n t s = [ ] ;268 f o r ( v a r i = 0 ; i < o b j . p o i n t s . l e n g t h ; i ++)269 {270 t h i s . p o i n t s . push ( new P o i n t ( p o i n t . x , p o i n t . y ) ) ;271 }272 }273274 t h i s . newSegment = f u n c t i o n ( )275 {276 t h i s . s egmen t Idx ++;277 }278 t h i s . n o r m a l i z e = f u n c t i o n ( )279 {280 t h i s . n o r m a l i z e S c a l e ( ) ;281 t h i s . n o r m a l i z e S h a p e ( ) ;282 t h i s . n o r m a l i z e T o A v e r a g e C e n t e r ( ) ;283 }284285 t h i s . g e t P o i n t s = f u n c t i o n ( )286 {287 re turn t h i s . p o i n t s ;288 }289290 t h i s . t o S t r i n g = f u n c t i o n ( )291 {292 v a r s t r i n g = ” polygon wi th ” + t h i s . p o i n t s . l e n g t h + ” p o i n t s \n : ” ;293 f o r ( v a r i = 0 ; i < t h i s . p o i n t s . l e n g t h ; i ++)294 {295 s t r i n g += t h i s . p o i n t s [ i ] + ” , ” ;296 }297 re turn s t r i n g ;298 }299300 / / un imp lemen ted301 t h i s . g e t J s o n = f u n c t i o n ( )302 {303 v a r j s o n = new S t r i n g ( ) ;

80

304 v a r p o i n t s A r y = [ ] ;305 f o r ( v a r i = 0 ; i < t h i s . p o i n t s . l e n g t h ; i ++)306 {307 v a r p o i n t = t h i s . p o i n t s [ i ] ;308 p o i n t s A r y . push ({ ” x ” : p o i n t . x , ” y ” : p o i n t . y } ) ;309 }310 re turn J son . encode ( p o i n t s A r y ) ;311 }312313 / / s o r t p o i n t s314 t h i s . s o r t P o i n t s = f u n c t i o n ( )315 {316 t h i s . p o i n t s . s o r t ( Polygon . s o r t P o i n t s B y X ) ;317 t h i s . p o i n t s . s o r t ( Polygon . s o r t P o i n t s B y Y ) ;318 / / a l e r t ( t h i s . p o i n t s ) ;319 }320321 t h i s . s o r t P o i n t s B y D i s t a n c e = f u n c t i o n ( )322 {323 v a r p o i n t s = [ ] ;324 / / s t a r t w i t h f i r s t p o i n t325 / / a l e r t ( t h i s . p o i n t s ) ;326 v a r f i r s t P o i n t = t h i s . p o i n t s . s h i f t ( ) ;327328 p o i n t s . push ( f i r s t P o i n t ) ;329 v a r n e a r e s t P o i n t I d x = −1;330 v a r n e a r e s t P o i n t L e n g t h = I n f i n i t y ;331332 v a r p r e v P o i n t = f i r s t P o i n t ;333 / / d e t e r m i n e each nex t−n e a r e s t p o i n t , by d i s t a n c e334 whi le ( t h i s . p o i n t s . l e n g t h > 0)335 {336 / / a l e r t ( t h i s . p o i n t s . l e n g t h + ” ” + p r e v P o i n t + ”\n” + p o i n t s ) ;337 f o r ( v a r i = 0 ; i < t h i s . p o i n t s . l e n g t h ; i ++)338 {339 v a r p o i n t L e n g t h = P o i n t . d i s t a n c e ( p r e v P o i n t , t h i s . p o i n t s [ i ] ) ;340 / / f i n d n e a r e s t p o i n t341 i f ( n e a r e s t P o i n t I d x == −1 | | p o i n t L e n g t h < n e a r e s t P o i n t L e n g t h )342 {343 n e a r e s t P o i n t I d x = i ;344 }345 }346 p r e v P o i n t = t h i s . p o i n t s . s p l i c e ( n e a r e s t P o i n t I d x , 1 ) [ 0 ] ;347 p o i n t s . push ( p r e v P o i n t ) ;348 n e a r e s t P o i n t I d x = −1;349 n e a r e s t P o i n t L e n g t h = I n f i n i t y ;350 }351352 / / c l o s e shape353 p o i n t s . push ( f i r s t P o i n t ) ;354355 t h i s . p o i n t s = p o i n t s ;356 }357

81

358 / / o r d e r p o i n t s t o r e s e m b l e a convex po lygon359 t h i s . c h a i n H u l l = f u n c t i o n ( )360 {361 v a r P = t h i s . p o i n t s ;362 v a r H = [ ] ;363 v a r b o t = 0 , t o p = −1;364 v a r i ;365 n = P . l e n g t h ;366 v a r minmin = 0 , minmax ;367 v a r xmin = P [ 0 ] . x ;368 f o r ( i = 1 ; i < n ; i ++)369 {370 i f ( P [ i ] . x != xmin )371 {372 break ;373 }374 }375 minmax = i − 1 ;376 i f ( minmax == n − 1)377 {378 H[++ t o p ] = P [ minmin ] ;379 i f ( P [ minmax ] . y != P [ minmin ] . y ) / / segment380 {381 H[++ t o p ] = P [ minmax ] ;382 }383 H[++ t o p ] = P [ minmin ] ; / / e n d p o i n t384 / / r e t u r n t o p + 1;385 / / r e t u r n H;386 t h i s . p o i n t s = H;387 }388389 v a r maxmin , maxmax = n − 1 ;390 v a r xmax = P [ n−1] . x ;391 f o r ( i = n − 2 ; i >= 0 ; i −−)392 {393 i f ( P [ i ] . x != xmax )394 {395 break ;396 }397 }398399 maxmin = i + 1 ;400401 / / l ower h u l l402 H[++ t o p ] = P [ minmin ] ;403 i = minmax ;404 whi le (++ i <= maxmin )405 {406 i f ( P o i n t . i s L e f t ( P [ minmin ] , P [ maxmin ] , P [ i ] ) >= 0 && i < maxmin )407 {408 c o n t in u e ;409 }410411 whi le ( t o p > 0) / / a t l e a s t 2 p o i n t s

82

412 {413 i f ( P o i n t . i s L e f t ( H[ top −1] , H[ t o p ] , P [ i ] ) > 0)414 {415 break ;416 }417 e l s e418 {419 top −−;420 }421 }422 H[++ t o p ] = P [ i ] ;423 }424425 / / upper h u l l426 i f ( maxmax != maxmin )427 {428 H[++ t o p ] = P [ maxmax ] ;429 }430 b o t = t o p ;431 i = maxmin ;432 whi le (−− i >= minmax )433 {434 i f ( P o i n t . i s L e f t ( P [ maxmax ] , P [ minmax ] , P [ i ] ) >= 0 && i > minmax )435 {436 c o n t in u e ;437 }438439 whi le ( t o p > b o t )440 {441 i f ( P o i n t . i s L e f t ( H[ top −1] , H[ t o p ] , P [ i ] ) > 0)442 {443 break ;444 }445 e l s e446 {447 top −−;448 }449 }450 H[++ t o p ] = P [ i ] ;451 }452 i f ( minmax != minmin )453 {454 H[++ t o p ] = P [ minmin ] ;455 }456 t h i s . p o i n t s = H;457 }458459 t h i s . monotoneHul l = f u n c t i o n ( )460 {461 v a r n = t h i s . p o i n t s . l e n g t h ;462 v a r k = 0 ;463 v a r h u l l = [ ] ;464 / / S o r t p o i n t s465 t h i s . s o r t P o i n t s ( ) ;

83

466467 / / Lower h u l l468 f o r ( v a r i = 0 ; i < n ; i ++)469 {470 whi le ( k >= 2 && Polygon . c r o s s ( h u l l [ k−2] , h u l l [ k−1] , t h i s . p o i n t s [ i

] ) <= 0)471 {472 k−−;473 }474 h u l l [ k ++] = t h i s . p o i n t s [ i ] ;475 }476477 / / B u i l d upper h u l l478 f o r ( v a r i = n−2, t = k +1; i >= 0 ; i −−)479 {480 whi le ( k >= t && Polygon . c r o s s ( h u l l [ k−2] , h u l l [ k−1] , t h i s . p o i n t s [ i

] ) <= 0)481 {482 k−−;483 }484 h u l l [ k ++] = t h i s . p o i n t s [ i ] ;485 }486487 t h i s . p o i n t s = h u l l ;488 }489490 t h i s . c l o s e = f u n c t i o n ( )491 {492 i f ( t h i s . p o i n t s . l e n g t h <= 0)493 {494 t h i s . c l o s e d = f a l s e ;495 re turn f a l s e ;496 }497 t h i s . a d d P o i n t ( t h i s . p o i n t s [ 0 ] . x , t h i s . p o i n t s [ 0 ] . y ) ;498 t h i s . c l o s e d = t rue ;499 }500501 t h i s . open = f u n c t i o n ( )502 {503 i f ( t h i s . p o i n t s . l e n g t h <= 0)504 {505 re turn f a l s e ;506 }507 t h i s . p o i n t s . pop ( ) ;508 t h i s . c l o s e d = f a l s e ;509 }510511 / / Find a s i m p l e ( non s e l f − i n t e r s e c t i n g ) c l o s e d p o l y g o n a l c h a i n from a

s e r i e s o f unordered p o i n t s512 t h i s . f i ndConcavePo lygon = f u n c t i o n ( )513 {514 i f ( t h i s . c l o s e d )515 {516 t h i s . open ( ) ;

84

517 }518 / / TODO: g e t t h i s work ing w i t h o u t g l o b a l519 window . a v e r a g e C e n t e r = t h i s . g e t A v e r a g e C e n t e r ( ) ;520 t h i s . p o i n t s . s o r t ( t h i s . s o r t A l l P o i n t s ) ;521 t h i s . c l o s e ( ) ;522 }523524 t h i s . s o r t A l l P o i n t s = f u n c t i o n ( p o i n t 1 , p o i n t 2 )525 {526 v a r a n g l e 1 = Math . a t a n 2 ( window . a v e r a g e C e n t e r . y − p o i n t 1 . y , window .

a v e r a g e C e n t e r . x − p o i n t 1 . x ) ;527 v a r a n g l e 2 = Math . a t a n 2 ( window . a v e r a g e C e n t e r . y − p o i n t 2 . y , window .

a v e r a g e C e n t e r . x − p o i n t 2 . x ) ;528529 i f ( a n g l e 1 > a n g l e 2 )530 {531 re turn 1 ;532 }533 e l s e i f ( a n g l e 1 < a n g l e 2 )534 {535 re turn −1;536 }537538 re turn 0 ;539 }540 / / u s e f u l f o r v i s u a l debugg ing541 t h i s . drawOnNewCanvas = f u n c t i o n ( p a r e n t E l e m e n t I d , p a d d i n g P o i n t , t e x t )542 {543 / / c r e a t e a new canvas544 v a r newCanvas = document . c r e a t e E l e m e n t ( ” c an va s ” ) ;545 / / s e t d i m e n s i o n s o f new canvas546 t h i s . ge tBoundingBox ( ) ;547 newCanvas . s e t A t t r i b u t e ( ” wid th ” , 400 ) ;548 newCanvas . s e t A t t r i b u t e ( ” h e i g h t ” , 400) ;549 / / bo rd er around canvas550 newCanvas . s e t A t t r i b u t e ( ” s t y l e ” , ” b o r d e r : 1px s o l i d #666 ; ” )551552 v a r c o n t e x t = newCanvas . g e t C o n t e x t ( ’ 2d ’ ) ;553 c o n t e x t . f i l l S t y l e = ” b l a c k ” ;554 c o n t e x t . f i l l T e x t ( t e x t , 10 , 10) ;555556 / / draw t h e po lygon t o i t557 Polygon . drawOnCanvas ( newCanvas , t h i s ) ;558 / / append t h e new canvas t o t h e page559 document . ge tE lemen tById ( p a r e n t E l e m e n t I d ) . appendCh i ld ( newCanvas ) ;560 }561562 t h i s . p o i n t I n P o l y g o n = f u n c t i o n ( p o i n t )563 {564 i f ( ! t h i s . checkPo lygon ( ) )565 {566 re turn f a l s e ;567 }568 i n t e r s e c t i o n s = 0 ;

85

569570 v a r p o i n t s = t h i s . p o i n t s ;571 / / Check i f t h e p o i n t i s i n s i d e t h e po lygon or on t h e boundary572 f o r ( v a r i = 1 ; i < p o i n t s . l e n g t h ; i ++)573 {574 p1 = p o i n t s [ i −1];575 p2 = p o i n t s [ i ] ;576 v a r l i n e = new Line ( p1 , p2 ) ;577 i f ( l i n e . p o i n t I s O n L i n e ( p o i n t ) )578 {579 re turn Polygon .ON POLYGON BOUNDARY;580 }581582 i f ( p1 . y == p2 . y && p1 . y == p o i n t . y && p o i n t . x > Math . min ( p1 . x , p2

. x ) &&583 p o i n t . x < Math . max ( p1 . x , p2 . x ) )584 {585 re turn Polygon .ON POLYGON BOUNDARY;586 }587 i f ( p o i n t . y > Math . min ( p1 . y , p2 . y ) && p o i n t . y <= Math . max ( p1 . y , p2

. y )588 && p o i n t . x <= Math . max ( p1 . x , p2 . x ) && p1 . y != p2 . y )589 {590 v a r x i n t e r s = ( p o i n t . y − p1 . y ) ∗ ( p2 . x − p1 . x ) / ( p2 . y − p1 . y )

+ p1 . x ;591 i f ( x i n t e r s == p o i n t . x )592 { / / Check i f p o i n t i s on t h e po lygon boundary ( o t h e r than

h o r i z o n t a l )593 re turn Polygon .ON POLYGON BOUNDARY;594 }595 i f ( p1 . x == p2 . x | | p o i n t . x <= x i n t e r s )596 {597 i n t e r s e c t i o n s ++;598 }599 }600 }601 / / I f t h e number o f edges we pa s s ed t h r o u g h i s even , t h e n i t ’ s i n t h e

po lygon .602 i f ( i n t e r s e c t i o n s % 2 != 0)603 {604 re turn Polygon . INSIDE POLYGON ;605 } e l s e606 {607 re turn Polygon . OUTSIDE POLYGON ;608 }609 }610611 / / d e t e r m i n e i f two p o l y g o n s i n t e r s e c t612 t h i s . i n t e r s e c t s = f u n c t i o n ( po lygon )613 {614615 }616617 }

86

618619620 Polygon . p r o t o t y p e . endPolygon = f u n c t i o n ( )621 {622 / / r e t u r n f a l s e i f we don ’ t have enough p o i n t s t o make a po lygon623 re turn t h i s . checkPo lygon ( ) ;624 }625626 Polygon . p r o t o t y p e . checkPo lygon = f u n c t i o n ( )627 {628 i f ( t h i s . g e t P o i n t s ( ) . l e n g t h < MIN NUM POINTS )629 {630 re turn f a l s e ;631 }632 re turn true ;633 }634635 Polygon . drawOnCanvas = f u n c t i o n ( canvas , polygon , l i n e S t y l e )636 {637 v a r p o i n t s = polygon . g e t P o i n t s ( ) ;638 v a r c o n t e x t = ca nv a s . g e t C o n t e x t ( ’ 2d ’ ) ;639 c o n t e x t . b e g i n P a t h ( ) ;640 i f ( l i n e S t y l e )641 {642 c o n t e x t . l i n e S t y l e = l i n e S t y l e ;643 }644 f o r ( v a r i = 0 ; i < p o i n t s . l e n g t h ; i ++)645 {646 v a r p o i n t = p o i n t s [ i ] ;647 i f ( i == 0)648 {649 c o n t e x t . moveTo ( p o i n t . x , p o i n t . y ) ;650 }651 e l s e652 {653 c o n t e x t . l i n e T o ( p o i n t . x , p o i n t . y ) ;654 }655 }656 c o n t e x t . s t r o k e ( ) ;657 }658659660661 Polygon . d o t P r o d u c t = f u n c t i o n ( p o i n t s 1 , p o i n t s 2 )662 {663 i f ( p o i n t s 1 . l e n g t h != p o i n t s 2 . l e n g t h )664 {665 throw new E r r o r ( ” l e n g t h mismatch w h i l e t r y i n g t o c a l c u l a t e d o t p r o d u c t

” + p o i n t s 1 . l e n g t h + ” ” + p o i n t s 2 . l e n g t h ) ;666 }667 v a r d o t P r o d u c t = 0 ;668669 f o r ( v a r i = 0 ; i < p o i n t s 1 . l e n g t h ; i ++)670 {

87

671 v a r p o i n t 1 = p o i n t s 1 [ i ] ;672 v a r p o i n t 2 = p o i n t s 2 [ i ] ;673674 d o t P r o d u c t += p o i n t 1 . x ∗ p o i n t 2 . x + p o i n t 1 . y ∗ p o i n t 2 . y ;675 }676 re turn d o t P r o d u c t ;677 }678679680 Polygon . drawAndScaleToCanvas = f u n c t i o n ( canvas , po lygon )681 {682 polygon . getBoundingBox ( ) ;683 / / c l e a r canvas684 U t i l s . c l e a r C a n v a s ( ca n va s ) ;685 Polygon . drawOnCanvas ( canvas , po lygon ) ;686 / / c rop and s c a l e687 v a r c o n t e x t = ca nv a s . g e t C o n t e x t ( ’ 2d ’ ) ;688 v a r b o r d e r = 8 ;689 v a r imageData = c o n t e x t . ge t ImageDa ta ( po lygon . t o p L e f t . x − borde r , po lygon .

t o p L e f t . y − borde r , po lygon . wid th + borde r , po lygon . h e i g h t + b o r d e r ) ;690 v a r tempCanvas = document . c r e a t e E l e m e n t ( ” c an va s ” ) ;691 / / U t i l s . c l e a r C a n v a s ( tempCanvas ) ;692 tempCanvas . s e t A t t r i b u t e ( ” i d ” , new Date ( ) . ge tTime ( ) ) ;693 tempCanvas . s e t A t t r i b u t e ( ” wid th ” , imageData . wid th ) ;694 tempCanvas . s e t A t t r i b u t e ( ” h e i g h t ” , imageData . h e i g h t ) ;695 tempCanvas . g e t C o n t e x t ( ” 2d ” ) . pu t ImageData ( imageData , 0 , 0 ) ;696 U t i l s . c l e a r C a n v a s ( ca n va s ) ;697 c o n t e x t . drawImage ( tempCanvas , 0 , 0 , c a n va s . width , c an va s . h e i g h t ) ;698 / / / a l e r t ( po l ygon . t o p L e f t . x−bo rd er ) ;699 / / remove temp canvas ??700 }701702 Polygon . c r o s s = f u n c t i o n (O, A, B)703 {704 re turn (A. x − O. x ) ∗ (B . y − O. y ) − (A. y − O. y ) ∗ (B . x − O. x ) ;705 }706707 Polygon . s o r t P o i n t s B y X = f u n c t i o n ( obj1 , ob j2 )708 {709 i f ( ob j1 . x > ob j2 . x )710 {711 re turn 1 ;712 }713 e l s e i f ( ob j1 . x < ob j2 . x )714 {715 re turn −1;716 }717718 re turn 0 ;719 }720721 Polygon . s o r t P o i n t s B y Y = f u n c t i o n ( obj1 , ob j2 )722 {723 i f ( ob j1 . y > ob j2 . y )

88

724 {725 re turn 1 ;726 }727 e l s e i f ( ob j1 . y < ob j2 . y )728 {729 re turn −1;730 }731732 re turn 0 ;733 }734735736 Polygon . so r tPo in t sByXY = f u n c t i o n ( obj1 , ob j2 )737 {738 i f ( ob j1 . x > ob j2 . x && ob j1 . y > ob j2 . y )739 {740 re turn 3 ;741 }742 e l s e i f ( ob j1 . x > ob j2 . x && ob j1 . y == ob j2 . y )743 {744 re turn 2 ;745 }746 e l s e i f ( ob j1 . x == ob j2 . x && ob j1 . y > ob j2 . y )747 {748 re turn 1 ;749 }750 e l s e i f ( ob j1 . x == ob j2 . x && ob j1 . y < ob j2 . y )751 {752 re turn −1;753 }754 e l s e i f ( ob j1 . x < ob j2 . x && ob j1 . y == ob j2 . y )755 {756 re turn −2;757 }758 e l s e i f ( ob j1 . x < ob j2 . x && ob j1 . y < ob j2 . y )759 {760 re turn −3;761 }762763 re turn 0 ;764 }765766767 Polygon .ON POLYGON BOUNDARY = ” boundary ” ;768 Polygon . INSIDE POLYGON = ” i n s i d e ” ;769 Polygon . OUTSIDE POLYGON = ” o u t s i d e ” ;

../common/PolygonIntersect.js1 /∗ d e t e r m i n e whe ther two p o l y g o n s i n t e r s e c t ∗ /2 /∗ p o r t e d from here :3 h t t p : / / webcache . g o o g l e u s e r c o n t e n t . com / s e a r c h ?q=cache : DcEuxmjJHWsJ : h t t p s : / / code

. s c i . u tah . edu / g f / p r o j e c t / Manta / scmsvn /%3 F a c t i o n%3Dbrowse%26pa th%3D%252Ft ru nk %252FModel%252FGroups%252FBSP%252Faip . h%26 r e v i s i o n %3D2329%26view%3

89

Dmarkup+i n n e s s+ c n t r i b + s s s s&h l=en&g l=us&s t r i p =14 ∗ /5 f u n c t i o n P o l y g o n I n t e r s e c t ( )6 {7 f u n c t i o n Box ( min , max )8 {9 t h i s . min = min ;

10 t h i s . max = max ;11 }12 f u n c t i o n Rng (mn , mx)13 {14 t h i s . mn = mn ;15 t h i s . mx = mx ;16 }1718 f u n c t i o n I P o i n t ( )19 {20 t h i s . x ;21 t h i s . y ;22 }2324 f u n c t i o n Ve r t e x ( )25 {26 t h i s . i p = new I P o i n t ( ) ;27 t h i s . r x = new Rng ( ) ;28 t h i s . r y = new Rng ( ) ;29 t h i s . i n n ;30 }3132 v a r gamut = 5 0 0 0 0 0 0 0 0 . ;33 v a r mid = gamut / 2 . ;3435 / /

−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−

3637 f u n c t i o n r a n g e ( p o i n t s , c , bbox )38 {39 whi le ( c−− > 0)40 {41 bbox . min . x = Math . min ( bbox . min . x , p o i n t s [ c ] . x ) ;42 bbox . min . y = Math . min ( bbox . min . y , p o i n t s [ c ] . y ) ;43 bbox . max . x = Math . max ( bbox . max . x , p o i n t s [ c ] . x ) ;44 bbox . max . y = Math . max ( bbox . max . y , p o i n t s [ c ] . y ) ;45 }46 }4748 f u n c t i o n a r e a ( a , p , q )49 {50 re turn p . x ∗ q . y − p . y ∗ q . x + a . x ∗ ( p . y − q . y ) + a . y ∗ ( q . x − p . x ) ;51 }5253 f u n c t i o n o v l ( p , q )54 {

90

55 re turn p . mn < q . mx && q . mn < p . mx ;56 }5758 / /

−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−

5960 v a r s s s s = 0 ;61 v a r s c l x = 0 ;62 v a r s c l y = 0 ;6364 f u n c t i o n c n t r i b ( f x , f y , t x , t y , w)65 {66 s s s s += w ∗ ( t x − f x ) ∗ ( t y + f y ) / 2 ;67 }6869 f u n c t i o n f i t ( x , cx , ix , fudge , B)70 {71 c = cx ;72 whi le ( c−− > 0)73 {74 i x [ c ] = new V er t e x ( ) ;75 i x [ c ] . i p = new I P o i n t ( ) ;76 i x [ c ] . i p . x = ( ( ( x [ c ] . x − B . min . x ) ∗ s c l x − mid ) & ˜ 7 )77 | fudge | ( c & 1) ;78 i x [ c ] . i p . y = ( ( ( x [ c ] . y − B . min . y ) ∗ s c l y − mid ) & ˜ 7 )79 | fudge ;80 }8182 i x [ 0 ] . i p . y += cx & 1 ;83 i x [ cx ] = i x [ 0 ] ;8485 c = cx ;86 whi le ( c−− > 0)87 {88 i x [ c ] . rx = i x [ c ] . i p . x < i x [ c + 1 ] . i p . x ?89 new Rng ( i x [ c ] . i p . x , i x [ c + 1 ] . i p . x ) :90 new Rng ( i x [ c + 1 ] . i p . x , i x [ c ] . i p . x ) ;91 i x [ c ] . ry = i x [ c ] . i p . y < i x [ c + 1 ] . i p . y ?92 new Rng ( i x [ c ] . i p . y , i x [ c + 1 ] . i p . y ) :93 new Rng ( i x [ c + 1 ] . i p . y , i x [ c ] . i p . y ) ;94 i x [ c ] . i n n = 0 ;95 }96 }9798 f u n c t i o n c r o s s ( a , b , c , d , a1 , a2 , a3 , a4 )99 {

100 v a r r1 = a1 / ( a1 + a2 ) ;101 v a r r2 = a3 / ( a3 + a4 ) ;102103 c n t r i b ( ( a . i p . x + r1 ∗ ( b . i p . x − a . i p . x ) ) ,104 ( a . i p . y + r1 ∗ ( b . i p . y − a . i p . y ) ) ,105 b . i p . x , b . i p . y , 1 ) ;106 c n t r i b ( d . i p . x , d . i p . y ,

91

107 ( c . i p . x + r2 ∗ ( d . i p . x − c . i p . x ) ) ,108 ( c . i p . y + r2 ∗ ( d . i p . y − c . i p . y ) ) ,109 1) ;110 ++a . i n n ;111 −−c . i n n ;112 }113114 f u n c t i o n i n n e s s ( P , cP , Q, cQ )115 {116 v a r s = 0 ;117 v a r c = cQ ;118 v a r p = P [ 0 ] . i p ;119120 whi le ( c−− > 0)121 {122 i f (Q[ c ] . rx . mn < p . x && p . x < Q[ c ] . rx . mx)123 {124 v a r sgn = 0 < a r e a ( p , Q[ c ] . ip , Q[ c + 1 ] . i p ) ;125 s += ( sgn != Q[ c ] . i p . x < Q[ c + 1 ] . i p . x ) ? 0 : ( sgn ? −1 : 1 ) ;126 }127 }128 f o r ( j = 0 ; j < cP ; ++ j )129 {130 i f ( s != 0 )131 c n t r i b ( P [ j ] . i p . x , P [ j ] . i p . y ,132 P [ j + 1 ] . i p . x , P [ j + 1 ] . i p . y , s ) ;133 s += P [ j ] . i n n ;134 }135 }136137 / /

−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−

138139 t h i s . i n t e r s e c t i o n = f u n c t i o n ( a , b )140 {141 v a r na = a . l e n g t h ;142 v a r nb = b . l e n g t h ;143 v a r i p a = new Array ( na + 1) ;144 v a r i p b = new Array ( nb + 1) ;145 v a r bbox = new Box ( new P o i n t ( Number .MAX VALUE, Number .MAX VALUE) ,146 new P o i n t (−Number .MAX VALUE, −Number .MAX VALUE) ) ;147148 i f ( na < 3 | | nb < 3)149 {150 re turn 0 ;151 }152153 r a n g e ( a , na , bbox ) ;154 r a n g e ( b , nb , bbox ) ;155156 v a r rngx = bbox . max . x − bbox . min . x ;157 s c l x = gamut / rngx ;158 rngy = bbox . max . y − bbox . min . y ;

92

159 s c l y = gamut / rngy ;160 a s c a l e = s c l x ∗ s c l y ;161162 f i t ( a , na , ipa , 0 , bbox ) ;163 f i t ( b , nb , ipb , 2 , bbox ) ;164165 f o r ( j = 0 ; j < na ; ++ j )166 {167 f o r ( k = 0 ; k < nb ; ++k )168 {169 i f ( o v l ( i p a [ j ] . rx , i p b [ k ] . rx ) && o v l ( i p a [ j ] . ry , i p b [ k ] . ry ) )170 {171 v a r a1 = −a r e a ( i p a [ j ] . ip , i p b [ k ] . ip , i p b [ k + 1 ] . i p ) ;172 v a r a2 = a r e a ( i p a [ j + 1 ] . ip , i p b [ k ] . ip , i p b [ k + 1 ] . i p ) ;173 v a r o = a1 < 0 ;174 i f ( o == a2 < 0)175 {176 v a r a3 = a r e a ( i p b [ k ] . ip , i p a [ j ] . ip , i p a [ j + 1 ] . i p ) ;177 v a r a4 = −a r e a ( i p b [ k + 1 ] . ip , i p a [ j ] . ip , i p a [ j + 1 ] . i p

) ;178 i f ( a3 < 0 == a4 < 0)179 {180 i f ( o )181 {182 c r o s s ( i p a [ j ] , i p a [ j + 1 ] , i p b [ k ] , i p b [ k + 1 ] ,

a1 , a2 , a3 , a4 ) ;183 }184 e l s e185 {186 c r o s s ( i p b [ k ] , i p b [ k + 1 ] , i p a [ j ] , i p a [ j + 1 ] ,

a3 , a4 , a1 , a2 ) ;187 }188 }189 }190 }191 }192 }193194 i n n e s s ( ipa , na , ipb , nb ) ;195 i n n e s s ( ipb , nb , ipa , na ) ;196 re turn s s s s / a s c a l e ;197 }198 }

10.5 Training

../Trainer.js1 / / T r a i n e r23 f u n c t i o n T r a i n e r ( ou tpu tDocId , s t a f f S i z e )4 {

93

5 t h i s . o u t p u t = document . ge tE lemen tById ( o u t p u t D o c I d ) ;6 t h i s . symbolNameIdx = 0 ;7 v a r s e l f = t h i s ;8 v a r TRAINING DEBUG = f a l s e ;9 v a r SYMBOL DISPLAY MS = 700 ;

10 / / a r r a y o f o b j e c t s11 v a r t r a i n i n g D a t a A r r a y = [ ] ;12 t h i s . t r a i n i n g C a l l b a c k = f u n c t i o n ( r e s u l t )13 {14 t r a i n i n g D a t a A r r a y . push ({ ” symbol ” : symbolNames [ s e l f . symbolNameIdx ] , ”

s t a f f S i z e ” : s t a f f . g e t S i z e ( ) , ” s t r o k e s ” : JSON . p a r s e ( r e s u l t ) } ) ;15 i f (TRAINING DEBUG)16 {17 c o n s o l e . l o g ( r e s u l t , ” r e s u l t ” ) ;18 s e l f . o u t p u t T r a i n i n g D a t a ( ) ;19 }2021 i f ( symbolNames . l e n g t h − 1 > s e l f . symbolNameIdx )22 {23 s e l f . n e x t ( ) ;24 }25 e l s e / / done26 {27 U t i l s . c l e a r C a n v a s ( cd . ge tCanvas ( ) ) ;28 cd . g e t C o n t e x t ( ) . f i l l T e x t ( ” f i n e ” , 10 , 200) ;2930 s e l f . o u t p u t T r a i n i n g D a t a ( ) ;31 }32 }3334 t h i s . o u t p u t T r a i n i n g D a t a = f u n c t i o n ( )35 {36 i f (TRAINING DEBUG)37 {38 c o n s o l e . l o g ( JSON . s t r i n g i f y ( t r a i n i n g D a t a A r r a y ) ) ;39 }40 s e l f . o u t p u t . innerHTML = ”<pre>” + JSON . s t r i n g i f y ( t r a i n i n g D a t a A r r a y ,

nul l , t rue ) + ” </ pre>” ;41 }424344 v a r m a r g i n L e f t = 1 0 ;45 v a r marginTop = 9 2 ;46 v a r s t a f f O f f s e t P o i n t = new P o i n t ( marg i nLe f t , marginTop ) ;47 v a r cd = new CanvasDraw ( t h i s . t r a i n i n g C a l l b a c k , s t a f f S i z e , s t a f f O f f s e t P o i n t

) ;48 v a r p e n c i l = cd . g e t P e n c i l ( ) ;49 p e n c i l . a u t o E x t e n d = f a l s e ;50 v a r s t a f f = cd . g e t S t a f f ( ) ;5152 t h i s . t r a i n = f u n c t i o n ( )53 {54 p e n c i l . r edrawCanvas ( ) ;55 p e n c i l . g e s t u r e = new G e s t u r e ( ) ;

94

56 / / d i s a b l e drawing57 cd . d i s a b l e A l l E v e n t s = t rue ;58 v a r c o n t e x t = cd . g e t C o n t e x t ( ) ;59 s t a f f . s t a r t L a y o u t ( c o n t e x t ) ;60 / / d i s p l a y symbol61 cd . d rawNota t ionSymbol ( symbolNames [ s e l f . symbolNameIdx ] , new P o i n t ( 1 0 0 ,

s t a f f . l i n e Y ( 2 ) ) ) ;62 s t a f f . endLayout ( c o n t e x t ) ;6364 / / s e t t i m e o u t t o h i d e symbol65 s e t T i m e o u t ( s e l f . hideSymbol , SYMBOL DISPLAY MS) ;66 }6768 t h i s . p r e v i o u s = f u n c t i o n ( )69 {70 t r a i n i n g D a t a A r r a y . pop ( ) ;71 s e l f . symbolNameIdx −−;72 i f ( s e l f . symbolNameIdx < 0)73 {74 s e l f . symbolNameIdx = 0 ;75 }7677 t h i s . t r a i n ( ) ;78 }7980 t h i s . n e x t = f u n c t i o n ( )81 {82 s e l f . symbolNameIdx ++;83 i f ( s e l f . symbolNameIdx >= symbolNames . l e n g t h )84 {85 s e l f . symbolNameIdx = symbolNames . l e n g t h − 1 ;86 }8788 t h i s . t r a i n ( ) ;89 }9091 t h i s . h ideSymbol = f u n c t i o n ( )92 {93 / / e n a b l e drawing94 cd . d i s a b l e A l l E v e n t s = f a l s e ;95 p e n c i l . r edrawCanvas ( ) ;96 }9798 t h i s . t r a i n ( ) ;99

100101 }

10.6 Utilities

../common/Utils.js

95

1 /∗2 ∗ c l a s s o f u t i l i t y f u n c t i o n s .3 ∗ /4 f u n c t i o n U t i l s ( )5 {67 }89 U t i l s . c l e a r C a n v a s = f u n c t i o n ( ca n va s )

10 {11 v a r c o n t e x t = ca nv a s . g e t C o n t e x t ( ’ 2d ’ ) ;12 c o n t e x t . c l e a r R e c t ( 0 , 0 , c a n va s . width , c an va s . h e i g h t ) ;13 }1415 / / Unused16 U t i l s . geometr icMean = f u n c t i o n ( numbers )17 {18 v a r t o t a l = 1 ;19 f o r ( v a r i = 0 ; i < numbers . l e n g t h ; i ++)20 {21 t o t a l ∗= numbers [ i ] ;22 }23 re turn Math . pow ( t o t a l , (1 / numbers . l e n g t h ) ) ;24 }2526 U t i l s . f i n dN ea re s tN um be r = f u n c t i o n ( a r r a y , ta rge tNum )27 {28 v a r neares tNum = −1;29 v a r c l o s e s t D i s t a n c e = Number .MAX VALUE;3031 f o r ( v a r i = 0 ; i < a r r a y . l e n g t h ; i ++)32 {33 / / e x a c t match34 i f ( a r r a y [ i ] == ta rge tNum )35 {36 re turn a r r a y [ i ] ;37 }38 e l s e / / n e a r e s t match39 {40 v a r d i s t a n c e = Math . abs ( ta rge tNum − a r r a y [ i ] ) ;41 i f ( d i s t a n c e < c l o s e s t D i s t a n c e )42 {43 neares tNum = a r r a y [ i ] ;44 c l o s e s t D i s t a n c e = d i s t a n c e ;45 }46 }47 }48 re turn neares tNum ;49 }5051 U t i l s . r a n d C o l o r = f u n c t i o n ( )52 {53 re turn ” rgba ( ” +Math . f l o o r ( Math . random ( ) ∗255) + ” , ” + Math . f l o o r ( Math .

random ( ) ∗255) + ” , ” + Math . f l o o r ( Math . random ( ) ∗255) + ” , 0 . 7 ) ; ” ;

96

54 }5556 U t i l s . p r o c e s s E v e n t = f u n c t i o n ( even t , o f f s e t P o i n t )57 {58 / / s t a n d a r d i z e p o s i t i o n i n g c o o r d i n a t e a t t r i b u t e s59 / / a c r o s s m u l t i p l e browser DOM i m p l e m e n t a t i o n s60 i f ( e v e n t . t a r g e t T o u c h e s )61 { / / iPhone62 i f ( e v e n t . t a r g e t T o u c h e s . l e n g t h > 0)63 {64 e v e n t . x = e v e n t . t a r g e t T o u c h e s [ 0 ] . pageX ;65 e v e n t . y = e v e n t . t a r g e t T o u c h e s [ 0 ] . pageY ;66 }67 / / p r e v e n t s c r o l l i n g and o t h e r d e f a u l t g e s t u r a l b e h a v i o r s on iPhone68 i f ( i s I p h o n e )69 {70 e v e n t . p r e v e n t D e f a u l t ( ) ;71 }7273 }74 e l s e i f ( e v e n t . l ay e r X | | e v e n t . l a ye r X == 0)75 { / / F i r e f o x76 e v e n t . x = e v e n t . l ay e r X ;77 e v e n t . y = e v e n t . l ay e r Y ;78 }79 e l s e i f ( e v e n t . o f f s e t X | | e v e n t . o f f s e t X == 0)80 { / / Opera81 e v e n t . x = e v e n t . o f f s e t X ;82 e v e n t . y = e v e n t . o f f s e t Y ;83 }8485 / / c u r r e n t l y unused86 i f ( o f f s e t P o i n t )87 {88 e v e n t . x −= o f f s e t P o i n t . x ;89 e v e n t . y −= o f f s e t P o i n t . y ;90 }91 }9293 U t i l s . i s I n t = f u n c t i o n ( number )94 {95 re turn p a r s e I n t ( number ) == number ;96 }

../common/XmlHttpRequest.js1 f u n c t i o n XmlHt tpReques t ( )2 {34 }56 / / s t a t i c78 XmlHt tpReques t . c r e a t e = f u n c t i o n ( )

97

9 {10 v a r r e q u e s t = f a l s e ;11 t r y12 {13 r e q u e s t = new Act iveXObjec t ( ’ Msxml2 .XMLHTTP’ ) ;14 }15 catch ( e r r 2 )16 {17 t r y18 {19 r e q u e s t = new Act iveXObjec t ( ’ M i c r o s o f t .XMLHTTP’ ) ;20 }21 catch ( e r r 3 )22 {23 t r y24 {25 r e q u e s t = new XMLHttpRequest ( ) ;26 }27 catch ( e r r 1 )28 {29 r e q u e s t = f a l s e ;30 }31 }32 }33 re turn r e q u e s t ;34 }

../common/Json.js1 f u n c t i o n J son ( )2 {3 t h i s . s t r i n g ;4 t h i s . d a t a ;5 t h i s . xmlHt tp = XmlHt tpReques t . c r e a t e ( ) ;6 t h i s . l o a d e d C a l l b a c k = n u l l ;7 }89 Json . p r o t o t y p e . l o a d J s o n = f u n c t i o n ( f i l eName )

10 {11 v a r s e l f = t h i s ;12 t h i s . xmlHt tp . overr ideMimeType ( ” t e x t / j s o n ” ) ;13 t h i s . xmlHt tp . open ( ”GET” , f i leName , t rue ) ;14 t h i s . xmlHt tp . o n r e a d y s t a t e c h a n g e = h a n d l e R e a d y S t a t e C h a n g e ;15 t h i s . xmlHt tp . send ( n u l l ) ;1617 f u n c t i o n h a n d l e R e a d y S t a t e C h a n g e ( )18 {19 i f ( s e l f . xmlHt tp . r e a d y S t a t e == 4)20 {21 s e l f . s t r i n g = s e l f . xmlHt tp . r e s p o n s e T e x t ;22 s e l f . d a t a = e v a l ( ” ( ” + s e l f . xmlHt tp . r e s p o n s e T e x t + ” ) ” ) ;23 i f ( s e l f . l o a d e d C a l l b a c k != n u l l )24 {25 s e l f . l o a d e d C a l l b a c k ( ) ;

98

26 }27 }28 }29 }3031 / /32 Json . p r o t o t y p e . encode = f u n c t i o n ( )33 {34 / / un imp lemen ted35 }

../common/CouchServer.js1 f u n c t i o n CouchServer ( )2 {3 }45 CouchServer . DEFAULT PROTOCOL = ” h t t p : / / ” ;6 CouchServer . DEFAULT SERVER = ” l o c a l h o s t ” ;7 CouchServer . DEFAULT PORT = 5984 ;89 CouchServer . d e f a u l t U r i = f u n c t i o n ( )

10 {11 re turn ( CouchServer . DEFAULT PROTOCOL + CouchServer . DEFAULT SERVER + ” : ” +

CouchServer . DEFAULT PORT) ;12 }

10.7 Hypertext Markup Language (HTML)Main

../index.html1 <!DOCTYPE html>2 <html>3 <head>4 <meta name=” v i e w p o r t ” c o n t e n t =” wid th = dev i ce−width , u se r−s c a l a b l e =no ” />5 <meta name=” app le−mobile−web−app−c a p a b l e ” c o n t e n t =” yes ” />6 < l i n k r e l =” app le−touch−i c o n ” hre f =” media / i q u i l i c o n . png ” />7 <meta c h a r s e t =” u t f −8” />8 < t i t l e>q u i l< / t i t l e>9

10 <!−− u t i l i t i e s −−>11 <s c r i p t type =” t e x t / j a v a s c r i p t ” s r c =”common / U t i l s . j s ”>< / s c r i p t>12 <s c r i p t type =” t e x t / j a v a s c r i p t ” s r c =”common / XmlHt tpReques t . j s ”>< / s c r i p t>13 <s c r i p t type =” t e x t / j a v a s c r i p t ” s r c =”common / J son . j s ”>< / s c r i p t>14 <s c r i p t type =” t e x t / j a v a s c r i p t ” s r c =”common / CouchServer . j s ”>< / s c r i p t>15 <s c r i p t type =” t e x t / j a v a s c r i p t ” s r c =”common / couch . j s ”>< / s c r i p t>1617 <!−− geomet ry −−>18 <s c r i p t type =” t e x t / j a v a s c r i p t ” s r c =”common / P o i n t . j s ”>< / s c r i p t>19 <s c r i p t type =” t e x t / j a v a s c r i p t ” s r c =”common / Line . j s ”>< / s c r i p t>20 <s c r i p t type =” t e x t / j a v a s c r i p t ” s r c =”common / R e c t a n g l e . j s ”>< / s c r i p t>

99

21 <s c r i p t type =” t e x t / j a v a s c r i p t ” s r c =”common / Polygon . j s ”>< / s c r i p t>22 <s c r i p t type =” t e x t / j a v a s c r i p t ” s r c =”common / P o l y g o n I n t e r s e c t . j s ”>< / s c r i p t>2324 <!−− drawing −−>25 <s c r i p t type =” t e x t / j a v a s c r i p t ” s r c =” Ink . j s ”>< / s c r i p t>26 <s c r i p t type =” t e x t / j a v a s c r i p t ” s r c =” P e n c i l . j s ”>< / s c r i p t>27 <s c r i p t type =” t e x t / j a v a s c r i p t ” s r c =” CanvasDraw . j s ”>< / s c r i p t>2829 <!−− g e s t u r e r e c o g n i t i o n −−>30 <s c r i p t type =” t e x t / j a v a s c r i p t ” s r c =” G e s t u r e . j s ”>< / s c r i p t>31 <s c r i p t type =” t e x t / j a v a s c r i p t ” s r c =” F e a t u r e . j s ”>< / s c r i p t>32 <s c r i p t type =” t e x t / j a v a s c r i p t ” s r c =” Match . j s ”>< / s c r i p t>33 <s c r i p t type =” t e x t / j a v a s c r i p t ” s r c =” G e s t u r e C l a s s i f i e r . j s ”>< / s c r i p t>34 <s c r i p t type =” t e x t / j a v a s c r i p t ” s r c =” SymbolOpt ions . j s ”>< / s c r i p t>3536 <!−− l anguage model −−>37 <s c r i p t type =” t e x t / j a v a s c r i p t ” s r c =”common / Ngram . j s ”>< / s c r i p t>38 <s c r i p t type =” t e x t / j a v a s c r i p t ” s r c =”common / Bigram . j s ”>< / s c r i p t>39 <s c r i p t type =” t e x t / j a v a s c r i p t ” s r c =”common / Language . j s ”>< / s c r i p t>4041 <!−− r a s t r a l , t h e n o t a t i o n r e n d e r i n g e n g i n e −−>4243 <!−−f o n t embeds −−>44 < l i n k r e l =” s t y l e s h e e t ” hre f =” r a s t r a l / f o n t s / s t y l e s h e e t . c s s ” type =” t e x t / c s s ”

c h a r s e t =” u t f −8”>4546 <s c r i p t type =” t e x t / j a v a s c r i p t ”>47 / / d e f i n e g l o b a l f e t amap v a r b e f o r e l o a d i n g t h e l i l y p o n d f e t a f o n t maps48 / / t h i s i s r e a l l y a C++ f i l e , b u t w i l l i n t e r p r e t f i n e as j a v a s c r i p t49 / / so long as t h e v a r f e t aMap i s d e f i n e d f i r s t a s an o b j e c t50 v a r f e t aMap = new O b j e c t ( ) ;51 / / l o a d f e t a ( emmanta le r ) c h a r a c t e r mappings52 < / s c r i p t>53 <s c r i p t type =” t e x t / j a v a s c r i p t ” s r c =” r a s t r a l / f e t a L i s t . j s ”>< / s c r i p t>54 <s c r i p t type =” t e x t / j a v a s c r i p t ” s r c =” r a s t r a l / R a s t r a l . j s ”>< / s c r i p t>55 <s c r i p t type =” t e x t / j a v a s c r i p t ” s r c =” r a s t r a l / Symbol . j s ”>< / s c r i p t>56 <s c r i p t type =” t e x t / j a v a s c r i p t ” s r c =” r a s t r a l / S t a f f . j s ”>< / s c r i p t>57 <s c r i p t type =” t e x t / j a v a s c r i p t ” s r c =” r a s t r a l / C l e f . j s ”>< / s c r i p t>585960 <!−− f o r canvas−svg , used o n l y f o r t e s t i n g . . . c u r r e n t l y broken −−>61 <!−− <s c r i p t type =” t e x t / j a v a s c r i p t ” s r c =” l i b / c a n v a s s v g / canvas−g e t s v g . j s ”><

/ s c r i p t> −−>62 <s t y l e type =” t e x t / c s s ”>63 body64 {65 f o n t−f a m i l y : Verdana , H e l v e t i c a , A r i a l , sans−s e r i f ;66 }67 ∗68 {69 −webki t−use r−s e l e c t : none ;70 }71 ∗72 {

100

73 −webki t−touch−c a l l o u t : none ;74 }75 ∗76 {77 −webki t−t ap−h i g h l i g h t −c o l o r : r gba ( 0 , 0 , 0 , 0 ) ;78 }79 ∗80 {81 −webki t−t e x t −s i z e −a d j u s t : none ;82 }83 # canvasView84 {85 / / b o r d e r : 1px dashed # bbc ;86 f l o a t : t o p ;87 }88 # canvas189 {90 margin− l e f t : 8px ;91 b o r d e r : 1px dashed # bbc ;92 / / f l o a t : l e f t ;93 v i s i b i l i t y : h i dde n ;94 d i s p l a y : none ;95 }96 # canvas297 {98 margin− l e f t : 8px ;99 b o r d e r : 1px dashed # bbc ;

100 / / f l o a t : r i g h t ;101 v i s i b i l i t y : h i dde n ;102 d i s p l a y : none ;103 }104 # c o n t r o l s105 {106 p o s i t i o n : a b s o l u t e ;107 t o p : 500 px ;108 }109110 # i n k C o l o r C a n v a s111 {112 b o r d e r : 1px s o l i d b l a c k ;113 }114115 # a d v a n c e d O p t i o n s116 {117 v i s i b i l i t y : h i dde n ;118 b o r d e r : 1px b l a c k dashed ;119 }120 # showHideAdvancedOpt ionsLink121 {122 t e x t −d e c o r a t i o n : none ;123 c o l o r : b l a c k ;124 }125126 # symbolOpt ions

101

127 {128 p o s i t i o n : a b s o l u t e ;129 z−i n d e x : 2 ;130 b o r d e r : 2px s o l i d b l a c k ;131 background−c o l o r : w h i t e ;132 v i s i b i l i t y : h i dde n ;133 }134 # t e s t i n g O p t i o n s135 {136 v i s i b i l i t y : h i dde n ;137 }138 . s p a c e r H o r i z o n t a l139 {140 wid th : 100 px ;141 f l o a t : l e f t ;142 }143 i n p u t144 {145 f l o a t : l e f t ;146 }147 img148 {149 f l o a t : l e f t ;150 }151 . s p a c e r V e r t i c a l152 {153 h e i g h t : 100 px ;154 f l o a t : t o p ;155 }156 < / s t y l e>157 <s c r i p t type =” t e x t / j a v a s c r i p t ”>158 <!−−159160 / / g l o b a l s161162 / / c o n s t a n t s163 c o n s t IMAGE PATH = ” media / ” ;164 c o n s t MAIN CONTAINER ID = ” c o n t a i n e r ” ;165 c o n s t DEBUG LEVEL = 0;166 c o n s t INK PLAYBACK INTERVAL MS = 3000;167 c o n s t CURRENT INK VERSION = 0 . 1 ;168169 c o n s t CLASSIFICATION TYPE HULL = ” h u l l ” ;170 c o n s t CLASSIFICATION TYPE DYNAMIC 1 = ” dynamic one ” ;171 c o n s t CLASSIFICATION TYPE DYNAMIC 2 = ” dynamic two ” ;172173 c o n s t CLASSIFICATION TYPE = CLASSIFICATION TYPE HULL ;174175 c o n s t MATCH TEMPLATE SCALE = t r u e ;176 / / v a r i a b l e s177 var g e s t u r e C l a s s i f i e r = n u l l ;178 var n o t a t i o n I m a g e s = new Object ( ) ;179 var i s I p h o n e = n a v i g a t o r . u s e r A g e n t . i n d e x O f ( ’ iPhone ’ ) >= 0 | | n a v i g a t o r .

u s e r A g e n t . i n d e x O f ( ’ iPad ’ ) >= 0;

102

180 var g e s t u r e C l a s s i f i e r = n u l l ;181 var s t a f f S i z e = 160;182 var advancedOpt ionsShown = f a l s e ;183 var db = new CouchDB ( ’ q u i l ’ ) ;184 var inkRowIndex = 0;185 var inkRows = [ ] ;186 var t e s t I n k L o a d e d = f a l s e ;187188189 c o n s t USE CANVAS SVG = f a l s e ;190 / / var ns = ” h t t p : / / www. w3 . org / 1 9 9 9 / xhtml ” ;191192193 f u n c t i o n handleOnLoad ( )194 {195 var handleCanvasLoad = f u n c t i o n ( canvasDraw )196 {197 / / canvasDraw . s e t S c a l e ( g l o b a l S c a l e ) ;198 / / d r a w I n k C o l o r P a l e t t e ( ) ;199 }200 / / a l e r t ( g l o b a l S c a l e ) ;201202203 s t a f f M a r g i n L e f t = 10;204 s t a f f M a r g i n T o p = 100;205 s t a f f O f f s e t P o i n t = new P o i n t ( s t a f f M a r g i n L e f t , s t a f f M a r g i n T o p )206 g e s t u r e C l a s s i f i e r = new G e s t u r e C l a s s i f i e r ( handleCanvasLoad , s t a f f S i z e ,

s t a f f O f f s e t P o i n t ) ;207208209 var s t a f f R a n g e = document . g e t E l e m e n t B y I d ( ” s t a f f S i z e R a n g e ” ) ;210 s t a f f R a n g e . min = S t a f f . STAFF SIZES [ 0 ] ;211 s t a f f R a n g e . max = S t a f f . STAFF SIZES [ S t a f f . STAFF SIZES . l e n g t h − 1 ] ;212 s t a f f R a n g e . va lue = s t a f f S i z e ;213214215 / / show t e s t i n g o p t i o n s216 i f ( DEBUG LEVEL > 0)217 {218 / / document . g e t E l e m e n t B y I d ( ” t e s t i n g O p t i o n s ” ) . s t y l e . v i s i b i l i t y = ”

v i s i b l e ” ;219 }220 }221222 f u n c t i o n c h a n g e I n k C o l o r ( )223 {224 var r = document . g e t E l e m e n t B y I d ( ” inkColo rRed ” ) . va lue ;225 var g = document . g e t E l e m e n t B y I d ( ” i n k C o l o r G r e e n ” ) . va lue ;226 var b = document . g e t E l e m e n t B y I d ( ” i n k C o l o r B l u e ” ) . va lue ;227 var a = document . g e t E l e m e n t B y I d ( ” inkAlpha ” ) . va lue / 100;228229 g e s t u r e C l a s s i f i e r . getCanvasDraw ( ) . g e t P e n c i l ( ) . s e t I n k C o l o r ( r , g , b , a ) ;230 d r a w I n k C o l o r P a l e t t e ( ) ;231 }

103

232233 f u n c t i o n d r a w I n k C o l o r P a l e t t e ( )234 {235 var p a l e t t e C a n v a s = document . g e t E l e m e n t B y I d ( ” i n k C o l o r C a n v a s ” ) ;236 i f ( p a l e t t e C a n v a s )237 {238 U t i l s . c l e a r C a n v a s ( p a l e t t e C a n v a s ) ;239 var p a l e t t e C o n t e x t = p a l e t t e C a n v a s . g e t C o n t e x t ( ” 2d ” ) ;240 p a l e t t e C o n t e x t . f i l l S t y l e = g e s t u r e C l a s s i f i e r . getCanvasDraw ( ) .

g e t P e n c i l ( ) . g e t I n k C o l o r ( ) ;241 p a l e t t e C o n t e x t . f i l l R e c t ( 0 , 0 , p a l e t t e C a n v a s . width , p a l e t t e C a n v a s .

h e i g h t ) ;242 }243 }244245 f u n c t i o n showHideAdvancedOpt ions ( )246 {247 advancedOpt ionsShown = ! advancedOpt ionsShown ;248249 i f ( advancedOpt ionsShown )250 {251 document . g e t E l e m e n t B y I d ( ” a d v a n c e d O p t i o n s ” ) . s t y l e . v i s i b i l i t y = ”

v i s i b l e ” ;252 document . g e t E l e m e n t B y I d ( ” showHideAdvancedOpt ionsLink ” ) . innerHTML =

” l e s s o p t i o n s ” ;253 }254 e l s e255 {256 document . g e t E l e m e n t B y I d ( ” a d v a n c e d O p t i o n s ” ) . s t y l e . v i s i b i l i t y = ”

h i dd en ” ;257 document . g e t E l e m e n t B y I d ( ” showHideAdvancedOpt ionsLink ” ) . innerHTML =

” more o p t i o n s &h e l l i p ; ” ;258 }259260 }261262 f u n c t i o n c l e a r A l l ( )263 {264 / / var c o n f i r m a t i o n = c o n f i r m ( ” Are you s u r e you want c l e a r t h e page ? ” ) ;265 i f ( t r u e )266 {267 g e s t u r e C l a s s i f i e r . getCanvasDraw ( ) . g e t P e n c i l ( ) . c l e a r A l l ( ) ;268 }269270 r e t u r n f a l s e ;271 }272273 f u n c t i o n l o a d I n k ( )274 {275 inkRows = db . v iew ( ” i n k / a l l ” ) . rows ;276 inkRowIndex = 0;277 t e s t I n k L o a d e d = t r u e ;278 d i s p l a y I n k ( ) ;279 }

104

280281 f u n c t i o n n e x t I n k ( )282 {283 i f ( ! t e s t I n k L o a d e d )284 {285 l o a d I n k ( ) ;286 r e t u r n ;287 }288289 inkRowIndex ++;290 i f ( inkRowIndex >= inkRows . l e n g t h )291 {292 inkRowIndex = inkRows . l e n g t h − 1;293 }294 d i s p l a y I n k ( ) ;295 }296297 f u n c t i o n p r e v I n k ( )298 {299 i f ( ! t e s t I n k L o a d e d )300 {301 l o a d I n k ( ) ;302 r e t u r n ;303 }304 inkRowIndex −− ;305 i f ( inkRowIndex <= 0)306 {307 inkRowIndex = 0 ;308 }309 d i s p l a y I n k ( ) ;310 }311312 f u n c t i o n d i s p l a y I n k ( )313 {314 / / u p d a t e u s e r f e e d b a c k315 var t e s t S t e p = document . ge tE lemen tById ( ” t e s t S t e p ” ) ;316 t e s t S t e p . innerHTML = ( inkRowIndex + 1) + ” of ” + inkRows . l e n g t h + ” ”

+ inkRows [ inkRowIndex ] . va lue . i d ;317318 var inkRow = inkRows [ inkRowIndex ] ;319 g e s t u r e C l a s s i f i e r . getCanvasDraw ( ) . g e t P e n c i l ( ) . c l e a r A l l ( ) ;320 g e s t u r e C l a s s i f i e r . getCanvasDraw ( ) . g e t P e n c i l ( ) . r e p l a y I n k ( inkRow . va lue ) ;321322 / / d i s p l a y p r e v i o u s image323 var t e s t I m a g e D i v = document . ge tE lemen tById ( ” t e s t I m a g e ” ) ;324 var t e s t I m a g e = new Image ( ) ;325 i f ( ” imageData ” i n inkRows [ inkRowIndex ] . va lue )326 {327 t e s t I m a g e . s r c = inkRows [ inkRowIndex ] . va lue . imageData ;328 }329330 t e s t I m a g e D i v . innerHTML = ” ” ;331 t e s t I m a g e D i v . appendCh i ld ( t e s t I m a g e ) ;332 i f ( a u t o P l a y T e s t s ( ) && inkRowIndex < inkRows . l e n g t h − 1)

105

333 {334 inkRowIndex ++;335 s e t T i m e o u t ( d i s p l a y I n k , INK PLAYBACK INTERVAL MS) ;336 }337 }338339 / / t e s t i n k s c a l i n g and r e g i s t r a t i o n by c y c l i n g t h r o u g h a l l i n k and a t t e m p t

t o c l a s s i f y i t a g a i n s t i t s e l f340 f u n c t i o n s e l f I n k T e s t ( )341 {342 / / c y c l e t h r o u g h s c a l e s343 f o r ( var i = S t a f f . STAFF SIZES . l e n g t h ; i > 0 ; i −−)344 {345 g e s t u r e C l a s s i f i e r . getCanvasDraw ( ) . g e t P e n c i l ( ) .

r e s i z e T o N e a r e s t S t a f f S i z e ( S t a f f . STAFF SIZES [ i ] ) ;346 g e s t u r e C l a s s i f i e r . s e l f M a t c h ( S t a f f . STAFF SIZES [ i ] ) ;347 }348349 }350 f u n c t i o n s a v e I n k ( )351 {352 v a r i n k = g e s t u r e C l a s s i f i e r . getCanvasDraw ( ) . g e t P e n c i l ( ) . i n k . s e r i a l i z e

( ) ;353 v a r r e c o g n i z e d S y m b o l s = g e s t u r e C l a s s i f i e r . getCanvasDraw ( ) . g e t S t a f f ( ) .

s e r i a l i z e S y m b o l s ( ) ;354 / / todo , add b i tmap s n a p s h o t o f r e c o g n i t i o n355 v a r c = g e s t u r e C l a s s i f i e r . getCanvasDraw ( ) . ge tCanvas ( ) ;356 v a r imageData = c . toDataURL ( ) ;357358 / / c o n s o l e . l o g ( imageData ) ;359 i n k . imageData = imageData ;360 i n k . r e c o g n i z e d S y m b o l s = r e c o g n i z e d S y m b o l s ;361 i n k . v e r s i o n = CURRENT INK VERSION ;362 i f ( i n k )363 {364 db . s ave ( i n k ) ;365 }366367 }368369 f u n c t i o n a u t o P l a y T e s t s ( )370 {371 r e t u r n document . ge tE lemen tById ( ” au top l ayCheckbox ” ) . checked ;372 }373 f u n c t i o n useAutoLearn ( )374 {375 r e t u r n document . ge tE lemen tById ( ” a u t o l e a r n C h e c k b o x ” ) . checked ;376 }377 f u n c t i o n useSca leTes tMode ( )378 {379 r e t u r n document . ge tE lemen tById ( ” sca leTes tModeCheckbox ” ) . checked ;380 }381382 f u n c t i o n outputCanvasSVG ( )

106

383 {384 c o n s o l e . l o g ( g e s t u r e C l a s s i f i e r . getCanvasDraw ( ) . g e t C o n t e x t ( ) . getSVG ( ) ) ;385 }386387388 −−>389 < / s c r i p t>390391 < / head>392 <body onload=” handleOnLoad ( ) ; ”>393 <div id =” c o n t a i n e r ”>394 <c an va s id =” canvasView ” width=” 1000 ” h e i g h t =” 500 ”>< / c a nv as>395 <c an va s id =” canvas1 ” width=” 300 ” h e i g h t =” 340 ”>< / c a nv as>396 <c an va s id =” canvas2 ” width=” 300 ” h e i g h t =” 340 ”>< / c a nv as>397 < / div>398 <div id =” c o n t r o l s ”>399 <form id =” o p t i o n s ”>400 <img s r c =” media / i c o n s h a r p h a n d w r i t t e n . png ” width=” 11 ” h e i g h t =

” 20 ” a l t =” h a n d w r i t t e n ” />401 <input type =” checkbox ” o n c l i c k =” g e s t u r e C l a s s i f i e r .

getCanvasDraw ( ) . g e t P e n c i l ( ) . t ogg leShowInk ( ) ; ” va lue =” showi n k ? ” checked=” t r u e ” />

402 <div c l a s s =” s p a c e r H o r i z o n t a l ”>&nbsp ;< / div>403 <img s r c =” media / i c o n s h a r p t y p e s e t . png ” width=” 8 ” h e i g h t =” 20 ”

a l t =” t y p e s e t ” />404 <input type =” checkbox ” o n c l i c k =” g e s t u r e C l a s s i f i e r .

getCanvasDraw ( ) . g e t P e n c i l ( ) . toggleShowSymbols ( ) ; ” va lue =”show symbols ? ” checked=” t r u e ” />

405 <br /><br />406407 <input type =” b u t t o n ” o n c l i c k =” g e s t u r e C l a s s i f i e r . getCanvasDraw

( ) . g e t P e n c i l ( ) . r edrawCanvas (−1) ; ” va lue =”−” />408 <input id =” s t a f f S i z e R a n g e ” type =” r a n g e ” s t e p =” 1 ” min=” 11 ” max=

” 160 ” va lue =” 128 ” onchange=” g e s t u r e C l a s s i f i e r .getCanvasDraw ( ) . g e t P e n c i l ( ) . r e s i z e T o N e a r e s t S t a f f S i z e ( t h i s .v a l u e ) ; ” s i z e =” 8 ” />

409 <input type =” b u t t o n ” o n c l i c k =” g e s t u r e C l a s s i f i e r . getCanvasDraw( ) . g e t P e n c i l ( ) . r edrawCanvas ( 1 ) ; ” va lue =”+” />

410 <br />411 <!−−advanced o p t i o n s −−>412 <br />413 <a hre f = ” # ” o n c l i c k =” showHideAdvancedOpt ions ( ) ; ” id =”

showHideAdvancedOpt ionsLink ”>more o p t i o n s &h e l l i p ;< / a>414 <div id = ” a d v a n c e d O p t i o n s ”>415 <input type =” b u t t o n ” o n c l i c k =” c l e a r A l l ( ) ; ” va lue =” c l e a r

a l l ” /><br />416 Ink Colo r<br />417 Red<input id =” inkColo rRed ” type =” r a n g e ” s t e p =” 1 ” min=” 0 ”

max=” 255 ” va lue =” 0 ” onchange=” c h a n g e I n k C o l o r ( ) ; ” s i z e =” 8 ” />

418 <br />419 Green<input id =” i n k C o l o r G r e e n ” type =” r a n g e ” s t e p =” 1 ” min=”

0 ” max=” 255 ” va lue =” 0 ” onchange=” c h a n g e I n k C o l o r ( ) ; ”s i z e =” 8 ” />

107

420 <br />421 Blue<input id =” i n k C o l o r B l u e ” type =” r a n g e ” s t e p =” 1 ” min=” 0 ”

max=” 255 ” va lue =” 0 ” onchange=” c h a n g e I n k C o l o r ( ) ; ” s i z e=” 8 ” />

422 <br />423 O p a c i t y<input id =” inkAlpha ” type =” r a n g e ” s t e p =” 1 ” min=” 0 ”

max=” 100 ” va lue =” 100 ” onchange=” c h a n g e I n k C o l o r ( ) ; ”s i z e =” 8 ” />

424 <br />425 <c an va s id =” i n k C o l o r C a n v a s ” width=” 20 ” h e i g h t =” 20 ”>< /

c an va s>426 < / div>427 <div id = ” t e s t i n g O p t i o n s ”>428 <input type =” b u t t o n ” o n c l i c k =” l o a d I n k ( ) ; ” va lue =” l o a d i n k ”

/>429 <input type =” b u t t o n ” o n c l i c k =” s a v e I n k ( ) ; ” va lue =” save i n k ”

/>430 <input type =” checkbox ” va lue =” a u t o p l a y t e s t s ” checked=”

t r u e ” id =” au top l ayCheckbox ” />a u t o p l a y431 <input type =” b u t t o n ” o n c l i c k =” p r e v I n k ( ) ; ” va lue =” p r e v i o u s ”

/>432 <span id =” t e s t S t e p ”>< / span>433 <input type =” b u t t o n ” o n c l i c k =” n e x t I n k ( ) ; ” va lue =” n e x t ” />434 <br />435 <input type =” checkbox ” va lue =” a u t o l e a r n ” checked id =”

a u t o l e a r n C h e c k b o x ” />a u t o l e a r n from u s e r f e e b a c k436 <br />437 <input type =” checkbox ” va lue =” sca l eTes tMode ” id =”

sca leTes tModeCheckbox ” />s c a l e t e s t mode438 <br />439 <input type =” b u t t o n ” o n c l i c k =” s e l f I n k T e s t ( ) ; ” va lue =”

s e l f I n k T e s t ” />440 <br />441 p r e v i o u s s n a p s h o t image :442 <br />443 <div id =” t e s t I m a g e ” h e i g h t =” 300 ” width=” 1000 ”>< / div>444 <input type =” b u t t o n ” o n c l i c k =” outputCanvasSVG ( ) ; ” va lue =”

o u t p u t SVG” />445 < / div>446 < / form>447 < / div>448 <c an va s id = ” symbolOpt ions ” h e i g h t =” 60 ” width=” 170 ”>< / c a nv as>449 <div c l a s s =” s p a c e r V e r t i c a l ” />450 < / body>451 < / html>

Training

../training.html1 <!DOCTYPE html PUBLIC ” − / /W3C / / DTD XHTML 1 . 0 S t r i c t / / EN” ” h t t p : / / www. w3 . org / TR

/ xhtml1 /DTD/ xhtml1− s t r i c t . d t d ”>2 <html xmlns=” h t t p : / / www. w3 . org / 1 9 9 9 / xhtml ”>34 <head>

108

5 <meta name=” v i e w p o r t ” c o n t e n t =” wid th = dev i ce−width , u se r−s c a l a b l e =no ” />6 <meta name=” app le−mobile−web−app−c a p a b l e ” c o n t e n t =” yes ” />7 < l i n k r e l =” app le−touch−i c o n ” hre f =” media / i q u i l i c o n . png ”>8 < t i t l e>q u i l< / t i t l e>9

10 <!−− u t i l i t i e s −−>11 <s c r i p t type =” t e x t / j a v a s c r i p t ” s r c =”common / U t i l s . j s ”>< / s c r i p t>12 <s c r i p t type =” t e x t / j a v a s c r i p t ” s r c =”common / XmlHt tpReques t . j s ”>< / s c r i p t>13 <s c r i p t type =” t e x t / j a v a s c r i p t ” s r c =”common / J son . j s ”>< / s c r i p t>14 <s c r i p t type =” t e x t / j a v a s c r i p t ” s r c =”common / j s o n 2 . j s ”>< / s c r i p t>1516 <!−− geomet ry −−>17 <s c r i p t type =” t e x t / j a v a s c r i p t ” s r c =”common / P o i n t . j s ”>< / s c r i p t>18 <s c r i p t type =” t e x t / j a v a s c r i p t ” s r c =”common / Polygon . j s ”>< / s c r i p t>19 <s c r i p t type =” t e x t / j a v a s c r i p t ” s r c =”common / P o l y g o n I n t e r s e c t . j s ”>< / s c r i p t>2021 <!−− drawing −−>22 <s c r i p t type =” t e x t / j a v a s c r i p t ” s r c =” CanvasDraw . j s ”>< / s c r i p t>23 <s c r i p t type =” t e x t / j a v a s c r i p t ” s r c =” P e n c i l . j s ”>< / s c r i p t>24 <s c r i p t type =” t e x t / j a v a s c r i p t ” s r c =” Ink . j s ”>< / s c r i p t>2526 <!−− g e s t u r e r e c o g n i t i o n −−>27 <s c r i p t type =” t e x t / j a v a s c r i p t ” s r c =” G e s t u r e . j s ”>< / s c r i p t>28 <s c r i p t type =” t e x t / j a v a s c r i p t ” s r c =” G e s t u r e C l a s s i f i e r . j s ”>< / s c r i p t>2930 <!−− r a s t r a l , t h e n o t a t i o n r e n d e r i n g e n g i n e −−>3132 <!−−f o n t embeds −−>33 < l i n k r e l =” s t y l e s h e e t ” hre f =” r a s t r a l / f o n t s / s t y l e s h e e t . c s s ” type =” t e x t / c s s ”

c h a r s e t =” u t f −8”>3435 <s c r i p t type =” t e x t / j a v a s c r i p t ”>36 / / d e f i n e g l o b a l f e t amap v a r b e f o r e l o a d i n g t h e l i l y p o n d f e t a f o n t maps37 / / t h i s i s r e a l l y a C++ f i l e , b u t w i l l i n t e r p r e t f i n e as j a v a s c r i p t38 / / so long as t h e v a r f e t aMap i s d e f i n e d f i r s t a s an o b j e c t39 v a r f e t aMap = new O b j e c t ( ) ;40 / / l o a d f e t a ( emmanta le r ) c h a r a c t e r mappings41 < / s c r i p t>42 <s c r i p t type =” t e x t / j a v a s c r i p t ” s r c =” r a s t r a l / f e t a L i s t . j s ”>< / s c r i p t>43 <s c r i p t type =” t e x t / j a v a s c r i p t ” s r c =” r a s t r a l / R a s t r a l . j s ”>< / s c r i p t>44 <s c r i p t type =” t e x t / j a v a s c r i p t ” s r c =” r a s t r a l / S t a f f . j s ”>< / s c r i p t>45 <s c r i p t type =” t e x t / j a v a s c r i p t ” s r c =” r a s t r a l / C l e f . j s ”>< / s c r i p t>46474849 <!−− t r a i n i n g −−>50 <s c r i p t type =” t e x t / j a v a s c r i p t ” s r c =” T r a i n e r . j s ”>< / s c r i p t>5152 <s t y l e type =” t e x t / c s s ”>53 <! −54 ∗ {55 −webki t−use r−s e l e c t : none ;56 }57 ∗ {

109

58 −webki t−touch−c a l l o u t : none ;59 }60 ∗ {61 −webki t−t ap−h i g h l i g h t −c o l o r : r gba ( 0 , 0 , 0 , 0 ) ;62 }63 ∗ {64 −webki t−t e x t−s i z e −a d j u s t : none ;65 }66 # canvasView67 {68 border : 1px s o l i d #000 ;69 }70 −−>71 < / s t y l e>727374 <s c r i p t type =” t e x t / j a v a s c r i p t ”>75 / / g l o b a l76 c o n s t USE CANVAS SVG = f a l s e ;77 var t r a i n e r = n u l l ;78 var i s I p h o n e = n a v i g a t o r . u s e r A g e n t . i n d e x O f ( ’ iPhone ’ ) >= 0;79 var symbolNames = R a s t r a l . ALL SYMBOLS ;80 var s t a f f S i z e = 112;81 f u n c t i o n handleOnLoad ( )82 {83 t r a i n e r = new T r a i n e r ( ” t r a i n i n g O u t p u t ” , s t a f f S i z e ) ;84 }8586 < / s c r i p t>8788 < / head>89 <body onload=” handleOnLoad ( ) ; ”>90 <div id =” c o n t a i n e r ”>91 <c an va s id =” canvasView ” width=” 300 ” h e i g h t =” 340 ”>< / c a nv as>92 < / div>93 <form>94 <input type =” b u t t o n ” va lue =” back ” o n c l i c k =” t r a i n e r . p r e v i o u s ( ) ” />95 <input type =” b u t t o n ” va lue =” r e d i s p l a y ” o n c l i c k =” t r a i n e r . t r a i n ( ) ” />96 < / form>97 I n s t r u c t i o n s : draw each symbol<br />98 <div id =” t r a i n i n g O u t p u t ”>99 < / div>

100 < / body>101 < / html>

110

11 Presentation SlidesThese slides can also be found in HTML format on the Word Wide Web at ¡http://slides.iquil.com/¿

Figure 15: Slide 1

111

Figure 16: Slide 2

Figure 17: Slide 3

112

Figure 18: Slide 4

Figure 19: Slide 5

113

Figure 20: Slide 6

Figure 21: Slide 7

114

Figure 22: Slide 8

Figure 23: Slide 9

115

Figure 24: Slide 10

116

Figure 25: Slide 11

Figure 26: Slide 12

117

Figure 27: Slide 13

Figure 28: Slide 14

118

Figure 29: Slide 15

Figure 30: Slide 16

119

Figure 31: Slide 17

Figure 32: Slide 18

120

12 AcknowledgementsI would like to extend my deepest thanks to Professors Christopher Raphael and Larry Yaeger fortheir guidance on this project. I would have been content to be a fly on the wall of a room inwhich these men conversed about pretty much anything. But, as it was, they were talking aboutsomething of the deepest interest and I was part of the conversation.

I am grateful to my wife for reminding me on a daily basis of her intense love of music andher intense hatred of new technology.

I would like to extend my thanks to Donald Byrd, who has taught me a tremendous amount aboutmusic notation and music notation software. I will remember fondly our frequent discussions inthe bowels of Cook Music Library.

While working with Joe Berkovitz on his music notation editor Noteflight, I learned countlesslessons about writing software for music notation. During this period, he was a great teacher tome, even though that was not in his job description. The depth and breadth of Joe’s knowledge andability would make it next to impossible to write such a job description.

Thanks to everyone who has given the time to provide insight and feedback on this project, es-pecially the HCI/design students and faculty.

My undergraduate capstone students provided me with constant inspiration through their efforts;students are often the best teachers. I am grateful for the tremendous wealth of code examples andtools available on the internet.

Finally, I would like to extend thanks and apologies to anyone else I may have inadvertently leftoff this list.

121