Создание «Анимированного» Spiky Ball в Processing.js

Question

Для моего класса я создаю проект, в котором уровень включает в себя курсор в форме эллипса, который реагирует на команду mousePressed, выбирая пики изнутри эллипс, а затем отступить обратно в эллипс. Код для моего курсора здесь:

class Cursor{ 

float r; 
float x; 
float y; 

    Cursor(float _r){ 
    r = _r; 
    x = 0; 
    y = 0; 
    } 

    void setLocation (float _x, float _y) { 
    x = _x; 
    y = _y; 
} 

void display(){ 
noStroke(); 
fill(230, 242, 255); 
ellipse(x, y, r, r); 
} 

Мой учитель предложил мне использовать createShape (треугольник) в пределах эллипса и анимировать одну из вершин из каждого шипа выходит в нужное время, но я просто WASN» я мог следовать его инструкциям, а также мне нужно было это сделать. Любая помощь по этому вопросу была бы весьма признательна. Я надеюсь еще раз использовать анимированные вершины для «поп» окружающего объекта позже, но я только упоминаю, что в случае, когда это важно для первоначального создания и анимации.

спасибо, что заблаговременно!

Answer 1

Ваш учитель, вероятно, говорил о beginShape(TRIANGLES) функция. Из справки:

beginShape(TRIANGLES); 
vertex(30, 75); 
vertex(40, 20); 
vertex(50, 75); 
vertex(60, 20); 
vertex(70, 75); 
vertex(80, 20); 
endShape(); 

Вы можете использовать эту функцию для генерации спайки вокруг круга. Вам нужно будет разобрать x и y положения треугольников вокруг круга, но вы можете сделать это, используя увеличивающий угол и функциии sin().