130 lines
No EOL
7.6 KiB
HTML
130 lines
No EOL
7.6 KiB
HTML
<!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> |