feat: Add VEX Robotics Autonomous Path Planner page

The commit adds a new HTML page for the VEX Robotics Autonomous Path Planner. It includes the necessary HTML, CSS, and JavaScript code to create a canvas where users can draw a path and generate corresponding code. The page also includes buttons to clear the path and generate the code. Note: The commit message has been generated based on the provided code changes and recent repository commits.
NoozAbooz · Aug 15, 2024 · c3e9175 · c3e9175
1 parent 66c983c
commit c3e9175
Show file tree

Hide file tree

Showing 3 changed files with 121 additions and 0 deletions.
diff --git a/website/path/V5RC-HighStakes-H2H-2000x2000.png b/website/path/V5RC-HighStakes-H2H-2000x2000.png
diff --git a/website/path/V5RC-HighStakes-Skills-2000x2000.png b/website/path/V5RC-HighStakes-Skills-2000x2000.png
diff --git a/website/path/index.html b/website/path/index.html
@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Path Planner</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+            background-color: #f0f0f0;
+        }
+        #container {
+            text-align: center;
+        }
+        canvas {
+            border: 2px solid #333;
+        }
+        button {
+            margin: 10px;
+            padding: 5px 10px;
+            font-size: 16px;
+        }
+    </style>
+</head>
+<body>
+    <div id="container">
+        <h1>VEX Robotics Autonomous Path Planner</h1>
+        <div id="canvas-container"></div>
+        <button onclick="clearPath()">Clear Path</button>
+        <button onclick="generateCode()">Generate Code</button>
+        <pre id="code-output"></pre>
+    </div>
+
+    <script>
+        let path = [];
+        const gridSize = 20;
+        const canvasSize = 400;
+
+        function setup() {
+            let canvas = createCanvas(canvasSize, canvasSize);
+            canvas.parent('canvas-container');
+            background(220);
+            drawGrid();
+        }
+
+        function draw() {
+            if (mouseIsPressed) {
+                let x = Math.floor(mouseX / gridSize) * gridSize;
+                let y = Math.floor(mouseY / gridSize) * gridSize;
+                if (!path.some(p => p.x === x && p.y === y)) {
+                    path.push({ x, y });
+                }
+            }
+
+            background(220);
+            drawGrid();
+            drawPath();
+        }
+
+        function drawGrid() {
+            stroke(200);
+            for (let i = 0; i <= canvasSize; i += gridSize) {
+                line(i, 0, i, canvasSize);
+                line(0, i, canvasSize, i);
+            }
+        }
+
+        function drawPath() {
+            if (path.length > 0) {
+                stroke(0, 0, 255);
+                strokeWeight(3);
+                noFill();
+                beginShape();
+                for (let point of path) {
+                    vertex(point.x + gridSize / 2, point.y + gridSize / 2);
+                }
+                endShape();
+
+                fill(255, 0, 0);
+                noStroke();
+                for (let i = 0; i < path.length; i++) {
+                    ellipse(path[i].x + gridSize / 2, path[i].y + gridSize / 2, 10);
+                    textAlign(CENTER, CENTER);
+                    fill(0);
+                    text(i + 1, path[i].x + gridSize / 2, path[i].y + gridSize / 2);
+                }
+            }
+        }
+
+        function clearPath() {
+            path = [];
+        }
+
+        function generateCode() {
+            let code = "// Exported snippet - v1 format\n";
+            code += "void autonomous() {\n";
+
+            for (let i = 1; i < path.length; i++) {
+                let dx = path[i].x - path[i-1].x;
+                let dy = path[i].y - path[i-1].y;
+                let distance = Math.sqrt(dx*dx + dy*dy);
+                let angle = Math.atan2(dy, dx) * 180 / Math.PI;
+
+                code += `  // Move to point ${i+1}\n`;
+                code += `  turnToAngle(${angle});\n`;
+                code += `  moveForward(${distance});\n`;
+            }
+
+            code += "}\n";
+
+            document.getElementById('code-output').textContent = code;
+        }
+    </script>
+</body>
+</html>