edit clock font - animaclock

animaclock.com | about | gallery | Graph-Based Visual Saliency
Click here for Tutorial
Edit the code below, then click anywhere outside of textarea to update:
var testfont=new function() {
// hi!
// welcome to raunaksha4876's tutorial!
//edited by me
// at October 10, 2024
// time: 7:22pm
// short date: 10/10/2024
// pace = [distance] and [time] \\
// control the commands

//the drawing area
//change the code here!

this.digitPad = 15;
this.groupPad = 25;
this.heightFrac = 0.7;
this.widthFrac = 0.7;

// the seconds
// change the code here!
// the position means pos, try 'top', 'middle', or 'bottom'
// anything else reverts to 'top'
// val sets the fraction of the canvas

this.secondsScale = {val:0.24, pos:'bottom',offset:[-1.45,-0.11]};

// the minutes
// change the code here!

this.minutesScale = {val:1}

// the hours
// change the code here!

this.hoursScale = {val:1,pos:'middle'}

// the right colons
// change the code here!

this.showRightColons = false

// 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
// the background
// change the code here!
hbarOrange = [255,132,0]
hbarBlack = [0,0,0]
hbarRed = [255,0,0]
this.bgColor = hbarBlack;

// the background layer for the digits
// change the code here!
this.baseColor = [ 100, 100, 100 ];

// the layer in front of the base
// change the code here!
hbarGold1 = [255,132,0]
hbarGold2 = [0,125,255]
this.partColor = { a:hbarGold1, b:hbarGold2};

// the background layer for the seconds
// change the code here!
this.secondColor = this.bgColor;
// 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
// 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 = 0;
this.partLineWidth = 7;
this.colonRadius = 3.5;

// the timing
// change the code here!

this.beginAniTime = 0.5;
this.endAniTime = 1;

// other, miscellaneous varibles
// change the code here!
this.lineCap = 'round'
this.baseInFront = false;
this.pulsate = false;
this.disableSlowest = true;
// now you are done with the first part with the tutorial
// now you are learning how to control the transitons
// each digit has seven segments
// the number of the segment [must be between 0 to 6 ]
src:5

// the type of the transiton[loop,shift,turn,flip,shrink,grow]

type:'loop'

// how many turns must be the segment
turns:2

// the direction to grow or shrink [0 or 1]
mov:1

// the segment uses
via:'osc'

// what segment ends up a transiton
to:5

// the color of the segment [must be like the colors above]

col:trans0

turnsNum1 = 1
turnsNum2 = 1
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!
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!

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!

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!

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!

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!

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!

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!

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!

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!

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!

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!

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!


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!

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!

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!

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]}); 
}
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