File:Academ Five sequences from a fractal.svg
Jump to navigation
Jump to search
Size of this PNG preview of this SVG file: 800 × 600 pixels. Other resolutions: 320 × 240 pixels | 640 × 480 pixels | 1,024 × 768 pixels | 1,280 × 960 pixels | 2,560 × 1,920 pixels | 1,040 × 780 pixels.
Original file (SVG file, nominally 1,040 × 780 pixels, file size: 7 KB)
Captions
Captions
Add a one-line explanation of what this file represents
Summary
[edit]| Description |
English: Click the PNG image in this top page, save the SVG file,
copy and paste the following script just after the root element: the svg element. So the SVG file becomes the one of an interactive image (see comment in SVG source code). Yet no animation of a fractal line and no control of the views in the first version of the interactive image. And the only effect of selecting a row in the menu is changing the logo, top left. But the geometric figure is progressively modified when you click one of the triangular buttons in the top right image. JavaScript has to be activated in the browser, or else the image is not interactive. A logo is associated to each exhibited sequence, its image exists in SVG or PNG format. So each logo can be inserted into a text, for example in the title of a rubric. Here are the files of the five logos: File:1 Logo Triangular fractal.svg, File:2 Logo Triangular fractal.svg, etc. Called the Sierpinski triangle, the geometric figure has an infinite number of states in mathematics. Within the image, seven states are numbered from zero to six by the "degree" of dividing or fragmenting, denoted by d. When d is zero, the geometric figure in its initial state consists of an only equilateral triangle, in dark blue. When d increases from zero to one, the midpoints of the sides of the initial triangle become the vertices of a triangular hole, that is light-colored. Three duplicates of the initial triangle to scale 0.5 surround this hole, which also reproduces the original triangle to scale 1 / 2. At each new fragmentation, a light hole pierces each dark triangle, like the first hole pierced the initial triangle. What are the five sequences proposed in the menu? By counting objects we obtain the first three sequences: we count how many triangles in dark blue, or how many holes, or how many line segments in the "fractal" in its successive states. The number of all the different sizes of holes is always d: the degree of fragmentation, while all the triangles in dark blue are superposable: with the same size. The logos associated to the first three sequences have a background in dark blue, the logos of the last two sequences have an orange background. The last sequences are the lists of total areas and perimeters of all the triangles in dark blue. This total perimeter denoted by Fd is the length of a "fractal line": the length of a closed polygonal chain composed of segments, of which s d denotes the number of segments. Along the sides of all the dark triangles, we can draw a fractal line in its entirety without ever lifting the pencil to move to a new location, and by passing exactly once the pencil along each side of triangle, and each segment of the fractal line. At each new fragmentation, there are as many segments folded into five segments as new holes in the figure, while the other segments of the fractal are not changed.Français : Cliquez l’image PNG en tête de cette page, enregistrez le fichier SVG, copiez le script ci-dessus affiché dans la description en anglais, et collez le script juste après l’élément racine : l’élément svg. Alors le fichier SVG devient celui d’une image interactive (voir le commentaire dans le code source).
Pas encore d’animation d’une ligne fractale, et pas de moyen de grossir plus ou moins la figure dans la première version de l’image interactive. Et sélectionner une ligne dans le menu a pour seul effet de changer le logo, en haut à gauche. Mais la figure géométrique est progressivement modifiée quand on clique l’un des boutons triangulaires, en haut à droite de l’image. JavaScript doit être activé dans le navigateur, sinon l’image n’est pas interactive. Un logo est associé à chaque suite présentée, son image existe au format SVG ou PNG. Ainsi chaque logo peut être inséré dans un texte, par exemple en tête d’une rubrique. Les fichiers des cinq logos sont à ces pages : File:1 Logo Triangular fractal.svg, File:2 Logo Triangular fractal.svg, etc. Nommée triangle de Sierpinski, la figure géométrique prend un nombre infini d’états en mathématiques. Dans l’image, sept états sont numérotés de zéro à six par le “degré” de fractionnement ou de fragmentation de la figure, désigné par d. Quand d est nul, la figure dans son état initial est composée d’un seul triangle équilatéral de couleur bleu sombre. Quand d passe de zéro à un, les milieux des côtés du triangle initial deviennent les sommets d’un trou triangulaire de couleur claire. Trois répliques du triangle initial à l’échelle un demi entourent ce trou, qui reproduit également le triangle initial à l’échelle 1 / 2. À chaque nouveau fractionnement, un trou de lumière perce chaque triangle sombre, de la même façon que le premier trou a percé le triangle initial. Quelles sont les cinq suites proposées au menu ? En dénombrant des objets on obtient les trois premières suites : on compte combien de triangles sombres, ou combien de trous, ou combien de segments de droites dans la “fractale” dans ses états successifs. Le nombre de toutes les tailles différentes de trous est toujours d : le degré de fragmentation, tandis que tous les triangles en bleu sombre sont toujours superposables : de la même taille. Les logos associés aux trois premières suites ont un fond bleu sombre, les logos des deux dernières suites ont un fond orangé. Les dernières suites sont les listes des aires totales et des périmètres de tous les triangles sombres. Ce périmètre total désigné par Fd est la longueur d’une “ligne fractale” : la longueur d’une ligne brisée fermée, dont s d désigne le nombre de segments. En suivant les côtés de tous les triangles sombres, on peut tracer une ligne fractale en entier sans jamais lever le crayon pour aller à un autre point, et en passant exactement une fois le crayon sur chaque côté de triangle, et sur chaque segment de la ligne fractale. À chaque nouveau fractionnement, il y a autant de segments pliés en cinq que de nouveaux trous dans la figure, alors que les autres segments de la fractale ne sont pas modifiés. |
||
| Date | |||
| Source | Own work | ||
| Author | Baelde | ||
| SVG development |  This vector image was created with a text editor.
JavaScript code<script type="text/ecmascript"><![CDATA[
onload = function(){
var gMs, trnsient, updte, ZV;
shw = document.rootElement;
shw.removeChild(shw.firstChild); shw = shw.childNodes;
updte = function(gd, bg, ft){
gd.addEventListener("mouseover", function(hl){
hl.stopPropagation(); hl.target.setAttribute("class", bg) }, true);
gd.addEventListener("mouseout", ft, true) }
updte(bN = shw[6], "mk", function(W){
W.stopPropagation(); W = W.target;
if(W.actve) W.setAttribute("class", "dj") });
ZV = function(btn, nm, klic){
btn.onclick = function(){ if( 1 & gMs){
setTimeout("bN.onOff()",207); (bN = this).actve = false;
bN.setAttribute("class","md"); cOde = cOde.split(" ");
klic() } }
btn.onOff = function(bf){
var uq;
if(this.actve = !( 2 & gMs || bf)){ uq ="inherit"; bf ="dj"
}else{ bf ="dm"; gMs &= 2097149; uq ="#789" }
this.setAttribute("class", bf);
bf = document.styleSheets[0].cssRules;
bf[nm].style.stroke = bf[nm + 3].style.fill = uq }
btn.onOff() }
ZV(bN = bN.childNodes[1], 1, function(){
var nrm = (56 & gMs) -8, lg = nrm >> 3, zx = 1984 & gMs, zy = 0,
Vb = 1 |nrm, Hd = 3 |nrm, Bh = 5 |nrm, cN = zx >> 6,
cW = 127 &(gMs >> 11), cZ = cN + cW, cn = cN << lg,
dw = cW << lg, cz = cZ << lg, Mn = -dw-cz, mn = cn-dw,
kj = cOde.length, tq = -cn, fz, rw, lt, tm, zk;
rw = Math.pow(3, 5-lg);
if( ! lg) gMs |= 2; else if(lg == 5) bN.nextSibling.onOff();
lt ="l"+ cz + tq + tq +" "+ cz;
tq = [cz, cn]; lg = (1 + rw) << 1; rw ="";
while(lg > 2){
dw = 6 & (tm = cOde[--kj]); fz = tm >> 3;
try{ if(dw > 2){
zx -= (dw = cW << fz); zy -= dw;
if(1 & tm ){ fz = Hd; zk = Vb; dw = -cn; throw cz }
}else if(dw){ zx += cZ << fz; zy -= cN << fz;
if(1 & tm ){ fz = Vb; zk = Bh; dw = Mn; throw mn }
}else{ zx -= cN << fz; zy += cZ << fz;
if(1 & tm ){ fz = Bh; zk = Hd; dw = cn; throw -cz } }
}catch(wz){ dw = tq[lg -= 2] = zx + dw; wz = tq[ 1 + lg] = zy + wz;
wz =","+ wz; rw +="M"+ dw + wz + lt; tm = 7 & tm | nrm;
wz = 62 & tm; cOde.splice(kj, 1, wz, fz, tm, zk, wz)
} }
cOde[0] = rw.length +( (lg = cOde[0]) ? "_"+ lg: "");
zk = document.rootElement.childNodes[3].childNodes[3];
trnsient(zk, tq, nrm, rw) } );
ZV(bN.nextSibling, 2, function(){
var tm = 56 & gMs, lg = tm >> 3, nrm = tm + 8, cn = 31 &(gMs >> 6),
cz = cn + (127 &(gMs >> 11)), tq = document.rootElement.childNodes[
3].childNodes[2], kj = 7-lg;
cn = [cz << lg, cn << lg];
if(lg == 5) gMs |= 2; else if( ! lg) bN.previousSibling.onOff();
lg = parseInt(tm = cOde[0]);
cOde[0] = tm.slice(1 + lg.toString().length);
cz = tq.getAttribute("d").slice(1, lg + 1);
cz = cz.split(/,|l[^M]+M/); tm = cz.length = cz.length - 1;
cn = cn.concat(cz); cz = tm + 2;
while(cz > 2){
if( nrm > (tm = cOde[++kj])){
cOde.splice(kj, 5, nrm | 7 & tm | 1);
cn[--cz] = Number(cn[cz]); cn[--cz] = Number(cn[cz]) } }
trnsient(tq.nextSibling, cn, nrm, lg) } );
trnsient = function(elm, pts, wg, dk){
var xx = pts[0], yy = pts[1], dh = Math.sqrt(3),
fct = elm.parentNode, cv = 6-(wg >> 3), stl = fct.style, stp = 9, elt;
gMs = 2097094 & gMs | wg;
cOde = cOde.join(" "); elm.style.fill ="inherit";
pts[1] = -yy; xx = Math.round(xx/dh); yy = Math.round(yy/dh);
updte(fct = fct.parentNode, cv); elt = fct.childNodes[6];
elt.lastChild.firstChild.data = cv; cv = elt.childNodes[4];
elt.insertBefore(cv, null).setAttribute("class","xz");
cv = function(){
stl.fill ="rgb("+(39+7*stp)+","+(55+9*stp)+","+(63+10*stp)+")"};
fct = isNaN(dk) ? function(){
if(stp){
if(--stp) setTimeout("cOde[1]()",57);
else{ stp = elm.previousSibling;
stp.setAttribute("d", dk + stp.getAttribute("d"));
stp = false; wg( 1 + (dk = 0.00625)) }
cv()
}else wg( 1 + (dk *= 2)) } : function(){
if(stp){
if(--stp) setTimeout("cOde[1]()",57);
else wg( 1 + (dh = 6.4));
cv()
}else if( wg(1 + (dh /= 2))){
wg = elm.previousSibling;
wg.setAttribute("d", wg.getAttribute("d").slice(dk)) } };
wg = function(rtio){
var sg, sr, gx, gy;
if(rtio > 9 || rtio < 1.006){
cOde.length = 2 ; sg =""; elt.insertBefore(elt.lastChild,
elt.childNodes[4]).setAttribute("class","rtn")
stp = 0; cOde[1] = function(){
if(stp++ < 9){
cv(); setTimeout("cOde[1]()",42) }else{ cOde = cOde[0]; shw() }
}
}else{
sg = (cOde[2] /rtio).toFixed(1); sr = (cOde[3] /rtio).toFixed(1);
sr ="l"+ sg + sr + sr +" "+ sg;
rtio = 1 - 1/rtio; gx = xx*rtio; gy = yy*rtio;
rtio = cOde.length; sg ="";
while(rtio > 4) sg +="M"+(cOde[rtio -= 2] + gx).toFixed(1)+
" "+(cOde[rtio + 1] + gy).toFixed(1) + sr }
setTimeout("cOde[1]()",93); elm.setAttribute("d", sg);
return !sr }
cOde = [cOde, fct].concat(pts); fct() }
bN = shw[3];
gMs = function(bf){
if(bf > 1) bf ="d_"; else if(bf){
setTimeout("shw()", 9); // code de shw() 5 lignes plus bas
this.parentNode.rtrct(); bf ="gc" }else bf ="mt";
this.setAttribute("class", bf) }
shw = function(){
var bc = document.rootElement, cb = bc.childNodes;
bc.insertBefore(cb[5],cb[3]); bc = cb[5];
bN = (cb = bc.childNodes)[4].pathSegList;
if(6 !=(7&(gMs >> 3))){
bN[10].x = bN[9].y = bN[11].y = 0;
cb = bc.insertBefore(cb[3], bc.firstChild);
cb.setAttribute("class","rtn")
}else{ bN[9].y = -(bN[11].y = 447); bN[10].x = -18; cb = cb[3] }
(bN = cb.pathSegList)[6].x = 300;
bN[1].x = 97; bN[4].y = 2784; bN = null; gMs |= 1 }
bN.rtrct = function(){
this.parentNode.style.fill ="#ddd";
this.childNodes[11].pathSegList[0].y = 231;
if(ZV) this.previousSibling.setAttribute("transform", ZV);
else this.nextSibling.style.display ="inline";
this.setAttribute("transform", "translate(-2811)");
this.firstChild.style.strokeWidth="480" }
bN.addEventListener("mouseout", function(hl){
hl.stopPropagation(); if(gMs & 1){ hl = hl.target;
if(gMs >> 18 != hl.jd) hl.setAttribute("class", "mt");
hl.parentNode.rtrct() } }, true);
bN.addEventListener("mouseover", function(hl){
hl.stopPropagation(); if(gMs & 1){
hl = hl.target;
if(gMs >> 18 != hl.jd) hl.setAttribute("class", "mh");
(hl = hl.parentNode).nextSibling.style.display ="none";
hl.childNodes[11].pathSegList[0].y = -231;
hl.setAttribute("transform","scale(1)");
hl.firstChild.style.strokeWidth="12";
hl.previousSibling.setAttribute("transform","translate(2640,285)");
hl.parentNode.style.fill ="#bfb7b0" } }, true);
bN.addEventListener("click", function(hl){
hl.stopPropagation(); hl = hl.target;
var vd = gMs >> 18, nw, zn;
if( !(gMs & 1) || vd == hl.jd) return;
setTimeout("bN.off(1)",207);
(bN = hl).off(2); hl = bN.parentNode; zn = hl.nextSibling;
vd = (ZV = hl.childNodes)[vd << 1]; nw = zn.removeChild(zn.lastChild);
hl.replaceChild(nw, vd); nw.setAttribute("transform","scale(1)");
nw.previousSibling.off(); nw = hl.firstChild.jd = bN.jd;
ZV = ZV[nw << 1]; gMs = (nw << 18) | (262138 & gMs);
zn.appendChild(hl.replaceChild(vd, ZV));
vd.pathSegList[0].y = (nw *= 582) + 1038;
ZV.setAttribute("transform", "translate(180,"+(-444-nw)+")");
ZV = false; updte(zn.parentNode) }, true);
updte = bN.childNodes; cOde = 5; bN.firstChild.jd = 1; ZV = false;
while(true){ (bN = updte[(cOde << 1)-1]).jd = cOde;
bN.off = gMs; if(!--cOde) break;
bN.off() }
bN.off(1);
updte = function(lf, wl){
var vl = lf.childNodes, sk, dq, pw;
lf.insertBefore(vl[3], vl[6]);
vl = (pw = vl[4]).childNodes; sk = vl[3];
if(dq = sk.tagName !="text") sk = vl[2];
else pw.insertBefore(pw.firstChild, vl[4]).setAttribute("class","xz");
(vl = vl[4].pathSegList)[9].y = vl[11].y = 0; vl[10].x = 0;
(lf = sk.nextSibling.pathSegList)[6].x = 471;
lf[4].y = 7; lf[1].x = 4000 -(lf[2].x = 2496) }
cOde ="231_83_27 52 50 40 36 26 25 27 29 26 28 27 29 25 28 24 29 25 27"+
" 24 36 32 28 27 29 25 28 24 29 25 27 24 26 25 27 29 26 32 34 24 29 25"+
" 27 24 26 25 27 29 26 28 27 29 25 28 34 40";
gMs = 24 | 26 << 6 | 71 << 11 | 1 << 18 }
//]]></script>
|
Licensing
[edit]
I, the copyright holder of this work, hereby publish it under the following licenses:
This file is licensed under the Creative Commons Attribution-Share Alike 3.0 Unported license.
- You are free:
- to share – to copy, distribute and transmit the work
- to remix – to adapt the work
- Under the following conditions:
- attribution – You must give appropriate credit, provide a link to the license, and indicate if changes were made. You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use.
- share alike – If you remix, transform, or build upon the material, you must distribute your contributions under the same or compatible license as the original.
|
Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.2 or any later version published by the Free Software Foundation; with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. A copy of the license is included in the section entitled GNU Free Documentation License. |
You may select the license of your choice.
File history
Click on a date/time to view the file as it appeared at that time.
| Date/Time | Thumbnail | Dimensions | User | Comment | |
|---|---|---|---|---|---|
| current | 13:07, 23 March 2015 | | 1,040 × 780 (7 KB) | Ysangkok (talk | contribs) | use xlink namespace instead of lk, now it validates |
| 12:18, 11 April 2012 |  | 1,040 × 780 (7 KB) | Baelde (talk | contribs) | {{Information |Description ={{en|1=Click the PNG image in this top page, save the SVG file, copy and paste the following script just after the root element: the svg element. So the SVG file is transformed into an interactive SVG image (see comment i... |
You cannot overwrite this file.
File usage on Commons
There are no pages that use this file.
