两个特定点之间的嘈杂线 P5.js

Question

我正在尝试在两个特定点之间绘制一条噪声线（使用 perlin 噪声）。例如 A(100, 200) 和 B(400,600)。该线可以是点系列。绘制随机噪声线非常清晰，但我不知道如何计算距离特定点。 P5.js. 的工作我还没有编写任何代码来上传。请问有人能帮帮我吗？

Answer 1

我试图添加足够的评论，以便您能够了解如何完成这样的事情。有很多事情你应该让自己意识到，如果你还没有意识到的话，很难说你错过了哪些事情：

for 循环
画线使用beginShape()/vertex()/endShape()
Trigonometry (in this case sin/cos/atan2) 这使得找到角度并确定给定角度的 X 和 Y 分量中的 2d 偏移成为可能
p5.Vector() and its dist() 函数。

// The level of detail in the line in number of pixels between each point.
const pixelsPerSegment = 10;
const noiseScale = 120;
const noiseFrequency = 0.01;
const noiseSpeed = 0.1;

let start;
let end;

function setup() {
  createCanvas(400, 400);
  noFill();
  
  start = createVector(10, 10);
  end = createVector(380, 380);
}

function draw() {
  background(255);
  
  let lineLength = start.dist(end);
  // Determine the number of segments, and make sure there is at least one.
  let segments = max(1, round(lineLength / pixelsPerSegment));
  // Determine the number of points, which is the number of segments + 1
  let points = 1 + segments;
  
  // We need to know the angle of the line so that we can determine the x
  // and y position for each point along the line, and when we offset based
  // on noise we do so perpendicular to the line.
  let angle = atan2(end.y - start.y, end.x - start.x);
  
  let xInterval = pixelsPerSegment * cos(angle);
  let yInterval = pixelsPerSegment * sin(angle);
  
  beginShape();
  // Always start with the start point
  vertex(start.x, start.y);
  
  // for each point that is neither the start nor end point
  for (let i = 1; i < points - 1; i++) {
    // determine the x and y positions along the straight line
    let x = start.x + xInterval * i;
    let y = start.y + yInterval * i;
    
    // calculate the offset distance using noice
    let offset =
      // The bigger this number is the greater the range of offsets will be
      noiseScale *
      (noise(
        // The bigger the value of noiseFrequency, the more erretically
        // the offset will change from point to point.
        i * pixelsPerSegment * noiseFrequency,
        // The bigger the value of noiseSpeed, the more quickly the curve
        // fluxuations will change over time.
        (millis() / 1000) * noiseSpeed
      ) - 0.5);
      
    // Translate offset into x and y components based on angle - 90°
    // (or in this case, PI / 2 radians, which is equivalent)
    let xOffset = offset * cos(angle - PI / 2);
    let yOffset = offset * sin(angle - PI / 2);
    
    vertex(x + xOffset, y + yOffset);
  }
  
  vertex(end.x, end.y);
  endShape();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

此代码产生锯齿状线条，但可以使用 curveVertex() 平滑它们。此外，使直线恰好通过起点和终点有点棘手，因为下一个点可能会偏移很大。您可以通过使 noiseScale 非常依赖于当前点与端点的距离来解决此问题。例如，这可以通过 noiseScale 乘以 sin(i / points.length * PI) 来完成。

两个特定点之间的嘈杂线 P5.js

noisy line between two specific points P5.js

javascript

processing

p5.js