line - 在 p5.js 中画一条不同宽度的线

Question

我希望在我的画布上绘制宽度从头到尾逐渐变化的线条。也就是说，假设该行从（等效地， ）开始并(0, 0)以结束，并且必须（线性）从开始到结束增加。width = 1strokeWeight(50, 50)width = 3width13

关于如何实现这一目标的任何想法？不能把它从网上刮下来。

标签： linep5.jsstroke

Answer 1

关键是将线分成例如 30 段。您绘制每个段以增加strokeWeight()。您拥有的线段越多，线条看起来就越平滑。

您可以使用lerp()来查找两端之间点的 x,y 坐标。

您可以使用lerp()查找strokeWeight()两端之间的线。

function setup() {
  createCanvas(200, 200);
  background("black");
  stroke("white");
  gradientLine(0, 0, 50, 50, 1, 3, 30);
  noLoop();
}

function gradientLine(
  start_x,
  start_y,
  end_x,
  end_y,
  start_weight,
  end_weight,
  segments
) {
  let prev_loc_x = start_x;
  let prev_loc_y = start_y;
  for (let i = 1; i <= segments; i++) {
    let cur_loc_x = lerp(start_x, end_x, i / segments);
    let cur_loc_y = lerp(start_y, end_y, i / segments);
    push();
    strokeWeight(lerp(start_weight, end_weight, i / segments));
    line(prev_loc_x, prev_loc_y, cur_loc_x, cur_loc_y);
    pop();
    prev_loc_x = cur_loc_x;
    prev_loc_y = cur_loc_y;
  }
}

<script src="https://cdn.jsdelivr.net/npm/p5@1.0.0/lib/p5.min.js"></script>

编辑：另外，如果使用颜色alpha < 255，可能会出现这样的伪影：

发生这种情况是因为笔划的默认上限设置为ROUND。设置strokeCap(SQUARE)将解决此问题：

这需要push()...pop()在功能块中设置gradientLine(...)。（注意：这会使线条的末端看起来很平，这需要更精细的工作。）