如何在P5中从一点慢慢画线到另一点？

Question

我正在使用p5.js画一条简单的线。

function setup() {
  //createCanvas(windowWidth, windowHeight);
  createCanvas(400, 200);
}

function draw() {
  background(255, 255, 255);
  fill(255, 0, 0);
  stroke(255, 0, 0);
  strokeWeight(1);
  line(0, 0, 250, 100);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>

但是一下子画出来的线
我怎样才能慢慢/逐渐画线？（即 300 毫秒）。
它看起来像是从点 (0,0) 到点 (250,100) 的动画。

Answer 1

我快速浏览了一下 p5，它似乎每隔一段时间就会调用 draw 方法。如果你想让运动发生，你只需要对其进行编程。

我在下面整理了一个简单示例。我认为它的绘制速度比你想要的慢很多，但我不确定 p5 调用的频率 draw.

var position = 0,
  end = 300;

function setup() {
  //createCanvas(windowWidth, windowHeight);
  createCanvas(400, 200);
}

function draw() {
  background(255, 255, 255);
  fill(255, 0, 0);
  stroke(255, 0, 0);
  strokeWeight(1);

  var xEnd = 250,
    yEnd = 100;

  // Got to the end yet?
  if (position < end) {
    
    // Work out positions.
    xEnd = (xEnd / end) * position;
    yEnd = (yEnd / end) * position;
  }

  line(0, 0, xEnd, yEnd);
  
  // Increment position.
  position++;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>

Answer 2

FrameRate可以用来调整绘图的速度。此草图绘制了一条对角线，从点 0,0 缓慢开始，然后加速直到到达点 250, 100。

var x = 0;
function setup() {
  createCanvas(400, 200);
  frameRate(10);
}

function draw() {
    background(255, 255, 255);
    fill(255, 0, 0);
    stroke(255, 0, 0);
    strokeWeight(1);
    // y = mx + b
    line(0, 0, x, 100/250*x);
    x++;
    if (x > 50){
      frameRate(30);
    }
    if (x > 250){
      noLoop();
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>

如何在P5中从一点慢慢画线到另一点？

How to draw line slowly from a point to another point in P5?

javascript

p5.js