P5 顶点添加 strokeWeight

Question

在我的代码中，不同的顶点将对齐（地图上的路线）。我想想象是否有更多人走同一条路线 -> 我想生成更大的 Strokes。有没有可能 "add" 笔划粗细？

function setup() {
    createCanvas(600,600);
}

function draw() {
    strokeWeight(2);
    beginShape();          
    vertex(0,0);
    vertex(500,60);           
    endShape(); 

    noFill();
    strokeWeight(2);
    beginShape();          
    vertex(0,0);
    vertex(500,60); 
    vertex(400,400);
    endShape();  
}

这里有 2 个与 strokweight(2); 重叠的顶点我想让重叠的部分有更大的笔触。

Answer 1

这里有两种我认为您可以尝试的方法。

首先是在笔触颜色中使用透明度。它不会使您的 strokeWeight 变粗，但会使重叠的路线突出。我在下面放了一些代码，你可以 copy/paste 到 Processing 来试试看。我将 strokeWeight 增加到 4 以使其更易于查看。

第二种方法是将正在行驶的每条路线视为一系列线路或连接，而不是一条连续线路。对于点之间的每个连接，计算不同路线经过的次数，并从中确定您的 strokeWeight。

例如。 A、B、C、D城市之间的3条路线

路线 1：A - B、B - C、C - D
路线 2：A - D、D - C
路线 3：C - B、B - D、D - C

每个城市连接的旅行计数。

A - B = 1
B - C = 2
C - D = 3
A - D = 1
B - D = 2

第一种方法简单快捷，第二种方法复杂但灵活得多。

// Quick and easy approach using transparency
void setup() {
  size(600, 600);
}

void draw() {
  background(255);
  stroke(0, 75); // black with alpha set to 75
  strokeWeight(4);
  beginShape();          
  vertex(0, 0);
  vertex(500, 60);           
  endShape(); 

  noFill();
  strokeWeight(4);
  beginShape();          
  vertex(0, 0);
  vertex(500, 60); 
  vertex(400, 400);
  endShape();
}

P5 顶点添加 strokeWeight

P5 vertices add strokeWeight

javascript

p5.js