I'm trying to draw an irregular circles that animates for the first n number of frames in a sketch. What I want is to generate points and then to draw a line from the current point to the previous one, but am getting an 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)
}
}
}
I get "Uncaught TypeError: Cannot read properties of undefined (reading 'x')" in response. What am I doing wrong?
EDIT: no longer getting the error, but still not drawing a circle.
Thanks in advance.
@danh si right about i-1.
Additionally there another error:
let points = []; should probably be global, otherwise the list gets reset with each call.
It's unclear what the w() function does, but you should double check the values returned are valid.
Here's a tweaked version of your code with the above notes applied:
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>Since you're connecting the previous point to the current point, you might not need to keep appending points to a list: you can simply hold a reference to the previous point instead:
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>