1096 lines
36 KiB
Vue
1096 lines
36 KiB
Vue
<template>
|
|
<SMMastHead title="Minecraft Curve" />
|
|
<SMContainer>
|
|
<div id="svg">
|
|
<svg
|
|
id="svgelem"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 1000 800"
|
|
preserveAspectRatio="xMidYMid meet">
|
|
<g id="grid"></g>
|
|
<g id="ruler_grid"></g>
|
|
<g id="main">
|
|
<circle id="p1" cx="299" cy="500" r="10" />
|
|
<circle id="p2" cx="699" cy="500" r="10" />
|
|
|
|
<circle id="c1" cx="299" cy="250" r="8" />
|
|
<circle id="c2" cx="699" cy="250" r="8" />
|
|
|
|
<circle
|
|
id="r1"
|
|
cx="405"
|
|
cy="405"
|
|
r="5"
|
|
style="display: none"
|
|
class="ruler" />
|
|
<circle
|
|
id="r2"
|
|
cx="605"
|
|
cy="505"
|
|
r="5"
|
|
style="display: none"
|
|
class="ruler" />
|
|
|
|
<line
|
|
id="l1"
|
|
x1="100"
|
|
y1="250"
|
|
x2="100"
|
|
y2="100"
|
|
class="controlline" />
|
|
<line
|
|
id="l2"
|
|
x1="400"
|
|
y1="250"
|
|
x2="400"
|
|
y2="100"
|
|
class="controlline" />
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
|
|
<div id="info">
|
|
Grid size
|
|
<input
|
|
type="range"
|
|
min="5"
|
|
max="20"
|
|
value="10"
|
|
step="5"
|
|
id="gridsize" />
|
|
<span id="gridsizevalue">10</span><br />
|
|
Curve width
|
|
<input type="range" min="1" max="25" value="1" id="curvewidth" />
|
|
<span id="curvewidthvalue">1</span><br />
|
|
<br />
|
|
Ruler
|
|
<label class="switch">
|
|
<input type="checkbox" id="ruler" />
|
|
<span class="slider round"></span>
|
|
</label>
|
|
|
|
<div id="ruler_dimensions" style="display: none"></div>
|
|
|
|
<br /><br />
|
|
|
|
<button type="button" id="array_button">
|
|
Copy 2D array of curve to clipboard
|
|
</button>
|
|
</div>
|
|
</SMContainer>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import SMMastHead from "../components/SMMastHead.vue";
|
|
|
|
// developed by Rene Koning 2022
|
|
// inspired by work from Craig Buckler (https://blogs.sitepointstatic.com/examples/tech/svg-curves/cubic-curve.html)
|
|
|
|
var container,
|
|
svg,
|
|
point = {},
|
|
line = {},
|
|
drag = null,
|
|
dPoint,
|
|
maxX,
|
|
maxY,
|
|
gridsize,
|
|
curvewidth;
|
|
var circles = [
|
|
[[]], // 0
|
|
[[1]], // 1
|
|
[
|
|
[1, 1],
|
|
[1, 1],
|
|
], // 2
|
|
[
|
|
[0, 1, 0],
|
|
[1, 1, 1],
|
|
[0, 1, 0],
|
|
], // 3
|
|
[
|
|
[0, 1, 1, 0],
|
|
[1, 1, 1, 1],
|
|
[1, 1, 1, 1],
|
|
[0, 1, 1, 0],
|
|
], // 4
|
|
[
|
|
[0, 0, 1, 0, 0],
|
|
[0, 1, 1, 1, 0],
|
|
[1, 1, 1, 1, 1],
|
|
[0, 1, 1, 1, 0],
|
|
[0, 0, 1, 0, 0],
|
|
], // 5
|
|
[
|
|
[0, 1, 1, 1, 1, 0],
|
|
[1, 1, 1, 1, 1, 1],
|
|
[1, 1, 1, 1, 1, 1],
|
|
[1, 1, 1, 1, 1, 1],
|
|
[1, 1, 1, 1, 1, 1],
|
|
[0, 1, 1, 1, 1, 0],
|
|
], // 6
|
|
[
|
|
[0, 0, 0, 1, 0, 0, 0],
|
|
[0, 1, 1, 1, 1, 1, 0],
|
|
[0, 1, 1, 1, 1, 1, 0],
|
|
[1, 1, 1, 1, 1, 1, 1],
|
|
[0, 1, 1, 1, 1, 1, 0],
|
|
[0, 1, 1, 1, 1, 1, 0],
|
|
[0, 0, 0, 1, 0, 0, 0],
|
|
], // 7
|
|
[
|
|
[0, 0, 1, 1, 1, 1, 0, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 0],
|
|
[1, 1, 1, 1, 1, 1, 1, 1],
|
|
[1, 1, 1, 1, 1, 1, 1, 1],
|
|
[1, 1, 1, 1, 1, 1, 1, 1],
|
|
[1, 1, 1, 1, 1, 1, 1, 1],
|
|
[0, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 0, 1, 1, 1, 1, 0, 0],
|
|
], // 8
|
|
[
|
|
[0, 0, 0, 0, 1, 0, 0, 0, 0],
|
|
[0, 0, 1, 1, 1, 1, 1, 0, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 0, 1, 1, 1, 1, 1, 0, 0],
|
|
[0, 0, 0, 0, 1, 0, 0, 0, 0],
|
|
], // 9
|
|
[
|
|
[0, 0, 0, 1, 1, 1, 1, 0, 0, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 0, 0, 1, 1, 1, 1, 0, 0, 0],
|
|
], // 10
|
|
[
|
|
[0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0],
|
|
[0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0],
|
|
[0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0],
|
|
], // 11
|
|
[
|
|
[0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0],
|
|
[0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
|
|
[0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0],
|
|
], // 12
|
|
[
|
|
[0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0],
|
|
[0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
|
|
[0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
|
|
[0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
|
|
[0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0],
|
|
], // 13
|
|
[
|
|
[0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
|
|
[0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
|
|
[0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
|
|
[0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
|
|
[0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
|
|
], // 14
|
|
[
|
|
[0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0],
|
|
[0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
|
|
[0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
|
|
[0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
|
|
[0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
|
|
[0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
|
|
[0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0],
|
|
], // 15
|
|
[
|
|
[0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0],
|
|
[0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
|
|
[0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
|
|
[0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
|
|
[0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0],
|
|
], // 16
|
|
[
|
|
[0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
[0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0],
|
|
[0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
|
|
[0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
|
|
[0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
|
|
[0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
|
|
[0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
|
|
[0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0],
|
|
[0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
], // 17
|
|
[
|
|
[0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0],
|
|
[0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
|
|
[0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
|
|
[0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
|
|
[0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
|
|
[0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
|
|
[0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0],
|
|
], // 18
|
|
[
|
|
[0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
[0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0],
|
|
[0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
|
|
[0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
|
|
[0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
|
|
[0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
|
|
[0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
|
|
[0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0],
|
|
[0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
], // 19
|
|
[
|
|
[0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0],
|
|
[0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0],
|
|
[0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
|
|
[0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
|
|
[0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
|
|
[0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
|
|
[0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
|
|
[0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0],
|
|
[0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0],
|
|
], // 20
|
|
[
|
|
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
[0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0],
|
|
[0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
|
|
[0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
|
|
[0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
|
|
[0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
|
|
[0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
|
|
[0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
|
|
[0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
|
|
[0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0],
|
|
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
], // 21
|
|
[
|
|
[0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
[0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0],
|
|
[0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
|
|
[0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
|
|
[0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
|
|
[0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
|
|
[0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
|
|
[0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0],
|
|
[0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
], // 22
|
|
[
|
|
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
[0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0],
|
|
[0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0],
|
|
[0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
|
|
[0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
|
|
[0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
|
|
[0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0],
|
|
[0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
|
|
[0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
|
|
[0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0],
|
|
[0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
|
|
[0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0],
|
|
[0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0],
|
|
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
|
], // 23
|
|
[
|
|
[
|
|
0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0,
|
|
0,
|
|
],
|
|
[
|
|
0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0,
|
|
0,
|
|
],
|
|
[
|
|
0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0,
|
|
0,
|
|
],
|
|
[
|
|
0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0,
|
|
0,
|
|
],
|
|
[
|
|
0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0,
|
|
0,
|
|
],
|
|
[
|
|
0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0,
|
|
0,
|
|
],
|
|
[
|
|
0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
|
|
0,
|
|
],
|
|
[
|
|
0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
|
|
0,
|
|
],
|
|
[
|
|
0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
|
|
0,
|
|
],
|
|
[
|
|
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
|
|
1,
|
|
],
|
|
[
|
|
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
|
|
1,
|
|
],
|
|
[
|
|
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
|
|
1,
|
|
],
|
|
[
|
|
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
|
|
1,
|
|
],
|
|
[
|
|
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
|
|
1,
|
|
],
|
|
[
|
|
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
|
|
1,
|
|
],
|
|
[
|
|
0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
|
|
0,
|
|
],
|
|
[
|
|
0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
|
|
0,
|
|
],
|
|
[
|
|
0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
|
|
0,
|
|
],
|
|
[
|
|
0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0,
|
|
0,
|
|
],
|
|
[
|
|
0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0,
|
|
0,
|
|
],
|
|
[
|
|
0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0,
|
|
0,
|
|
],
|
|
[
|
|
0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0,
|
|
0,
|
|
],
|
|
[
|
|
0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0,
|
|
0,
|
|
],
|
|
[
|
|
0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0,
|
|
0,
|
|
],
|
|
], // 24
|
|
[
|
|
[
|
|
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
|
|
0, 0,
|
|
],
|
|
[
|
|
0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0,
|
|
0, 0,
|
|
],
|
|
[
|
|
0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0,
|
|
0, 0,
|
|
],
|
|
[
|
|
0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0,
|
|
0, 0,
|
|
],
|
|
[
|
|
0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0,
|
|
0, 0,
|
|
],
|
|
[
|
|
0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0,
|
|
0, 0,
|
|
],
|
|
[
|
|
0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
|
|
0, 0,
|
|
],
|
|
[
|
|
0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
|
|
0, 0,
|
|
],
|
|
[
|
|
0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
|
|
1, 0,
|
|
],
|
|
[
|
|
0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
|
|
1, 0,
|
|
],
|
|
[
|
|
0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
|
|
1, 0,
|
|
],
|
|
[
|
|
0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
|
|
1, 0,
|
|
],
|
|
[
|
|
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
|
|
1, 1,
|
|
],
|
|
[
|
|
0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
|
|
1, 0,
|
|
],
|
|
[
|
|
0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
|
|
1, 0,
|
|
],
|
|
[
|
|
0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
|
|
1, 0,
|
|
],
|
|
[
|
|
0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
|
|
1, 0,
|
|
],
|
|
[
|
|
0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
|
|
0, 0,
|
|
],
|
|
[
|
|
0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
|
|
0, 0,
|
|
],
|
|
[
|
|
0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0,
|
|
0, 0,
|
|
],
|
|
[
|
|
0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0,
|
|
0, 0,
|
|
],
|
|
[
|
|
0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0,
|
|
0, 0,
|
|
],
|
|
[
|
|
0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0,
|
|
0, 0,
|
|
],
|
|
[
|
|
0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0,
|
|
0, 0,
|
|
],
|
|
[
|
|
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
|
|
0, 0,
|
|
],
|
|
], // 25
|
|
];
|
|
|
|
// define initial points
|
|
/**
|
|
*
|
|
*/
|
|
function Init() {
|
|
var c = svg.getElementsByTagName("circle");
|
|
for (var i = 0; i < c.length; i++) {
|
|
point[c[i].getAttributeNS(null, "id")] = {
|
|
x: parseInt(c[i].getAttributeNS(null, "cx"), 10),
|
|
y: parseInt(c[i].getAttributeNS(null, "cy"), 10),
|
|
};
|
|
}
|
|
|
|
// lines
|
|
line.l1 = svg.getElementById("l1");
|
|
line.l2 = svg.getElementById("l2");
|
|
line.curve = svg.getElementById("curve");
|
|
|
|
// event handlers
|
|
svg.onmousedown = svg.onmousemove = svg.onmouseup = Drag;
|
|
svg.ontouchstart = svg.ontouchmove = svg.ontouchend = Drag;
|
|
|
|
// setPixels is empty
|
|
setPixels = [];
|
|
|
|
DrawGrid();
|
|
DrawSVG();
|
|
}
|
|
|
|
/**
|
|
*
|
|
*/
|
|
function DrawGrid() {
|
|
ggrid = document.getElementById("grid");
|
|
|
|
// empty grid
|
|
while (ggrid.firstElementChild) {
|
|
ggrid.firstElementChild.remove();
|
|
}
|
|
|
|
for (x = 0; x < maxX; x += gridsize) {
|
|
var xpos = Math.round(x / gridsize);
|
|
for (y = 0; y < maxY; y += gridsize) {
|
|
var ypos = Math.round(y / gridsize);
|
|
var id = "grid_" + xpos + "_" + ypos;
|
|
|
|
var rect = document.createElementNS(
|
|
"http://www.w3.org/2000/svg",
|
|
"rect"
|
|
);
|
|
rect.setAttributeNS(null, "x", x);
|
|
rect.setAttributeNS(null, "y", y);
|
|
rect.setAttributeNS(null, "width", gridsize);
|
|
rect.setAttributeNS(null, "height", gridsize);
|
|
rect.setAttributeNS(null, "fill", "transparent");
|
|
rect.setAttributeNS(null, "stroke", "#eee");
|
|
rect.setAttributeNS(null, "stroke-width", 1);
|
|
rect.setAttributeNS(null, "id", id);
|
|
|
|
ggrid.append(rect);
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
*
|
|
*/
|
|
function DrawRuler() {
|
|
ruler_grid = document.getElementById("ruler_grid");
|
|
ruler_dimensions = document.getElementById("ruler_dimensions");
|
|
r1 = document.getElementById("r1");
|
|
r2 = document.getElementById("r2");
|
|
|
|
// empty ruler grid
|
|
while (ruler_grid.firstElementChild) {
|
|
ruler_grid.firstElementChild.remove();
|
|
}
|
|
|
|
// show dimensions
|
|
if (ruler_dimensions.style.display == "none") {
|
|
ruler_dimensions.style.display = "block";
|
|
}
|
|
|
|
// handles
|
|
if (r1.style.display == "none") {
|
|
r1.style.display = "block";
|
|
}
|
|
if (r2.style.display == "none") {
|
|
r2.style.display = "block";
|
|
}
|
|
|
|
// ruler
|
|
rmin = [
|
|
Math.floor(Math.min(point.r1.x, point.r2.x) / gridsize),
|
|
Math.floor(Math.min(point.r1.y, point.r2.y) / gridsize),
|
|
];
|
|
rmax = [
|
|
Math.floor(Math.max(point.r1.x, point.r2.x) / gridsize),
|
|
Math.floor(Math.max(point.r1.y, point.r2.y) / gridsize),
|
|
];
|
|
var width = 1 + rmax[0] - rmin[0];
|
|
var height = 1 + rmax[1] - rmin[1];
|
|
var area = width * height;
|
|
var filled = 0;
|
|
|
|
// ruler
|
|
var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
|
|
rect.setAttributeNS(null, "x", rmin[0] * gridsize);
|
|
rect.setAttributeNS(null, "y", rmin[1] * gridsize);
|
|
rect.setAttributeNS(null, "width", width * gridsize);
|
|
rect.setAttributeNS(null, "height", height * gridsize);
|
|
rect.setAttributeNS(null, "fill", "#00c");
|
|
rect.setAttributeNS(null, "fill-opacity", "0.2");
|
|
rect.setAttributeNS(null, "stroke", "#eee");
|
|
rect.setAttributeNS(null, "stroke-width", 1);
|
|
rect.setAttributeNS(null, "id", "ruler_rect");
|
|
ruler_grid.append(rect);
|
|
|
|
// filled
|
|
for (x = rmin[0]; x <= rmax[0]; x += 1) {
|
|
for (y = rmin[1]; y <= rmax[1]; y += 1) {
|
|
var grid = document.getElementById("grid_" + x + "_" + y);
|
|
if (grid.style.fill != "transparent") {
|
|
filled += 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
// update dimensions
|
|
ruler_dimensions.innerHTML =
|
|
"<pre>Width: " +
|
|
width +
|
|
"\nHeight: " +
|
|
height +
|
|
"\nArea: " +
|
|
area +
|
|
"\nFilled: " +
|
|
filled +
|
|
"</pre>";
|
|
}
|
|
|
|
/**
|
|
*
|
|
*/
|
|
function HideRuler() {
|
|
ruler_grid = document.getElementById("ruler_grid");
|
|
ruler_dimensions = document.getElementById("ruler_dimensions");
|
|
r1 = document.getElementById("r1");
|
|
r2 = document.getElementById("r2");
|
|
|
|
// hide dimensions
|
|
ruler_dimensions.style.display = "none";
|
|
|
|
// hide grid
|
|
while (ruler_grid.firstElementChild) {
|
|
ruler_grid.firstElementChild.remove();
|
|
}
|
|
|
|
// hide handles
|
|
r1.style.display = "none";
|
|
r2.style.display = "none";
|
|
}
|
|
|
|
// draw curve
|
|
/**
|
|
*
|
|
*/
|
|
function DrawSVG() {
|
|
// control line 1
|
|
line.l1.setAttributeNS(null, "x1", point.p1.x);
|
|
line.l1.setAttributeNS(null, "y1", point.p1.y);
|
|
line.l1.setAttributeNS(null, "x2", point.c1.x);
|
|
line.l1.setAttributeNS(null, "y2", point.c1.y);
|
|
|
|
// control line 2
|
|
var c2 = point.c2 ? "c2" : "c1";
|
|
line.l2.setAttributeNS(null, "x1", point.p2.x);
|
|
line.l2.setAttributeNS(null, "y1", point.p2.y);
|
|
line.l2.setAttributeNS(null, "x2", point.c2.x);
|
|
line.l2.setAttributeNS(null, "y2", point.c2.y);
|
|
|
|
// curve
|
|
var d =
|
|
"M" +
|
|
point.p1.x +
|
|
"," +
|
|
point.p1.y +
|
|
" C" +
|
|
point.c1.x +
|
|
"," +
|
|
point.c1.y +
|
|
" " +
|
|
(point.c2 ? point.c2.x + "," + point.c2.y + " " : "") +
|
|
point.p2.x +
|
|
"," +
|
|
point.p2.y;
|
|
//line.curve.setAttributeNS(null, "d", d);
|
|
|
|
// clear pixels
|
|
for (x = 0; x < maxX; x += gridsize) {
|
|
var xpos = x / gridsize;
|
|
for (y = 0; y < maxY; y += gridsize) {
|
|
var ypos = y / gridsize;
|
|
var id = "grid_" + xpos + "_" + ypos;
|
|
var rect = document.getElementById(id);
|
|
rect.style.fill = "transparent";
|
|
}
|
|
}
|
|
|
|
// grid dimensions
|
|
var dimx = Math.floor(maxX / gridsize);
|
|
var dimy = Math.floor(maxY / gridsize);
|
|
var filled = {};
|
|
var done = {};
|
|
|
|
// new pixels
|
|
for (var t = 0; t <= 1; t += 1 / 500) {
|
|
var bx =
|
|
Math.pow(1 - t, 3) * point.p1.x +
|
|
3 * Math.pow(1 - t, 2) * t * point.c1.x +
|
|
3 * Math.pow(t, 2) * (1 - t) * point.c2.x +
|
|
Math.pow(t, 3) * point.p2.x;
|
|
var by =
|
|
Math.pow(1 - t, 3) * point.p1.y +
|
|
3 * Math.pow(1 - t, 2) * t * point.c1.y +
|
|
3 * Math.pow(t, 2) * (1 - t) * point.c2.y +
|
|
Math.pow(t, 3) * point.p2.y;
|
|
|
|
// center
|
|
var gridx = Math.round(bx / gridsize);
|
|
var gridy = Math.round(by / gridsize);
|
|
var id = "grid_" + gridx + "_" + gridy;
|
|
|
|
if (id in done) {
|
|
continue;
|
|
} else {
|
|
done[id] = 1;
|
|
}
|
|
|
|
// circle around center
|
|
if (curvewidth == 1) {
|
|
var rect = document.getElementById(id);
|
|
rect.style.fill = "#888";
|
|
} else {
|
|
var circle = circles[curvewidth];
|
|
var offset = Math.floor(curvewidth / 2);
|
|
|
|
for (x = 0; x < curvewidth; x++) {
|
|
for (y = 0; y < curvewidth; y++) {
|
|
var posx = gridx + x - offset;
|
|
var posy = gridy + y - offset;
|
|
var id = "grid_" + posx + "_" + posy;
|
|
if (id in filled) {
|
|
continue;
|
|
}
|
|
|
|
if (posx >= 0 && posy >= 0 && posx < dimx && posy < dimy) {
|
|
if (circle[y][x] == 1) {
|
|
var rect = document.getElementById(id);
|
|
rect.style.fill = "#888";
|
|
filled[id] = 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
*
|
|
*/
|
|
function copyArrayToClipboard() {
|
|
var dimx = Math.floor(maxX / gridsize);
|
|
var dimy = Math.floor(maxY / gridsize);
|
|
var grid_array = [];
|
|
var rangeX = [dimx, -1];
|
|
var rangeY = [dimy, -1];
|
|
|
|
// find bounding box for curve
|
|
for (y = 0; y < dimy; y++) {
|
|
var row = [];
|
|
for (x = 0; x < dimx; x++) {
|
|
var grid = document.getElementById("grid_" + x + "_" + y);
|
|
row.push(grid.style.fill == "transparent" ? 0 : 1);
|
|
}
|
|
var left = row.indexOf(1);
|
|
var right = row.lastIndexOf(1);
|
|
if (left >= 0 && left < rangeX[0]) {
|
|
rangeX[0] = left;
|
|
}
|
|
if (right >= 0 && right > rangeX[1]) {
|
|
rangeX[1] = right;
|
|
}
|
|
if (left >= 0 && y < rangeY[0]) {
|
|
rangeY[0] = y;
|
|
}
|
|
if (left >= 0 && y > rangeY[1]) {
|
|
rangeY[1] = y;
|
|
}
|
|
|
|
grid_array.push(row);
|
|
}
|
|
|
|
// select curve and format
|
|
var curve = grid_array
|
|
.slice(rangeY[0], rangeY[1] + 1)
|
|
.map(
|
|
(row) => "[" + row.slice(rangeX[0], rangeX[1] + 1).toString() + "]"
|
|
);
|
|
|
|
// write to clipboard
|
|
navigator.clipboard.writeText(
|
|
"var array = [\n" + curve.join(",\n") + "\n];"
|
|
);
|
|
}
|
|
|
|
/**
|
|
*
|
|
* @param e
|
|
*/
|
|
function Drag(e) {
|
|
e.stopPropagation();
|
|
var t = e.target,
|
|
id = t.id,
|
|
et = e.type,
|
|
m = MousePos(e);
|
|
var ruler = document.getElementById("ruler");
|
|
|
|
// start drag
|
|
if (
|
|
!drag &&
|
|
typeof point[id] != "undefined" &&
|
|
(et == "mousedown" || et == "touchstart")
|
|
) {
|
|
drag = t;
|
|
dPoint = m;
|
|
}
|
|
|
|
// drag
|
|
if (drag && (et == "mousemove" || et == "touchmove")) {
|
|
id = drag.id;
|
|
point[id].x += m.x - dPoint.x;
|
|
point[id].y += m.y - dPoint.y;
|
|
dPoint = m;
|
|
drag.setAttributeNS(null, "cx", point[id].x);
|
|
drag.setAttributeNS(null, "cy", point[id].y);
|
|
DrawSVG();
|
|
|
|
if (ruler.checked) {
|
|
DrawRuler();
|
|
}
|
|
}
|
|
|
|
// stop drag
|
|
if (drag && (et == "mouseup" || et == "touchend")) {
|
|
drag = null;
|
|
}
|
|
}
|
|
|
|
// mouse position
|
|
/**
|
|
*
|
|
* @param event
|
|
*/
|
|
function MousePos(event) {
|
|
return {
|
|
x: Math.max(0, Math.min(maxX, event.pageX)),
|
|
y: Math.max(0, Math.min(maxY, event.pageY)),
|
|
};
|
|
}
|
|
|
|
// start
|
|
window.onload = function () {
|
|
container = document.getElementById("svg");
|
|
|
|
var gs = document.getElementById("gridsize");
|
|
var cw = document.getElementById("curvewidth");
|
|
var gso = document.getElementById("gridsizevalue");
|
|
var cwo = document.getElementById("curvewidthvalue");
|
|
var ruler = document.getElementById("ruler");
|
|
var button = document.getElementById("array_button");
|
|
|
|
gs.oninput = function () {
|
|
gridsize = parseInt(this.value);
|
|
gso.innerHTML = gridsize;
|
|
DrawGrid();
|
|
DrawSVG();
|
|
if (ruler.checked) {
|
|
DrawRuler();
|
|
}
|
|
};
|
|
|
|
cw.oninput = function () {
|
|
curvewidth = parseInt(this.value);
|
|
cwo.innerHTML = curvewidth;
|
|
DrawSVG();
|
|
if (ruler.checked) {
|
|
DrawRuler();
|
|
}
|
|
};
|
|
|
|
cw.oninput = function () {
|
|
curvewidth = parseInt(this.value);
|
|
cwo.innerHTML = curvewidth;
|
|
DrawSVG();
|
|
if (ruler.checked) {
|
|
DrawRuler();
|
|
}
|
|
};
|
|
|
|
ruler.oninput = function () {
|
|
if (ruler.checked) {
|
|
DrawRuler();
|
|
} else {
|
|
HideRuler();
|
|
}
|
|
};
|
|
|
|
button.onclick = function () {
|
|
copyArrayToClipboard();
|
|
};
|
|
|
|
if (container) {
|
|
maxX = container.offsetWidth;
|
|
maxY = container.offsetHeight;
|
|
svg = container.firstElementChild;
|
|
gridsize = parseInt(document.getElementById("gridsize").value);
|
|
curvewidth = parseInt(document.getElementById("curvewidth").value);
|
|
Init();
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.page-minecraft-curve {
|
|
path {
|
|
stroke-width: 4;
|
|
stroke: #000;
|
|
stroke-linecap: round;
|
|
fill: none;
|
|
}
|
|
|
|
circle {
|
|
stroke-width: 2;
|
|
stroke: #c00;
|
|
fill: transparent;
|
|
}
|
|
|
|
circle:hover {
|
|
fill: #c00;
|
|
cursor: move;
|
|
}
|
|
|
|
circle.ruler {
|
|
stroke-width: 2;
|
|
stroke: #00c;
|
|
fill: transparent;
|
|
}
|
|
|
|
circle.ruler:hover {
|
|
fill: #00c;
|
|
cursor: move;
|
|
}
|
|
|
|
line.controlline {
|
|
stroke-width: 1;
|
|
stroke: #999;
|
|
stroke-linecap: round;
|
|
stroke-dasharray: 5, 3;
|
|
}
|
|
}
|
|
</style>
|