leadedge/t.html at main · DART-Edge-AI/leadedge · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lead Edge Maze</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 50px;
            margin: 0;
            height: 100vh;
            background-color: indigo;
        }
        canvas {
            margin-top: 20px;
        }
        button {
            margin: 10px;
            padding: 10px 20px;
            background-color: deepskyblue;
            color: white;
            border: none;
            cursor: pointer;
            border-radius: 5px;
            font-weight: bold;
            box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
        }
        .developer-comments {
            font-size: 9px;
            color: white;
            text-align: left;
            max-width: 800px;
            font-weight: bold;
        }
        button, select {
            margin: 10px;
            padding: 10px 20px;
            background-color: deepskyblue;
            color: white;
            border: none;
            cursor: pointer;
            border-radius: 5px;
            font-weight: bold;
            box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
        }
    </style>
</head>
<body>
    <img src="https://static.wixstatic.com/media/2451db_cc9e86fb9d3045ecb0861ed65ff9e86d~mv2.png" alt="Lead Edge" style="max-width: 40%; height:auto;">
    <div class="developer-comments">
      <h2>Developer Comments</h2>
<p>
  The maze is surgical, just no defined perimeter as well some iterations might not propagate a path at all, but the logic is still carrying out surgically as you will see the further you go with Generation Iterations. The results will account for perimeterless iterations that will have an effect on the path every few iterations.
</p>
<p>
  In this logic, the multiple openings are valid because they do come to dead ends when not part of the main path and where two openings on the perimeter are only separated by a segment this would be a solvable path but invalid because they are in view though there still might be a path through the inner maze. Be reminded this is perimeterless logic but does surgically carry out generation logic as you will see in further generation iterations progression.
</p>
<p>
  There are no loops/islands of space or wall segments except at potential perimeter iterations. There is surgically only one solvable path as a true maze except if that particular iteration was affected by the perimeterless generation logic. When a maze iteration is a miss, then it only means the required dimensions were larger and the limited allotted size with this will cross-cancel although the generation logic carried out surgically.
</p>    </div>


    <canvas id="mazeCanvas" width="875" height="875"></canvas>

<div style="display: flex; justify-content: center; gap: 20px; margin-top: 20px;">
  <button onclick="generateMaze()">Generate Lead Edge Maze</button>
  <select id="sizeSelect">
    <option value="10">Small (10)</option>
    <option value="30">Medium (30)</option>
    <option value="70">Large (70)</option>
  </select>
  <button onclick="exportPNG()">Export as PNG</button>
</div>

</select>

<script>
    const canvas = document.getElementById('mazeCanvas');
    const ctx = canvas.getContext('2d');
    let unit = 10; // Default to small
    let mazeSize = 875;

    document.getElementById('sizeSelect').addEventListener('change', function() {
        unit = parseInt(this.value);
        generateMaze(); // Regenerate the maze when size changes
    });


        function generateMaze() {
            ctx.clearRect(0, 0, mazeSize, mazeSize);
            ctx.fillStyle = 'rgba(255, 255, 255, 0)';
            ctx.fillRect(0, 0, mazeSize, mazeSize);

            let current = { x: unit * 10, y: unit * 10 }; // Central starting point
            let stack = [current];
            let visited = new Set([posKey(current)]);
            let lastDirection = null;

            while (stack.length > 0) {
                let next = getNextStep(current, lastDirection, visited);
                if (next) {
                    drawLine(current.x, current.y, next.x, next.y);
                    visited.add(posKey(next));
                    stack.push(next);
                    lastDirection = direction(current, next);
                    current = next;
                } else {
                    current = stack.pop();
                    lastDirection = null; // Reset direction after backtracking
                }
            }
            createOpenings();
        }

        function createOpenings() {
            ctx.clearRect(0, 0, unit, unit); // Top-left corner
            ctx.clearRect(mazeSize - unit, mazeSize - unit, unit, unit); // Bottom-right corner
        }

        function getNextStep(current, lastDirection, visited) {
            let directions = ['up', 'right', 'down', 'left'];
            if (lastDirection) {
                directions = directions.filter(dir => dir !== oppositeDirection(lastDirection));
            }
            while (directions.length > 0) {
                let dirIndex = Math.floor(Math.random() * directions.length);
                let dir = directions[dirIndex];
                let next = move(current, dir);
                if (!visited.has(posKey(next)) && isInBounds(next)) {
                    return next;
                }
                directions.splice(dirIndex, 1); // Remove direction and try another
            }
            return null; // No unvisited neighbors
        }

        function move(pos, direction) {
            switch (direction) {
                case 'up': return { x: pos.x, y: pos.y - unit };
                case 'right': return { x: pos.x + unit, y: pos.y };
                case 'down': return { x: pos.x, y: pos.y + unit };
                case 'left': return { x: pos.x - unit, y: pos.y };
            }
        }

        function direction(from, to) {
            if (from.x === to.x) {
                return (from.y > to.y) ? 'up' : 'down';
            } else {
                return (from.x < to.x) ? 'right' : 'left';
            }
        }

        function oppositeDirection(dir) {
            switch (dir) {
                case 'up': return 'down';
                case 'right': return 'left';
                case 'down': return 'up';
                case 'left': return 'right';
            }
        }

        function isInBounds(pos) {
            return pos.x >= 0 && pos.x <= mazeSize && pos.y >= 0 && pos.y <= mazeSize;
        }

        function drawLine(x1, y1, x2, y2) {
            const dx = Math.abs(x2 - x1);
            const dy = Math.abs(y2 - y1);
            if (dx + dy === unit) { // Ensure line length is 1 unit
                ctx.beginPath();
                ctx.moveTo(x1, y1);
                ctx.lineTo(x2, y2);
                ctx.strokeStyle = '#FFF';
                ctx.lineWidth = 2;
                ctx.stroke();
            }
        }

        function posKey(pos) {
            return `${pos.x}:${pos.y}`;
        }

        function exportPNG() {
            const dataURL = canvas.toDataURL("image/png");
            const a = document.createElement('a');
            a.href = dataURL;
            a.download = 'LeadEdgeMaze.png';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
        }

    </script>
</body>
</html>