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: 1 , pos: 'top' , offset:[0,0] }; this.minutesScale= { val: 1 , pos: 'top' , offset:[0,0] }; this.secondsScale= { val: 1 , pos: 'middle' , offset:[0,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 = false; // 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] = [];} /* */ timing1 = [0,1]; this.t[0].push({ src: 0, type: 'flip', mov:1, via: 'acc', to: 1 , t:timing1}); this.t[0].push({ src: 1, type: 'flip', mov:1, via: 'acc', to: 0 , t:timing1}); this.t[0].push({ src: 2, type: 'shift', mov:0, via: 'acc', to: 2 , t:timing1}); this.t[0].push({ src: 3, type: 'shift', mov:1, via: 'acc', to: 3 , t:timing1}); this.t[1].push({ src: 0, type: 'flip', mov:0, via: 'acc', to: 3 , t:timing1}); this.t[1].push({ src: 1, type: 'flip', mov:0, via: 'acc', to: 2 , t:timing1}); this.t[1].push({ src: 2, type: 'flip', mov:0, via: 'acc', to: 1 , t:timing1}); this.t[1].push({ src: 3, type: 'flip', mov:0, via: 'acc', to: 0 , t:timing1}); this.t[2].push({ src: 0, type: 'shift', mov:0, via: 'acc', to: 0 , t:timing1}); this.t[2].push({ src: 1, type: 'shift', mov:0, via: 'acc', to: 1 , t:timing1}); this.t[2].push({ src: 2, type: 'shift', mov:0, via: 'acc', to: 2 , t:timing1}); this.t[2].push({ src: 3, type: 'shift', mov:0, via: 'acc', to: 3 , t:timing1}); this.t[3].push({ src: 0, type: 'flip', mov:0, via: 'acc', to: 0 , t:timing1}); this.t[3].push({ src: 1, type: 'flip', mov:1, via: 'acc', to: 2 , t:timing1}); this.t[3].push({ src: 2, type: 'flip', mov:1, via: 'acc', to: 2 , t:timing1}); this.t[3].push({ src: 3, type: 'shift', mov:0, via: 'acc', to: 1 , t:timing1}); this.t[4].push({ src: 0, type: 'flip', mov:0, via: 'acc', to: 0 , t:timing1}); this.t[4].push({ src: 1, type: 'shift', mov:0, via: 'acc', to: 1 , t:timing1}); this.t[4].push({ src: 2, type: 'shrink', mov:1, via: 'acc', to: 0 , t:timing1}); this.t[5].push({ src: 0, type: 'shift', mov:1, via: 'acc', to: 0 , t:timing1}); this.t[5].push({ src: 1, type: 'shift', mov:0, via: 'acc', to: 1 , t:timing1}); this.t[5].push({ src: 1, type: 'shift', mov:0, via: 'acc', to: 2 , t:timing1}); this.t[5].push({ src: 1, type: 'shrink', mov:0, via: 'acc', to: 3 , t:timing1}); this.t[5].push({ src: 3, type: 'grow', mov:1, via: 'acc', to: 3 , t:timing1}); this.t[6].push({ src: 0, type: 'shift', mov:0, via: 'acc', to: 0 , t:timing1}); this.t[6].push({ src: 1, type: 'shrink', mov:0, via: 'acc', to: 1 , t:timing1}); this.t[6].push({ src: 2, type: 'shift', mov:1, via: 'acc', to: 1 , t:timing1}); this.t[6].push({ src: 3, type: 'shrink', mov:1, via: 'acc', to: 1, t:timing1}); this.t[7].push({ src: 0, type: 'shift', mov:0, via: 'acc', to: 0 , t:timing1}); this.t[7].push({ src: 1, type: 'shift', mov:0, via: 'acc', to: 1 , t:timing1}); this.t[8].push({ src: 0, type: 'shift', mov:0, via: 'acc', to: 0 , t:timing1}); this.t[8].push({ src: 1, type: 'shift', mov:0, via: 'acc', to: 1 , t:timing1}); this.t[9].push({ src: 0, type: 'shift', mov:0, via: 'acc', to: 0 , t:timing1}); this.t[9].push({ src: 1, type: 'shift', mov:0, via: 'acc', to: 1 , t:timing1}); this.t[9].push({ src: 1, type: 'shift', mov:0, via: 'acc', to: 2 , t:timing1}); this.t[9].push({ src: 1, type: 'shift', mov:0, via: 'acc', to: 3 , t:timing1}); this.t[10].push({ src: 0, type: 'flip', mov:0, via: 'acc', to: 1 , t:timing1}); this.t[10].push({ src: 0, type: 'flip', mov:0, via: 'acc', to: 3 , t:timing1}); this.t[10].push({ src: 0, type: 'flip', mov:0, via: 'acc', to: 2 , t:timing1}); this.t[10].push({ src: 0, type: 'flip', mov:0, via: 'acc', to: 3 , t:timing1}); if(1){ this.strokes = [[[[287,353],[288,452],[317,487],[354,492]],[[350,491],[398,522],[395,125],[468,108]],[[286,355],[291,283],[239,304],[224,494]],[[224,494],[210,561],[120,511],[123,117]]],[[[455,103],[431,268],[401,390],[367,510]],[[367,510],[349,463],[325,378],[308,352]],[[308,352],[282,397],[259,468],[244,508]],[[244,508],[188,337],[174,265],[131,106]]],[[[430,135],[380,129],[235,130],[146,131]],[[146,131],[155.33333333333331,142.33333333333331],[235,217],[300,278]],[[300,278],[277,325],[187,461],[151,502]],[[151,502],[221,498],[390,491],[425,492]]],[[[457,503],[435,362],[439,145],[435,113]],[[435,113],[426,123],[355,257],[342,304]],[[342,304],[238,172],[302,246],[202,123]],[[202,123],[207,360],[169,440],[162,508]]],[[[407,170],[401,235],[396,361],[398,515]],[[224,176],[223,242.33333333333331],[223,375.66666666666663],[223,509]],[[108,161],[162,192],[426,173],[506,155]]],[[[178,291],[488,300],[489,83],[141,120]],[[147,123],[180,440],[177,225],[205,540]]],[[[449,176],[428,149],[213,190],[130,184]],[[130,184],[137.66666666666666,192.33333333333331],[145.33333333333331,200.66666666666663],[270,311]],[[270,311],[237,364],[167,468],[141,518]],[[141,518],[152.33333333333331,508.3333333333333],[439,528],[460,497]]],[[[392,215],[393,54],[47,53],[272,274]],[[272,274],[327,332],[595,580],[186,470]]],[[[380,131],[375,62],[223,65],[275,220]],[[275,220],[438,600],[162,561],[205,468]]],[[[250,90],[246,86],[466,30],[384,390]],[[384,390],[335,568],[127,565],[243,351]],[[243,351],[285,263],[445,248],[366,440]]],[[[183.0769230769231,100],[300,100],[300,100],[401.53846153846155,100]],[[401.53846153846155,100],[367.69230769230774,166.998316431716],[333.84615384615387,230.8062368428741],[183.0769230769231,495.6091065491803]]],[[[330.7692307692308,307.37574133626384],[278.46153846153845,278.6621771512427],[121.53846153846153,115.95198010278952],[303.0769230769231,106.38079204111581]],[[303.0769230769231,106.38079204111581],[503.0769230769231,115.95198010278952],[263.0769230769231,259.51980102789526],[235.3846153846154,316.94692939793754]],[[237.69230769230768,313.7565333773797],[130,412.6588100146747],[260,540.274650836991],[333.84615384615387,482.84752246694865]],[[333.84615384615387,482.84752246694865],[395.38461538461536,444.5627702202538],[410.7692307692308,367.993265726864],[330.7692307692308,307.37574133626384]]],[[[223.0769230769231,450.9435622613696],[450.7692307692308,645.5577195154018],[506.1538461538462,144.6655442878107],[361.53846153846155,106.38079204111581]],[[361.53846153846155,106.38079204111581],[173.84615384615384,84.04801989721048],[149.23076923076923,326.5181174596113],[315.38461538461536,316.94692939793754]],[[312.3076923076923,316.94692939793754],[386.1538461538462,316.94692939793754],[447.69230769230774,256.32940500733736],[435.3846153846154,218.0446527606425]]]]; } // 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