互动媒体作业二

作业二

先上最终效果图
下面讲讲思路：
1、最前面人物的绘制
这里用到了贝塞尔曲线，利用贝塞尔曲线可以画出任意的曲线（贝塞尔曲线总结：转自http://blog.csdn.net/tianhai110/article/details/2203572），processing里面已有现成的画贝塞尔曲线的函数bezierVertex()，剩下的工作就是一点点添加曲线和不断调整曲线的参数了（其实大部分功夫都花在了这上面）。

//其中一条曲线的示例
  beginShape();
  vertex(403, 406);
  bezierVertex(424, 485, 345, 506, 300, 516);
  endShape();

2、背景的动态交互效果(星空)
这个做起来也挺简单的，首先在屏幕上随机生成一定数量的白色圆点，圆点的半径也在一个范围内随机，这里的交互有两种模式，每次按下鼠标都会切换一次模式，第一种是以鼠标所在的位置为原点，设置一定的半径，在此范围内的圆点都与鼠标所在位置连成一条直线；第二种是以鼠标所在的位置为原点，设置一定的半径，在此范围内遍历一遍圆点，将那些相隔距离小于一定值的圆点连成一条直线，并且圆点离鼠标所在位置越远，直线颜色就越浅，宽度越小。此外屏幕上所有圆点也都遵循离鼠标所在位置越远，颜色越浅的原则，并且所有的圆点都会在一定的范围内随机移动，部分代码如下：

fill(255);
  for (int i=0; i<points.size(); i++) {
    if (isClick) {
      for (int j=i+1; j<points.size(); j++) {
        if (dist(points.get(i).x, points.get(i).y, points.get(j).x, points.get(j).y)<100&&dist(points.get(i).x, points.get(i).y, mouseX, mouseY)<100) {
          stroke(255);
          strokeWeight(3 - dist(points.get(i).x, points.get(i).y, mouseX, mouseY)/50);
          fill(255 *(1 - dist(points.get(i).x, points.get(i).y, mouseX, mouseY) / 100.0));
          line(points.get(i).x, points.get(i).y, points.get(j).x, points.get(j).y);
        }
      }
    } else {
      if (dist(points.get(i).x, points.get(i).y, mouseX, mouseY)<100) {
        stroke(255);
        strokeWeight(2);
        line(points.get(i).x, points.get(i).y, mouseX, mouseY);
      }
    }
    noStroke();
    fill(255 *(1 - dist(points.get(i).x, points.get(i).y, mouseX, mouseY) / dist(0,0,width,height)));
    ellipse(points.get(i).x, points.get(i).y, points.get(i).size, points.get(i).size);
    if (time==0) {		//time用于控制圆点移动的速度
      points.get(i).x =points.get(i).ox+(int)random(-2, 3);
      points.get(i).y =points.get(i).oy+(int)random(-2, 3);
    }
  }