From cce994d35cca5246c7dfc4fa7428a7f47d5ca996 Mon Sep 17 00:00:00 2001
From: James Collins <james.collins@outlook.com.au>
Date: Mon, 24 Apr 2023 12:18:06 +1000
Subject: [PATCH] added minecraft curve

---
 resources/js/router/index.js          |   23 +-
 resources/js/views/MinecraftCurve.vue | 1095 +++++++++++++++++++++++++
 2 files changed, 1113 insertions(+), 5 deletions(-)
 create mode 100644 resources/js/views/MinecraftCurve.vue

diff --git a/resources/js/router/index.js b/resources/js/router/index.js
index cf69466..3d098ba 100644
--- a/resources/js/router/index.js
+++ b/resources/js/router/index.js
@@ -103,11 +103,24 @@ export const routes = [
     },
     {
         path: "/minecraft",
-        name: "minecraft",
-        meta: {
-            title: "Minecraft",
-        },
-        component: () => import("@/views/Minecraft.vue"),
+        children: [
+            {
+                path: "",
+                name: "minecraft",
+                meta: {
+                    title: "Minecraft",
+                },
+                component: () => import("@/views/Minecraft.vue"),
+            },
+            {
+                path: "curve",
+                name: "minecraft-curve",
+                meta: {
+                    title: "Minecraft Curve",
+                },
+                component: () => import("@/views/MinecraftCurve.vue"),
+            },
+        ],
     },
     {
         path: "/login",
diff --git a/resources/js/views/MinecraftCurve.vue b/resources/js/views/MinecraftCurve.vue
new file mode 100644
index 0000000..882d7da
--- /dev/null
+++ b/resources/js/views/MinecraftCurve.vue
@@ -0,0 +1,1095 @@
+<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">
+.sm-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>