Как нарисовать линию медленно из точки в другую точку в P5? - PullRequest
Новая
       5

Как нарисовать линию медленно из точки в другую точку в P5?

1 голос
/ 18 марта 2020

Я использую 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).

Ответы [ 2 ]

2 голосов
/ 18 марта 2020

Я быстро взглянул на 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>
1 голос
/ 18 марта 2020

FrameRate может использоваться для регулировки скорости рисования. Этот эскиз dr aws - диагональная линия, которая начинается медленно в точке 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>
...