p5.js

Question

我正在尝试为从一个点到另一个点的直线设置动画。我想设置一个动画持续时间，例如 10 分钟，使用变量来传递行程持续时间：

let p1_x = 200;
let p1_y = 200;
let p2_x = 200;
let p2_y = 300;
let run_x = p1_x;
let run_y = p1_y;


function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  noFill();
  stroke(0);
  point(p1_x, p1_y);
  point(p2_x, p2_y);
  let d = int(dist(p1_x, p1_y, p2_x, p2_y));
  stroke(0, 153, 255);
  
  if(run_x < p2_x) {
    run_x = run_x + 0.1;
  } else if(run_y < p2_y) {
    run_y = run_y + 0.1;
  }
  
  line(p1_x, p1_y, run_x, run_y);
}

<script src="https://cdn.jsdelivr.net/npm/p5@1.2.0/lib/p5.js"></script>

Answer 1

可变定时器是程序持续多少秒*10。每当它刺激时，变量 t 就会上升。当 t 等于定时器时，绘图函数停止使用 noLoop()；函数 [要重新启动它，你必须执行 loop()]。我还使线路增加了除以计时器的距离，因此当计时器结束时线路应该完美地到达终点。如果这不起作用，请告诉我。

    let p1_x = 200;
    let p1_y = 200;
    let p2_x = 200;
    let p2_y = 300;
    let run_x = p1_x;
    let run_y = p1_y;
    let timer = 600;
    let d = int(dist(p1_x, p1_y, p2_x, p2_y));
    let t = 0;    

    function setup() {
      createCanvas(400, 400);
      frameRate(10);

    }
    
 function draw()
{
      background(220);
      noFill();
      stroke(0);
      point(p1_x, p1_y);
      point(p2_x, p2_y);
      stroke(0, 153, 255);
      
      if(run_x < p2_x) {
        run_x = run_x + 0.1;
      } else if(run_y < p2_y) {
        run_y = run_y+(d/timer);
      }
      
      line(p1_x, p1_y, run_x, run_y);
  
      if(t>=timer)
        {
          noLoop();
          console.log("Works")
        }
      t++;
    }

p5.js - 从相关时间的两点动画化一条线

p5.js - animate a line from two points in a related time

javascript

animation

canvas