This is a read-only archive of the inkscapeforum.com site. You can search for info here or post new questions and comments at Hi,
I'm trying to slow down a SVG build.
I'm using <use> in a javascript loop.
JS has no sleep() function.
Is there any way I can add 'dur="500ms"' to my <use>,
or can anyone suggest some other technique?
Thanks, in advance,
JJ
sleep()
Re: sleep()
Hello:
Could you post some details, some sample code?
- I think that the usual in javascrpit is to use SetInterval or SetTimeOut:
http://www.w3schools.com/js/js_timing.asp
- Here, you can find more specific inofrmation for SVG
http://learnsvg.com/tutorials/tutorialS ... /anime.svg
- Other idea is to have a variable for controling the frames/second in your animation.
I wish you could share your solution
Greetings
Could you post some details, some sample code?
- I think that the usual in javascrpit is to use SetInterval or SetTimeOut:
http://www.w3schools.com/js/js_timing.asp
- Here, you can find more specific inofrmation for SVG
http://learnsvg.com/tutorials/tutorialS ... /anime.svg
- Other idea is to have a variable for controling the frames/second in your animation.
I wish you could share your solution
Greetings
If you have problems:
1.- Post a sample (or samples) of your file please.
2.- Please check here:
http://tavmjong.free.fr/INKSCAPE/MANUAL/html/index.html
3.- If you manage to solve your problem, please post here your solution.
1.- Post a sample (or samples) of your file please.
2.- Please check here:
http://tavmjong.free.fr/INKSCAPE/MANUAL/html/index.html
3.- If you manage to solve your problem, please post here your solution.
Re: sleep()
Hi hufl2012,
I see again that you replied to my previous thread about sleep().
I felt then that I couldn.t show you my code as it was very complicated.
I was using javascript to build ' 'honeycomb' of a mosaic of dozens of hexagons.
Each hexagon was placed precisely, and each being of a different colour,
differing from a central grey, towards Red, Yellow, Green, Cyan, Blue and Masgenta
as they approached the 'points' of the 'honeycomb'
The JS worked OK, but it produced an instantaneous honeycomb.
I wanted the effect of the honeycomb growing slowly from the centre.
My new experiment with <animateColor> is part of that slow-motion attempt ! !.
You can see - I never give up !
Thanks,
JimJoyce
I see again that you replied to my previous thread about sleep().
I felt then that I couldn.t show you my code as it was very complicated.
I was using javascript to build ' 'honeycomb' of a mosaic of dozens of hexagons.
Each hexagon was placed precisely, and each being of a different colour,
differing from a central grey, towards Red, Yellow, Green, Cyan, Blue and Masgenta
as they approached the 'points' of the 'honeycomb'
The JS worked OK, but it produced an instantaneous honeycomb.
I wanted the effect of the honeycomb growing slowly from the centre.
My new experiment with <animateColor> is part of that slow-motion attempt ! !.
You can see - I never give up !
Thanks,
JimJoyce
Re: sleep()
It's interesting,
and sort of complex. See the links I posted before.
If you can, post the code, maybe not me, but some other could help in this effect. If not ... no problem.
and sort of complex. See the links I posted before.
If you can, post the code, maybe not me, but some other could help in this effect. If not ... no problem.
If you have problems:
1.- Post a sample (or samples) of your file please.
2.- Please check here:
http://tavmjong.free.fr/INKSCAPE/MANUAL/html/index.html
3.- If you manage to solve your problem, please post here your solution.
1.- Post a sample (or samples) of your file please.
2.- Please check here:
http://tavmjong.free.fr/INKSCAPE/MANUAL/html/index.html
3.- If you manage to solve your problem, please post here your solution.
Re: sleep()
Hi, Hulf,
I don't mind posting the code.
But the Forum Administrators might object.
The JS is about 270 lines.
The final function in the JS shows the sequence of functions.
The final one: drawHex() is the key function.
There's no CSS. The HTML is only 14 lines.
Here's the JS
I apologise for my ultra-brief variable-identifiers.
Briefly: W=Width, H=Height, C=Circle(meaning : hexagonal ring), S=Colour-Step
I hope most of the others are self evident.
JimJoyce
I don't mind posting the code.
But the Forum Administrators might object.
The JS is about 270 lines.
The final function in the JS shows the sequence of functions.
The final one: drawHex() is the key function.
There's no CSS. The HTML is only 14 lines.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ANIM.HTML</title>
<script type="text/javascript" src="anim.js"> </script>
</head>
<body onload="promt()">
<object type="image/svg+xml"
data="../anim-colors/anim-color1.svg"
style="float:left;padding:5px;margin-right:1cm;"
width="510" height="572" border="1"></object>
</body>
</html>
Here's the JS
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
var R, G, B; // Colour of Central Hexagon
var r,g,b; // colour of each other hexagon
var H; // Given Height of whole hexagonal Image
var C; // Given Number of hexagonal 'circles'
var S; // Given StepSize of colourChange
var W; // Computed width of Image
var L; // Label Dec/Hex/None
var h, w; // height,width of individual hexagon
var uy, ux; // Unscaled h/w of individual hexagon
var x, y; // centrePoint of each Hexagon
var hxh; // Actual height of individual hexagon
var sc; // Scaling factor
var fsz; // Font-size in hexagon labels
var K; // Hexagon Count
var ID; // Hexagon id;
var c = new Array(3);
var s = new Array(3);
var n = new Array(3);
var sx = new Array(6);
var nx = new Array(6);
var sy = new Array(6);
var ny = new Array(6);
s[0] = new Array(6);
s[1] = new Array(6);
s[2] = new Array(6);
n[0] = new Array(6);
n[1] = new Array(6);
n[2] = new Array(6);
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
function prompts ( )
{ // Get User's Colour and
// other requirements
//alert("Prompts");
R=0; r=0; G=0; g=0; B=0; b=0;
R = prompt("Red-value (0-255)",215);
G = prompt("Green-value (0-255)",215);
B = prompt("Blue-value (0-255)",215);
H = prompt("Suggest ImageHeight (300-500)",572);
C = prompt("Number of Concentric \'Circles\' (1-6)",5);
S = prompt("StepSize of ColourChange (1-4)",4);
L = prompt("Dec/Hex/None (D/H/N)",'D');
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
function setVals(H,C)
{
//alert("SetVals");
h = 52; // nominal height of individual hexagon
w = 60; // nominal width of individual hexagon
uy = H/(2*C+1); // Unscaled height of individual hexagon
ux = 15*uy/13; // Unscaled width of individual hexagon
W = (ux*(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
K = 0; // start Hexagon Count
r= 0; g= 0; b= 0;
c[0]= 2; c[1]= -1; c[2]= -1;
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;
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;
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;
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)
{
//alert("StartSVG");
document.writeln('<svg width=\"'+W+'px\"\n height=\"'+H+'px\"');
document.writeln('viewBox=\"0 0 '+W+' '+H+'\"\n version=\"1.1\"');
document.writeln('xmlns=\"http://www.w3.org/2000/svg\"');
document.writeln('xmlns:xlink=\"http://www.w3.org/1999/xlink\">');
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
function defs ( )
{
//alert("Defs");
document.writeln('<defs>');
document.writeln('<g id="hxg">');
document.writeln('<polygon points=');
document.writeln('"15,-26, 30,0, 15,26, -15,26, -30,0, -15,-26" />');
document.writeln('<\/g>');
document.writeln('<\/defs>');
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
function setScale(W,H,C,h)
{
///alert("SetScale");
var hh = parseInt(H/2,10); // half-height, used to transform-translate Y
var hw = parseInt(W/2,10); // half-width, used to transform-translate X
var numer = H*1000;
var denom = 2*C+1; // number of hexagons in Vertical stack
var calc = parseInt(numer/denom/52,10);
sc = calc/1000; // Scaling factor to fit 2*C+1 rows into Image-Height
hxh = uy*sc; // Scaled height of individual hexagon
fsz = parseInt((H/100+4),10); // mostly in range 8px to 12px
alert("CALC SC FSZE="+calc+' '+sc+' '+fsz);
document.write('<g ');
document.write('transform=\"translate(' +hw+ ',' +hh+ ') scale(' +sc+ ')\">');
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
function calcRGB(R,G,B, i,j,k, step)
{
//alert("CalcRGB");
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)
{
//alert("CalcXY");
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 ); // '*1' necessary to prevent
hy = ( syv*1 + nyv*1 + hyv*1 ); // string-concatenation ! !
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
function labelDec(x,y,r,g,b)
{
//alert("LabelDEC");
var lx, ry, gy, by;
lx=x-8; gy=y*1 +3; ry=gy-fsz; by=gy+fsz;
document.write(' <text x="'+lx+'" y="'+ry+'" style="font-size: '+fsz+'px;">'+r+'<\/text>');
document.write(' <text x="'+lx+'" y="'+gy+'" style="font-size: '+fsz+'px;">'+g+'<\/text>');
document.write(' <text x="'+lx+'" y="'+by+'" style="font-size: '+fsz+'px;">'+b+'<\/text>');
}
/* * * * * * * * * * * * * * * * * * */
function labelHex(x,y,r,g,b)
{
//alert("LabelHex");
var rgb, hr, hg, hb, hex, lx, ly;
rgb = r*65536 + g*256 + b;
hr = r.toString(16);
//alert("HEX R="+hr);
hg = g.toString(16);
//alert("HEX G="+hg);
hb = b.toString(16);
//alert("HEX B="+hb);
hex = hr+' '+hg+' '+hb;
//alert("HEX="+hex);
hex = hex.toUpperCase();
//alert("HEX="+hex);
lx = x-24;
ly = y+6;
document.write(' <text x="'+lx+'" y="'+ly+'" style="font-size: '+fsz+'px;">'+hex+'<\/text>');
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
function showHex(x,y,r,g,b)
{
K++;
ID = "K"+K;
alert("ShowHex="+ID);
// Count Hexagons
document.writeln('<use id='+'"+ID+"' xlink:href="#hxg" x="'+x+'" y="'+y+'"');
document.writeln('style="fill: rgb('+r+','+g+','+b+');" >');
document.writeln('<\/use>');
if ( L=='D' )
{ labelDec(x,y,r,g,b); } // Label with its R,G,B values
else if ( L=='H' )
{ labelHex(x,y,r,g,b); } // Label with hexadecimal value
else if ( L=='N' )
{ ; } // No labels
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
function drawHex(C,S)
{
//alert("DrawHex");
var anim="<animate "; var eanim="<\/animate>";
var i, j, k; // Loop counters
showHex (0,0,R,G,B); // Draw Central hexagon, centred on x=0, y=0
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
{
calcXY (i,j,k); // calculate the x,y centre of hexagon
calcRGB (R,G,B,i,j,k,S); // calculate the r,g,b colour of hexagon
showHex (hx,hy,r,g,b); // place and colour the hexagon
}
}
}
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
function end()
{
document.writeln('<\/g>\n<\/svg>');
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
function promt()
{
alert("Promt");
prompts();
setVals(H,C);
startSVG(W,H);
defs();
setScale(W,H,C,h);
drawHex(C,S);
showData();
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
I apologise for my ultra-brief variable-identifiers.
Briefly: W=Width, H=Height, C=Circle(meaning : hexagonal ring), S=Colour-Step
I hope most of the others are self evident.
JimJoyce