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() { // hi! // welcome to raunaksha4876's tutorial! /* Read the comments below for a step-by-step guide to creating a custom clock; Enjoy! - Sweera (my sister) October 20, 2024 */ /* ///// ///// ///// ///// ///// ///// ///// ///// ///// ///// ///// ///// ///// ///// ///// ///// /// / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / ///// ///// ///// ///// ///// //// ///// ///// ///// www.Pacetutoring.com //// ///// ///// ///// ///// ///// ///// /// / / / / / / / / / / pace = time / distance / / / / / / / / / / / / / / / / / / / / / / / / / */ // <--- In javaScript, the "double slash" to the left tells the computer to ignore the line of code; // As a human, you shouldn't 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 imformation that changes over time. The variable "this" carries all the font imformation back to animaclock.com to render your clock; variable: a storage container for imformation. variables should have a short and clear names */ /* edited by me at October 20, 2024 time: 4:07pm seconds:31 hour(24hr):16 short date: 10/10/2024 pace = [distance] and [time] control the commands */ /* ///// ///// */ /* / / / / */ /* ///// ///// */ /* / / */ /* / / */ // Now we are inside the function; // Everything between the "{" above and "}" at the bottom is the function. Scroll down to the bottom now to see the end of the function. Don't worry: Removing the ending dosn't ruin it. // Editing the code: // The Right Colons // **change the code here!** this.showRightColons = false // The Drawing Area /* The first group of commands we'll run will set up the drawing area. All of the rendering is done using HTML%'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 withen the canvas; for example, in the first line, try changing it to read "this.digitPad = 100" or: this.digitPad = 4 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 = 30; this.groupPad = 25; this.heightFrac = 0.7; this.widthFrac = 0.7; // 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 diffrentkinds of data togther 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, specyfying it's order of magnitute) Each data type is called a "property" of the "object" this.secondsScale Change the properities to cuctomize your font val sets the fraction of the canvas Try anything between 0 and 1 for a conventional type of seconds hand val:.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.24, pos:'middle', offset:[-4.7,-.2]}; // The Colors /* Color parts are red, green, and blue If you want to use alpha, try adding it Color is a value from 0 to 255 The alpha is the value from 0 to 1 Therefore, we will use an "array" to hold each value array: a list of data values of the same type anything else rounds to the nearist integer in the domain */ // the background // **change the code here!** hbarOrange = [255,132,0] hbarBlue = [5,140,180] hbarBlack = [0,0,0] hbarRed = [255,0,0] this.bgColor = hbarBlue; // the background layer for the digits // **change the code here!** this.baseColor = [ 100, 100, 100 ]; // the layer in front of the base /* This variable has two properities: one sets the color between animations and the other sets the color during animation */ // **change the code here!** hbarGold1 = [255,132,0] hbarGold2 = [0,125,255] this.partColor = { a:hbarGold1, b:hbarGold2}; // the background layer for the seconds hand // **change the code here!** this.secondColor = this.baseColor; // the color for the colons // **change the code here!** hbarWhite = [255,255,255] this.colonColors = [ hbarWhite , hbarOrange ]; // one other color varible we are gotta use later // **change the code here!** var trans0 = {a:[255,132,255],b:[255,0,0]} // The Sizes /* These are pixel values that set the width for 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 = 0.5; this.endAniTime = 1; // other, miscellaneous varibles // change the code here! this.lineCap = 'butt' this.baseInFront = false; this.pulsate = false; this.disableSlowest = true; // now you are done with the first part with the tutorial /* In the Next part, you will learn how to control the transitons To control the transitions, we will send animaclock.com a specially formatted object; We will use the method "push" to insert a set of properities into the array of variabless for each digit; Push as many or few transitions into each digit's array if you as you like. Animaclock.com will default to something that works if you don't secify 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 properities into this.t[7] Each digit is drawing using seven line segments. Click the "?" above for a quick refrence guide Here is a quick guide to the digit properities Which segment moves [must be between 0 to 6 ] src:5 How the segment moves (loop,shift,turn,flip,shrink,grow) type:'loop' How many times the segment turns turns:2 The direction to grow, shrink, or shift a segment [0 or 1] mov:1 What king of timing the segment uses (acc for accelerating, osc for oscillating) via:'osc' Where the segment ends up at the end of the transition (must be between 0 and 6) to:3 The color of the segment [must be formatted like the colors above] col:trans0 */ turnsNum1 = 2 turnsNum2 = 2 this.t = new Array(); for (var i=0;i<=50;i++) this.t[i] = new Array(); // control the commands for the zero // change the code here! /* 0->1 */ this.t[0].push({ src: 0, type: 'loop',turns:turnsNum1,col:trans0, to: 2}); this.t[0].push({ src: 6, type: 'loop',turns:turnsNum2, to: 5}); this.t[0].push({ src: 1, type: 'loop',turns:turnsNum1, to: 2}); this.t[0].push({ src: 4, type: 'loop',turns:turnsNum2,col:trans0, to: 5}); this.t[0].push({ src: 2, type: 'shrink', mov: 0}); this.t[0].push({ src: 5, type: 'shrink', mov: 1}); // the commands for the one // change the code here! /* 1->2 */ this.t[1].push({ src: 2, type: 'loop',turns:turnsNum2, to: 0,col:trans0}); this.t[1].push({ src: 5, type: 'loop',turns:turnsNum1, to: 6}); this.t[1].push({ src: 2, type: 'grow', mov: 0}); this.t[1].push({ src: 2, type: 'loop',turns:turnsNum2,col:trans0, to: 4}); this.t[1].push({ src: 2, type: 'loop',turns:turnsNum1, to: 3}); // the commands for the two // change the code here! /* 2->3 */ this.t[2].push({ src: 2, type: 'loop',turns:turnsNum1,col:trans0, to: 5}); this.t[2].push({ src: 0, type: 'grow', mov: 1}); this.t[2].push({ src: 3, type: 'loop',turns:turnsNum2,col:trans0, to: 6}); this.t[2].push({ src: 3, type: 'grow', mov: 1}); this.t[2].push({ src: 4, type: 'loop',turns:turnsNum1,col:trans0, to: 6}); this.t[2].push({ src: 3, type: 'loop',turns:turnsNum2, to: 5}); this.t[2].push({ src: 0, type: 'loop',turns:turnsNum1,col:trans0, to: 2}); this.t[2].push({ src: 6, type: 'shrink', mov: 0}); // the commands for the three //change the code here! /* 3->4 */ this.t[3].push({ src: 0, type: 'loop',turns:turnsNum2,col:trans0, to: 2}); this.t[3].push({ src: 3, type: 'grow', mov: 0}); this.t[3].push({ src: 5, type: 'loop',turns:turnsNum1,col:trans0, to: 5}); this.t[3].push({ src: 3, type: 'loop',turns:turnsNum2, to: 1}); this.t[3].push({ src: 6, type: 'shrink', mov: 0}); this.t[3].push({ src: 2, type: 'shrink', mov: 0}); // these commands for the four // change the code here! /* 4->5 */ this.t[4].push({ src: 1, type: 'loop',turns:turnsNum1,col:trans0, to: 0}); this.t[4].push({ src: 3, type: 'loop',turns:turnsNum2, to: 3}); this.t[4].push({ src: 5, type: 'loop',turns:turnsNum1,col:trans0, to: 6}); this.t[4].push({ src: 2, type: 'loop',turns:turnsNum2, to: 5}); this.t[4].push({ src: 1, type: 'grow', mov: 0}); // these are the commands for the five // change the code here! /* 5->6 */ this.t[5].push({ src: 1, type: 'loop',turns:turnsNum2,col:trans0, to: 0}); this.t[5].push({ src: 6, type: 'loop',turns:turnsNum1, to: 4}); this.t[5].push({ src: 5, type: 'loop',turns:turnsNum2,col:trans0, to: 6}); this.t[5].push({ src: 3, type: 'loop',turns:turnsNum1, to: 3}); this.t[5].push({ src: 0, type: 'shrink', mov: 0}); this.t[5].push({ src: 1, type: 'grow', mov: 0}); this.t[5].push({ src: 5, type: 'grow', mov: 1}); // these commands for the five turning into the zero // change the code here! /* 5->0 */ /* leading digit 5->0 */ this.t[50].push({ src: 0, type: 'loop',turns:turnsNum1,col:trans0, to: 2}); this.t[50].push({ src: 6, type: 'loop',turns:turnsNum2, to: 4}); this.t[50].push({ src: 1, type: 'grow', mov: 0}); this.t[50].push({ src: 1, type: 'loop',turns:turnsNum1,col:trans0, to: 0}); this.t[50].push({ src: 5, type: 'grow', mov: 1}); this.t[50].push({ src: 5, type: 'loop',turns:turnsNum1,col:trans0, to: 6}); this.t[50].push({ src: 3, type: 'shrink', mov: 0}); this.t[50].push({ src: 3, type: 'shrink', mov: 1}); // these commands are for the six // change the code here! /* 6->7 */ this.t[6].push({ src: 0, type: 'loop',turns:turnsNum2,col:trans0, to: 2}); this.t[6].push({ src: 3, type: 'shrink', mov: 0}); this.t[6].push({ src: 6, type: 'loop',turns:turnsNum2,col:trans0, to: 5}); this.t[6].push({ src: 1, type: 'loop',turns:turnsNum1, to: 0}); this.t[6].push({ src: 5, type: 'loop',turns:turnsNum2,col:trans0, to: 5}); this.t[6].push({ src: 1, type: 'loop',turns:turnsNum1, to: 2}); this.t[6].push({ src: 4, type: 'loop',turns:turnsNum2,col:trans0, to: 2}); // these are the commands for the seven // change the code here! /* 7->8 */ this.t[7].push({ src: 0, type: 'loop',turns:turnsNum1,col:trans0, to: 1,}); this.t[7].push({ src: 5, type: 'loop',turns:turnsNum2, to: 6,}); this.t[7].push({ src: 0, type: 'loop',turns:turnsNum1,col:trans0, to: 2}); this.t[7].push({ src: 0, type: 'grow', mov: 1}); this.t[7].push({ src: 2, type: 'loop',turns:turnsNum1,col:trans0, to: 4}); this.t[7].push({ src: 5, type: 'loop',turns:turnsNum2, to: 5}); this.t[7].push({ src: 2, type: 'loop',turns:turnsNum1,col:trans0, to: 3}); this.t[7].push({ src: 2, type: 'shrink', mov: 0}); // these are the commands for the eight // change the code here! /* 8->9 */ this.t[8].push({ src: 1, type: 'loop',turns:turnsNum2,col:trans0, to: 0}); this.t[8].push({ src: 4, type: 'loop',turns:turnsNum1, to: 1}); this.t[8].push({ src: 6, type: 'loop',turns:turnsNum2,col:trans0, to: 6}); this.t[8].push({ src: 3, type: 'shrink', mov: 0}); this.t[8].push({ src: 0, type: 'shrink', mov: 0}); this.t[8].push({ src: 2, type: 'loop',turns:turnsNum2,col:trans0, to: 2}); this.t[8].push({ src: 5, type: 'loop',turns:turnsNum1, to: 5}); this.t[8].push({ src: 4, type: 'loop',turns:turnsNum2,col:trans0, to: 3,}); // these are the commands for the nine // change the code here! /* 9->0 */ this.t[9].push({ src: 0, type: 'loop',turns:turnsNum1,col:trans0, to: 0}); this.t[9].push({ src: 1, type: 'shrink', mov: 1}); this.t[9].push({ src: 2, type: 'loop',turns:turnsNum1,col:trans0, to: 2}); this.t[9].push({ src: 3, type: 'loop',turns:turnsNum2, to: 1}); this.t[9].push({ src: 5, type: 'grow', mov: 1}); this.t[9].push({ src: 5, type: 'loop',turns:turnsNum1,col:trans0, to: 6}); this.t[9].push({ src: 6, type: 'loop',turns:turnsNum2, to: 4}); // these commands for the one turning to a zero // change the code here! /* (noon/midnight under 12hr) 1->nothing */ this.t[10].push({ src: 2, type: 'shrink', mov: 0,t:[0,.5]}); this.t[10].push({ src: 5, type: 'shrink', mov: 0,t:[.5,1]}); // these are the commands for the two turning into a one // change the code here! /* (noon/midnight under 12hr) 2->1 */ this.t[21].push({ src: 0, type: 'loop',turns:turnsNum1, to: 2}); this.t[21].push({ src: 2, type: 'loop',turns:turnsNum2, to: 2}); this.t[21].push({ src: 3, type: 'loop',turns:turnsNum1, to: 5}); this.t[21].push({ src: 4, type: 'loop',turns:turnsNum2, to: 5}); this.t[21].push({ src: 6, type: 'loop',turns:turnsNum1, to: 5}); // these are the commands for the two turning into a zero // change the code here! /* (midnight under 24hr) 2->nothing */ this.t[20].push({ src: 0, type: 'shrink', mov: 0,t:[0,.2]}); this.t[20].push({ src: 2, type: 'shrink', mov: 0,t:[.2,.4]}); this.t[20].push({ src: 3, type: 'shrink', mov: 1,t:[.4,.6]}); this.t[20].push({ src: 4, type: 'shrink', mov: 0,t:[.6,.8]}); this.t[20].push({ src: 6, type: 'shrink', mov: 0,t:[.8,1]}); // these are the commands for the three turning into a one // change the code here! /* (midnight under 24hr) 3->0 */ this.t[30].push({ src: 0, type: 'loop',turns:turnsNum1, to: 2}); this.t[30].push({ src: 2, type: 'loop',turns:turnsNum2, to: 2}); this.t[30].push({ src: 3, type: 'loop',turns:turnsNum1, to: 2}); this.t[30].push({ src: 5, type: 'loop',turns:turnsNum2, to: 5}); this.t[30].push({ src: 6, type: 'loop',turns:turnsNum1, to: 5}); // these are the commands for the zero turning into a one // change the code here! /* (leading hr @ 9:59 am/pm/24hr) nothing->1 */ this.t[11].push({ src: 5, type: 'grow', mov: 0, t:[0,.5]}); this.t[11].push({ src: 2, type: 'grow', mov: 0, t:[.5,1]}); // 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