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] | | / _/ \_/ _| |_/ + [pace] + [cadence] + [ground contact time] + [vertical oscillation] - [running stride length] */ // <--- 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 = 0.8; // 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.secondsScale = {val:0.4, pos:'top'}; // 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 = [ 230, 165, 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 = 8; this.partLineWidth = 6; this.colonRadius = 4; // The timing // ** change the code here!! ** this.beginAniTime = .75; 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] = [];} /* To control the transitions, we will send animaclock.com a specially formatted object; We will use the method "push" to insert a set of properties into the array of variables for each digit; Push as many or as few transitions into each digit's array as you like. Animaclock.com will default to something that works if you don't specify anything To tell animaclock.com which digit you are working on, index this.t with the value of the starting digit for example, to control the 7 turning into 8, push properties into this.t[7] Each digit is drawing using 7 line segments. Click the "?" above for a quick reference guide Here is a quick guide to the digit properties Which segment moves (must be between 0 and 6) src: 4 How the segment moves (loop, shift, turn, grow, shrink) type: 'loop' How many times the segment turns turns: 2 What kind of timing the segment uses (acc for accelerating, and osc for oscillating) via: 'osc' Where the segment ends up at the end of the transition (must be between 0 and 6) to: 3 What direction to grow, shrink, or shift a segment (0 or 1) mov: 0 What color the segment should use (must be formatted like the colors above) col:trans0 */ // These commands control the zero // ** change the code here!! ** turnsNum1 = 0; turnsNum2 = 0; firstHalf = [0,0.5]; secondHalf = [0.5,1]; this.t[0].push({ src: 0, type: 'loop', turns:turnsNum1, via: 'acc', to: 2, col:trans0 , t:firstHalf }); this.t[0].push({ src: 6, type: 'loop', turns:turnsNum2, via: 'acc', to: 5, col:trans0 , t:secondHalf }); this.t[0].push({ src: 1, type: 'shrink', mov: 0 }); this.t[0].push({ src: 4, type: 'shrink', mov: 1 }); this.t[0].push({ src: 2, type: 'shrink', mov: 1 }); this.t[0].push({ src: 5, type: 'shrink', mov: 0 }); // These commands control the one // ** change the code here!! ** this.t[1].push({ src: 2, type: 'loop', turns:turnsNum2, via: 'acc', to: 0, col:trans0, t:firstHalf }); this.t[1].push({ src: 5, type: 'loop', turns:turnsNum1, via: 'acc', to: 6, col:trans0, t:firstHalf }); this.t[1].push({ src: 2, type: 'grow', mov: 1 }); this.t[1].push({ src: 4, type: 'grow', mov: 1 }); this.t[1].push({ src: 3, type: 'grow', mov: 1 }); // These commands control the two // ** change the code here!! ** this.t[2].push({ src: 0, type: 'loop', turns: turnsNum2, via: 'acc', to: 0, t:firstHalf }); this.t[2].push({ src: 6, type: 'loop', turns: turnsNum1, via: 'acc', to: 6, t:firstHalf }); this.t[2].push({ src: 3, type: 'shift', to: 3 }); this.t[2].push({ src: 2, type: 'shift', to: 2 }); this.t[2].push({ src: 5, type: 'grow', mov: 0 }); this.t[2].push({ src: 4, type: 'shrink', mov: 0 }); // These commands control the three // ** change the code here!! ** this.t[3].push({ src: 0, type: 'loop', turns: turnsNum1, via: 'acc', to: 1, col:trans0, t:firstHalf }); this.t[3].push({ src: 6, type: 'loop', turns: turnsNum1, via: 'acc', to: 1, col:trans0, t:firstHalf }); this.t[3].push({ src: 3, type: 'shift', to: 3}); this.t[3].push({ src: 5, type: 'shift', to: 5}); this.t[3].push({ src: 2, type: 'shift', to: 2}); // These commands control the four // ** change the code here!! ** this.t[4].push({ src: 1, type: 'loop', turns: turnsNum1, via: 'acc', to: 0, col:trans0, t:firstHalf }); this.t[4].push({ src: 1, type: 'loop', turns: turnsNum1, via: 'acc', to: 6, col:trans0, t:firstHalf }); this.t[4].push({ src: 3, type: 'shift', to: 3}); this.t[4].push({ src: 5, type: 'shift', to: 5}); this.t[4].push({ src: 2, type: 'shrink', mov: 0}); this.t[4].push({ src: 1, type: 'grow', mov: 0}); // These commands control the five turning into a six // ** change the code here!! ** this.t[5].push({ src: 0, type: 'loop', turns: turnsNum1, via: 'acc', to: 0, col:trans0 }); this.t[5].push({ src: 6, type: 'loop', turns: turnsNum2, via: 'acc', to: 6, col:trans0 }); this.t[5].push({ src: 5, type: 'shift', to: 5}); this.t[5].push({ src: 3, type: 'shift', to: 3}); this.t[5].push({ src: 1, type: 'shift', to: 1}); this.t[5].push({ src: 4, type: 'grow', mov: 1}); // These commands control the five turning into a zero // ** change the code here!! ** this.t[50].push({ src: 0, type: 'loop', turns: turnsNum2, via: 'acc', to: 0, col:trans0 }); this.t[50].push({ src: 6, type: 'loop', turns: turnsNum2, via: 'acc', to: 6, col:trans0 }); this.t[50].push({ src: 5, type: 'shift', to: 5}); this.t[50].push({ src: 1, type: 'shift', to: 1}); this.t[50].push({ src: 4, type: 'grow', mov: 1}); this.t[50].push({ src: 3, type: 'shrink', mov: 1}); this.t[50].push({ src: 2, type: 'grow', mov: 0 }); // These commands control the six // ** change the code here!! ** this.t[6].push({ src: 0, type: 'loop', turns: turnsNum2, via: 'acc', to: 2, col:trans0 }); this.t[6].push({ src: 6, type: 'loop', turns: turnsNum2, via: 'acc', to: 5, col:trans0 }); this.t[6].push({ src: 3, type: 'shrink', mov: 1}); this.t[6].push({ src: 0, type: 'grow', mov: 1}); this.t[6].push({ src: 5, type: 'shrink', mov: 0}); this.t[6].push({ src: 1, type: 'shrink', mov: 0}); this.t[6].push({ src: 4, type: 'shrink', mov: 1}); // These commands control the seven // ** change the code here!! ** this.t[7].push({ src: 2, type: 'loop', turns: turnsNum1, via: 'acc', to: 0, col:trans0 }); this.t[7].push({ src: 5, type: 'loop', turns: turnsNum1, via: 'acc', to: 6, col:trans0 }); this.t[7].push({ src: 3, type: 'grow', mov: 1 }); this.t[7].push({ src: 1, type: 'grow', mov: 0 }); this.t[7].push({ src: 4, type: 'grow', mov: 1 }); this.t[7].push({ src: 5, type: 'grow', mov: 0 }); this.t[7].push({ src: 2, type: 'grow', mov: 1 }); this.t[7].push({ src: 0, type: 'shrink', mov: 0 }); // These commands control the eight // ** change the code here!! ** this.t[8].push({ src: 0, type: 'loop', turns: turnsNum1, via: 'acc', to: 0, col:trans0 }); this.t[8].push({ src: 6, type: 'loop', turns: turnsNum1, via: 'acc', to: 6, col:trans0 }); this.t[8].push({ src: 2, type: 'shift', to: 2 }); this.t[8].push({ src: 5, type: 'shift', to: 5 }); this.t[8].push({ src: 3, type: 'shift', to: 3 }); this.t[8].push({ src: 1, type: 'shift', to: 1 }); this.t[8].push({ src: 4, type: 'shrink', mov: 1 }); // These commands control the nine // ** change the code here!! ** this.t[9].push({ src: 0, type: 'loop', turns: turnsNum1, via: 'acc', to: 6, col:trans0 }); this.t[9].push({ src: 6, type: 'loop', turns: turnsNum1, via: 'acc', to: 0, col:trans0 }); this.t[9].push({ src: 1, type: 'shift', to: 1 }); this.t[9].push({ src: 2, type: 'shift', to: 2 }); this.t[9].push({ src: 5, type: 'shift', to: 5 }); this.t[9].push({ src: 3, type: 'shrink', mov: 1 }); this.t[9].push({ src: 4, type: 'grow', mov: 1 }); // These commands control the one turning into a zero // ** change the code here!! ** this.t[10].push({ src: 2, type: 'shrink', mov: 0 }); this.t[10].push({ src: 5, type: 'shrink', mov: 0 }); // These commands control the two turning into one // ** change the code here!! ** /* special cases */ /* leading 5->0 (+2, +4, -3) */ this.t[50].push({ src: 3, type: 'loop', turns: turnsNum1, via: 'acc', to: 4 }); this.t[50].push({ src: 3, type: 'loop', turns: turnsNum1, via: 'acc', to: 2 }); /* (noon/midnight under 12hr) 1->nothing (-2, -5) */ this.t[10].push({ src: 2, type: 'shrink', mov: 0 }); this.t[10].push({ src: 5, type: 'shrink', mov: 0 }); /* (noon/midnight under 12hr) 2->1 (-0, -3, -4, -6, +5) */ this.t[21].push({ src: 0, type: 'shift', to: 2 }); this.t[21].push({ src: 3, type: 'shift', to: 2 }); this.t[21].push({ src: 4, type: 'shift', to: 5 }); this.t[21].push({ src: 6, type: 'shift', to: 5 }); this.t[21].push({ src: 2, type: 'shift', to: 2 }); /* (midnight under 24hr) 2->nothing (-0, -2, -3, -4, -6) */ this.t[20].push({ src: 0, type: 'shrink', mov: 0 }); this.t[20].push({ src: 2, type: 'shrink', mov: 0 }); this.t[20].push({ src: 3, type: 'shrink', mov: 0 }); this.t[20].push({ src: 4, type: 'shrink', mov: 0 }); this.t[20].push({ src: 6, type: 'shrink', mov: 0 }); /* (midnight under 24hr) 3->0 (-3, +1, +4) */ this.t[30].push({ src: 0, type: 'flip', to: 1 }); this.t[30].push({ src: 2, type: 'flip', to: 1 }); this.t[30].push({ src: 3, type: 'flip', to: 4 }); this.t[30].push({ src: 5, type: 'flip', to: 4 }); this.t[30].push({ src: 6, type: 'flip', to: 4 }); /* (leading hr @ 9:59) nothing -> 1 (+2, +5)*/ this.t[11].push({ src: 5, type: 'grow', mov: 0, t:[.9,.95]}); this.t[11].push({ src: 2, type: 'grow', mov: 0, t:[.95,1]}); if(0){ this.strokes = [[[[387,455],[479,206],[256,199],[207,495]],[[209,490],[254,125],[390,3],[243,61]],[[390,447],[355,523],[426,514],[427,481]],[[371,107],[326,111],[247,128],[205,151]]],[[[387,455],[479,206],[256,199],[207,495]],[[209,490],[254,125],[390,3],[243,61]],[[390,447],[355,523],[426,514],[427,481]]],[[[387,455],[453,271],[256,199],[215,456]],[[214,464],[253,45],[265,32],[240,33]],[[390,447],[369,533],[188,561],[214,463]]],[[[403,387],[440,600],[150,545],[234,365]],[[222,453],[193,293],[423,235],[401,404]],[[387,298],[415,381],[398,484],[417,506]]],[[[394,273],[335,210],[250,155],[207,495]],[[209,490],[213,383],[298,151],[204,281]]],[[[387,455],[329,535],[195,559],[211,483]],[[209,490],[237,275],[390,3],[232,107]],[[397,236],[323,247],[195.75,269.75],[153.75,292.75]]],[[[391,425],[380,517],[175,512],[234,274]],[[405,284],[401,330],[372,486],[420,507]]],[[[214,454],[254,125],[390,3],[243,61]],[[215.5,447.75],[198,550],[361,564],[386,410]],[[399,195],[339,204],[201.75,237.75],[159.75,260.75]]],[[[387,455],[503,229],[256,199],[233,355]],[[234,353],[213,479],[338,523],[387,453]]],[[[374,315],[396,244],[236,161],[207,495]],[[209,490],[204,355],[352,134],[179,323]]]]; } // 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