Skip to content
Advertisement

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!

Advertisement

Answer

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.

Advertisement