clp/aperiodic-monotile-reference
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

something for the hoodie pattern?

Browse source 
Came back to this after a long time.

For some reason, the tiles have straight lines.
This commit is contained in:
Christian Lawson-Perfect 2025-05-07 11:32:22 +01:00
parent e800edc47e
commit c34514e939
2 changed files with 49 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

48
script.js
View file

@ -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 = `<use href="#spectre" transform="matrix(${matS.join(',')})"/>`;
//const s = `<use href="#spectre" transform="matrix(${matS.join(',')}) "/>`;
//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 = `<path transform="matrix(${matS.join(',')})" d="M ${tp.x} ${tp.y}`;
@ -198,15 +197,14 @@ class Shape
const b = this.pts[idx+1];
const c = this.pts[idx+2];
s = s + ` C ${a.x} ${a.y} ${b.x} ${b.y} ${c.x} ${c.y}`;
s = s + ` L ${c.x} ${c.y}`;
}
s = s + `"
stroke="currentColor"
stroke="white"
stroke-width="0.1"
stroke-opacity="0.2"
stroke-opacity="1"
fill="currentColor" />`;
*/
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(`<g transform="matrix(${matS.join(',')})">`);
const quad_points = this.quad.map(({x,y}) => `${x},${y}`).join(' ');
// stream.push(`<polygon fill="blue" fill-opacity="0.2" points="${quad_points}"></polygon>`);
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('</g>');
}
@ -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.width<viewbox.x || b.y+b.height<viewbox.y || b.x>viewbox.x+viewbox.width || b.y>viewbox.y+viewbox.height);
return (b.x<viewbox.x || b.y<viewbox.y || b.x+b.width>viewbox.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();