diff --git a/index.html b/index.html index 7c7d6a7..86c671f 100644 --- a/index.html +++ b/index.html @@ -27,32 +27,39 @@ textarea {
- + - - The Aperiodical +
Viewbox - - - - - - - - + + + + + + + + + + + + + + + +
Colours diff --git a/script.js b/script.js index 4718325..b8147dd 100644 --- a/script.js +++ b/script.js @@ -185,10 +185,9 @@ class Shape const [a,c,e,b,d,f] = S; const matS = [a,b,c,d,e,f].map(p=>p.toFixed(3)); - const s = ``; + //const s = ``; - //const points = this.pts.map(({x,y}) => `${x.toFixed(3)},${y.toFixed(3)}`).join(' '); -/* + const points = this.pts.map(({x,y}) => `${x.toFixed(3)},${y.toFixed(3)}`).join(' '); const tp = this.pts[0]; var s = ``; -*/ stream.push( s ); } @@ -252,14 +250,10 @@ class Meta const {minx,miny,maxx,maxy} = this.bounds(S); const [a,c,e,b,d,f] = S; - const matS = [a,b,c,d,e,f].map(p=>p.toFixed(3)); - stream.push(``); - const quad_points = this.quad.map(({x,y}) => `${x},${y}`).join(' '); - // stream.push(``); + const matS = [a,b,c,d,e,f];//.map(p=>p.toFixed(3)); for( let g of this.geoms ) { - g.geom.streamSVG( g.xform, stream ); + g.geom.streamSVG( mul(S,g.xform), stream ); } - stream.push(''); } @@ -581,6 +575,10 @@ function hexToHSL(H) { let last_num_iterations; function get_settings() { + Array.from(document.querySelectorAll('input[type="range"]')).forEach(i => { + const o = document.querySelector(`output[for="${i.id}"]`); + o.textContent = i.value; + }); return Object.fromEntries( Array.from(document.querySelectorAll('input,textarea')).map(i => [i.id, i.type=='number' ? i.valueAsNumber : i.value]) ); @@ -609,7 +607,7 @@ function rebuild() { for(let c of g.children) { visit(c, t+Math.random()*10-5); } - if(g.tagName=='use') { + if(g.tagName=='path') { const b = g.getBoundingClientRect(); const x = (b.x - viewbox.x) / viewbox.width; const y = (b.y - viewbox.y) / viewbox.height; @@ -623,13 +621,20 @@ function rebuild() { function finish() { const svg = document.querySelector('svg'); const viewbox = svg.getBoundingClientRect(); - Array.from(document.querySelectorAll('#board g,use')).filter(g=>{ + Array.from(document.querySelectorAll('#board use, #board path')).filter(g=>{ const b = g.getBoundingClientRect(); - return (b.x+b.widthviewbox.x+viewbox.width || b.y>viewbox.y+viewbox.height); + return (b.xviewbox.x+viewbox.width || b.y+b.height>viewbox.y+viewbox.height); }).forEach(g => g.parentElement.removeChild(g)) - Array.from(svg.querySelectorAll('text')).forEach(text => { - text.parentElement.removeChild(text); + + const transforms = Array.from(document.querySelectorAll('#board use')).map(g=>{ + const {a,b,c,d,e,f} = g.transform.baseVal[0].matrix; + return [ + [a,c,0,e], + [b,d,0,f], + [0,0,1,0] + ]; }); + console.log(transforms); navigator.clipboard.writeText(svg.outerHTML); } @@ -637,7 +642,12 @@ function setup() { const settings = get_settings(); const svg = document.querySelector('svg'); //const bounds = sys.bounds(ident); - svg.setAttribute('viewBox',`${settings.vx1} ${settings.vy1} ${settings.vx2-settings.vx1} ${settings.vy2-settings.vy1}`); + svg.setAttribute('viewBox',`${settings.ox - settings.width/2} ${settings.oy - settings.height/2} ${settings.width} ${settings.height}`); + const mx = spectre.map(p=>p.x).reduce((a,b)=>a+b)/spectre.length; + const my = spectre.map(p=>p.y).reduce((a,b)=>a+b)/spectre.length; + console.log(Math.max(...spectre.map(p=>p.x)) - Math.min(...spectre.map(p=>p.x))); + console.log(Math.max(...spectre.map(p=>p.y)) - Math.min(...spectre.map(p=>p.y))); + document.getElementById('spectre').setAttribute('transform',`translate(${mx},${my}) scale(${settings.scale}) translate(${-mx},${-my})`); if(settings.num_iterations != last_num_iterations) { rebuild();