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

first commit

Browse source
This commit is contained in:
Christian Lawson-Perfect 2025-02-09 19:58:41 +00:00
commit 9a575ba8ec
17 changed files with 1303 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

130
index.html Normal file
View file

@ -0,0 +1,130 @@
<!doctype html>
<html lang="en">
<head>
<title>Design an aperiodic monotile thing</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="script.js" defer></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section id="drawing">
<svg viewBox="-100 -100 200 200" xmlns="http://www.w3.org/2000/svg">
<defs>
<path id="spectre" class="spectre"
d="m 1.5,-0.8660254 c 0.5735127,0.00665 0.2925127,0.4933532 0.8660254,0.5 0.281,0.5 -0.281,0.5 0,1 0.5,-0.281 0.5,0.281 1,0 0.4933531,0.2925127 0.00665,0.5735127 0.5,0.8660254 C 3.5735127,1.9933532 3.2925127,1.50665 3,2.0000001 2.4264873,1.9933501 2.7074873,1.5066468 2.1339746,1.5 c -0.00665,0.5735128 -0.4933532,0.2925128 -0.5,0.8660255 -0.5,0.281 -0.5,-0.281 -1,0 -0.5,0.281 -0.5,-0.281 -1,0 C -0.8593785,2.0735128 -0.3726754,1.7925128 -0.8660254,1.5 -0.5735127,1.0066468 -0.2925127,1.49335 0,1 -0.281,0.5 0.281,0.5 0,0 0.5,-0.281 0.5,0.281 0.99999998,0 1.00665,-0.5735127 1.4933531,-0.2925127 1.5,-0.8660254 Z"
stroke="black"
stroke-width="0.1"
stroke-opacity="0.5"
stroke-linejoin="round"
fill="currentColor"></path>
</defs>
<g id="display">
<g id="board" transform="translate(0 -120) rotate(90)"></g>
<g id="guides">
<line x1="-1000" x2="1000" stroke="black" style="transform: translate(0, calc(1px * var(--y0-hue)))"/>
<line x1="-1000" x2="1000" stroke="black" style="transform: translate(0, calc(1px * var(--y1-hue)))"/>
<line x1="-1000" x2="1000" stroke="black" style="transform: translate(0, calc(1px * var(--y0-lum)))"/>
<line x1="-1000" x2="1000" stroke="black" style="transform: translate(0, calc(1px * var(--y1-lum)))"/>
</g>
<g id="draggables">
<image class="draggable template hoodie" id="hoodie-back" href="template/hoodie_back_template.png" x="14" y="-71" />
<image class="draggable template hoodie" id="hoodie-front" href="template/hoodie_front_template.png" x="54" y="-71" />
<image class="draggable template hoodie" id="hoodie-front-pocket" href="template/hoodie_front_pocket_template.png" x="-17" y="-79" />
<image class="draggable template hoodie" id="hoodie-hood" href="template/hoodie_hood_template.png" x="28" y="-111" />
<image class="draggable template hoodie" id="hoodie-label-panel" href="template/hoodie_label_panel_template.png" x="71" y="-96" />
<image class="draggable template hoodie" id="hoodie-left-sleeve" href="template/hoodie_left_sleeve_template.png" x="90" y="-70" />
<image class="draggable template hoodie" id="hoodie-right-sleeve" href="template/hoodie_right_sleeve_template.png" x="121" y="-70" />
<image class="draggable template tshirt" id="tshirt-right-sleeve" href="template/TShirt_Right_Sleeve.png" x="83" y="-60" />
<image class="draggable template tshirt" id="tshirt-left-sleeve" href="template/TShirt_Left_Sleeve.png" x="42" y="-60" />
<image class="draggable template tshirt" id="tshirt-front" href="template/TShirt_Front.png" x="2" y="-60" />
<image class="draggable template tshirt" id="tshirt-back" href="template/TShirt_Back.png" x="-39" y="-60" />
<circle class="draggable" id="y0-lum" cx="0" cy="30" r="5"/>
<circle class="draggable" id="y1-lum" cx="0" cy="-150" r="5"/>
<circle class="draggable" id="y0-hue" cx="30" cy="-100" r="5"/>
<circle class="draggable" id="y1-hue" cx="30" cy="-30" r="5"/>
</g>
</g>
</svg>
</section>
<section id="controls">
<details open>
<summary>Instructions</summary>
<p>Use the controls to change the colours.</p>
<p>Drag the circles around to change the gradients of hue and lightness.</p>
<p>Drag the templates for the pieces of the garment that will be cut out.</p>
<p>When you're done, click the <em>Finish</em> button and <a href="mailto:christian+clothes@lawson-perfect.uk?subject=Please+make+this+for+me">send the file to me</a>.</p>
</details>
<form>
<fieldset>
<legend>View</legend>
<label for="zoom">
Zoom
</label>
<input type="range" min="0.2" max="10" value="1" step="0.01" id="zoom">
</fieldset>
<fieldset>
<legend>Colours</legend>
<label for="min-hue">
Hue 1
</label>
<div class="colour-input-wrapper">
<input type="range" name="min-hue" id="min-hue" value="150" min="0" max="360">
</div>
<output for="min-hue"></output>
<label for="max-hue">
Hue 2
</label>
<div class="colour-input-wrapper">
<input type="range" id="max-hue" value="260" min="0" max="360">
</div>
<output for="max-hue"></output>
<label for="interpolation-long">
Long way round
</label>
<input type="radio" name="hue-interpolation" value="longer hue" id="interpolation-long">
<label for="interpolation-short">
Short way round
</label>
<input type="radio" checked name="hue-interpolation" value="shorter hue" id="interpolation-short">
<label for="sat-scale">
Saturation scale:
</label>
<input type="range" min="0" max="5" step="0.001" id="sat-scale" value="1.5">
<output for="sat-scale"></output>
<label for="randomisation">
Randomisation:
</label>
<input type="range" min="0" max="1" step="0.01" id="randomisation" value="0.2">
<output for="randomisation"></output>
</fieldset>
<fieldset>
<legend>Tiling</legend>
<label for="num_iterations">Number of iterations</label>
<input type="number" min="1" max="5" value="4" id="num_iterations">
</fieldset>
<fieldset>
<legend>Pieces</legend>
<label for="template-name">Template</label>
<select name="template-name" id="template-name">
<option value="hoodie" selected>Hoodie</option>
<option value="tshirt">T-shirt</option>
</select>
<label for="template-scale">Template scale</label>
<input type="range" min="0.2" max="5" value="2" step="0.01" id="template-scale">
</fieldset>
<button type="button" id="finish">Finish</button>
<a id="link" download="aperiodic-monotile-design.svg">Download</a>
</form>
</section>
</body>
</html>