71 lines
No EOL
1.3 KiB
JavaScript
71 lines
No EOL
1.3 KiB
JavaScript
/*
|
||
Duration: 52 seconds.0:52
|
||
Hilbert curve at its sixth iteration
|
||
|
||
Alphabet : A, B
|
||
Constants : F + −
|
||
Axiom : A
|
||
Production rules:
|
||
*/
|
||
|
||
console.clear();
|
||
|
||
const rules = {
|
||
"A": "+BF-AFA-FB+",
|
||
"B": "-AF+BFB+FA-",
|
||
};
|
||
|
||
let steps = 5;
|
||
|
||
let s = "A";
|
||
for(let i=0;i<steps;i++) {
|
||
let ns = "";
|
||
for(let c of s) {
|
||
ns += rules[c] || c;
|
||
}
|
||
s = ns;
|
||
}
|
||
|
||
let [x,y] = [0,0];
|
||
const m = 2**(-steps);
|
||
let dir = [m,0];
|
||
let d = 'M 0 0 ';
|
||
const width = 1.5 * 2**-(steps+1);
|
||
|
||
const dots = [];
|
||
|
||
for(let c of s) {
|
||
const [dx,dy] = dir;
|
||
switch(c) {
|
||
case '+':
|
||
dir = [-dy,dx];
|
||
break;
|
||
case '-':
|
||
dir = [dy,-dx];
|
||
break;
|
||
case 'F':
|
||
x += dx;
|
||
y += dy;
|
||
d += `l ${dx} ${dy}`;
|
||
}
|
||
}
|
||
|
||
const length = 2**steps - 1;
|
||
|
||
document.getElementById('curve').setAttribute('stroke-width',width);
|
||
document.getElementById('curve').setAttribute('d',d);
|
||
document.getElementById('dots').setAttribute('stroke-width',width*0.4);
|
||
document.getElementById('dots').setAttribute('d',d);
|
||
document.getElementById('dots').setAttribute('stroke-dasharray',`0.0000001 ${2*m}`);
|
||
|
||
function easeInOutSine(x) {
|
||
return -(Math.cos(Math.PI * x) - 1) / 2;
|
||
|
||
}
|
||
function frame() {
|
||
const period = 1000;
|
||
const t = (new Date()-0)/period % 1000;
|
||
document.getElementById('dots').setAttribute('stroke-dashoffset',easeInOutSine(t)*m);
|
||
requestAnimationFrame(frame);
|
||
}
|
||
frame(); |