processing15个运用三角函数的动画案例代码

以下是15个使用三角函数创建动画的案例代码：

1. 摆钟动画

float angle = 0;
float amplitude = 100;
float period = 2000;

void setup() {
  size(400, 400);
}

void draw() {
  background(255);
  translate(width/2, height/2);
  strokeWeight(2);
  stroke(0);
  line(0, 0, amplitude*sin(angle), amplitude*cos(angle));
  ellipse(amplitude*sin(angle), amplitude*cos(angle), 20, 20);
  angle += TWO_PI/period;
}

2. 螺旋动画

float angle = 0;
float radius = 50;
float speed = 0.1;

void setup() {
  size(400, 400);
}

void draw() {
  background(255);
  translate(width/2, height/2);
  strokeWeight(2);
  stroke(0);
  line(0, 0, radius*sin(angle), radius*cos(angle));
  ellipse(radius*sin(angle), radius*cos(angle), 20, 20);
  angle += speed;
  radius += 0.1;
}

3. 圆周运动动画

float angle = 0;
float radius = 100;
float speed = 0.05;

void setup() {
  size(400, 400);
}

void draw() {
  background(255);
  translate(width/2, height/2);
  strokeWeight(2);
  stroke(0);
  line(0, 0, radius*sin(angle), radius*cos(angle));
  ellipse(radius*sin(angle), radius*cos(angle), 20, 20);
  angle += speed;
}

4. 曲线动画

float angle = 0;
float amplitude = 100;
float period = 2000;

void setup() {
  size(400, 400);
}

void draw() {
  background(255);
  translate(width/2, height/2);
  strokeWeight(2);
  stroke(0);
  for (int x = -width/2; x < width/2; x++) {
    float y = amplitude*sin(angle + TWO_PI*x/period);
    point(x, y);
  }
  angle += TWO_PI/period;
}

5. 蛇形动画

float angle = 0;
float amplitude = 50;
float period = 200;

void setup() {
  size(400, 400);
}

void draw() {
  background(255);
  translate(width/2, height/2);
  strokeWeight(2);
  stroke(0);
  float x = 0;
  float y = 0;
  for (int i = 0; i < 10; i++) {
    x += amplitude*sin(angle + TWO_PI*i/10);
    y += amplitude*cos(angle + TWO_PI*i/10);
    line(x, y, x + amplitude*sin(angle + TWO_PI*(i+1)/10), y + amplitude*cos(angle + TWO_PI*(i+1)/10));
  }
  angle += TWO_PI/period;
}

6. 波浪动画

float angle = 0;
float amplitude = 50;
float period = 200;
float wavelength = 200;

void setup() {
  size(400, 400);
}

void draw() {
  background(255);
  translate(0, height/2);
  strokeWeight(2);
  stroke(0);
  for (int x = 0; x < width; x++) {
    float y = amplitude*sin(angle + TWO_PI*x/wavelength);
    point(x, y);
  }
  angle += TWO_PI/period;
}

7. 贝塞尔曲线动画

float angle = 0;
float amplitude = 50;
float period = 200;

void setup() {
  size(400, 400);
}

void draw() {
  background(255);
  translate(width/2, height/2);
  strokeWeight(2);
  stroke(0);
  noFill();
  beginShape();
  for (int i = 0; i < 10; i++) {
    float x = amplitude*sin(angle + TWO_PI*i/10);
    float y = amplitude*cos(angle + TWO_PI*i/10);
    curveVertex(x, y);
  }
  endShape();
  angle += TWO_PI/period;
}

8. 球面运动动画

float angle = 0;
float radius = 100;
float speed = 0.05;

void setup() {
  size(400, 400, P3D);
}

void draw() {
  background(255);
  translate(width/2, height/2, 0);
  strokeWeight(2);
  stroke(0);
  float x = radius*sin(angle);
  float y = radius*cos(angle);
  float z = radius*sin(angle);
  sphere(20);
  translate(x, y, z);
  sphere(10);
  angle += speed;
}

9. 半径变化动画

float angle = 0;
float radius = 50;
float speed = 0.1;

void setup() {
  size(400, 400);
}

