xxxxxxxxxx49
<html><body> <p>X Values (Space-separated):</p> <input type="text" id="x-values" size="50"> <p>Y Values (Space-separated):</p> <input type="text" id="y-values" size="50"> <button onclick="plotPoints()">Plot Points</button> <div id="canvasContainer"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script> <script> let xValues = []; let yValues = []; let sketch = function(p) { p.setup = function() { p.createCanvas(400, 400); }; p.draw = function() { p.background(200); p.strokeWeight(8); for (let i = 0; i < xValues.length; i++) { let x = p.map(xValues[i], Math.min(xValues), Math.max(xValues), 0, p.width); let y = p.map(yValues[i], Math.min(yValues), Math.max(yValues), p.height, 0); p.point(x, y); } p.textSize(12); p.fill(0); p.text('X Min: ' + Math.min(xValues), 10, p.height - 30); p.text('X Max: ' + Math.max(xValues), 10, p.height - 20); p.text('Y Min: ' + Math.min(yValues), p.width / 2, p.height - 30); p.text('Y Max: ' + Math.max(yValues), p.width / 2, p.height - 20); }; }; let myp5 = new p5(sketch, 'canvasContainer'); function plotPoints() { let xInput = document.getElementById('x-values').value; let yInput = document.getElementById('y-values').value; xValues = xInput.split(' ').map(Number); yValues = yInput.split(' ').map(Number); } </script></body></html>