Processing(2) - 练习

程序的基本结构：

void setup(){    size(640,220);    background(60);}void draw(){    line(p1x,p1y,p2x,p2y);}void mousePressed(){    // do something}

实例1：下面做一个看起还算酷的动画程序，循环红绿蓝的256色；

void setup(){    size(960,544);    strokeWeight(0);    background(20);    fill(0);    frameRate(16);}int X = 960 / 16;int Y = 544 / 16;int x = 0;int y = 0;int f1 = 0;int f2 = 0;int f3 = 0;void colorArgumentsUpdate(){  if(f1 >= 255)  {     f1 = 0;     f2 += 12;     if(f2 >= 255)     {         f2 = 0;         f3 += 12;         if(f3 >= 255)         {            f3 = 0;         }     }  }}void positionArgumentsUpdate(){    if (x >= 960)    {      x = 0;      y += Y;      if(y >= 540)        {         y = 0;         fill(0);         rect(x,y,width,height);        }    }}void draw(){    colorArgumentsUpdate();    positionArgumentsUpdate();    fill(f1,f2,f3);    rect(x,y,X,Y);    x += X;    f1 += 16;}

这个例子，用两个函数来计算当前画图的位置参数，和颜色参数，算是对函数的一次应用。

每次向下的纵坐标到达边界时，在屏幕上立即画一个充满屏幕的矩形，达成刷新屏幕的功能；

执行动画截图：

实例2：关于鼠标的动画。

由于还没有了解数组，先费劲地手动添加10个坐标点，以后再改进。

主要目的是理解动画的形成机制。

int x1=0,x2=0,x3=0,x4=0,x5=0,x6=0,x7=0,x8=0,x9=0;int y1=0,y2=0,y3=0,y4=0,y5=0,y6=0,y7=0,y8=0,y9=0;int strokeValue = 255;int strokeWalue = 33;void argumentsChange(){    strokeValue -= 20;    strokeWalue -= 5;    stroke(strokeValue);     strokeWeight(strokeWalue);}void setup(){    size(960,544);    background(20);    frameRate(30);}void posUpdate(){    x9 = x8;    x8 = x7;    x7 = x6;    x6 = x5;    x5 = x4;    x4 = x3;    x3 = x2;    x2 = x1;        y9 = y8;    y8 = y7;    y7 = y6;    y6 = y5;    y5 = y4;    y4 = y3;    y3 = y2;    y2 = y1;        x1 = mouseX;    y1 = mouseY;    }void draw(){    posUpdate();    noStroke();    fill(20);    rect(0,0,960,544);    strokeValue = 255;    strokeWalue = 60;    point(x1,y1);    argumentsChange();    point(x2,y2);    argumentsChange();    point(x3,y3);    argumentsChange();    point(x4,y4);    argumentsChange();    point(x5,y5);    argumentsChange();    point(x6,y6);    argumentsChange();    point(x7,y7);    argumentsChange();    point(x8,y8);    argumentsChange();    stroke(255,0,0);    point(x9,y9);}

执行结果，动画截图：

将来学习了数组，可以改进这个程序，利用数组和循环，创建数量较多的运动点。

实例3：正弦动画：

// 定义a为第一个线段的正弦角度参数；inc为角度间隔；float sita = 0;float a = sita;float inc = TWO_PI/90;

//鼠标滚轮上下，改变FPS参数，即改变动画快慢。（但是发现Processing的 % 运算是不太好懂。）int myFps = 1;void mouseWheel(MouseEvent event) {  int e = event.getCount();  myFps = (myFps - e) % 7;  frameRate(int(pow(2,myFps)));  println("-------------------FPS changed to ", int(pow(2,myFps)));}void setup(){    size(800,600);    strokeWeight(1);    frameRate(1);}void draw(){    //先把屏幕刷成背景色，再画一条直线；    fill(20);    rect(0,0,width,height);    stroke(200);    line(0,300,800,300);    // Draw 800/5==160 lines    stroke(60,155,60);    println(int(sita * 180 / PI + 0.5), "degrees,","FPS:",int(pow(2,myFps)));    for (int i = 0; i < 800; i=i+5)     {         line(i, 300, i, 300- (sin(a)) * 200.0);         a = (a + inc) % TWO_PI;             }    a = sita;    //改变a的值，所有的线段都将在下次画图改变；    sita = (sita + TWO_PI/90)% TWO_PI;} 

执行结果截图：

实例4.改进其动画效果，用来说明正弦与圆的关系；

动画截图如下：

代码如下：

// 定义a为第一个线段的正弦角度参数；inc为角度间隔；float sita = TWO_PI/90 * 28;float a = sita;float inc = TWO_PI/90;//鼠标滚轮上下，改变FPS参数，即改变动画快慢。（但是发现Processing的 % 运算是不太好懂。）int myFps = 1;void mouseWheel(MouseEvent event) {  int e = event.getCount();  myFps = (myFps - e) % 7;  frameRate(int(pow(2,myFps)));  println("-------------------FPS changed to ", int(pow(2,myFps)));}void strokeRandomColor(){    stroke(    int(random(0,255)),    int(random(0,255)),    int(random(0,255))    );}void setup(){    size(960,540);    strokeWeight(1);    frameRate(1);}void draw(){    //先把屏幕刷成背景色，再画一条直线；    fill(20);    rect(0,0,width,height);    stroke(200);    line(0,0.5 * height, 800, 0.5 * height);    // Draw 800/5==160 lines    stroke(60,155,60);    println(int(sita * 180 / PI + 0.5), "degrees,","FPS:",int(pow(2,myFps)));    ellipse(width - 200, 0.5 * height, 400,400);        stroke(0,255,0);    strokeWeight(1);    line(760,270,760 + 200 * cos(a - TWO_PI/90 * 28),         270 - 200 * sin(a - TWO_PI/90 * 28));            line( 760,      270 - 200 * sin(a - TWO_PI/90 * 28),      760 + 200 * cos(a - TWO_PI/90 * 28),       270 - 200 * sin(a - TWO_PI/90 * 28)    );        strokeWeight(3);    line( 760,      0.5 * height,      760,      270 - 200 * sin(a - TWO_PI/90 * 28)    );        for (int i = 0; i < 760; i=i+5)     {         strokeRandomColor();         line(i, 0.5 * height, i, 0.5 * height - (sin(a)) * 200.0);         a = (a + inc) % TWO_PI;             }    a = sita;    //改变a的值，所有的线段都将在下次画图改变；    sita = (sita + TWO_PI/90)% TWO_PI;} 

- - - - - -