互动媒体技术-代码本色-第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.效果

• 点赞
• 收藏
• 分享
• 文章举报