Hi, agaim,
Here's the JS (or part of it).
// GLOBAL VARIABLES
var R, G, B; // Colour of Central Hexagon
var r, g, b; // colour of each other hexagon
var H; // Height of whole hexagonal Image
var h, w; // height,width of individual hexagon
var y, x; // Unscaled h/w of individual hexagon
var C; // Number of hexagonal 'circles'
var S; // stepSize of colourChange
var W; // Computed width of Image
var hx, hy; // centrePoint of each Hexagon
var hxh; // Actual height of individual hexagon
var fsz; // Font-size in hexagon labels
var ms; // current time in millisecs
var dat, strt;
var c = new Array(3); // Used in setVals()
var s = new Array(3); // Used in setVals()
var n = new Array(3); // Used in setVals()
var sx = new Array(6); // Used in setVals(), then in calcXY()
var nx = new Array(6); // Used in setVals(), then in calcXY()
var sy = new Array(6); // Used in setVals(), then in calcXY()
var ny = new Array(6); // Used in setVals(), then in calcXY()
s[0] = new Array(6); // Used in setVals(), then in calcRGB()
s[1] = new Array(6); // Used in setVals(), then in calcRGB()
s[2] = new Array(6); // Used in setVals(), then in calcRGB()
n[0] = new Array(6); // Used in setVals(), then in calcRGB()
n[1] = new Array(6); // Used in setVals(), then in calcRGB()
n[2] = new Array(6); // Used in setVals(), then in calcRGB()
function prompts()
{ // Get User's Colour and other requirements
R=0; r=0; G=0; g=0; B=0; b=0; // GLOBALS, declared above
R = window.prompt("Red-value (0-255)",215);
G = window.prompt("Green-value (0-255)",215);
B = window.prompt("Blue-value (0-255)",215);
H = window.prompt("Suggest ImageHeight (300-900)",468);
C = window.prompt("Number of Concentric \'Rings\' (1-8)",4);
S = window.prompt("StepSize of ColourChange (1-9)",5);
}
function setVals(H,C)
{
h = 52; // nominal height of individual hexagon
w = 60; // nominal width of individual hexagon
y = H/(2*C+1); // Unscaled height of individual hexagon
x = 15*y/13; // Unscaled width of individual hexagon
W = (x*(3*C+2)/2)+1; // Calculated Width of Honeycomb image
H = H*1+1; // Adjusted Height of Honeycomb image
W = parseInt(W,10); // Final Calculated Width of Honeycomb
dat = new Date();
strt= dat.getTime();
//alert("SETVALS STRT="+strt );
//alert("SETVALS continue");
r = 0; g = 0; b = 0;
c[0]= 2; c[1]= -1; c[2]= -1;
// Used in calcRGB() for adjusting colour shades between neighbours
s[0][0]= 0; s[0][1]=-1; s[0][2]=-3; s[0][3]=-4; s[0][4]=-3; s[0][5]=-1;
s[1][0]= 0; s[1][1]= 2; s[1][2]= 3; s[1][3]= 2; s[1][4]= 0; s[1][5]=-1;
s[2][0]= 0; s[2][1]=-1; s[2][2]= 0; s[2][3]= 2; s[2][4]= 3; s[2][5]= 2;
// Used in calcRGB()
n[0][0]=-1; n[0][1]=-2; n[0][2]=-1; n[0][3]= 1; n[0][4]= 2; n[0][5]= 1;
n[1][0]= 2; n[1][1]= 1; n[1][2]=-1; n[1][3]=-2; n[1][4]=-1; n[1][5]= 1;
n[2][0]=-1; n[2][1]= 1; n[2][2]= 2; n[2][3]= 1; n[2][4]=-1; n[2][5]=-2;
// Used in calcXY()
sx[0]= 0; sx[1]=45; sx[2]= 45; sx[3]= 0; sx[4]=-45; sx[5]=-45;
nx[0]=45; nx[1]= 0; nx[2]=-45; nx[3]=-45; nx[4]= 0; nx[5]= 45;
// Used in calcXY()
sy[0]= 0; sy[1]=26; sy[2]= 78; sy[3]=104; sy[4]= 78; sy[5]= 26;
ny[0]=26; ny[1]=52; ny[2]= 26; ny[3]=-26; ny[4]=-52; ny[5]=-26;
}
function startSVG(W,H)
{
var svg="<svg ";
document.write(svg.toLowerCase());
document.writeln('width=\"'+W+'px\"\n height=\"'+H+'px\"\n');
document.writeln('viewBox=\"0 0 '+W+' '+H+'\"\n version=\"1.1\"\n');
document.writeln('xmlns=\"http://www.w3.org/2000/svg\"\n');
document.writeln('xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n');
}
function defs ( )
{
var dfs="<defs>"; var edfs="<\/defs>";
var grp="<g "; var egrp="<\/g>";
var pgn="<polygon ";
document.writeln(dfs.toLowerCase() + '\n');
document.writeln(grp.toLowerCase() + 'id="hxg">\n');
document.write(pgn.toLowerCase());
document.write(' points="15,-26, 30,0, 15,26, -15,26, -30,0, -15,-26" ');
document.writeln(egrp.toLowerCase() + '\n');
document.writeln(edfs.toLowerCase() + '\n');
}
function setScale(W,H,C,h)
{
var grp="<g ";
var hit=parseInt(H/2,10);
var wid=parseInt(W/2,10);
var numer=H*1000; var denom=2*C+1;
var calc=parseInt(numer/denom/h,10);
var sc=calc/1000; // Scaling factor to fit 2*C+1 rows into Image-Height
hxh = y*sc;
fsz = parseInt(hxh/7,10);
document.write(grp.toLowerCase());
document.write(' transform=\"translate(' +wid+ ',' +hit+ ') scale(' +sc+ ')\">');
}
function calcRGB(i,j,k,step) // based on Globals R, G, B
{
var rv, gv, bv;
rv = (c[0]*i + s[0][j]*i + n[0][j]*k)*step;
gv = (c[1]*i + s[1][j]*i + n[1][j]*k)*step;
bv = (c[2]*i + s[2][j]*i + n[2][j]*k)*step;
r = R*1 + rv*1; if(r>255) { r=255; } if(r<0) { r=0; }
g = G*1 + gv*1; if(g>255) { g=255; } if(g<0) { g=0; }
b = B*1 + bv*1; if(b>255) { b=255; } if(b<0) { b=0; };
}
function calcXY(i,j,k)
{
var sxv, nxv, syv, nyv, hyv;
sxv=sx[j]*i; nxv=nx[j]*k;
syv=sy[j]*i; nyv=ny[j]*k; hyv=h*-i;
hx = ( sxv*1 + nxv*1 );
hy = ( syv*1 + nyv*1 + hyv*1 );
}
function labelHex(x,y,rv,gv,bv)
{
var rx, ry, gx, gy, bx, by;
rx=x-8; gx=x-8; bx=x-8;
ry=y-8; gy=y*1 +5; by=y*1 +18;
document.write(' <text x="'+rx+'" y="'+ry+'" style="font-size: '+fsz+'pt;">'+rv+'<\/text>');
document.write(' <text x="'+gx+'" y="'+gy+'" style="font-size: '+fsz+'pt;">'+gv+'<\/text>');
document.write(' <text x="'+bx+'" y="'+by+'" style="font-size: '+fsz+'pt;">'+bv+'<\/text>');
}
function calc(i,j,k,S,idn)
{
var now = 0;
var prev= 0;
var delay = 1000;
var minus = 1393600000000;
var p_m, n_d, p_s, n_s;
var nid, nxt;
var dat, ms;
nid = "n";
nid += idn;
nxt = "n";
idn++;
nxt += idn;
prv = "end."+nid;
//alert("CALC NID="+nid );
//alert("CALC NXT="+nxt );
// Calculate the x,y position and the rgb() shade of each hexagon
calcXY (i,j,k); // calculate the hx,hy position of hexagon
calcRGB (i,j,k,S); // calculate the rgb colour of the hexagon
document.write ('<use xlink:href="#hxg" x="'+hx+'" y="'+hy+'" ');
document.writeln (' id="nxt" style="fill: rgb('+r+','+g+','+b+');" />');
document.writeln (' <animateTransform attributeName="transform" ');
document.writeln (' animateType="XML" type="rotate" ');
document.writeln (' from "0 '+hx+' '+hy+'" to "60 '+hx+' '+hy+'" ');
document.writeln (' begin=prv dur="1s" fill="freeze" />');
document.writeln (' </use> ');
// labelHex(hx,hy,r,g,b); // Label the hexagon with its R,G,B values
// dat = new Date();
// now = dat.getTime();
// prev = now + delay;
// do { now = dat.getTime(); }
// while ( now < prev );
}
function drawHex(W,H,C,S)
{
var i, j, k; // Loop counters
var idn = 0;
var later, delay=1000;
var dat = new Date();
var strt = dat.getTime();
var now = dat.getTime();
var l_s, n_s;
document.write ('<use xlink:href="#hxg" x="0" y="0" ');
document.writeln(' style="fill: rgb('+R+','+G+','+B+');" /> ');
// labelHex(0,0,R,G,B); // Label the Central Hexagon
for ( i=1 ; i<=C ; i++ ) // Count the 'Rings' in the Honeycomb
{
for ( j=0 ; j<6 ; j++ ) // Count the 6 Sectors of the Hexagon
{
for ( k=0 ; k<i ; k++ ) // Count the Segments within the Sector
{
idn++;
calc (i,j,k,S,idn);
// later = now + delay; // some future millisec
// do { now = Date.now(); }
// while ( now < later );
}
}
}
}
function end()
{
var egrp="<\/g>"; var esvg="<\/svg>";
document.writeln(egrp.toLowerCase() + "\n");
document.writeln(esvg.toLowerCase() + "\n");
}
function promt()
{
prompts();
setVals(H,C);
}
function start() { startSVG(W,H); }
function scale() { setScale(W,H,C,h); }
function draw() { drawHex(W,H,C,S); }