互动媒体技术-代码本色-第1章

向量

1.概述

向量：一个既有大小又有方向的几何对象。
向量通常被绘制为一个带箭头的线段，线段的长度代表向量的大小，箭头所指的方向就是
向量的方向。
processing中的向量结构：PVector，是存储两个分量的数据结构。
向量运算：加法、减法、乘法、单位化等。

2.拓展与应用

一个简单的躲避小游戏，鼠标控制蓝色主角小球的运动，红色弹跳小球与主角发生碰撞时主角会死亡，控制主角躲避红色小球。
（1）红色弹跳小球
使用向量实现弹球，通过向量的两个分量进行边界判断，超出哪个方向的边界，则该方向的速度方向实现弹球效果，

//小球
class Ball {
  public  PVector position;
  PVector velocity;
  Ball(float x,float y) {
    position = new PVector(x, y);
    velocity = new PVector(2.5, 5);
  }
  void update() {
    // 为当前位置添加速度.实际上是通过向量加法修改位置
    position.add(velocity);
    //水平方向超出边界，水平速度反向
    if ((position.x > width) || (position.x < 0)) {
      velocity.x = velocity.x * -1;
    }
    //垂直方向超出边界，垂直速度反向
    if ((position.y > height) || (position.y < 0)) {
      velocity.y = velocity.y * -1;
    }
  }
  void display() {
    // Display circle at x position
    stroke(0);
    fill(255,0,0);
    ellipse(position.x, position.y, 16, 16);
  }
}

（2）鼠标控制小球
小球加速度：鼠标与小球位置之间向量的大小与方向决定加速度的大小与方向，使用向量减法确定加速度大小与方向，向量加法实现加速度引起的速度变化，速度引起的位置变化，改变小球位置。

//鼠标控制运动
class Mover {
  public PVector position;
  //速度
  PVector velocity;
  //加速度
  PVector acceleration;
  //最大速度限制
  float topspeed;
  Mover() {
    // 初始位置
    position = new PVector(width/2,height/2);
    velocity = new PVector(0,0);
    topspeed = 5;
  }
  void update() {  
    // 计算方向，向量减法
    PVector mouse = new PVector(mouseX,mouseY);
    PVector acceleration = PVector.sub(mouse,position);
    // 设定加速度大小 向量模运算
    acceleration.setMag(0.2);    
    // 加速度引起的速度变化,向量加法
    velocity.add(acceleration);
    // 最大速度限制
    velocity.limit(topspeed);
    // 速度引起的位置变化 向量加法
    position.add(velocity);
  }
  void display() {
    stroke(0);
    strokeWeight(2);
    fill(55,120,225);
    ellipse(position.x,position.y,48,48);   
  }
}

（3）碰撞检测
原理：两点间距离公式，判断主角与红色弹跳小球的距离，当距离满足两圆内切或包含时，主角爆炸，爆炸效果显示一定时间后消除。
两点间距离公式：

两圆内切：距离d=R1-R2

Ball [] balls=new Ball[5];
Mover mover;
int death=0;
PVector pos;
int mytime=0;
void setup() {
  size(640, 360);
  for (int i = 0; i < balls.length; i++) {
    balls[i] = new Ball(random(0,width),random(0,height)); 
  }
  mover = new Mover(); 
}
void draw() {
  background(0);
   //碰撞检测
  for (int i = 0; i <balls.length; i++) 
  {
    float x=balls[i].position.x-mover.position.x;
    float y=balls[i].position.y-mover.position.y; 
    float d=x*x+y*y;
    if(d<1024)
    {
      death=1;
      pos=mover.position;
    }   
   }
  for (int i = 0; i <balls.length; i++) 
  {
    balls[i].update();
    balls[i].display(); 
  }
  if(death==0)
  {
    mover.update();
    mover.display();
  }
  if(death==1&&mytime<30)
  {
    PImage img=loadImage("爆炸.png");
    image(img,pos.x-100,pos.y-50,200,100);
    mytime++;
  }
  
}

3.效果