在 Processing.js 中创建一个 "Animated" 尖球

Question

对于我的 class，我正在创建一个项目，其中一个关卡包含一个椭圆形式的光标，该光标通过使尖峰从椭圆内突出然后后退来对 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 (TRIANGLE) 并为每个在适当时间出现的尖峰的顶点之一制作动画，但我根本无法按照我需要的那样按照他的说明进行操作到。对此事的任何帮助将不胜感激。我确实希望稍后将动画顶点进一步用于 "pop" 周围的对象，但我只是提到它对初始创建和动画很重要的情况。

非常感谢您！

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

_{（来源：processing.org）}

您可以使用此功能在您的圆圈周围生成尖峰。您必须计算出圆周围三角形的 x 和 y 位置，但您可以使用递增角度和 cos() 和 sin() 函数来做到这一点.

在 Processing.js 中创建一个 "Animated" 尖球

Creating an "Animated" Spiky Ball in Processing.js

javascript

animation

processing

vertex

ellipse