如何解决P5js中带定时器的固定距离画笔
我对此很陌生，但我正在尝试在 P5 中创建一个固定距离的画笔，其中画笔的大小会随着时间变大/变宽（使用计时器）
这就是现在代码的样子
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,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,75);
line(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>但问题是，所有的线（包括之前绘制的线）都会随着时间的推移而扩展，并不会逐渐扩展。
下图说明了我想用画笔和计时器功能实现的目标
非常感谢您对我如何实现这一目标的任何帮助/见解，谢谢！ :)
解决方法
您当前在绘制路径时正在计算每个点的 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,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,75);
line(0,prev.r,0);
pop();
}
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.js"></script>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
