Estoy tratando de dibujar círculos irregulares que se animan durante los primeros n números de fotogramas en un boceto. Lo que quiero es generar puntos y luego dibujar una línea desde el punto actual hasta el anterior, pero recibo un error.
function irregularCircle(limit) { let points = [] let t = frameCount / 20 let i = floor(t) if (frameCount < limit) { let radius = w(.25) let x = width/2 + radius*cos(t)*noise(t/2) let y = height/2 + radius*sin(t)*noise(t/2) let point = createVector(x,y) points.push(point) let pt = points[i] let old_pt = points[i-1] stroke(24,34,64,75) strokeWeight(w(.001)) if (frameCount > 1 && frameCount < limit) { line(pt.x,pt.y,old_pt.x,old_pt.y) } } }Obtengo "Error de tipo no capturado: no se pueden leer las propiedades de undefined (leyendo 'x')" en respuesta. ¿Qué estoy haciendo mal?
EDITAR: ya no recibe el error, pero aún no dibuja un círculo.
Gracias por adelantado.
@danh si tiene razón sobre i-1 .
Además hay otro error: let points = []; probablemente debería ser global, de lo contrario, la lista se reinicia con cada llamada.
No está claro qué hace la función w() , pero debe verificar que los valores devueltos sean válidos.
Aquí hay una versión modificada de su código con las notas anteriores aplicadas:
let points = []; function setup() { createCanvas(300, 300); } function draw() { irregularCircle(3200); } function irregularCircle(limit) { let t = frameCount / 20 let i = floor(t) if (frameCount < limit) { let radius = 250; let x = width/2 + radius*cos(t)*noise(t/2) let y = height/2 + radius*sin(t)*noise(t/2) let point = createVector(x,y) points.push(point) let pt = points[i] let old_pt = points[i > 0 ? i-1 : 0] stroke(24,34,64,75) strokeWeight(0.1); if (frameCount > 1 && frameCount < limit) { line(pt.x,pt.y,old_pt.x,old_pt.y) } } } <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.min.js"></script>Dado que está conectando el punto anterior con el punto actual, es posible que no necesite seguir agregando puntos a una lista: simplemente puede mantener una referencia al punto anterior en su lugar:
let oldPt; function setup() { createCanvas(300, 300); } function draw() { irregularCircle(3200); } function irregularCircle(limit) { let t = frameCount / 20 let i = floor(t) if (frameCount < limit) { let radius = 250; let x = width/2 + radius*cos(t)*noise(t/2) let y = height/2 + radius*sin(t)*noise(t/2) let pt = createVector(x,y) // check if the previous point exists before drawing a line if(oldPt){ if (frameCount > 1 && frameCount < limit) { line(pt.x,pt.y,oldPt.x,oldPt.y) } } // now that we've drawn the line we can point the old point to the current point oldPt = pt; } } <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.min.js"></script>