void draw() {
  background(255);
  translate(width/2, height/2);
  strokeWeight(2);
  stroke(0);
  line(0, 0, radius*sin(angle), radius*cos(angle));
  ellipse(radius*sin(angle), radius*cos(angle), 20, 20);
  angle += speed;
  radius += sin(angle)*5;
}

10. 色彩变化动画

float angle = 0;
float amplitude = 100;
float period = 2000;

void setup() {
  size(400, 400);
}

void draw() {
  colorMode(HSB, 360, 100, 100);
  background(angle%360, 50, 100);
  translate(width/2, height/2);
  strokeWeight(2);
  stroke((angle+180)%360, 50, 100);
  for (int x = -width/2; x < width/2; x++) {
    float y = amplitude*sin(angle + TWO_PI*x/period);
    point(x, y);
  }
  angle += TWO_PI/period;
}

11. 文字动画

float angle = 0;
float amplitude = 50;
float period = 2000;
String message = "Hello, world!";
int fontSize = 50;

void setup() {
  size(400, 400);
  textSize(fontSize);
}

void draw() {
  background(255);
  translate(width/2, height/2);
  strokeWeight(2);
  stroke(0);
  for (int i = 0; i < message.length(); i++) {
    float x = i*fontSize;
    float y = amplitude*sin(angle + TWO_PI*i/period);
    text(message.charAt(i), x, y);
  }
  angle += TWO_PI/period;
}

12. 图形旋转动画

float angle = 0;
float amplitude = 50;
float period = 2000;
int sides = 5;
float offset = PI/2;

void setup() {
  size(400, 400);
}

void draw() {
  background(255);
  translate(width/2, height/2);
  strokeWeight(2);
  stroke(0);
  beginShape();
  for (int i = 0; i < sides; i++) {
    float x = amplitude*sin(angle + TWO_PI*i/sides + offset);
    float y = amplitude*cos(angle + TWO_PI*i/sides + offset);
    vertex(x, y);
  }
  endShape(CLOSE);
  angle += TWO_PI/period;
}

13. 网格动画

float angle = 0;
float amplitude = 50;
float period = 200;

void setup() {
  size(400, 400);
}

void draw() {
  background(255);
  translate(width/2, height/2);
  strokeWeight(2);
  stroke(0);
  for (int x = -width/2; x < width/2; x += 20) {
    for (int y = -height/2; y < height/2; y += 20) {
      float d = dist(0, 0, x, y);
      float a = atan2(y, x) + angle;
      float r = amplitude*sin(a + TWO_PI*d/period);
      point(x + r*cos(a), y + r*sin(a));
    }
  }
  angle += TWO_PI/period;
}

14. 三维旋转动画

float angleX = 0;
float angleY = 0;
float angleZ = 0;

void setup() {
  size(400, 400, P3D);
}

void draw() {
  background(255);
  translate(width/2, height/2, 0);
  rotateX(angleX);
  rotateY(angleY);
  rotateZ(angleZ);
  box(50);
  angleX += 0.05;
  angleY += 0.05;
  angleZ += 0.05;
}

15. 粒子运动动画

float angle = 0;
float amplitude = 50;
float period = 200;
int numParticles = 100;
Particle[] particles = new Particle[numParticles];

void setup() {
  size(400, 400);
  for (int i = 0; i < numParticles; i++) {
    particles[i] = new Particle(random(width), random(height));
  }
}

void draw() {
  background(255);
  translate(width/2, height/2);
  strokeWeight(2);
  stroke(0);
  for (int i = 0; i < numParticles; i++) {
    particles[i].update();
    particles[i].display();
  }
  angle += TWO_PI/period;
}

class Particle {
  float x;
  float y;
  float r;
  
  Particle(float x, float y) {
    this.x = x;
    this.y = y;
    this.r = random(5, 20);
  }
  
  void update() {
    float a = atan2(y-height/2, x-width/2) + angle;
    float d = dist(x, y, width/2, height/2);
    float r = amplitude*sin(a + TWO_PI*d/period);
    x = width/2 + r*cos(a);
    y = height/2 + r*sin(a);
  }
  
  void display() {
    ellipse(x, y, r, r);
  }
}