在 p5.js 中绘制一条不同宽度的线

Question

我希望在画布上画出宽度从开始到结束逐渐变化的线条。也就是说，假设该线从 开始（相当于(0, 0)），结束于，并且必须（线性）从开始到结束增加。width = 1strokeWeight(50, 50)width = 3width13

关于如何实现这一目标有什么想法吗？无法将其从网络中删除。

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(...)。（注意：这将使线的末端看起来平坦，这需要更精细的工作。）