processing--图形的不透明度和混合模式动画

下面是由两个圆形组成的动画，线条在两个圆形之间不停的变换位置，当鼠标单击图形的时候动画停止：

PGraphics gradient1;
PGraphics gradient2;
PGraphics circle1; 
int n=50;
int m=200;
float x, y, angle;
void setup() {
  size(400, 800);
  frameRate(15);
  gradient1=createGraphics(width, height);
  gradient2=createGraphics(width, height);
  circle1=createGraphics(width, height);
}
void draw() {
  background(#442ee9);
  //绘制渐变图形
  gradient1.beginDraw(); 
  for (int i=0; i<300; i++) {  
    int col=i*(m-n)/300;
    gradient1.fill(255-col*2, 220, col*2);
    gradient1.noStroke();
    gradient1.rect(i+50, 0, 1, height);
  }
  gradient1.endDraw();

  gradient2.beginDraw(); 
  for (int i=0; i<300; i++) {  
    int col=i*(m-n)/300;
    gradient2.fill(255-col*0.5);
    gradient2.noStroke();
    gradient2.rect(i+50, 0, 1, height);
  }
  gradient2.endDraw();
  //绘制圆形
  circle1.beginDraw();
  circle1.noStroke();
  circle1.circle(200, 400, 300);
  circle1.endDraw();
  //应用圆形蒙版到渐变图形
  gradient1.mask(circle1);
  gradient2.mask(circle1);
  blendMode(SCREEN);
  push();
  translate(0, 80);
  tint(255, 160);
  image(gradient2, 0, 0);
  pop();
  blendMode(BLEND);
  push();
  translate(0, -100);
  tint(255, 220);
  image(gradient1, 0, 0);
  pop();

  fill(255);
  textSize(30);
  text("D-FORM", 136, 400);

  noFill();
  stroke(255);
  strokeWeight(2);
  circle(200, 480, 300);
  filter(BLUR, 1);

  fill(0);
  textSize(30);
  text("D-FORM", 136, 500);

  stroke(255, 100);
  for (int i=0; i<9; i++) {
    x= width/2+150*cos(radians(angle));
    y = 300+150*sin(radians(angle));
    line(x, y, x, y+180);
    angle +=10;
  }
}
void mouseClicked() { 
  noLoop(); 
  redraw();
}