孤独的猫

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
processing--动态进度表

下面实现一个半圆形的进度条：

  1 PGraphics P1;
  2 PGraphics P2;
  3 float att;
  4 int num=16;
  5 float ang = PI/(num-1);
  6 float x1[]=new float [num];
  7 float y1[]=new float [num];
  8 float x2[]=new float [num];
  9 float y2[]=new float [num];
 10 float x3[]=new float [num];
 11 float y3[]=new float [num];
 12 float x4[]=new float [num];
 13 float y4[]=new float [num];
 14 float r1=300, r2=400;
 15 float at=PI/40;
 16 float t;
 17 void setup() {
 18   size(900, 600);
 19   smooth();
 20   frameRate(25);
 21   t=1;
 22   P1 = createGraphics(width, height);
 23   P2 = createGraphics(width, height);
 24   att =-at;
 25 }
 26 void draw() {
 27   background(0);
 28   translate(width/2, 500);
 29   rotate(PI);
 30   //循环绘制16个环绕的四边形
 31   for (int i=0; i<num; i++) {
 32     stroke(100);
 33     strokeWeight(6);
 34     fill(100, 100);
 35     quad(x1[i], y1[i], x2[i], y2[i], x3[i], y3[i], x4[i], y4[i]);
 36     x1[i]=r1*cos(i*ang-at);
 37     y1[i]=r1*sin(i*ang-at);
 38     x2[i]=r2*cos(i*ang-at);
 39     y2[i]=r2*sin(i*ang-at);
 40     x3[i]=r2*cos(i*ang+at);
 41     y3[i]=r2*sin(i*ang+at);
 42     x4[i]=r1*cos(i*ang+at);
 43     y4[i]=r1*sin(i*ang+at);
 44   }
 45   //绘制16个环绕的点
 46   for (int i=0; i<num; i++) {
 47     stroke(255);
 48     strokeWeight(3);
 49     point(410*cos(i*ang), 410*sin(i*ang));
 50   }
 51   //绘制一条半圆弧
 52   noFill();
 53   strokeWeight(2);
 54   arc(0, 0, 560, 560, -at, PI+at);
 55   //小三角运动路径
 56   noStroke();
 57   curve(320, -3450, -430, 0, 430, 0, -322, -3450); 
 58   float x = curvePoint(320, -430, 430, -320, t);
 59   float y =curvePoint(-3450, 0, 0, -3450, t);
 60   float tx=curveTangent(320, -430, 430, -320, t);
 61   float ty = curveTangent(-3450, 0, 0, -3450, t);
 62   float radian = atan2(ty, tx);
 63   t -=0.00165;
 64   if (t<0) {
 65     t=0;
 66   }
 67   push();
 68   translate(x, y);
 69   rotate(radian-PI);
 70   fill(255, 0, 0);
 71   triangle(0, 16, -10, -8, 10, -8);
 72   pop();
 73   //绘制环绕分布四边形的图形
 74   P1.beginDraw();
 75   P1.translate(width/2, 500);
 76   P1.rotate(PI);
 77   for (int i=0; i<num; i++) {
 78     P1.noStroke();
 79     P1.fill(255);
 80     P1.quad(x1[i], y1[i], x2[i], y2[i], x3[i], y3[i], x4[i], y4[i]);
 81     x1[i]=r1*cos(i*ang-at);
 82     y1[i]=r1*sin(i*ang-at);
 83     x2[i]=r2*cos(i*ang-at);
 84     y2[i]=r2*sin(i*ang-at);
 85     x3[i]=r2*cos(i*ang+at);
 86     y3[i]=r2*sin(i*ang+at);
 87     x4[i]=r1*cos(i*ang+at);
 88     y4[i]=r1*sin(i*ang+at);
 89   }
 90   P1.endDraw();
 91   //绘制动态蒙版图形
 92   P2.beginDraw();
 93   P2.translate(width/2, 500);
 94   P2.rotate(PI);
 95   P2.noFill();
 96   P2.stroke(#00D387);
 97   P2.strokeCap(SQUARE);
 98   P2.strokeWeight(100);
 99   P2.arc(0, 0, 700, 700, -at, att);
100   att +=0.0054;
101   if (att>PI+at) {
102     att = PI+at;
103   }
104   P2.endDraw();
105   //应用图形蒙版
106   resetMatrix();          //重置坐标原点
107   P2.mask(P1); 
108   image(P2, 0, 0);
109 }

显示效果为：

 

posted on 2024-06-15 22:17  孤独的猫  阅读(11)  评论(0)    收藏  举报