p5.js码绘：基于向量的运动

p5.js码绘：基于向量的运动

---

前言

本文记载的是自己阅读《代码本色》1-3章之后借助p5.js自带的向量完成的简单运动的练习。

---

一、按键控制的小飞船

简介： 这个是按照《代码本色》练习3.5要求完成的一个用三角形表示的小飞船，需要有两个按键分别控制飞船的左右旋转，同时还要有一个按键控制飞船的加速。这里我用方向键左和右分别控制飞船的顺时针旋转和逆时针旋转，上和下分别控制飞船的加速度的升高和降低。
完整代码：（运行时需把注释去掉）

let position;       //飞船当前位置(Vector类型)
let velocity;       //飞船当前速度(Vector类型)
let dstposition;    //飞船的目标位置(Vector类型)
let acceleration=1; //飞船当前加速度(float类型)
let Angle=0;        //飞船旋转的角度(float类型）

function setup() {
  createCanvas(1200, 800);
  background(0);
  position=createVector(100,100);
  dstposition=createVector(400,300);
  //飞船初始速度为当前位置到目标位置的一个插值减去表示当前位置的向量，0.01是插值的位置，越大则速度越大
  velocity=(p5.Vector.lerp(position,dstposition,0.01)).sub(position);
}

function draw() {

  //左右按键控制飞船旋转
  if(keyIsPressed===true)
  {
      if (keyCode === RIGHT_ARROW) {
      Angle+=0.3;
    } else if (keyCode === LEFT_ARROW) {
      Angle-=0.3;
    }
  }
  //计算当前位置和目标位置的距离，如果小于20则判断已到达目标位置
  let dist=p5.Vector.dist(position,dstposition);
  if(dist>20)
  {
    position.add(velocity);
  }
  //绘制当前状态下的飞船
  background(0);
  fill(255);
  translate(position.x,position.y);
  rotate(Angle);
  triangle(-8, 10, 8, 10, 0, -10);      
}
//鼠标移动事件控制飞船目标位置的变化
function mouseMoved()
{
  dstposition=createVector(mouseX,mouseY);
  velocity=(p5.Vector.lerp(position,dstposition,0.01)).sub(position);
}
//上下键控制飞船的加减速
function keyPressed() {
   if (keyCode === UP_ARROW) {
      acceleration+=1;
      velocity.mult(acceleration);
    } else if (keyCode === DOWN_ARROW) {
      acceleration-=1;
      velocity.mult(acceleration);
    }
    if (acceleration>1.5){acceleration=1.5;}
    if(acceleration<0){acceleration=0.1;}
}

效果展示：

二、改进的飞船：自动校准方向

简介： 完成练习的要求之后，我感觉按键校准飞船方向不太便捷，于是萌生了让飞船自动校准方向的想法，即不论目标位置如何改变，飞船都会自动校准方向，让头部始终朝向目标位置。
完整代码：（运行时需把注释去掉）

let position;    //飞船当前的位置(Vector类型)
let velocity     //飞船当前的速度(Vector类型)
let dstposition; //飞船的目标位置(Vector类型)

function setup() {
  createCanvas(1200, 800);
  background(0);
  position=createVector(100,100);
  dstposition=createVector(400,300);
  velocity=(p5.Vector.lerp(position,dstposition,0.01)).sub(position);
}

function draw() {
  //计算飞船当前位置和目标位置的距离，如果小于20则判断到达，不再移动
  let dist=p5.Vector.dist(position,dstposition);
  if(dist>20)
  {
    position.add(velocity);
  }
  background(0);
  fill(255);
  translate(position.x,position.y);
  rotate(angle());
  triangle(-8, 10, 8, 10, 0, -10);

}
//计算飞船头部和向量和目标位置向量的夹角
function angle()
{
  selfdirection=createVector(0,-20);
  deltaAngle=selfdirection.angleBetween(dstposition.sub(position));
  return (deltaAngle+2*PI);
}
//鼠标移动事件，允许移动来调整目标位置
function mouseMoved()
{
  dstposition=createVector(mouseX,mouseY);
  velocity=(p5.Vector.lerp(position,dstposition,0.01)).sub(position);
}

效果展示：

总结

这篇博客主要是对p5.js里面的向量类进行运用，也确实让我对向量的理解更加深刻了，实验过程中也碰到了一些难题，比如让飞船绕着其中心进行旋转，比如确定飞船旋转的角度，以及确定飞船运行的速度等等，看似简单但是实际上做起来需要考虑和解决的问题还是比较多的，期间也踩了不少坑，但是也确确实实学到了一些东西。