Search code examples
javascriptanimationprocessingvertexellipse

Creating an "Animated" Spiky Ball in Processing.js

For my class, I'm creating a project in which a level includes a cursor in the form of an ellipse that reacts to a mousePressed command by having spikes protrude from within the ellipse and then recede back into the ellipse. The code for my cursor is right here:

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);
 }

My teacher suggested I use createShape (TRIANGLE) within the ellipse and animate one of the vertices from each spike coming out at the appropriate time, but I simply wasn't able to follow his instructions as well as I had needed to. Any assistance on this matter would be greatly appreciated. I do hope to further use the animated vertices to "pop" a surrounding object later on, but I'm only mentioning that in the case that it's important for the initial creation and animation.

Thank you very much in advance!

Solution

  • Your teacher was probably talking about the beginShape(TRIANGLES) function. From the reference:

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


    (source: processing.org)

    You could use this function to generate your spikes around your circle. You'll have to figure out the x and y positions of the triangles around the circle, but you can do that using an incrementing angle and the cos() and sin() functions.