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

76 lines
3.1 KiB
HTML
Raw Normal View History

aperiodical banner design
2023-07-13 08:12:36 +01:00
<!doctype html>
<html lang="en">
<head>
making it work as a reference while making a real tiling I've gathered the vector and matrix functions in Point and Matrix classes. Going to make the building functions part of a builder class. You can drag to pan the view. Clicking a tile highlights it. Each tile is labelled with a number, but it gets reflected when there's an odd number of iterations - need to fix that.
2025-05-07 16:18:06 +01:00
<title>Aperiodic monotile</title>
aperiodical banner design
2023-07-13 08:12:36 +01:00
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
making it work as a reference while making a real tiling I've gathered the vector and matrix functions in Point and Matrix classes. Going to make the building functions part of a builder class. You can drag to pan the view. Clicking a tile highlights it. Each tile is labelled with a number, but it gets reflected when there's an odd number of iterations - need to fix that.
2025-05-07 16:18:06 +01:00
<script src="script.js?t=202505071454" defer></script>
aperiodical banner design
2023-07-13 08:12:36 +01:00
<style>
making it work as a reference while making a real tiling I've gathered the vector and matrix functions in Point and Matrix classes. Going to make the building functions part of a builder class. You can drag to pan the view. Clicking a tile highlights it. Each tile is labelled with a number, but it gets reflected when there's an odd number of iterations - need to fix that.
2025-05-07 16:18:06 +01:00
* {
box-sizing: border-box;
}
aperiodical banner design
2023-07-13 08:12:36 +01:00
svg {
making it work as a reference while making a real tiling I've gathered the vector and matrix functions in Point and Matrix classes. Going to make the building functions part of a builder class. You can drag to pan the view. Clicking a tile highlights it. Each tile is labelled with a number, but it gets reflected when there's an odd number of iterations - need to fix that.
2025-05-07 16:18:06 +01:00
width: 100%;
height: 100%;
aperiodical banner design
2023-07-13 08:12:36 +01:00
border: 1px solid black;
making it work as a reference while making a real tiling I've gathered the vector and matrix functions in Point and Matrix classes. Going to make the building functions part of a builder class. You can drag to pan the view. Clicking a tile highlights it. Each tile is labelled with a number, but it gets reflected when there's an odd number of iterations - need to fix that.
2025-05-07 16:18:06 +01:00
touch-action: pan-x pan-y;
aperiodical banner design
2023-07-13 08:12:36 +01:00
}
body {
making it work as a reference while making a real tiling I've gathered the vector and matrix functions in Point and Matrix classes. Going to make the building functions part of a builder class. You can drag to pan the view. Clicking a tile highlights it. Each tile is labelled with a number, but it gets reflected when there's an odd number of iterations - need to fix that.
2025-05-07 16:18:06 +01:00
overscroll-behavior: contain;
aperiodical banner design
2023-07-13 08:12:36 +01:00
padding: 0;
margin: 0;
display: grid;
making it work as a reference while making a real tiling I've gathered the vector and matrix functions in Point and Matrix classes. Going to make the building functions part of a builder class. You can drag to pan the view. Clicking a tile highlights it. Each tile is labelled with a number, but it gets reflected when there's an odd number of iterations - need to fix that.
2025-05-07 16:18:06 +01:00
height: 100svh;
aperiodical banner design
2023-07-13 08:12:36 +01:00
grid-template:
making it work as a reference while making a real tiling I've gathered the vector and matrix functions in Point and Matrix classes. Going to make the building functions part of a builder class. You can drag to pan the view. Clicking a tile highlights it. Each tile is labelled with a number, but it gets reflected when there's an odd number of iterations - need to fix that.
2025-05-07 16:18:06 +01:00
"drawing" 80svh
"controls" min-content
aperiodical banner design
2023-07-13 08:12:36 +01:00
/ 1fr;
}
textarea {
width: 100%;
height: 20em;
}
making it work as a reference while making a real tiling I've gathered the vector and matrix functions in Point and Matrix classes. Going to make the building functions part of a builder class. You can drag to pan the view. Clicking a tile highlights it. Each tile is labelled with a number, but it gets reflected when there's an odd number of iterations - need to fix that.
2025-05-07 16:18:06 +01:00
.tile {
color: #ccc;
}
.tile.highlight {
color: hsl(240,100%,80%);
}
aperiodical banner design
2023-07-13 08:12:36 +01:00
</style>
</head>
<body>
<section id="drawing">
something for the hoodie pattern? Came back to this after a long time. For some reason, the tiles have straight lines.
2025-05-07 11:32:22 +01:00
<svg viewBox="0 0 190 195" xmlns="http://www.w3.org/2000/svg">
aperiodical banner design
2023-07-13 08:12:36 +01:00
<defs>
<path id="spectre"
making it work as a reference while making a real tiling I've gathered the vector and matrix functions in Point and Matrix classes. Going to make the building functions part of a builder class. You can drag to pan the view. Clicking a tile highlights it. Each tile is labelled with a number, but it gets reflected when there's an odd number of iterations - need to fix that.
2025-05-07 16:18:06 +01:00
d="M 0 1 C -0.3 0.5 0.3 0.5 0 0 C 0.5 -0.3 0.5 0.3 1 0 C 0.9901923788646685 -0.5830127018922193 1.5098076211353315 -0.2830127018922193 1.5 -0.8660254037844386 C 2.0830127018922195 -0.8758330249197702 1.7830127018922195 -0.356217782649107 2.366025403784439 -0.36602540378443865 C 2.6660254037844386 0.13397459621556135 2.066025403784439 0.13397459621556135 2.366025403784439 0.6339745962155614 C 2.866025403784439 0.3339745962155614 2.866025403784439 0.9339745962155614 3.366025403784439 0.6339745962155614 C 3.8758330249197703 0.9169872981077808 3.3562177826491073 1.2169872981077807 3.866025403784439 1.5 C 3.5830127018922195 2.0098076211353315 3.2830127018922197 1.4901923788646685 3 2 C 2.4169872981077805 2.0098076211353315 2.7169872981077803 1.4901923788646685 2.133974596215561 1.5 C 2.143782217350893 2.0830127018922195 1.6241669750802294 1.7830127018922197 1.6339745962155614 2.3660254037844393 C 1.1339745962155614 2.666025403784439 1.1339745962155614 2.0660254037844394 0.6339745962155614 2.3660254037844393 C 0.1339745962155614 2.666025403784439 0.1339745962155614 2.0660254037844394 -0.3660254037844386 2.3660254037844393 C -0.8758330249197706 2.08301270189222 -0.35621778264910703 1.7830127018922195 -0.866025403784439 1.5 C -0.5830127018922195 0.9901923788646683 -0.2830127018922195 1.5098076211353317 0 1"
something for the hoodie pattern? Came back to this after a long time. For some reason, the tiles have straight lines.
2025-05-07 11:32:22 +01:00
stroke="black"
aperiodical banner design
2023-07-13 08:12:36 +01:00
stroke-width="0.1"
something for the hoodie pattern? Came back to this after a long time. For some reason, the tiles have straight lines.
2025-05-07 11:32:22 +01:00
stroke-opacity="1"
aperiodical banner design
2023-07-13 08:12:36 +01:00
stroke-linejoin="round"
fill="currentColor"></path>
</defs>
something for the hoodie pattern? Came back to this after a long time. For some reason, the tiles have straight lines.
2025-05-07 11:32:22 +01:00
<g id="board"></g>
aperiodical banner design
2023-07-13 08:12:36 +01:00
</svg>
</section>
<section id="controls">
<fieldset>
<legend>Viewbox</legend>
making it work as a reference while making a real tiling I've gathered the vector and matrix functions in Point and Matrix classes. Going to make the building functions part of a builder class. You can drag to pan the view. Clicking a tile highlights it. Each tile is labelled with a number, but it gets reflected when there's an odd number of iterations - need to fix that.
2025-05-07 16:18:06 +01:00
<label for="ox">ox</label>
something for the hoodie pattern? Came back to this after a long time. For some reason, the tiles have straight lines.
2025-05-07 11:32:22 +01:00
<input type="number" min="-500" max="500" value="0" id="ox">
making it work as a reference while making a real tiling I've gathered the vector and matrix functions in Point and Matrix classes. Going to make the building functions part of a builder class. You can drag to pan the view. Clicking a tile highlights it. Each tile is labelled with a number, but it gets reflected when there's an odd number of iterations - need to fix that.
2025-05-07 16:18:06 +01:00
<label for="oy">oy</label>
something for the hoodie pattern? Came back to this after a long time. For some reason, the tiles have straight lines.
2025-05-07 11:32:22 +01:00
<input type="number" min="-500" max="500" value="0" id="oy">
making it work as a reference while making a real tiling I've gathered the vector and matrix functions in Point and Matrix classes. Going to make the building functions part of a builder class. You can drag to pan the view. Clicking a tile highlights it. Each tile is labelled with a number, but it gets reflected when there's an odd number of iterations - need to fix that.
2025-05-07 16:18:06 +01:00
<label for="scale">scale</label>
<input type="range" min="1" max="100" value="19" id="scale">
aperiodical banner design
2023-07-13 08:12:36 +01:00
<label for="num_iterations">Number of iterations</label>
making it work as a reference while making a real tiling I've gathered the vector and matrix functions in Point and Matrix classes. Going to make the building functions part of a builder class. You can drag to pan the view. Clicking a tile highlights it. Each tile is labelled with a number, but it gets reflected when there's an odd number of iterations - need to fix that.
2025-05-07 16:18:06 +01:00
<input type="number" min="1" max="5" value="2" id="num_iterations">
aperiodical banner design
2023-07-13 08:12:36 +01:00
</fieldset>
</section>
</body>
</html>
Reference in a new issue Copy permalink