Рисование неправильного круга с массивом точек
Я пытаюсь нарисовать неправильные круги, которые анимируются для первых n кадров в эскизе. Я хочу создать точки, а затем провести линию от текущей точки к предыдущей, но получаю сообщение об ошибке.
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)
}
}
}
Я получаю в ответ «Uncaught TypeError: невозможно прочитать свойства неопределенного (чтение« x »)». Что я делаю не так?
Обновлено: больше не появляется ошибка, но все еще не рисуется круг.
Заранее спасибо.
Спасибо, надо было уловить! Но я все еще получаю ту же ошибку.
Если point = createVector(x,y) и pt = point[i], то что такое pt.x? Я думаю, вы должны иметь в виду присвоить pt какому-либо элементу массива points (множественное число, а не point), но будьте осторожны с этим индексом массива, i! Это кажется очень слабо связанным с длиной массива
Да, @AntonE, вам нужно убедиться, что и i, и i -1 являются допустимыми индексами в массиве points.
Отредактировал так, что теперь я не получаю ошибку, но и не рисую круг. То, что я пытался сделать, это получить координату несколько раз в секунду и добавить их в массив - как мне это сделать эффективно?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
@danh прав насчет i-1.
Кроме того, есть еще одна ошибка:
let points = [];, вероятно, должен быть глобальным, иначе список сбрасывается при каждом вызове.
Непонятно, что делает функция w(), но вам следует дважды проверить, являются ли возвращаемые значения допустимыми.
Вот измененная версия вашего кода с применением приведенных выше заметок:
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>Поскольку вы соединяете предыдущую точку с текущей точкой, вам может не понадобиться добавлять точки в список: вместо этого вы можете просто сохранить ссылку на предыдущую точку:
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>Блестящий, это делает именно так, как задумано. Благодарю вас!
Однако, помеченный как правильный, я не могу проголосовать, так как я слишком новичок в stackoverflow; сделаю, как только это позволит мне. Однако у меня был дополнительный вопрос: создание массива или глобальных переменных oldPt является проблемой для меня, поскольку я хочу иметь возможность рисовать n кругов, отсюда и мой первоначальный подход, когда у меня был массив внутри функции. Любые предложения о том, как настроить это так чисто/эффективно? Спасибо еще раз!
Похоже на опечатки:
point[i]иpoint[i-1]. Разве они не должны бытьpoints[i]иpoints[i-1]?