问题描述
我对此很陌生,但我正在尝试在 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>