互动媒体技术——Processing模仿并拓展动态爱心图案

总体步骤概述

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

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

3.应用交互性和用户感官，拓展作品

一、观察图形、总结规律

（1）单个爱心：

单个爱心是由许多个立方体拼接而成的，每行方块的位置不同以及个数不同，但是每个小方块的大小相同。方块的边框是没有消隐的。

（2)整体爱心的位置：

4*4个爱心，每行4个，每列4个，间隔相等。

（3)整体爱心的运动：

<1>.可以观察到，每一斜排的爱心的运动是一致的，因此每一斜排可以归为1组。第一排和最后一排是一致的，因此这两排为一组。一共有六组。
<2>.从第一排到最后一排，正好转过360°，因此六组，每组间隔360°÷6=60°。设置起点不同即可，但是运动速率是一致的。

二、将规律一步一步转化为代码，注意封装性

（1）编写单个爱心

<1>首先想到，16个爱心，不可能每一个都写一段代码来绘制爱心，所以我们可以建立一个爱心的类，给它添加一个绘制爱心的功能

class lovePitch{
	public void drawLove2(){
	}
}

<2>而既然要绘制爱心的话，当然得指定绘制爱心所在的位置，所以该类需要拥有成员变量：爱心的位置、爱心的颜色、组成爱心的方块大小，这里可以在构造函数中进行设置

class lovePitch{
  lovePitch(){
	    
	  }
  lovePitch(float x,float y,float z,float size,int startAngle){
    this.x=x;
    this.y=y;
    this.z=z;
    this.size=size;
    this.startAngle=startAngle;
    this.c=color(255,0,0);
  }
}

<3>开始绘制爱心的函数编写：
绘制爱心时，得先学会写3D效果的方格，因此我们先构建一下3D的方块。查到官方API给出了参考：

使用两个for循环开始编写爱心桃，一共是6行，7列，其中有一些缺省，使用if语句就可以判断是画还是不画。这里使用了popMatrix（）和pushMatrix（）可以保存和还原之前的状态。

 public void drawLove2(){
    pushMatrix();
    translate(x,y,z);
    fill(c);
    ortho(); 
    for(int j=0;j<6;j++){
      for(int i=0;i<7;i++){
        pushMatrix();
        translate(size*i,size*j,0); 
        if((j==0&&(i==0||i==3||i==6))||(j==3&&(i==0||i==6))||(j==4&&(i!=2&&i!=3&&i!=4))||(j==5&&(i!=3))){
        }
        else box(size);
        popMatrix();
      }
    }
    popMatrix();
  }

（2）考虑爱心的旋转

每个爱心的旋转速度是一致的，只是初始的旋转位置不同。考虑到这个，可以把爱心的旋转写到爱心类中，并传递一个起始位置的参数即可。又因为，旋转是由一个变量的角度所控制的，因此也要将控制爱心旋转的角度的变量作为参数传递进去。（由于processing中的旋转绕的中心都是坐标原点，因此这采用先将物体以到原点，将物体旋转后，再移回原来位置的办法）

 public void rotateLove(int rotateMills){    
    pushMatrix();
    translate(x+30,0,0);
    rotateY(radians(rotateMills));
    rotateY(radians(startAngle));
    translate(-(x+30),0,0);
    drawLove2();
    popMatrix();   
  }

（3）绘制所有爱心

4行4列的话，我们可以采用三个变量控制：
i：控制16个爱心的绘制
j：控制换行，每4绘制4个。换一行，可以采用求余的办法确定，每一行的位置通过（j行距离值）确定。
k：控制每一列，每个爱心桃的列的位置通过（i列间距）确定。
（1)首先再所有函数的开头需要声明类对象，并指定参照爱心桃的初始坐标：

lovePitch[] allLove=new lovePitch[16];
int firstX=50;
int firstY=50;

(2)然后在setup（）函数中初始化类，其中rateLove为每个爱心桃的初始旋转角度，因为每排爱心的初始角度是不一致的

void setup(){
  size(500,500,P3D);
  int[] rateLove={0,60,120,180,60,120,180,240,120,180,240,300,180,240,300,0};
  for(int i=0,j=0,k=0;i<16;i++,k++){
    allLove[i]=new lovePitch(firstX+(k*100),firstY+(j*100),0,10,rateLove[i]);
    if((i+1)%4==0){
      j++;
      k=0;
      k--;
    }  
  }
}

（3)最后可以在draw函数中使用for循环，调用绘制函数即可。（其中i1为旋转角度的控制变量，为全局变量，当i达到360时，即旋转一周，此时重置i1，避免数值过大，超过了int的范围）

void draw(){
    background(0);
    for(int i=0;i<16;i++)
    {
      allLove[i].rollover(mouseX,mouseY);
      allLove[i].rotateLove(i1);
    }
   
    i1++;
    if(i1==360)i1=0;
}

（4)效果展示

三、3.应用交互性和用户感官，拓展作品

processing中最有特色的便是交互性了，因此这里我通过与用户进行交互的原则，对作品进行了扩展。通过鼠标来实现对爱心桃颜色的控制，实现的功能有：
（1）鼠标按下时，改变爱心的颜色，鼠标再次按下，恢复颜色

<1>首先编写鼠标相应事件
flag为全局变量，用于判断当前鼠标是否点下

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

<2>编写改变颜色的函数：（该函数针对每一个爱心桃而改变颜色，因而为爱心这个类的成员函数）

 public void changeColor(){
    if(flag)this.c=color(random(0,255),random(0,255),random(0,255));
    else this.c=color(255,0,0);
  }

（2)鼠标移动到某一个爱心上面时，改变所指到之处爱心的颜色和速度。

颜色改是相对于每一个爱心而言的，因此应该为爱心类添加一个成员函数（其中if是判断鼠标当前的位置是否处在该爱心的矩形边框中）

 public void rollover(int mx,int my){
    if(mx>x&&mx<x+6*size&&my>y-10&&my<y+4*size){
       this.c=color(random(0,255),random(0,255),random(0,255));
       this.speed=200;
    }else{
      this.c=color(255,0,0);
      this.speed=0;
    }