Processing 临摹作业01

试验要求：从给定的几个gif中选一个用processing进行临摹，并拓展该图像的效果，使其看起来更高级。

我的代码：

void setup(){

  size(600, 600);

  ellipseMode(CENTER);

  colorMode(HSB);

  background(0,0,0);

  noStroke();

}



float i = 0;



void draw(){

  background(0,0,0);

  i += PI * 0.02;

  if(i % HALF_PI <= PI * 0.02) delay(180);

  for(int j = -2;j < 8;j++) {

    for(int k = -2;k < 8;k++) {

      fill((abs(j)*32)%255,(abs(k)*32)%255,255);

      resetMatrix();

      translate(300,300);

      //rotate(map(mouseY,0,height,0,PI));

      rotate(i/2.0f);

      translate(50 + 100 * j-300, 50 + 100 * k-300);

      ellipse(0, 0, 90, 90);

      fill(0,0,0);

      resetMatrix();

      translate(300,300);

      //rotate(map(mouseY,0,height,0,PI));

      rotate(i/2.0f);

      translate(50 + 100 * j-300, 50 + 100 * k-300);

      if(abs(j) % 2 == 0 && abs(k) % 2 == 0) rotate(i);

      if(abs(j) % 2 == 1 && abs(k) % 2 == 0) rotate(-i + HALF_PI);

      if(abs(j) % 2 == 0 && abs(k) % 2 == 1) rotate(-i - HALF_PI);

      if(abs(j) % 2 == 1 && abs(k) % 2 == 1) rotate(i + PI);

      rect(0, 0, 50, 50);

      rect(-50, -50, 50, 50);

    }

  }

}

分析：

我选择的是用不同相位旋转不同位置的方块和圆，从而达到视觉上方块四分和融合的神奇效果，例图：

 

我的代码运行效果：

 

 

可以看到效果变得华丽了许多，实际上添加的代码非常少，只有变颜色和整体旋转两个功能而已。

实现:

首先分析原图，看黑色部分是一个正方形经过分裂变成了4个小正方形，再接着旋转和其他正方形重新弄融合成为一个大正方形，这样看来发现规律实在复杂，但是另一方面从白的地方开始看，我们可以发现3/4的圆，实际上是这个扇形在旋转着，那么我怎么制造这样的扇形呢？简单，只要先画一个圆，再在角落画一个和背景同色的小正方形即可，按照这个思路，我马上完成了原图的临摹，在每画完一个小方块的时候，都要重置坐标系的中心，然后设定新的坐标系在需要绘制的圆的中心。另一个比较麻烦的事情是物体每旋转90度就会先停顿一会儿再接着转，也就是说旋转并不是一直匀速的，这里我采用了if(i % HALF_PI <= PI * 0.02) delay(180);的方法，即是说当旋转90度后，就会让程序暂停180毫秒，以达到停顿的效果，接着为了做出更加“炫酷”的效果，我在每个圆上加入了两个正方形,然后根据方块的位置给了他们各自不同的颜色：

fill((abs(j)*32)%255,(abs(k)*32)%255,255);

最后我给整个图像加了反向的旋转，也就是现在的效果，这里的难点是坐标系是嵌套的，里面的小正方形还是按照自己的中心旋转，而他们的中心又在绕图像的中心旋转，这里需要重置坐标系和旋转，来实现上图效果。