Click here for Tutorial Edit the code below, then click anywhere outside of textarea to update: Click here to draw your own digits! var testfont=new function() { // Welcome to h-bar tutoring's animaclock tutorial! /* Read the comments below for a step-by-step guide to creating a custom clock; Enjoy! - Ronnie, April 17 2015 */ /* / _ / __ | / / |/ / __/__ /| / / / | ___ / /___ | / \ / / \ www.HbarTutoring.com |/ | / / / | | / / / [hbar] = [energy] x [time] | | / _/ \_/ _| |_/ */ // <--- In javaScript, the "double slash" to the left tells the computer to ignore the line of code; // as a human, you should not ignore it! To encase a block of comments, use /* */ /* The following code is all encased in a single function, called "testfont"; function: code the computer can call in order to process some information that changes over time. The variable "this" carries all the font information back to animaclock.com to render your clock; variable: a storage container for information. variables should have a short and clear names */ // Now we are inside the function; // Everything between the "{" above and the "}" at the bottom is the function. Scroll to the bottom now to see the end of the function. Don't worry: giving away the ending doesn't ruin it. // Editing the code: // The Drawing Area /* The first group of commands we'll run will set up the drawing area. All of the rendering is done using HTML5's canvas; we will learn more about using the canvas in a later class. Adjust the parameters in the lines of code below to explore how they affect the spacing of the clock within the canvas; for example, in the first line, try changing it to read "this.digitPad = 100;" or: this.digitPad = -20; have fun with it! When you are done, click anywhere outside of this textbox to tell animaclock.com it's time to update the function; we'll go over how to save it later. Do some experiments to figure out how the variables affect the animation */ // ** change the code here!! ** this.digitPad = 10; this.groupPad = 20; this.heightFrac = 0.7; this.widthFrac = 01; // Good job! // If you are happy with how your clock looks so far, then proceed with the tutorial. // The Seconds Hand /* The next variable affects the size and position of the seconds display. Now, you will manipulate two different kinds of data together to achieve your result. string: information in the form of a word. must be given in "quotation marks" (so called because the letters are strung together, specifying its meaning) float: information in the form of a number. (so called because the decimal place can bob around in the number, specifying its order of magnitude) Each data type is called a "property" of the "object" this.secondsScale Change the properties to customize your font val sets the fraction of the canvas Try anything between 0 and 1 for a conventional type of seconds hand val:0.8 Try anything outside of 0 and 1 to explore this variable. pos sets the position. Try 'top', 'middle', or 'bottom' anything else reverts to 'top' */ // ** change the code here!! ** this.hoursScale= { val: 0 , pos: 'top' , offset:[-3,-.45] }; this.minutesScale= { val: 0 , pos: 'top' , offset:[-1.57,0] }; this.secondsScale= { val: 1.4 , pos: 'middle' , offset:[2,0.0] }; this.ampmShow = false; // The Colors /* Color has three dimensions: Red, Green, and Blue Therefore, we will use an "array" to hold each value array: a list of data values of the same type Color is an integer between 0 and 255 anything else rounds to the nearest integer in the domain */ // the background // ** change the code here!! ** hbarBlue = [5, 140, 180]; this.bgColor = hbarBlue; // the background layer for the digits // ** change the code here!! ** this.baseColor = [ 0, 0, 0 ]; // the layer in front of the base // This variable has two properties: one sets the color between animations // and the other sets the color during animations // ** change the code here!! ** hbarGold1 = [ 230, 200, 0 ]; hbarGold2 = [ 250, 145, 0 ]; this.partColor = { a: hbarGold1, b: hbarGold2}; // the seconds hand base layer // ** change the code here!! ** this.secondColor = this.baseColor; // the colons // ** change the code here!! ** hbarWhite = [ 250, 250, 250 ]; this.colonColors = { a: hbarGold2, b: hbarGold1 }; // another color variable that we will use later to set the transitions // ** change the code here!! ** var trans0={a: hbarGold2, b:hbarGold1}; // The Sizes // These variables are pixel values that set the width of the base and parts // ** change the code here!! ** this.baseLineWidth = 0; this.partLineWidth = 6; this.colonRadius = 4; // The timing // ** change the code here!! ** this.beginAniTime = 0; this.endAniTime = 1; // other, miscellaneous variables // ** change the code here!! ** this.lineCap = 'round'; this.baseInFront = false; this.pulsate = false; this.disableSlowest = true; // Congratulations! // You are done with the first part of the tutorial /* In the next part, you will learn how to control the transitions */ this.t = new Array(); for (var i=0;i<=50;i++) this.t[i] = new Array(); this.t =[]; for(var i=0;i<=50;i++){this.t[i] = [];} /* */ this.t[0].push({ src: 0, type: 'shift', mov:0, via: 'acc', to: 0 }); this.t[0].push({ src: 1, type: 'shift', mov:0, via: 'acc', to: 1 }); this.t[0].push({ src: 2, type: 'shift', mov:0, via: 'acc', to: 2 }); this.t[0].push({ src: 3, type: 'shift', mov:0, via: 'acc', to: 3 }); this.t[0].push({ src: 4, type: 'shift', mov:0, via: 'acc', to: 4 }); this.t[0].push({ src: 5, type: 'shift', mov:0, via: 'acc', to: 5 }); this.t[0].push({ src: 6, type: 'shift', mov:0, via: 'acc', to: 6 }); this.t[0].push({ src: 7, type: 'shift', mov:0, via: 'acc', to: 7 }); this.t[0].push({ src: 8, type: 'shift', mov:0, via: 'acc', to: 8 }); this.t[0].push({ src: 9, type: 'shift', mov:0, via: 'acc', to: 9 }); this.t[0].push({ src: 10, type: 'shift', mov:0, via: 'acc', to: 10 }); this.t[0].push({ src: 11, type: 'shift', mov:0, via: 'acc', to: 11 }); this.t[1].push({ src: 0, type: 'shift', mov:0, via: 'acc', to: 0 }); this.t[1].push({ src: 1, type: 'shift', mov:0, via: 'acc', to: 1 }); this.t[1].push({ src: 2, type: 'shift', mov:0, via: 'acc', to: 2 }); this.t[1].push({ src: 3, type: 'shift', mov:0, via: 'acc', to: 3 }); this.t[1].push({ src: 4, type: 'shift', mov:0, via: 'acc', to: 4 }); this.t[1].push({ src: 5, type: 'shift', mov:0, via: 'acc', to: 5 }); this.t[1].push({ src: 6, type: 'shift', mov:0, via: 'acc', to: 6 }); this.t[1].push({ src: 7, type: 'shift', mov:0, via: 'acc', to: 7 }); this.t[1].push({ src: 8, type: 'shift', mov:0, via: 'acc', to: 8 }); this.t[1].push({ src: 9, type: 'shift', mov:0, via: 'acc', to: 9 }); this.t[1].push({ src: 10, type: 'shift', mov:0, via: 'acc', to: 10 }); this.t[1].push({ src: 11, type: 'shift', mov:0, via: 'acc', to: 11 }); this.t[2].push({ src: 0, type: 'shift', mov:0, via: 'acc', to: 0 }); this.t[2].push({ src: 1, type: 'shift', mov:0, via: 'acc', to: 1 }); this.t[2].push({ src: 2, type: 'shift', mov:0, via: 'acc', to: 2 }); this.t[2].push({ src: 3, type: 'shift', mov:0, via: 'acc', to: 3 }); this.t[2].push({ src: 4, type: 'shift', mov:0, via: 'acc', to: 4 }); this.t[2].push({ src: 5, type: 'shift', mov:0, via: 'acc', to: 5 }); this.t[2].push({ src: 6, type: 'shift', mov:0, via: 'acc', to: 6 }); this.t[2].push({ src: 7, type: 'shift', mov:0, via: 'acc', to: 7 }); this.t[2].push({ src: 8, type: 'shift', mov:0, via: 'acc', to: 8 }); this.t[2].push({ src: 9, type: 'shift', mov:0, via: 'acc', to: 9 }); this.t[2].push({ src: 10, type: 'shift', mov:0, via: 'acc', to: 10 }); this.t[2].push({ src: 11, type: 'shift', mov:0, via: 'acc', to: 11 }); this.t[3].push({ src: 0, type: 'shift', mov:0, via: 'acc', to: 0 }); this.t[3].push({ src: 1, type: 'shift', mov:0, via: 'acc', to: 1 }); this.t[3].push({ src: 2, type: 'shift', mov:0, via: 'acc', to: 2 }); this.t[3].push({ src: 3, type: 'shift', mov:0, via: 'acc', to: 3 }); this.t[3].push({ src: 4, type: 'shift', mov:0, via: 'acc', to: 4 }); this.t[3].push({ src: 5, type: 'shift', mov:0, via: 'acc', to: 5 }); this.t[3].push({ src: 6, type: 'shift', mov:0, via: 'acc', to: 6 }); this.t[3].push({ src: 7, type: 'shift', mov:0, via: 'acc', to: 7 }); this.t[3].push({ src: 8, type: 'shift', mov:0, via: 'acc', to: 8 }); this.t[3].push({ src: 9, type: 'shift', mov:0, via: 'acc', to: 9 }); this.t[3].push({ src: 10, type: 'shift', mov:0, via: 'acc', to: 10 }); this.t[3].push({ src: 11, type: 'shift', mov:0, via: 'acc', to: 11 }); this.t[4].push({ src: 0, type: 'shift', mov:0, via: 'acc', to: 0 }); this.t[4].push({ src: 1, type: 'shift', mov:0, via: 'acc', to: 1 }); this.t[4].push({ src: 2, type: 'shift', mov:0, via: 'acc', to: 2 }); this.t[4].push({ src: 3, type: 'shift', mov:0, via: 'acc', to: 3 }); this.t[4].push({ src: 4, type: 'shift', mov:0, via: 'acc', to: 4 }); this.t[4].push({ src: 5, type: 'shift', mov:0, via: 'acc', to: 5 }); this.t[4].push({ src: 6, type: 'shift', mov:0, via: 'acc', to: 6 }); this.t[4].push({ src: 7, type: 'shift', mov:0, via: 'acc', to: 7 }); this.t[4].push({ src: 8, type: 'shift', mov:0, via: 'acc', to: 8 }); this.t[4].push({ src: 9, type: 'shift', mov:0, via: 'acc', to: 9 }); this.t[4].push({ src: 10, type: 'shift', mov:0, via: 'acc', to: 10 }); this.t[4].push({ src: 11, type: 'shift', mov:0, via: 'acc', to: 11 }); this.t[5].push({ src: 0, type: 'shift', mov:0, via: 'acc', to: 0 }); this.t[5].push({ src: 1, type: 'shift', mov:0, via: 'acc', to: 1 }); this.t[5].push({ src: 2, type: 'shift', mov:0, via: 'acc', to: 2 }); this.t[5].push({ src: 3, type: 'shift', mov:0, via: 'acc', to: 3 }); this.t[5].push({ src: 4, type: 'shift', mov:0, via: 'acc', to: 4 }); this.t[5].push({ src: 5, type: 'shift', mov:0, via: 'acc', to: 5 }); this.t[5].push({ src: 6, type: 'shift', mov:0, via: 'acc', to: 6 }); this.t[5].push({ src: 7, type: 'shift', mov:0, via: 'acc', to: 7 }); this.t[5].push({ src: 8, type: 'shift', mov:0, via: 'acc', to: 8 }); this.t[5].push({ src: 9, type: 'shift', mov:0, via: 'acc', to: 9 }); this.t[5].push({ src: 10, type: 'shift', mov:0, via: 'acc', to: 10 }); this.t[5].push({ src: 11, type: 'shift', mov:0, via: 'acc', to: 11 }); this.t[6].push({ src: 0, type: 'shift', mov:0, via: 'acc', to: 0 }); this.t[6].push({ src: 1, type: 'shift', mov:0, via: 'acc', to: 1 }); this.t[6].push({ src: 2, type: 'shift', mov:0, via: 'acc', to: 2 }); this.t[6].push({ src: 3, type: 'shift', mov:0, via: 'acc', to: 3 }); this.t[6].push({ src: 4, type: 'shift', mov:0, via: 'acc', to: 4 }); this.t[6].push({ src: 5, type: 'shift', mov:0, via: 'acc', to: 5 }); this.t[6].push({ src: 6, type: 'shift', mov:0, via: 'acc', to: 6 }); this.t[6].push({ src: 7, type: 'shift', mov:0, via: 'acc', to: 7 }); this.t[6].push({ src: 8, type: 'shift', mov:0, via: 'acc', to: 8 }); this.t[6].push({ src: 9, type: 'shift', mov:0, via: 'acc', to: 9 }); this.t[6].push({ src: 10, type: 'shift', mov:0, via: 'acc', to: 10 }); this.t[6].push({ src: 11, type: 'shift', mov:0, via: 'acc', to: 11 }); this.t[7].push({ src: 0, type: 'shift', mov:0, via: 'acc', to: 0 }); this.t[7].push({ src: 1, type: 'shift', mov:0, via: 'acc', to: 1 }); this.t[7].push({ src: 2, type: 'shift', mov:0, via: 'acc', to: 2 }); this.t[7].push({ src: 3, type: 'shift', mov:0, via: 'acc', to: 3 }); this.t[7].push({ src: 4, type: 'shift', mov:0, via: 'acc', to: 4 }); this.t[7].push({ src: 5, type: 'shift', mov:0, via: 'acc', to: 5 }); this.t[7].push({ src: 6, type: 'shift', mov:0, via: 'acc', to: 6 }); this.t[7].push({ src: 7, type: 'shift', mov:0, via: 'acc', to: 7 }); this.t[7].push({ src: 8, type: 'shift', mov:0, via: 'acc', to: 8 }); this.t[7].push({ src: 9, type: 'shift', mov:0, via: 'acc', to: 9 }); this.t[7].push({ src: 10, type: 'shift', mov:0, via: 'acc', to: 10 }); this.t[7].push({ src: 11, type: 'shift', mov:0, via: 'acc', to: 11 }); this.t[8].push({ src: 0, type: 'shift', mov:0, via: 'acc', to: 0 }); this.t[8].push({ src: 1, type: 'shift', mov:0, via: 'acc', to: 1 }); this.t[8].push({ src: 2, type: 'shift', mov:0, via: 'acc', to: 2 }); this.t[8].push({ src: 3, type: 'shift', mov:0, via: 'acc', to: 3 }); this.t[8].push({ src: 4, type: 'shift', mov:0, via: 'acc', to: 4 }); this.t[8].push({ src: 5, type: 'shift', mov:0, via: 'acc', to: 5 }); this.t[8].push({ src: 6, type: 'shift', mov:0, via: 'acc', to: 6 }); this.t[8].push({ src: 7, type: 'shift', mov:0, via: 'acc', to: 7 }); this.t[8].push({ src: 8, type: 'shift', mov:0, via: 'acc', to: 8 }); this.t[8].push({ src: 9, type: 'shift', mov:0, via: 'acc', to: 9 }); this.t[8].push({ src: 10, type: 'shift', mov:0, via: 'acc', to: 10 }); this.t[8].push({ src: 11, type: 'shift', mov:0, via: 'acc', to: 11 }); this.t[9].push({ src: 0, type: 'shift', mov:0, via: 'acc', to: 0 }); this.t[9].push({ src: 1, type: 'shift', mov:0, via: 'acc', to: 1 }); this.t[9].push({ src: 2, type: 'shift', mov:0, via: 'acc', to: 2 }); this.t[9].push({ src: 3, type: 'shift', mov:0, via: 'acc', to: 3 }); this.t[9].push({ src: 4, type: 'shift', mov:0, via: 'acc', to: 4 }); this.t[9].push({ src: 5, type: 'shift', mov:0, via: 'acc', to: 5 }); this.t[9].push({ src: 6, type: 'shift', mov:0, via: 'acc', to: 6 }); this.t[9].push({ src: 7, type: 'shift', mov:0, via: 'acc', to: 7 }); this.t[9].push({ src: 8, type: 'shift', mov:0, via: 'acc', to: 8 }); this.t[9].push({ src: 9, type: 'shift', mov:0, via: 'acc', to: 9 }); this.t[9].push({ src: 10, type: 'shift', mov:0, via: 'acc', to: 10 }); this.t[9].push({ src: 11, type: 'shift', mov:0, via: 'acc', to: 11 }); this.t[10].push({ src: 1, type: 'shift', mov:0, via: 'acc', to: 1 }); this.t[10].push({ src: 2, type: 'shift', mov:0, via: 'acc', to: 2 }); this.t[10].push({ src: 3, type: 'shift', mov:0, via: 'acc', to: 3 }); this.t[10].push({ src: 4, type: 'shift', mov:0, via: 'acc', to: 4 }); this.t[10].push({ src: 5, type: 'shift', mov:0, via: 'acc', to: 5 }); this.t[10].push({ src: 6, type: 'shift', mov:0, via: 'acc', to: 6 }); this.t[10].push({ src: 7, type: 'shift', mov:0, via: 'acc', to: 7 }); this.t[10].push({ src: 8, type: 'shift', mov:0, via: 'acc', to: 8 }); this.t[10].push({ src: 9, type: 'shift', mov:0, via: 'acc', to: 9 }); this.t[10].push({ src: 10, type: 'shift', mov:0, via: 'acc', to: 10 }); this.t[10].push({ src: 11, type: 'shift', mov:0, via: 'acc', to: 11 }); if(1){ this.strokes = [[[[132,377],[95,435],[117,562],[300,495.6091065491803]],[[300,495.6091065491803],[362,477],[403,567],[486,510]],[[273,152],[356,83],[300,366.66666666666663],[250,434]],[[250,434],[308,231],[409,215],[349,414]],[[349,414],[335,446],[381,438],[393,402]],[[264,219],[298,190],[337,172],[362,153]],[[484.75,511.25],[537.75,474.25],[518,382],[486,374]],[[486,374],[451,337],[448,250],[514,209]],[[514,209],[591,141],[474,56],[400,87]],[[400,87],[358,126],[281,107],[272,77]],[[272,77],[250,31],[169,52],[130,122]],[[130,122],[73,232],[207,177],[130,377]]],[[[132,377],[59.129974365234375,473.7249984741211],[203.12997436523438,568.7249984741211],[300,495.6091065491803]],[[300,495.6091065491803],[382.1299743652344,436.7249984741211],[438.1299743652344,551.7249984741211],[486,510]],[[273,152],[356,83],[300,366.66666666666663],[250,434]],[[250,434],[308,231],[409,215],[349,414]],[[349,414],[335,446],[381,438],[393,402]],[[264,219],[298,190],[337,172],[362,153]],[[484.75,511.25],[530.1299743652344,478.7249984741211],[542.1299743652344,398.7249984741211],[486,374]],[[486,374],[398.1299743652344,342.7249984741211],[401.1299743652344,181.7249984741211],[514,209]],[[514,209],[575.1299743652344,217.7249984741211],[591.1299743652344,36.724998474121094],[400,87]],[[400,87],[333.1299743652344,138.7249984741211],[277.1299743652344,115.7249984741211],[272,77]],[[272,77],[272.1299743652344,11.404998779296875],[3.129974365234375,26.404998779296875],[130,122]],[[130,122],[233.12997436523438,194.40499877929688],[157.12997436523438,329.9250011444092],[130,377]]],[[[132,377],[95,435],[117,562],[300,495.6091065491803]],[[300,495.6091065491803],[362,477],[403,567],[486,510]],[[273,152],[356,83],[300,366.66666666666663],[250,434]],[[250,434],[308,231],[409,215],[349,414]],[[349,414],[335,446],[381,438],[393,402]],[[264,219],[298,190],[337,172],[362,153]],[[484.75,511.25],[537.75,474.25],[518,382],[486,374]],[[486,374],[451,337],[448,250],[514,209]],[[514,209],[591,141],[474,56],[400,87]],[[400,87],[358,126],[281,107],[272,77]],[[272,77],[250,31],[169,52],[130,122]],[[130,122],[73,232],[207,177],[130,377]]],[[[132,377],[166.12997436523438,361.4049987792969],[226.12997436523438,446.4049987792969],[229.12997436523438,513.4049987792969]],[[228.12997436523438,509.4049987792969],[213.12997436523438,591.4049987792969],[536.1299743652344,591.4049987792969],[486,510]],[[273,152],[356,83],[300,366.66666666666663],[250,434]],[[250,434],[308,231],[409,215],[349,414]],[[349,414],[335,446],[381,438],[393,402]],[[264,219],[298,190],[337,172],[362,153]],[[484.75,511.25],[452.1299743652344,469.8050003051758],[421.1299743652344,380.8050003051758],[486,374]],[[486,374],[556.1299743652344,384.8050003051758],[572.1299743652344,241.80500030517578],[514,209]],[[514,209],[426.1299743652344,233.80500030517578],[382.1299743652344,133.80500030517578],[400,87]],[[400,87],[406.1299743652344,43.80500030517578],[326.1299743652344,25.724998474121094],[272,77]],[[272,77],[219.12997436523438,144.7249984741211],[176.12997436523438,175.7249984741211],[130,122]],[[130,122],[26.129974365234375,10.724998474121094],[19.129974365234375,427.7249984741211],[130,377]]],[[[132,377],[95,435],[117,562],[300,495.6091065491803]],[[300,495.6091065491803],[362,477],[403,567],[486,510]],[[273,152],[356,83],[300,366.66666666666663],[250,434]],[[250,434],[308,231],[409,215],[349,414]],[[349,414],[335,446],[381,438],[393,402]],[[264,219],[298,190],[337,172],[362,153]],[[484.75,511.25],[537.75,474.25],[518,382],[486,374]],[[486,374],[451,337],[448,250],[514,209]],[[514,209],[591,141],[474,56],[400,87]],[[400,87],[358,126],[281,107],[272,77]],[[272,77],[250,31],[169,52],[130,122]],[[130,122],[73,232],[207,177],[130,377]]],[[[132,377],[195.12997436523438,365.7249984741211],[261.1299743652344,427.7249984741211],[229.12997436523438,529.7249984741211]],[[229.12997436523438,529.7249984741211],[285.1299743652344,417.7249984741211],[402.1299743652344,426.7249984741211],[486,510]],[[273,152],[356,83],[300,366.66666666666663],[250,434]],[[250,434],[308,231],[409,215],[349,414]],[[349,414],[335,446],[381,438],[393,402]],[[264,219],[298,190],[337,172],[362,153]],[[484.75,511.25],[398.1299743652344,427.7249984741211],[438.1299743652344,341.7249984741211],[486,374]],[[486,374],[451,337],[403.1299743652344,191.7249984741211],[514,209]],[[514,209],[403.1299743652344,197.7249984741211],[372.1299743652344,157.7249984741211],[400,87]],[[400,87],[380.1299743652344,149.7249984741211],[290.1299743652344,113.7249984741211],[272,77]],[[272,77],[269.1299743652344,135.7249984741211],[200.12997436523438,227.7249984741211],[130,122]],[[130,122],[180.12997436523438,205.7249984741211],[239.12997436523438,285.7249984741211],[130,377]]],[[[132,377],[95,435],[117,562],[300,495.6091065491803]],[[300,495.6091065491803],[362,477],[403,567],[486,510]],[[273,152],[356,83],[300,366.66666666666663],[250,434]],[[250,434],[308,231],[409,215],[349,414]],[[349,414],[335,446],[381,438],[393,402]],[[264,219],[298,190],[337,172],[362,153]],[[484.75,511.25],[537.75,474.25],[518,382],[486,374]],[[486,374],[451,337],[448,250],[514,209]],[[514,209],[591,141],[474,56],[400,87]],[[400,87],[358,126],[281,107],[272,77]],[[272,77],[250,31],[169,52],[130,122]],[[130,122],[73,232],[207,177],[130,377]]],[[[132,377],[244.12997436523438,341.7249984741211],[327.1299743652344,371.7249984741211],[300,495.6091065491803]],[[300,495.6091065491803],[318.1299743652344,348.7249984741211],[428.1299743652344,326.7249984741211],[486,510]],[[273,152],[356,83],[300,366.66666666666663],[250,434]],[[250,434],[308,231],[409,215],[349,414]],[[349,414],[335,446],[381,438],[393,402]],[[264,219],[298,190],[337,172],[362,153]],[[484.75,511.25],[330.1299743652344,244.7249984741211],[518,382],[486,374]],[[486,374],[451,337],[301.1299743652344,233.7249984741211],[514,209]],[[514,209],[304.1299743652344,302.7249984741211],[363.1299743652344,56.724998474121094],[400,87]],[[400,87],[358,126],[269.1299743652344,188.7249984741211],[272,77]],[[272,77],[295.1299743652344,267.7249984741211],[177.12997436523438,262.7249984741211],[130,122]],[[130,122],[185.12997436523438,252.7249984741211],[382.1299743652344,282.7249984741211],[130,377]]],[[[132,377],[95,435],[117,562],[300,495.6091065491803]],[[300,495.6091065491803],[362,477],[403,567],[486,510]],[[273,152],[356,83],[300,366.66666666666663],[250,434]],[[250,434],[308,231],[409,215],[349,414]],[[349,414],[335,446],[381,438],[393,402]],[[264,219],[298,190],[337,172],[362,153]],[[484.75,511.25],[537.75,474.25],[518,382],[486,374]],[[486,374],[451,337],[448,250],[514,209]],[[514,209],[591,141],[474,56],[400,87]],[[400,87],[358,126],[281,107],[272,77]],[[272,77],[250,31],[169,52],[130,122]],[[130,122],[73,232],[207,177],[130,377]]],[[[132,377],[28.129974365234375,427.7249984741211],[69.12997436523438,590.7249984741211],[300,495.6091065491803]],[[300,495.6091065491803],[172.12997436523438,589.7249984741211],[592.1299743652344,591.7249984741211],[486,510]],[[273,152],[356,83],[300,366.66666666666663],[250,434]],[[250,434],[308,231],[409,215],[349,414]],[[349,414],[335,446],[381,438],[393,402]],[[264,219],[298,190],[337,172],[362,153]],[[484.75,511.25],[596.1299743652344,583.7249984741211],[601.1299743652344,301.7249984741211],[486,374]],[[486,374],[589.1299743652344,331.7249984741211],[589.1299743652344,198.7249984741211],[514,209]],[[514,209],[591,141],[520.1299743652344,5.724998474121094],[400,87]],[[400,87],[373.1299743652344,8.724998474121094],[249.12997436523438,4.724998474121094],[272,77]],[[272,77],[246.12997436523438,5.724998474121094],[13.129974365234375,15.724998474121094],[130,122]],[[130,122],[7.129974365234375,83.7249984741211],[62.129974365234375,424.7249984741211],[130,377]]]]; } // this is the end of the function }

TO SAVE WORK: font name: (new or previous) letters/numbers, no spaces author username: (create now OR recall) letters/numbers, no spaces password: (create now OR recall) remember what you type here - it creates an instant account (nothing is saved till you hit save) see previous versions of this font

animaclock: a customizable online clock and alarm clock