在 P5js 中使用计时器固定距离刷

Question

我对此很陌生，但我正在尝试在 P5 中创建一个固定距离的画笔，其中画笔的大小会随着时间的推移 bigger/wider（使用计时器）

这就是代码现在的样子

let path;
let timeLimit = 30;


function setup() {
  createCanvas(800, 500);
  path = new Path();
}

function draw() {
  background(225);
  path.display();
  path.addPoint(mouseX, mouseY);
}

class Path {
  constructor() {
    this.pts = [];
    this.angles = [];
    this.size = 30;
  }

  get lastPt() {
    return this.pts[this.pts.length - 1];
  }

  addPoint(x, y) {
    if (this.pts.length < 1) {
      this.pts.push(new p5.Vector(x, y));
      return;
    }

    const nextPt = new p5.Vector(x, y);
    let d = p5.Vector.dist(nextPt, this.lastPt);

    while (d > this.size) {
  
      const diff = p5.Vector.sub(nextPt, this.lastPt);
      diff.normalize();
      diff.mult(2);
      this.pts.push(p5.Vector.add(this.lastPt, diff));
      this.angles.push(diff.heading());
      d -= this.size;
    }
  }

  display() {
  
let r = map( frameCount, 0, timeLimit, 1, 20);
    
    rectMode(CENTER);
    for (let i = 1; i < this.pts.length; i++) {
      const prev = this.pts[i - 1];
      const next = this.pts[i];
      const diff = p5.Vector.sub(next, prev);
      diff.mult(0.1);
      push();
      translate(prev.x + diff.x, prev.y + diff.y);
      fill(255, 0, 0, 75);
      line(0, 0,(r), 1);
      pop();
    }
  }
}

<!DOCTYPE html>
<html lang="en"><head><script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/addons/p5.sound.min.js"></script><link rel="stylesheet" type="text/css" href="style.css"><meta charset="utf-8" /></head><body><script src="sketch.js"></script></body>
</html>

但问题是，所有的线（包括之前画的）都在加班加长，并不是逐渐扩大。

下图说明了我想用画笔和定时器功能实现什么

任何help/insight关于我如何实现这一点的任何人都将不胜感激，谢谢！ :)

Answer 1

您当前正在为绘制路径时的每个点计算 r。由于您重绘了整个路径，所以每一帧的所有线段都会增长。为防止这种情况，您需要制作 r 在添加点时计算的内容，并将其包含在路径的数据结构中。

let path;
let timeLimit = 30;


function setup() {
  createCanvas(800, 500);
  path = new Path();
}

function draw() {
  background(225);
  path.display();
  path.addPoint(mouseX, mouseY);
}

class Path {
  constructor() {
    this.pts = [];
    this.angles = [];
    this.size = 30;
  }

  get lastPt() {
    return this.pts[this.pts.length - 1];
  }

  addPoint(x, y) {
    // The fundamental issue was calculating "r" while displaying the line,
    // instead of while drawing it. In order to set the width of the brush
    // as the path is drawn you need to calculate this here and store it
    // in the pts list along with the position (you could also use a
    // a separate array as you have done for angles).
    let r = map(frameCount, 0, timeLimit, 1, 20);

    if (this.pts.length < 1) {
      this.pts.push({ pos: new p5.Vector(x, y), r });
      return;
    }

    const nextPt = new p5.Vector(x, y);
    let d = p5.Vector.dist(nextPt, this.lastPt.pos);

    while (d > this.size) {
      const diff = p5.Vector.sub(nextPt, this.lastPt.pos);
      diff.normalize();
      diff.mult(2);
      this.pts.push({ pos: p5.Vector.add(this.lastPt.pos, diff), r });
      this.angles.push(diff.heading());
      d -= this.size;
    }
  }

  display() {

    // rectMode(CENTER);
    for (let i = 1; i < this.pts.length; i++) {
      const prev = this.pts[i - 1];
      const next = this.pts[i];
      const diff = p5.Vector.sub(next.pos, prev.pos);
      diff.mult(0.1);
      push();
      translate(prev.pos.x + diff.x, prev.pos.y + diff.y);
      fill(255, 0, 0, 75);
      line(0, 0, prev.r, 0);
      pop();
    }
  }
}

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

在 P5js 中使用计时器固定距离刷

Fixed Distance Brush with Timer in P5js

timer

processing

drawing

p5.js

brush