Tengo problemas para escalar las coordenadas x e y que se cargan desde un archivo .txt al tamaño de mi lienzo para que los círculos y las líneas que he dibujado no se extiendan más allá del lienzo, ¿alguna sugerencia?
let dots = []; let dotsData; let orderData; function preload() { dotsData = loadStrings('./dots.txt'); orderData = loadStrings('./orderFile.txt'); } function setup() { createCanvas(750, 750); createDots(dotsData); } function draw() { background(220); fill(255, 100, 200); for (let i = 0; i < dots.length; i++) { circle(dots[i].x, dots[i].y, 20); let goalDot = dots.find(e => e.id == orderData[i]); if (goalDot) { line(dots[i].x, dots[i].y, goalDot.x, goalDot.y); } } } function createDots(filename) { const probData = new Array(filename.length); for (let i = 0; i < probData.length; i++) { dotsData[i] = splitTokens(filename[i]); dots.push({ id: dotsData[i][0], x: dotsData[i][1], y: dotsData[i][2] }) } }El archivo dotsData parece
1 565.0 575.0 2 25.0 185.0 3 345.0 750.0 4 945.0 685.0 5 845.0 655.0El archivo orderData se ve así
5 1 4 3 2Calcule las coordenadas máximas de la geometría (puntos), después de leer del archivo:
let max_x = 0; let max_y = 0; function createDots(filename) { const probData = new Array(filename.length); for (let i = 0; i < probData.length; i++) { dotsData[i] = splitTokens(filename[i]); dots.push({ id: dotsData[i][0], x: dotsData[i][1], y: dotsData[i][2] }) max_x = max(max_x, dotsData[i][1]); max_y = max(max_y, dotsData[i][2]); } } Antes de dibujar, establezca una scale() según el width y la height del lienzo:
function draw() { background(220); fill(255, 100, 200); scale(width / (max_x * 1.1), height / (max_y * 1.1)); for (let i = 0; i < dots.length; i++) { circle(dots[i].x, dots[i].y, 20); let goalDot = dots.find(e => e.id == orderData[i]); if (goalDot) { line(dots[i].x, dots[i].y, goalDot.x, goalDot.y); } } }