2023-07-13 08:12:36 +01:00
|
|
|
<!doctype html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
|
|
|
<script src="script.js" defer></script>
|
|
|
|
|
<style>
|
|
|
|
|
svg {
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
max-height: 100%;
|
|
|
|
|
border: 1px solid black;
|
|
|
|
|
}
|
|
|
|
|
body {
|
|
|
|
|
padding: 0;
|
|
|
|
|
margin: 0;
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template:
|
|
|
|
|
"drawing" 50vh
|
|
|
|
|
"controls" 1fr
|
|
|
|
|
/ 1fr;
|
|
|
|
|
}
|
|
|
|
|
textarea {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 20em;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<section id="drawing">
|
2025-05-07 11:32:22 +01:00
|
|
|
<svg viewBox="0 0 190 195" xmlns="http://www.w3.org/2000/svg">
|
2023-07-13 08:12:36 +01:00
|
|
|
<defs>
|
|
|
|
|
<path id="spectre"
|
|
|
|
|
d="M 0 1 C 0.6 0.6699999999999999 0.6 0.32999999999999996 0 0 C 0.33 -0.6 0.67 -0.6 1 0 C 1.684615242270663 0.014211616751135248 1.854615242270663 -0.2802370205355739 1.5 -0.8660254037844386 C 2.0857883832488646 -1.2206406460551018 2.380237020535574 -1.0506406460551019 2.366025403784439 -0.36602540378443865 C 1.7660254037844387 -0.03602540378443864 1.7660254037844387 0.3039745962155614 2.366025403784439 0.6339745962155614 C 2.696025403784439 0.033974596215561426 3.0360254037844387 0.033974596215561426 3.366025403784439 0.6339745962155614 C 3.011410161513776 1.2197629794644262 3.1814101615137758 1.5142116167511352 3.866025403784439 1.5 C 3.880237020535574 2.184615242270663 3.5857883832488646 2.354615242270663 3 2 C 3.014211616751135 1.3153847577293367 2.719762979464426 1.1453847577293368 2.133974596215561 1.5 C 2.4885898384862246 2.085788383248865 2.3185898384862247 2.3802370205355743 1.6339745962155614 2.3660254037844393 C 1.3039745962155613 1.7660254037844392 0.9639745962155614 1.7660254037844392 0.6339745962155614 2.3660254037844393 C 0.3039745962155614 2.9660254037844394 -0.03602540378443864 2.9660254037844394 -0.3660254037844386 2.3660254037844393 C -0.011410161513775163 1.7802370205355742 -0.18141016151377531 1.4857883832488645 -0.866025403784439 1.5 C -0.8802370205355741 0.8153847577293366 -0.5857883832488648 0.6453847577293367 0 1"
|
2025-05-07 11:32:22 +01:00
|
|
|
stroke="black"
|
2023-07-13 08:12:36 +01:00
|
|
|
stroke-width="0.1"
|
2025-05-07 11:32:22 +01:00
|
|
|
stroke-opacity="1"
|
2023-07-13 08:12:36 +01:00
|
|
|
stroke-linejoin="round"
|
|
|
|
|
fill="currentColor"></path>
|
|
|
|
|
</defs>
|
2025-05-07 11:32:22 +01:00
|
|
|
<g id="board"></g>
|
2023-07-13 08:12:36 +01:00
|
|
|
</svg>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<section id="controls">
|
|
|
|
|
<fieldset>
|
|
|
|
|
<legend>Viewbox</legend>
|
2025-05-07 11:32:22 +01:00
|
|
|
<label for="ox">min x</label>
|
|
|
|
|
<input type="number" min="-500" max="500" value="0" id="ox">
|
|
|
|
|
<output for="ox"></output>
|
|
|
|
|
<label for="oy">min y</label>
|
|
|
|
|
<input type="number" min="-500" max="500" value="0" id="oy">
|
|
|
|
|
<output for="oy"></output>
|
|
|
|
|
<label for="width">max x</label>
|
|
|
|
|
<input type="number" min="-500" max="500" value="190" id="width">
|
|
|
|
|
<output for="width"></output>
|
|
|
|
|
<label for="height">max y</label>
|
|
|
|
|
<input type="number" min="-500" max="500" value="190" id="height">
|
|
|
|
|
<output for="height"></output>
|
|
|
|
|
|
|
|
|
|
<label for="scale">Piece scale</label>
|
|
|
|
|
<input type="range" min="0" max="1" value="1" step="0.01" id="scale">
|
|
|
|
|
<output for="scale"></output>
|
2023-07-13 08:12:36 +01:00
|
|
|
</fieldset>
|
|
|
|
|
<fieldset>
|
|
|
|
|
<legend>Colours</legend>
|
|
|
|
|
<label for="col1">Colour 1</label>
|
|
|
|
|
<input type="color" id="col1" value="#00ff80">
|
|
|
|
|
<label for="col2">Colour 2</label>
|
|
|
|
|
<input type="color" id="col2" value="#5500ff">
|
|
|
|
|
</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">
|
|
|
|
|
<label for="colouring_rule">Colouring rule</label>
|
|
|
|
|
<textarea id="colouring_rule">
|
|
|
|
|
const sat = t;
|
|
|
|
|
const hue = lerp(150,260,y*lerp(0.9,1.1,Math.random()));
|
|
|
|
|
const lum = lerp(50,80,((1-x)+5*(1-y))/6);
|
|
|
|
|
return `hsl(${hue},${sat}%,${lum}%)`;
|
|
|
|
|
</textarea>
|
|
|
|
|
</fieldset>
|
|
|
|
|
<button type="button" id="rebuild">Rebuild</button>
|
|
|
|
|
<button type="button" id="finish">Finish</button>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
