互动媒体技术——processing旋转方块（不同角度的旋转）

总体步骤概述

1.观察图形，总结其中的规律

2.将规律转化为代码，注意封装性

3.应用交互性，拓展作品

一、观察图形，总结其中的规律

在这里插入图片描述

（1）图形组成元素

图形是由三个立方体的线框图以及立方体的每个顶点防止一个小球所形成。

（2）图形运动特征

可以观察，三个立方体均在旋转，但是每个立方体的旋转轴却不一样。这里看似简单，但是涉及到很多步的角度的转换。
首先了解一下processing的坐标系：
在这里插入图片描述
最外圈的立方体：这里先看作绕Y轴旋转
中间的立方体：绕x轴旋转
最小的立方体：绕Z轴旋转
当然，它们还需要旋转一定的角度

二.将规律转化为代码，注意封装性

第一步：分析类的关系

（1）首先每个cube都有绘制、size等成员，因此得建立一个cube类，其中包含绘制cube和设置cube大小的功能
（2)由于每个cube的旋转角度不一致，所以每个cube的旋转的方法都不一样，但可以只是内容不一样，但是方法名相同，这里我们想到的第一个便是接口。
于是分析了一下，整体的结构大致是：
在这里插入图片描述

第二步：开始编写每一块的代码

Cube类：在这个类中，我把小球的绘制也放在了绘制函数一起，这样子方便看作是一个整体。

class Cube {
  float size;
  color c;
  Cube() {
  }
  Cube(float size) {
    this.size =size;
    
  }
 public void setColor(color c){
   this.c=c;
 }
  public void drawCube() {
    float []x={-size/2,-size/2,-size/2,-size/2,size/2,size/2,size/2,size/2};
    float []y={-size/2,size/2,-size/2,size/2,-size/2,size/2,-size/2,size/2};
    float []z={size/2,size/2,-size/2,-size/2,size/2,size/2,-size/2,-size/2};
    ortho();
    for(int i=0;i<8;i++){
      pushMatrix();
      translate(200, 200, 0);
      rotateX(radians(-45));
      rotateY(radians(45));
      translate(-200, -200, 0);
      translate(x[i]+200,y[i]+200,z[i]);
      //noStroke();
      fill(c);
      lights();
      sphere(5);
      popMatrix();
    }
   
    pushMatrix();
    translate(200, 200, 0);
    ortho();
    strokeWeight(3); 
    stroke(c, 160);
    rotateX(radians(-45));
    rotateY(radians(45));
    lights();
    noFill();
    box(size);
    popMatrix();
  }
}

接口 threeCube

interface threeCube {
  public void rotateTheCube(int rotateMills,int x);
  public void setColor(color c);
}

类Cube1，Cube2，Cube3：它们继承自Cube，实现了结构threeCube，其中只是方法rotateCube（旋转立方体）的函数内容有所不同，因此这里我只介绍一下旋转：
（1)最外圈的立方体：先移回原点，把x轴和Y轴的角度都恢复到原位，然后绕Y轴旋转，转过后，又将其移回之前的位置和角度（x轴旋转-45度，y轴旋转45°）

public void rotateTheCube(int rotateMills,int x) {
    if(x>0){
      this.size=x;
    }
    pushMatrix();
    translate(200, 200, 0);
    rotateX(radians(-45));
    rotateY(radians(rotateMills));
    rotateX(radians(45));
    translate(-200, -200, 0);
    drawCube();
    popMatrix();
  }

(2)中间的立方体：类似上面

public void rotateTheCube(int rotateMills,int x) {
    if(x>0){
      this.size=x;
    }
    pushMatrix();
    translate(200, 200, 0);
    rotateX(radians(-45));
    rotateY(radians(45));
    rotateX(radians(-i));
    rotateY(radians(-45)); 
    rotateX(radians(45));
    translate(-200, -200, 0);
    drawCube();
    popMatrix();
  }

（3)最小的立方体

 public void rotateTheCube(int rotateMills,int x) {
    if(x>0){
      this.size=x;
    }
    pushMatrix();
    translate(200, 200, 0);
    rotateX(radians(-45));
    rotateY(radians(45));
    rotateZ(radians(i));
    rotateY(radians(-45)); 
    rotateX(radians(45));
    translate(-200, -200, 0);
    drawCube();
    popMatrix();
  }

效果展示：
在这里插入图片描述

三、.应用交互性，拓展作品

（1)使用mouseClick函数控制方块的大小变换，flag用于确定是否点下

void mouseClicked() {
  if(flag)flag=false;
  else flag=true;
}

void draw() {
  background(0);
  noFill();
  int caseCube=frameCount%21;
  cube1.setColor(colorCube);
  cube2.setColor(colorCube);
  cube3.setColor(colorCube);
  if(caseCube<7&&flag){
    cube1.rotateTheCube(i+10,120);
    cube2.rotateTheCube(i+5,60);
    cube3.rotateTheCube(i,30);
 
  }
  else if(caseCube<14&&flag){ 
    cube1.rotateTheCube(i+10,60);
    cube2.rotateTheCube(i+5,30);
    cube3.rotateTheCube(i,10);
  }else{
    cube1.rotateTheCube(i+10,180);
    cube2.rotateTheCube(i+5,120);
    cube3.rotateTheCube(i,60);
  }
  i++;
  if(i==360)i=0;
}

（2)使用mouseDragged函数控制方块的颜色变换

color colorCube=color(255, 177,17);
 cube1.setColor(colorCube);
 cube2.setColor(colorCube);
 cube3.setColor(colorCube);
void mouseDragged() 
{
  colorCube=color(random(215,255),random(50,255),random(0,255));
}