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.4; 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: 1.6 , pos: 'top' , offset:[0,0] }; this.minutesScale= { val: 1 , pos: 'top' , offset:[0,0] }; this.secondsScale= { val: 0.4 , pos: 'top' , offset:[0,0.0] }; this.sevenSegment = false 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; this.defaultTrans = 'shift' // 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: 'flip', mov:0, via: 'acc', to: 0 }); 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: 0, type: 'flip', 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: 1 }); this.t[3].push({ src: 0, type: 'shift', mov:0, via: 'acc', to: 0 }); this.t[3].push({ src: 1, type: 'flip', mov:0, via: 'acc', to: 1 }); this.t[3].push({ src: 1, 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: 1, type: 'flip', mov:0, via: 'acc', to: 2 }); this.t[4].push({ src: 1, type: 'flip', mov:0, via: 'acc', to: 0 }); 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: 'flip', mov:0, via: 'acc', to: 1 }); 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: 1, type: 'flip', mov:0, via: 'acc', to: 2 }); this.t[7].push({ src: 1, 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: 2 }); 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: 0 }); 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 }); /* special cases */ /* (noon/midnight under 12hr) 1 -> nothing */ 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 }); /* leading 5->0 */ this.t[50].push({src:0,type:'flip',to:0}) this.t[50].push({src:0,type:'shift',to:1}) this.t[50].push({src:1,type:'shift',to:1}) this.t[50].push({src:2,type:'flip',to:1}) /* (midnight under 1 day) 2->nothing */ this.t[20].push({src:0,type:'shrink',mov:0,t:[.0,.5]}) this.t[20].push({src:1,type:'shrink',mov:0,t:[.5,1]}) /* (noon/midnight under 12hr) 2-> 1 */ this.t[21].push({src:0,type:'shift',to:0}) this.t[21].push({src:1,type:'flip',to:0}) if(0){ this.strokes = [[[[288,178],[494,114],[310,29],[215,198]],[[215,198],[163,282],[176,494],[313,473]],[[313,473],[428,437],[464,243],[375,156]],[[375,156],[285,62],[249,211],[187,163]]],[[[205,205],[264,197],[298,158],[296,99]],[[296,99],[291,39],[246,71],[283,440]],[[283,440],[298,500],[377,414],[167,446]],[[167,446],[86,466],[217,444],[427,456]]],[[[174,185],[172,81],[394,86],[355,243]],[[355,243],[310,389],[248,464],[186,456]],[[186,456],[125,444],[168,367],[201,373]],[[201,373],[217,355],[385,389],[411,480]]],[[[206,118],[307,60],[461,250],[266,275]],[[266,275],[204,286],[220,221],[332,289]],[[332,289],[456,393],[301,526],[173,427]]],[[[236,487],[294,432],[318,123],[313,90]],[[313,90],[304,45],[285,66],[184,263]],[[184,263],[147,312],[357,251],[382,288]]],[[[213,102],[214,147],[209,218],[181,253]],[[181,253],[151,274],[179,185],[316,258]],[[316,258],[413,317],[396,520],[181,409]],[[409,106],[379,166],[249,90],[207,111]]],[[[417,65],[390,6],[276,63],[244,165]],[[244,165],[205,267],[155,491],[305,463]],[[305,463],[420,431],[412,255],[304,275]],[[304,275],[257,280],[219,319],[212,386]]],[[[164,136],[183,136],[200,121],[194,92]],[[194,92],[196,146],[382,142],[403,98]],[[403,98],[402,77],[270,184],[230,480]],[[210,246],[264,211],[291,290.5416666666667],[377,240]]],[[[366,130],[327,10],[115,55],[203,192]],[[203,192],[228,251],[350,307],[377,394]],[[377,394],[433,518],[63,539],[229,324]],[[229,324],[385,163],[384,77],[329,98]]],[[[399,97],[394,15],[305,361],[268,498]],[[268,498],[327,257],[396,86],[360,71]],[[360,71],[296.4612121582031,19.929725646972656],[108.46121215820312,68.92972564697266],[170.46121215820312,195.92972564697266]],[[170.46121215820312,195.92972564697266],[207.46121215820312,263.92972564697266],[305.4612121582031,333.92972564697266],[365.4612121582031,151.92972564697266]]]]; } // 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