xxxxxxxxxx65
<html><head> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script> <style> body { margin: 0; display: flex; flex-direction: column; align-items: center; } .controls { margin: 20px; padding: 20px; border: 1px solid #ccc; background-color: #f9f9f9; border-radius: 10px; } #code-display { font-family: monospace; margin: 10px; padding: 10px; background: #282c34; color: #61dafb; border-radius: 8px; width: 90%; max-width: 400px; overflow-x: auto; } label { display: block; margin-top: 10px; } </style></head><body> <div class="controls"> <h2>Coordinate System Explorer</h2> <button onclick="toggleGrid()">Toggle Grid</button> <button onclick="toggleCoordinates()">Toggle Coordinates</button> <label> Grid Spacing: <input type="range" min="10" max="50" value="20" oninput="changeGridSpacing(this.value)"> </label> <label>Drawing Mode: <select onchange="changeMode(this.value)"> <option value="draw">Free Draw</option> <option value="rect">Rectangle</option> <option value="circle">Circle</option> <option value="line">Line</option> <option value="erase">Erase</option> </select> </label> <label> Stroke Color: <input type="color" value="#000000" onchange="updateStrokeColor(this.value)"> </label> <label> Fill Color: <input type="color" value="#ffffff" onchange="updateFillColor(this.value)"> </label> </div> <div id="code-display">// Code will appear here when you draw</div> <script src="sketch.js"></script> </script></body></html>